@extends('layout.app')
@section('title', 'Edit Receipt Voucher')
@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        .voucher-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); padding: 24px; }
        .section-header { font-size: 15px; font-weight: 600; color: #1e293b; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #3b82f6; display: inline-block; }
        .bill-table-container { border: 1px solid #f1f5f9; border-radius: 8px; background: #f8fafc; padding: 12px; max-height: 400px; overflow-y: auto; }
        .bill-table-container::-webkit-scrollbar { width: 8px; }
        .bill-table-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
        .bill-table-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .bill-table-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .bill-table { width: 100%; font-size: 13px; }
        .bill-table th { font-weight: 600; color: #64748b; padding: 8px; border-bottom: 1px solid #e2e8f0; }
        .bill-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
        .adjust-input-sm { width: 90px; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
        .adjust-input-sm:disabled { background: #f1f5f9; color: #94a3b8; }
        .bill-search-box { margin-bottom: 12px; }
        .bill-search-input { width: 100%; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
        .bill-search-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
        .bill-row-hidden { display: none; }
        .summary-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; }
        .summary-item { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
        .summary-label { color: #1e40af; }
        .summary-value { font-weight: 600; color: #1e3a8a; }
        .text-success-custom { color: #16a34a; }
        .text-danger-custom { color: #dc2626; }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Edit Receipt Voucher</a></li>
    </ol>
    <div class="ms-auto">
        <a href="{{ route('receipt-voucher.index') }}" class="btn btn-sm btn-primary">
            <i class="ri-arrow-left-circle-fill"></i> Back
        </a>
    </div>
</div>

<div class="app-body">
    <div class="row">
        <div class="col-12">
            <div class="voucher-card">
                {!! Form::open([
                    'route'      => ['receipt-voucher.update', $receiptVoucher->id],
                    'onsubmit'   => 'BtnSubmit.disabled = true',
                    'method'     => 'put',
                    'autocomplete' => 'off',
                    'files'      => true,
                    'id'         => 'receiptForm',
                ]) !!}

                <input type="hidden" name="bill_adjustments" id="bill_adjustments_input">

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label" for="voucher_no">Voucher No.<span class="text-danger">*</span></label>
                        <input type="text" class="form-control readonly" id="voucher_no" name="voucher_no"
                            required value="{{ $receiptVoucher->voucher_no }}" readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="voucher_date">Voucher Date<span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                            <input type="text" id="voucher_date" class="form-control datepicker" name="voucher_date"
                                required value="{{ \Carbon\Carbon::parse($receiptVoucher->voucher_date)->format('d-m-Y') }}">
                        </div>
                    </div>


                    <div class="col-md-6">
                        <label class="form-label" for="account_ledger_id">Payment Account Ledger<span class="text-danger">*</span></label>
                        {!! Form::select('account_ledger_id', ['' => '--Select--'] + $paymentLedgers, $receiptVoucher->account_ledger_id, [
                            'class' => 'form-control select2',
                            'id'    => 'account_ledger_id',
                            'required',
                        ]) !!}
                        <small class="text-muted d-block mt-1">
                            Balance: <span id="account_ledger_balance" class="fw-bold"></span>
                        </small>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="party_account_ledger_id">Select Party (Ledger)<span class="text-danger">*</span></label>
                        {!! Form::select(
                            'party_account_ledger_id',
                            ['' => '--Select--'] + $accountLedger,
                            $receiptVoucher->party_account_ledger_id,
                            ['class' => 'form-control select2', 'id' => 'party_account_ledger_id', 'required'],
                        ) !!}
                        <small class="text-muted d-block mt-1">
                            Balance: <span id="party_balance" class="fw-bold"></span>
                        </small>
                    </div>
                </div>

                <hr class="my-4">

                <div class="row gx-4">
                    {{-- Left Side: Bills --}}
                    @if ($billByBillEnabled)
                    <div class="col-md-7 border-end">
                        <div class="section-header">Ledger Pending Bills</div>
                        <div id="billSection" style="display: none;">
                            <div class="bill-search-box">
                                <input type="text" class="bill-search-input" id="billSearchInput"
                                    placeholder="Search by Invoice #, GR #, or Amount...">
                            </div>
                            <div class="bill-table-container">
                                <table class="bill-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 30px;">#</th>
                                            <th>Invoice Detail</th>
                                            <th class="text-end">Outstanding</th>
                                            <th class="text-end">Adjust Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody id="billTableBody"></tbody>
                                </table>
                            </div>
                        </div>
                        <div id="noBillMsg" class="text-center p-5 bg-light rounded" style="display: none;">
                            <i class="ri-information-line ri-2x text-muted"></i>
                            <p class="mt-2 text-muted">No outstanding bills found for this party.</p>
                        </div>
                        <div id="selectPartyMsg" class="text-center p-5 bg-light rounded">
                            <i class="ri-refresh-line ri-2x text-primary ri-spin"></i>
                            <p class="mt-2 text-muted">Loading bills...</p>
                        </div>
                        <div id="disabledBillMsg" class="text-center p-5 bg-light rounded" style="display: none; cursor: pointer;" onclick="window.location.href='{{ route('setting-general.index') }}'">
                            <i class="ri-settings-3-line ri-2x text-muted"></i>
                            <p class="mt-2 text-muted">Bill-by-bill balancing is disabled. Enable it in settings or Party Master to track bill adjustments.</p>
                        </div>
                    </div>
                    @else
                    <div class="col-md-7 border-end">
                        <a href="{{ route('setting-general.index') }}" class="text-decoration-none">
                            <div class="text-center p-5 bg-light rounded" style="cursor: pointer;">
                                <i class="ri-settings-3-line ri-2x text-muted"></i>
                                <p class="mt-2 text-muted">Bill-by-bill balancing is disabled. Enable it in settings to track bill adjustments.</p>
                            </div>
                        </a>
                    </div>
                    @endif

                    {{-- Right Side: Amounts --}}
                    <div class="col-md-5">
                        <div class="section-header">Payment Info</div>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label" for="received_amount">Received Amount<span class="text-danger">*</span></label>
                                <input type="text" class="form-control floatnumber" id="received_amount"
                                    name="received_amount" required value="{{ $receiptVoucher->received_amount }}" placeholder="0.00">
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="discount_amount">Discount Amount</label>
                                <input type="text" class="form-control floatnumber" id="discount_amount"
                                    name="discount_amount" value="{{ $receiptVoucher->discount_amount }}" placeholder="0.00">
                            </div>
                        </div>

                        {{-- Calculation Summary --}}
                        <div class="summary-box mt-4">
                            <div class="summary-item">
                                <span class="summary-label">Total Payment:</span>
                                <span class="summary-value" id="sPayment">₹ 0.00</span>
                            </div>
                            <div class="summary-item">
                                <span class="summary-label">Total Allocated:</span>
                                <span class="summary-value" id="sAdjusted">₹ 0.00</span>
                            </div>
                            <div class="summary-item border-top pt-2 mt-2">
                                <span class="summary-label">Balance Remaining:</span>
                                <span class="summary-value" id="sRemaining">₹ 0.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- BOTTOM SECTION: Misc & Submit --}}
                <div class="row mt-4 g-3">
                    <div class="col-md-4">
                        <label class="form-label" for="doc">Document Upload</label>
                        <input type="file" class="form-control" id="doc" name="doc">
                        @if($receiptVoucher->doc)
                            <small><a href="{{ asset('storage/'.$receiptVoucher->doc) }}" target="_blank">View Current Doc</a></small>
                        @endif
                    </div>
                    <div class="col-md-8">
                        <label class="form-label" for="remark">Remark</label>
                        <textarea class="form-control" name="remark" rows="1">{{ $receiptVoucher->remark }}</textarea>
                    </div>
                    <div class="col-12 text-end">
                        <input type="hidden" name="created_by" value="{{ $receiptVoucher->created_by }}">
                        <button class="btn btn-primary btn-lg px-5 mt-2" id="BtnSubmit" type="submit">
                            Update Receipt
                        </button>
                    </div>
                </div>

                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
    var billsData = [];
    var selectedBills = {!! json_encode($receiptVoucher->billAdjustments->pluck('adjusted_amount', 'bill_id')) !!};

    function loadLedgerBalance(ledgerId, targetSpanId) {
        if (!ledgerId) {
            $('#' + targetSpanId).text('₹ 0.00').removeClass('text-success text-danger');
            return;
        }
        $.ajax({
            url: '{{ route("getLedgerBalance") }}',
            type: 'GET',
            data: { account_ledger_id: ledgerId },
            success: function(res) {
                let colorClass = res.balance_type === 'Dr' ? 'text-success' : 'text-danger';
                let label = res.display_type === 'Receivable' ? 'Receivable' : 'Payable';
                let text = '₹ ' + parseFloat(res.balance).toFixed(2) + ' ' + res.balance_type + ' (' + label + ')';
                $('#' + targetSpanId).text(text).removeClass('text-success text-danger').addClass(colorClass);
            }
        });
    }

    $(document).ready(function() {
        // Init Datepicker
        $(".datepicker").daterangepicker({ singleDatePicker: true, locale: { format: "DD-MM-YYYY" } });

        // Load initial balances
        let initialAccLedgerId = $('#account_ledger_id').val();
        if (initialAccLedgerId) {
            loadLedgerBalance(initialAccLedgerId, 'account_ledger_balance');
        }
        let initialPartyLedgerId = $('#party_account_ledger_id').val();
        if (initialPartyLedgerId) {
            loadLedgerBalance(initialPartyLedgerId, 'party_balance');
        }

        $('#account_ledger_id').on('change', function() {
            loadLedgerBalance($(this).val(), 'account_ledger_balance');
        });

        // Numeric filtering
        $('.floatnumber').on('input', function () {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
            calcSummary();
        });

        // Trigger initial ledger load
        fetchBills('{{ $receiptVoucher->party_account_ledger_id }}');

        $('#party_account_ledger_id').on('change', function() {
            selectedBills = {}; // Clear selections on party change
            loadLedgerBalance($(this).val(), 'party_balance');
            fetchBills($(this).val());
        });
    });

    function fetchBills(ledgerId) {
        if (!ledgerId) return;
        $('#selectPartyMsg').show();
        $('#billSection').hide();
        $('#noBillMsg').hide();
        $('#disabledBillMsg').hide();

        $.ajax({
            url: '{{ route("receipt-voucher.outstanding-bills") }}',
            type: 'GET',
            data: { ledger_id: ledgerId, receipt_voucher_id: '{{ $receiptVoucher->id }}' },
            success: function(res) {
                if (!res.enabled) {
                    // Bill by bill balancing is disabled
                    $('#disabledBillMsg').show();
                    $('#billSection').hide();
                    $('#noBillMsg').hide();
                    $('#selectPartyMsg').hide();
                } else if (res.bills && res.bills.length > 0) {
                    // Bills found
                    billsData = res.bills;
                    renderBillTable();
                    $('#billSection').show();
                    $('#noBillMsg').hide();
                    $('#selectPartyMsg').hide();
                    $('#disabledBillMsg').hide();
                } else {
                    // Bill by bill enabled but no bills found
                    $('#noBillMsg').show();
                    $('#billSection').hide();
                    $('#selectPartyMsg').hide();
                    $('#disabledBillMsg').hide();
                }
                calcSummary();
            }
        });
    }

    function renderBillTable() {
        let html = '';
        billsData.forEach(bill => {
            let adj = selectedBills[bill.id] || '';
            let checked = selectedBills[bill.id] ? 'checked' : '';
            let disabled = selectedBills[bill.id] ? '' : 'disabled';

            html += `<tr class="bill-row" data-search="${(bill.invoice_no + ' ' + (bill.lr_no || '') + ' ' + (bill.gr_no || '') + ' ' + bill.outstanding).toLowerCase()}">
                <td class="text-center">
                    <input type="checkbox" class="bill-check" ${checked} data-id="${bill.id}"
                        onchange="toggleBill(${bill.id}, this.checked, ${bill.outstanding})">
                </td>
                <td>
                    <strong>${bill.invoice_no}</strong><br>
                    <small class="text-muted">${bill.bill_date}</small>
                </td>
                <td class="text-end">₹ ${fmtNum(bill.outstanding)}</td>
                <td class="text-end">
                    <input type="number" class="adjust-input-sm text-end" id="adj-${bill.id}" ${disabled} step="0.01"
                        value="${adj}" oninput="setAdjust(${bill.id}, this.value, ${bill.outstanding})">
                </td>
            </tr>`;
        });
        $('#billTableBody').html(html);
        $('#billSearchInput').val('').off('keyup').on('keyup', filterBillTable);
    }

    function toggleBill(id, checked, max) {
        let input = $(`#adj-${id}`);
        if (checked) {
            input.prop('disabled', false).val(max);
            selectedBills[id] = max;
        } else {
            input.prop('disabled', true).val('');
            delete selectedBills[id];
        }
        calcSummary();
    }

    function filterBillTable() {
        let searchText = $('#billSearchInput').val().toLowerCase().trim();
        let rows = $('#billTableBody').find('tr.bill-row');

        rows.each(function() {
            let rowData = $(this).data('search');
            if (searchText === '' || rowData.includes(searchText)) {
                $(this).removeClass('bill-row-hidden');
            } else {
                $(this).addClass('bill-row-hidden');
            }
        });
    }

    function setAdjust(id, val, max) {
        let v = parseFloat(val) || 0;
        if (v > max) {
            v = max;
            $(`#adj-${id}`).val(max);
        }
        if (v < 0) {
            v = 0;
            $(`#adj-${id}`).val(0);
        }
        selectedBills[id] = v;
        calcSummary();
    }

    function calcSummary() {
        let payAmt = parseFloat($('#received_amount').val()) || 0;
        let totalAdjusted = 0;
        Object.values(selectedBills).forEach(v => totalAdjusted += parseFloat(v));
        let remaining = payAmt - totalAdjusted;

        $('#sPayment').text('₹ ' + fmtNum(payAmt));
        $('#sAdjusted').text('₹ ' + fmtNum(totalAdjusted));

        let remEl = $('#sRemaining').text('₹ ' + fmtNum(remaining));
        remEl.removeClass('text-danger-custom text-success-custom');
        if (remaining < 0) remEl.addClass('text-danger-custom');
        else if (remaining === 0) remEl.addClass('text-success-custom');

        $('#validationWarning').remove();
        if (billsData.length > 0 && Math.abs(remaining) > 0.01) {
            let msg = remaining < 0 
                ? 'Allocated amount cannot exceed received amount.' 
                : 'Remaining Balance must be ₹ 0.00 (Total Allocated must equal Received Amount).';
            $('.summary-box').after(`<div id="validationWarning" class="text-danger mt-2 fw-semibold" style="font-size: 13px;">${msg}</div>`);
            $('#BtnSubmit').prop('disabled', true);
        } else {
            $('#BtnSubmit').prop('disabled', false);
        }

        updateHiddenInput();
    }

    function updateHiddenInput() {
        let adjustments = Object.keys(selectedBills).map(id => ({
            bill_id: parseInt(id),
            adjusted_amount: parseFloat(selectedBills[id])
        }));
        $('#bill_adjustments_input').val(JSON.stringify(adjustments));
    }

    function fmtNum(n) {
        return parseFloat(n).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }
</script>
@endpush