@extends('layout.app')
@section('title', 'Create Stock Inward')

@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <style>
        .goods-table th {
            background-color: #f8fafc;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #475569;
            padding: 0.6rem;
            border-bottom: 2px solid #e2e8f0;
            white-space: nowrap;
        }
        .goods-table td {
            vertical-align: middle;
            font-size: 0.85rem;
            padding: 0.5rem;
        }
        .goods-table input.form-control,
        .goods-table select.form-control,
        .goods-table .form-select {
            padding: 0.25rem 0.5rem;
            font-size: 0.85rem;
            border-color: #e2e8f0;
        }
        .readonly-input {
            background-color: #f1f5f9 !important;
            cursor: not-allowed;
            color: #64748b;
        }
        .bg-soft-success { background-color: rgba(25, 135, 84, 0.1) !important; }
        
        .type-selector {
            background: #fff;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 2rem;
        }
        .type-selector label {
            font-weight: 600;
            cursor: pointer;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center justify-content-between">
   
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('stock-inward.index') }}">Stock Inward</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Create Stock Inward</li>
    </ol>
</div>

<div class="app-body">
    {!! Form::open(['route' => 'stock-inward.store', 'method' => 'POST', 'id' => 'stockInwardForm']) !!}

    {{-- Purchase Details Card --}}
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-header py-3 bg-white border-bottom">
            <h6 class="m-0 fw-bold text-dark"><i class="ri-file-list-3-line text-primary me-1"></i> Purchase Details</h6>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4 col-12">
                    <label class="form-label">Purchase Voucher No. <span class="text-danger">*</span></label>
                    {!! Form::select('purchase_voucher_id', ['' => '--Select--'] + $purchaseVouchers, null, ['class' => 'form-control select2', 'id' => 'purchase_voucher_id', 'style' => 'width: 100%;', 'required']) !!}
                    <div class="text-danger">{{ $errors->first('purchase_voucher_id') }}</div>
                </div>

                <div class="col-md-4 col-12">
                    <label class="form-label">Supplier <span class="text-danger">*</span></label>
                    <input type="text" id="supplier_name_readonly" class="form-control readonly-input" readonly placeholder="Supplier name">
                    <input type="hidden" id="hidden_party_account_ledger_id" name="party_account_ledger_id">
                    <div class="text-danger">{{ $errors->first('party_account_ledger_id') }}</div>
                </div>

                <div class="col-md-4 col-12">
                    <label class="form-label">Invoice No.</label>
                    <input type="text" name="invoice_no" id="invoice_no" class="form-control readonly-input" readonly placeholder="Invoice number">
                    <div class="text-danger">{{ $errors->first('invoice_no') }}</div>
                </div>

                <div class="col-md-4 col-12">
                    <label class="form-label">Invoice Date</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                        <input type="text" name="invoice_date" id="invoice_date" class="form-control readonly-input" readonly placeholder="DD-MM-YYYY">
                    </div>
                    <div class="text-danger">{{ $errors->first('invoice_date') }}</div>
                </div>

                <div class="col-md-4 col-12">
                    <label class="form-label">Invoice Amount <span class="badge bg-soft-success text-success">Auto-filled</span></label>
                    <div class="input-group">
                        <span class="input-group-text">₹</span>
                        <input type="text" name="invoice_amount" class="form-control readonly-input fw-bold" id="invoice_amount" readonly placeholder="0.00">
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <label class="form-label">Remarks <span class="badge bg-light text-muted border">Optional</span></label>
                    <input type="text" name="remarks" class="form-control" placeholder="Any additional notes..." value="{{ old('remarks') }}">
                    <div class="text-danger">{{ $errors->first('remarks') }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Item Entry Card --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header py-3 bg-white border-bottom">
            <h6 class="m-0 fw-bold text-dark"><i class="ri-box-3-line text-primary me-1"></i> Item Entry</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered mb-0 goods-table text-center align-middle" id="item_table">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 25%">ITEM NAME</th>
                            <th style="width: 12%">SKU CODE</th>
                            <th style="width: 15%">BATCH NO. (optional)</th>
                            <th style="width: 15%">BRAND</th>
                            <th style="width: 10%">QTY</th>
                            <th style="width: 10%">UNIT</th>
                            <th style="width: 13%">PURCHASE RATE</th>
                            <th style="width: 13%">AMOUNT</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end p-3 bg-light border-top">
                <div class="text-end me-4">
                    <span class="text-muted small d-block">Total Quantity</span>
                    <span class="fs-5 fw-bold" id="total_qty">0</span>
                </div>
                <div class="text-end">
                    <span class="text-muted small d-block">Total Amount</span>
                    <span class="fs-5 fw-bold text-primary" id="total_amount">₹0.00</span>
                </div>
        </div>
    </div>

    <div class="mt-4 text-end">
        <a href="{{ route('stock-inward.index') }}" class="btn btn-light px-4 me-2">Cancel</a>
        <button type="submit" class="btn btn-primary px-4">Save Inward</button>
    </div>
    {!! Form::close() !!}
</div>
@endsection

@push('footer_script')
    <script src="{{asset('theme/assets/vendor/datatables/dataTables.min.js')}}"></script>
    <script src="{{asset('theme/assets/sweetalert/sweet-alert.min.js')}}"></script>
<script>
    $(document).ready(function() {

        function initDatepicker() {
            if (typeof $.fn.datepicker === 'function') {
                $('.datepicker:not(.hasDatepicker)').datepicker({
                    format: 'dd-mm-yyyy', autoclose: true, todayHighlight: true
                });
            }
        }

        function updateTotals() {
            var totalQty = 0;
            var totalAmt = 0;
            $('#item_table tbody tr').each(function() {
                var qty  = parseFloat($(this).find('.item-qty').val()) || 0;
                var rate = parseFloat($(this).find('.item-rate').val()) || 0;
                var amt  = qty * rate;
                
                $(this).find('.item-amt-text').text('₹' + amt.toFixed(2));
                $(this).find('.item-amt-input').val(amt.toFixed(2));
                
                totalQty += qty;
                totalAmt += amt;
            });
            
            $('#total_qty').text(totalQty);
            $('#total_amount').text('₹' + totalAmt.toFixed(2));
            $('#invoice_amount').val(totalAmt.toFixed(2));
        }

        // Initialize select2
        $('#purchase_voucher_id').select2({ width: '100%' });

        // --- FETCH PURCHASE VOUCHER DETAILS ---
        $('#purchase_voucher_id').on('change', function() {
            var pv_id = $(this).val();
            if(!pv_id) {
                $('#item_table tbody').empty();
                $('#supplier_name_readonly').val('');
                $('#hidden_party_account_ledger_id').val('');
                $('#invoice_no, #invoice_date, #invoice_amount').val('');
                updateTotals();
                return;
            }

            $.ajax({
                url: "{{ route('stock-inward.get-purchase-voucher') }}",
                type: "GET",
                data: { purchase_voucher_id: pv_id },
                success: function(res) {
                    if(res.success && res.data) {
                        $('#hidden_party_account_ledger_id').val(res.data.party_account_ledger_id);
                        $('#supplier_name_readonly').val(res.data.account_ledger ? res.data.account_ledger.ledger_name : 'Supplier');
                        $('#invoice_no').val(res.data.supplier_invoice_no || '-');
                        
                        var invDate = res.data.supplier_invoice_date || '';
                        if (invDate && invDate.indexOf('-') !== -1) {
                            var parts = invDate.split('-');
                            if (parts[0].length === 4) { // YYYY-MM-DD to DD-MM-YYYY
                                invDate = parts[2] + '-' + parts[1] + '-' + parts[0];
                            }
                        }
                        $('#invoice_date').val(invDate);
                        
                        $('#item_table tbody').empty();
                        
                        res.data.voucher_details.forEach(function(detail) {
                            var u = detail.product && detail.product.units ? String(detail.product.units) : '';
                            var unit = u ? u.charAt(0).toUpperCase() + u.slice(1) : '—';
                            var brand = detail.product && detail.product.brand ? detail.product.brand.brand_name : '-';
                            
                            var row = `<tr>
                                <td>
                                    <input type="hidden" name="item_id[]" value="${detail.product_id}">
                                    <div class="form-control readonly-input text-dark text-start">${detail.product ? detail.product.product_name : ''}</div>
                                </td>
                                <td><input type="text" name="sku_code[]" class="form-control" placeholder="SKU"></td>
                                <td><input type="text" name="batch_no[]" class="form-control" placeholder="Optional"></td>
                                <td><div class="text-dark small fw-medium">${brand}</div></td>
                                <td><input type="number" name="quantity[]" class="form-control item-qty text-center" value="${detail.qty}" max="${detail.qty}" min="0" step="any"></td>
                                <td class="text-center">${unit}</td>
                                <td><input type="number" name="purchase_rate[]" class="form-control item-rate text-end readonly-input" value="${detail.rate}" readonly></td>
                                <td class="text-end fw-bold">₹${parseFloat(detail.amount).toFixed(2)}<input type="hidden" name="amount[]" class="item-amt-input" value="${detail.amount}"></td>
                            </tr>`;
                            $('#item_table tbody').append(row);
                        });
                        updateTotals();
                    }
                }
            });
        });

        // Handle quantity change
        $(document).on('input', '.item-qty', function() {
            var max = parseFloat($(this).attr('max'));
            var val = parseFloat($(this).val());
            
            if (val > max) {
                $(this).val(max);
            }
            if (val < 0 || isNaN(val)) {
                // If it's NaN (like when user clears the input), we don't force 0 immediately to allow typing, 
                // but we will treat it as 0 in updateTotals. Let's just handle less than 0.
                if (val < 0) $(this).val(0);
            }
            
            updateTotals();
        });

        // --- URL QUERY PARAM AUTO-SELECTION ---
        const urlParams = new URLSearchParams(window.location.search);
        const pvIdParam = urlParams.get('purchase_voucher_id');
        if (pvIdParam) {
            $('#purchase_voucher_id').val(pvIdParam).trigger('change');
        }

    });
</script>
@endpush