@extends('layout.app')
@section('title', 'Create 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">Create</li>
    </ol>
</div>

<div class="app-body">
    <div class="row">
        <div class="col-12">
            <div class="voucher-card">
                {!! Form::open([
                'route' => 'payment-voucher.store',
                'onsubmit' => 'BtnSubmit.disabled = true',
                'method' => 'post',
                'autocomplete' => 'off', 
                'files' => true,
                ]) !!}

                <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="PV-{{ str_pad($count + 1, 4, '0', STR_PAD_LEFT) }}" 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="{{ date('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, null, [
                        '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, request()->get('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: Purchase Bills --}}
                    @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  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-user-follow-line ri-2x text-primary"></i>
                            <p class="mt-2 text-muted">Please select a party to view 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

                    {{-- Right Side: Amounts --}}
                    <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 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" placeholder="0.00">
                            </div>
                        </div>

                        {{-- Calculation Summary --}}
                        <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>

                {{-- BOTTOM SECTION: Misc & Submit --}}
                <div class="row mt-4 g-3">
                    <div class="col-md-4">
                        <label class="form-label" for="doc">Upload Receipt/Proof</label>
                        <input type="file" class="form-control" id="doc" name="doc">
                    </div>
                    <div class="col-md-8">
                        <label class="form-label" for="remark">Payment Remark</label>
                        <textarea class="form-control" name="remark" rows="1" placeholder="Enter narration or additional info..."></textarea>
                    </div>
                    <div class="col-12 text-end">
                        <input type="hidden" name="created_by" value="{{ Auth::id() }}">
                        <button class="btn btn-danger btn-lg px-5 mt-2" id="SubmitBtn" type="submit">
                            Save 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 = {};

    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();
        });

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

            if (ledgerId) {
                $.ajax({
                    url: '{{ route('payment-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();
                        }
                        calcSummary();
                    }
                });
            } else {
                $('#selectPartyMsg').show();
                $('#billSection').hide();
            }
        });

        // Trigger change on load if pre-selected
        if ($('#party_account_ledger_id').val()) {
            $('#party_account_ledger_id').trigger('change');
        }
    });

    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;
        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 => {
            let billData = billsData.find(b => b.id == id);
            return {
                bill_id: parseInt(id),
                adjusted_amount: parseFloat(selectedBills[id]),
                bill_type: billData ? billData.bill_type : 'freight_entry'
            };
        });
        $('#bill_adjustments_input').val(JSON.stringify(adjustments));
    }

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