@extends('layout.app')
@section('title', 'Create 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);">Create 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.store',
                        'onsubmit' => 'BtnSubmit.disabled = true',
                        'method' => 'post',
                        '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="RV-{{ $count + 1 }}" readonly>
                            <div class="text-danger">{{ $errors->first('voucher_no') }}</div>
                        </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="{{ old('voucher_date', date('d-m-Y')) }}">
                            </div>
                            <div class="text-danger">{{ $errors->first('voucher_date') }}</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, old('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 class="text-danger">{{ $errors->first('account_ledger_id') }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="party_account_ledger_id">Select Ledger<span
                                    class="text-danger">*</span></label>
                            {!! Form::select(
                                'party_account_ledger_id',
                                ['' => '--Select--'] + $accountLedger,
                                old('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 class="text-danger">{{ $errors->first('party_account_ledger_id') }} </div>
                        </div>

                    </div>

                    <hr class="my-4">
                    <div class="row gx-4">
                        {{-- Only show bills section if bill-by-bill balancing is enabled --}}
                        @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  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-user-search-line ri-2x text-muted"></i>
                                    <p class="mt-2 text-muted">Please select a party to view their outstanding 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

                        <div class="col-md-5">
                            <div class="section-header">Payment Entry</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="{{ old('received_amount') }}"
                                        placeholder="0.00">
                                    <div class="text-danger">{{ $errors->first('received_amount') }}</div>
                                </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="{{ old('discount_amount', 0) }}"
                                        placeholder="0.00">
                                    <div class="text-danger">{{ $errors->first('discount_amount') }}</div>
                                </div>
                            </div>

                            <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>

                    <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">
                            <div class="text-danger">{{ $errors->first('doc') }}</div>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label" for="remark">Remark</label>
                            <textarea class="form-control" name="remark" rows="1">{{ old('remark') }}</textarea>
                        </div>
                        <div class="col-12 text-end">
                            <input type="hidden" name="created_by"
                                value="{{ \Illuminate\Support\Facades\Auth::user()->name }}">
                            <button class="btn btn-primary btn-lg px-5 mt-2" id="BtnSubmit" type="submit">
                                Save 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 = {};

        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
            $(".datepicker").daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: "DD-MM-YYYY"
                },
            });

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

            // Party Selection Logic
            $('#party_account_ledger_id').on('change', function() {
                let ledgerId = $(this).val();
                loadLedgerBalance(ledgerId, 'party_balance');
                $('#selectPartyMsg').hide();
                $('#billSection').hide();
                $('#noBillMsg').hide();
                $('#disabledBillMsg').hide();
                selectedBills = {};
                updateHiddenInput();

                if (!ledgerId) {
                    $('#selectPartyMsg').show();
                    return;
                }

                $.ajax({
                    url: '{{ route('receipt-voucher.outstanding-bills') }}',

                    type: 'GET',
                    data: {
                        ledger_id: ledgerId
                    },
                    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();
                        }
                    }
                });
            });

            // Payment Type -> Account Ledger logic has been removed as payment ledgers are loaded directly.
        });

        function renderBillTable() {
            let html = '';
            billsData.forEach(bill => {
                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" 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"
                        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 += 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: selectedBills[id]
            }));
            $('#bill_adjustments_input').val(JSON.stringify(adjustments));
        }

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