@extends('layout.app')
@section('title', 'Edit Payment 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 #ef4444;
            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: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
        }

        .bill-row-hidden {
            display: none;
        }

        .summary-box {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 8px;
            padding: 16px;
        }

        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .summary-label {
            color: #991b1b;
        }

        .summary-value {
            font-weight: 600;
            color: #7f1d1d;
        }

        .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);">Payment Voucher</a></li>
            <li class="breadcrumb-item active">Edit</li>
        </ol>
        <div class="ms-auto">
            <a href="{{ route('payment-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' => ['payment-voucher.update', $paymentVoucher->id],
                        'onsubmit' => 'BtnSubmit.disabled = true',
                        'method' => 'put',
                        'autocomplete' => 'off',
                        'files' => true,
                        'id' => 'paymentForm',
                    ]) !!}

                    <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="{{ $paymentVoucher->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($paymentVoucher->voucher_date)->format('d-m-Y') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="account_ledger_id">Cash/Bank Ledger<span
                                    class="text-danger">*</span></label>
                            {!! Form::select('account_ledger_id', ['' => '--Select--'] + $paymentLedgers, $paymentVoucher->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">Party Ledger <span
                                    class="text-danger">*</span></label>
                            {!! Form::select(
                                'party_account_ledger_id',
                                ['' => '--Select--'] + $accountLedger,
                                $paymentVoucher->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">
                        @if ($billByBillEnabled)
                            <div class="col-md-7 border-end">
                                <div class="section-header">Pending Purchase 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>Bill Detail</th>
                                                    <th class="text-end">Outstanding</th>
                                                    <th class="text-end">Pay 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 pending bills found for this supplier.</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 pending 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 payments.</p>
                                    </div>
                                </a>
                            </div>
                        @endif
                        <div class="col-md-5">
                            <div class="section-header">Payment Details</div>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label" for="received_amount">Total Paid Amount<span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control floatnumber" id="received_amount"
                                        name="received_amount" required value="{{ $paymentVoucher->received_amount }}"
                                        placeholder="0.00">
                                </div>
                                <div class="col-12">
                                    <label class="form-label" for="discount_amount">Discount Received</label>
                                    <input type="text" class="form-control floatnumber" id="discount_amount"
                                        name="discount_amount" value="{{ $paymentVoucher->discount_amount }}"
                                        placeholder="0.00">
                                </div>
                            </div>
                            <div class="summary-box mt-4">
                                <div class="summary-item">
                                    <span class="summary-label">Total Outflow:</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">Unallocated Balance:</span>
                                    <span class="summary-value" id="sRemaining">₹ 0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4 g-3">
                        <div class="col-md-4">
                            <label class="form-label" for="doc">Update Proof</label>
                            <input type="file" class="form-control" id="doc" name="doc">
                            @if ($paymentVoucher->doc)
                                <small><a href="{{ asset('storage/' . $paymentVoucher->doc) }}" target="_blank">View
                                        Current
                                        Proof</a></small>
                            @endif
                        </div>
                        <div class="col-md-8">
                            <label class="form-label" for="remark">Payment Remark</label>
                            <textarea class="form-control" name="remark" rows="1">{{ $paymentVoucher->remark }}</textarea>
                        </div>
                        <div class="col-12 text-end">
                            <input type="hidden" name="created_by" value="{{ $paymentVoucher->created_by }}">
                            <button class="btn btn-danger btn-lg px-5 mt-2" id="BtnSubmit" type="submit">
                                Update Payment Voucher
                            </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($paymentVoucher->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() {
            // 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');
            });

            $(".datepicker").daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: "DD-MM-YYYY"
                }
            });

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

            fetchBills('{{ $paymentVoucher->party_account_ledger_id }}');

            $('#party_account_ledger_id').on('change', function() {
                selectedBills = {};
                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('payment-voucher.outstanding-bills') }}',
                type: 'GET',
                data: {
                    ledger_id: ledgerId,
                    payment_voucher_id: '{{ $paymentVoucher->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;
            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');

            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