@extends('layout.app')
@section('title', 'Create Journal Voucher')
@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<style>
    #jvBillModalOverlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1055;
        align-items: center;
        justify-content: center;
    }

    #jvBillModalOverlay.show {
        display: flex;
    }

    #jvBillModal {
        background: #fff;
        border-radius: 10px;
        width: 98%;
        max-width: 780px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .bm-header {
        padding: 14px 18px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .bm-body {
        padding: 14px 18px;
        overflow-y: auto;
        flex: 1;
    }

    .bm-footer {
        padding: 12px 18px;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .jv-table {
        width: 100%;
        font-size: 12px;
        border-collapse: collapse;
    }

    .jv-table thead tr {
        background: #f3f4f6;
    }

    .jv-table th {
        padding: 8px;
        text-align: left;
        font-weight: 600;
        color: #6b7280;
        border-bottom: 1px solid #e5e7eb;
        font-size: 11px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .jv-table td {
        padding: 7px 8px;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
    }

    .jv-table tr.row-sel td {
        background: #eff6ff;
    }

    .jv-table tr:hover:not(.row-sel) td {
        background: #f9fafb;
    }

    .type-pill-fb {
        background: #dbeafe;
        color: #1e40af;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
    }

    .type-pill-gr {
        background: #d1fae5;
        color: #065f46;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
    }

    .type-pill-tbb {
        background: #f3e8ff;
        color: #6b21a8;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
    }

    .sel-pill {
        display: inline-block;
        background: #1d4ed8;
        color: #fff;
        border-radius: 20px;
        font-size: 11px;
        padding: 1px 9px;
        margin-left: 8px;
        vertical-align: middle;
    }

    .adj-header-stats {
        display: flex;
        gap: 20px;
        background: #f8fafc;
        padding: 10px 15px;
        border-radius: 8px;
        margin-bottom: 15px;
        border: 1px solid #e2e8f0;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
    }

    .stat-label {
        font-size: 10px;
        text-transform: uppercase;
        color: #64748b;
        font-weight: 600;
    }

    .stat-value {
        font-size: 14px;
        font-weight: 700;
        color: #1e293b;
    }

    .stat-value.remaining {
        color: #dc2626;
    }

    .adjustment-summary-container {
        font-size: 11px;
        color: #475569;
        margin-top: 4px;
        padding: 4px 8px;
        background: #f1f5f9;
        border-radius: 4px;
        border-left: 3px solid #3b82f6;
    }
</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 Journal Voucher</a>
        </li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <div class="d-flex flex-row gap-1 day-sorting">
            <a href="{{ route('journal-voucher.index') }}" class="btn btn-sm btn-primary">
                <i class="ri-arrow-left-circle-fill"></i> Back
            </a>
        </div>
    </div>
</div>

<div class="app-body">
    <div class="card-body">
        <div class="row gx-3">
            <div class="col-sm-12">
                <div class="card mb-3">
                    <div class="card-body">
                        {!! Form::open([
                        'route' => ['journal-voucher.store'],
                        'onsubmit' => 'BtnSubmit.disabled = true; return validateForm();',
                        'class' => 'row g-3 needs-validation',
                        'method' => 'post',
                        'autocomplete' => 'off',
                        ]) !!}

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

                        <div class="col-md-4 col-12">
                            <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="{{ $count + 1 < 10 ? 'JNL-0' . $count + 1 : 'JNL-' . $count + 1 }}">
                            <div class="text-danger">{{ $errors->first('voucher_no') }}</div>
                        </div>
                        <div class="col-md-3 col-12">
                            <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
                                    min="{{ date('Y-m-d', strtotime($company_details->year_from)) }}"
                                    value="{{ date('d-m-Y') }}">
                            </div>
                            <div class="text-danger">{{ $errors->first('voucher_date') }}</div>
                        </div>

                        <div class="col-md-4 col-12">
                            <label class="form-label" for="creatsed_by">
                                Created By<span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control readonly" id="created_by" name="created_by"
                                required readonly
                                value="{{ \Illuminate\Support\Facades\Auth::user()->name }}">
                            <div class="text-danger">{{ $errors->first('created_by') }}</div>
                        </div>

                        <div class="col-md-12 col-12">
                            <label class="form-label" for="description">
                                Reference<span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control" required name="description" id="description" rows="2">{{ old('description') }}</textarea>
                            <div class="text-danger">{{ $errors->first('description') }}</div>
                        </div>

                        <div class="col-md-12 col-12">
                            <label class="form-label" for="remark">
                                Remark
                            </label>
                            <textarea class="form-control" name="remark" id="remark" rows="2">{{ old('remark') }}</textarea>
                            <div class="text-danger">{{ $errors->first('remark') }}</div>
                        </div>

                        <div class="col-md-12 col-12">
                            <table class="table table-striped dataTable" id="datatable">
                                <thead>
                                    <tr class="text-center">
                                        <th style="width:5%">S. No.</th>
                                        <th style="width:23%">
                                            Account Name<span class="text-danger">*</span>
                                            <button type="button" class="btn btn-primary btn-sm m-l-10"
                                                id="addaccount">
                                                <i class="ri-add-circle-fill"></i>
                                            </button>
                                        </th>
                                        <th style="width:23%">Debit</th>
                                        <th style="width:23%">Credit</th>
                                        <th style="width:23%">Invoice No.</th>
                                        <th style="width:5%" id="add_row">
                                            <button type="button" class="btn btn-primary btn-sm m-l-10"
                                                id="addrow">
                                                <i class="ri-add-circle-fill"></i>
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>
                                            {!! Form::select('account_ledger_id[]', ['' => 'Select'] + $accountLedger,
                                            old('account_ledger_id'), [
                                            'class' => 'form-control select2 jv-ledger-sel',
                                            'required' => true,
                                            'id' => 'account_ledger_id10',
                                            ]) !!}
                                            <small class="text-muted d-block mt-1">
                                                Balance: <span class="jv-ledger-balance fw-bold"></span>
                                            </small>
                                            <input type="hidden" name="row_adjustments[]" class="row-adj-data">
                                            <div class="row-adj-summary"></div>
                                        </td>
                                        <td><input id="debit10" type="text" class="form-control floatnumber jv-amount-input" name="debit[]"></td>
                                        <td><input id="credit10" type="text" class="form-control floatnumber jv-amount-input" name="credit[]"></td>
                                        <td><input id="invoice_no10" type="text" class="form-control" name="invoice_no[]"></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>
                                            {!! Form::select('account_ledger_id[]', ['' => 'Select'] + $accountLedger,
                                            old('account_ledger_id'), [
                                            'class' => 'form-control select2 jv-ledger-sel',
                                            'required' => true,
                                            'id' => 'account_ledger_id11',
                                            ]) !!}
                                            <small class="text-muted d-block mt-1">
                                                Balance: <span class="jv-ledger-balance fw-bold"></span>
                                            </small>
                                            <input type="hidden" name="row_adjustments[]" class="row-adj-data">
                                            <div class="row-adj-summary"></div>
                                        </td>
                                        <td><input id="debit11" type="text" class="form-control floatnumber jv-amount-input" name="debit[]"></td>
                                        <td><input id="credit11" type="text" class="form-control floatnumber jv-amount-input" name="credit[]"></td>
                                        <td><input id="invoice_no11" type="text" class="form-control" name="invoice_no[]"></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="2">Totals:</th>
                                        <th><input id="total_debit" class="form-control" readonly></th>
                                        <th><input id="total_credit" class="form-control" readonly></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="col-xl-12 col-md-12 col-12">
                            <button class="btn btn-primary mt-1" id="BtnSubmit" type="submit">Submit</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Bill-by-Bill Modal --}}
<div id="jvBillModalOverlay">
    <div id="jvBillModal">
        <div class="bm-header">
            <div>
                <h6 style="margin:0;font-size:15px;font-weight:600">
                    <span id="modalTitle">Outstanding bills</span>
                    <span class="sel-pill" id="selPill" style="display:none">0 selected</span>
                </h6>
                <p style="margin:3px 0 0;font-size:12px;color:#6b7280" id="modalSubtitle">—</p>
            </div>
            <button type="button" onclick="closeJvModal()"
                style="background:none;border:none;font-size:22px;cursor:pointer;color:#6b7280;line-height:1">
                &times;
            </button>
        </div>
        <div class="bm-body">
            {{-- Stats Header --}}
            <div class="adj-header-stats">
                <div class="stat-item">
                    <span class="stat-label">JV Row Amount</span>
                    <span class="stat-value" id="statJvAmount">₹0.00</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Total Adjusted</span>
                    <span class="stat-value" id="statAdjustedAmount">₹0.00</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Remaining</span>
                    <span class="stat-value remaining" id="statRemainingAmount">₹0.00</span>
                </div>
            </div>

            {{-- Freight Bills panel --}}
            <div id="panelFB">
                <p style="font-size:11px;font-weight:700;margin-bottom:8px;color:#475569">FREIGHT BILLS</p>
                <table class="jv-table">
                    <thead>
                        <tr>
                            <th style="width:32px">Select</th>
                            <th>Invoice No.</th>
                            <th>Date</th>
                            <th>Outstanding</th>
                            <th style="width:120px">Adjust Amount</th>
                        </tr>
                    </thead>
                    <tbody id="fbBody">
                    </tbody>
                </table>
            </div>

            <div style="height:20px"></div>

            {{-- Freight Entries panel --}}
            <div id="panelGR">
                <p style="font-size:11px;font-weight:700;margin-bottom:8px;color:#475569">FREIGHT ENTRIES (GR)</p>
                <table class="jv-table">
                    <thead>
                        <tr>
                            <th style="width:32px">Select</th>
                            <th>LR No.</th>
                            <th>Date</th>
                            <th>Outstanding</th>
                            <th style="width:120px">Adjust Amount</th>
                        </tr>
                    </thead>
                    <tbody id="grBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="bm-footer">
        <button type="button" class="btn btn-secondary btn-sm" onclick="closeJvModal()">
            Cancel
        </button>
        <button type="button" class="btn btn-primary btn-sm" onclick="confirmJvSelection()">
            Fill invoice no. &rarr;
        </button>
    </div>
</div>
</div>

@endsection

@push('footer_script')
@include('common.modal.ledger')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    $(".datepicker").daterangepicker({
        singleDatePicker: true,
        locale: {
            format: "DD-MM-YYYY"
        },
    });

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


    function recalcTotals() {
        var d = 0,
            c = 0;
        $('input[id^=debit]').each(function() {
            d += parseFloat($(this).val()) || 0;
        });
        $('input[id^=credit]').each(function() {
            c += parseFloat($(this).val()) || 0;
        });
        $('#total_debit').val(d);
        $('#total_credit').val(c);
    }
    $(document).on('keyup', 'input[id^=credit],input[id^=debit]', recalcTotals);

    $("#addaccount").on('click', function() {
        $('#ledgerModal').modal('show');
    });

    var j = 12;
    $("#addrow").on('click', function() {
        var n = j - 9;
        var row = '<tr>' +
            '<td>' + n + '</td>' +
            '<td>' +
            '<select name="account_ledger_id[]" id="account_ledger_id' + j + '" class="form-control select2 jv-ledger-sel" required>' +
            '<option value="">Select</option>' +
            '@foreach($accountLedger as $key => $val)<option value="{{ $key }}">{{ $val }}</option>@endforeach' +
            '</select>' +
            '<small class="text-muted d-block mt-1">Balance: <span class="jv-ledger-balance fw-bold"></span></small>' +
            '<input type="hidden" name="row_adjustments[]" class="row-adj-data">' +
            '<div class="row-adj-summary"></div>' +
            '</td>' +
            '<td><input type="text" name="debit[]" id="debit' + j + '" class="form-control floatnumber jv-amount-input"></td>' +
            '<td><input type="text" name="credit[]" id="credit' + j + '" class="form-control floatnumber jv-amount-input"></td>' +
            '<td><input type="text" name="invoice_no[]" id="invoice_no' + j + '" class="form-control"></td>' +
            '<td><button class="btn btn-danger btn-sm del-row" type="button"><i class="ri-delete-bin-line"></i></button></td>' +
            '</tr>';
        $("#datatable tbody").append(row);
        $('#account_ledger_id' + j).select2();
        j++;
        initFloatBehavior();
    });

    $(document).on('change', '.jv-ledger-sel', function() {
        let select = $(this);
        let ledgerId = select.val();
        let targetSpan = select.closest('td').find('.jv-ledger-balance');
        if (!ledgerId) {
            targetSpan.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 + ')';
                targetSpan.text(text).removeClass('text-success text-danger').addClass(colorClass);
            }
        });
    });

    $(document).ready(function() {
        $('.jv-ledger-sel').each(function() {
            if ($(this).val()) {
                $(this).trigger('change');
            }
        });
    });

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

    $("#datatable").on("click", ".del-row", function() {
        $(this).closest("tr").remove();
        recalcTotals();
    });

    function validateForm() {
        var d = parseFloat($('#total_debit').val()) || 0;
        var c = parseFloat($('#total_credit').val()) || 0;
        if (d === c && d !== 0) return true;
        alert('Please Check The Debit Credit Side Total');
        $('#BtnSubmit').attr('disabled', false);
        return false;
    }

    var jvFb = [];
    var jvGr = [];
    var jvSelectedAdj = {}; // Structure: { type_id: { amount, invoice_no } }
    var jvTargetRow = null;
    var jvCurrentRowAmount = 0;

    // Trigger Modal on Ledger Change OR Amount Change
    $(document).on('change', '.jv-ledger-sel', function() {
        triggerAdjustmentModal($(this).closest('tr'));
    });

    $(document).on('blur', '.jv-amount-input', function() {
        triggerAdjustmentModal($(this).closest('tr'));
    });

    function triggerAdjustmentModal(row) {
        var ledgerId = row.find('.jv-ledger-sel').val();
        var debit = parseFloat(row.find('input[name="debit[]"]').val()) || 0;
        var credit = parseFloat(row.find('input[name="credit[]"]').val()) || 0;
        var amount = debit > 0 ? debit : credit;

        if (!ledgerId || amount <= 0) return;

        jvTargetRow = row;
        jvCurrentRowAmount = amount;

        // Load existing adjustments if any
        var existingData = row.find('.row-adj-data').val();
        jvSelectedAdj = existingData ? JSON.parse(existingData).reduce((acc, curr) => {
            acc[curr.bill_type + '_' + curr.bill_id] = {
                amount: curr.adjusted_amount,
                invoice_no: curr.invoice_no
            };
            return acc;
        }, {}) : {};

        fetchOutstanding(ledgerId);
    }

    function fetchOutstanding(ledgerId) {
        $.ajax({
            url: '{{ route('journal-voucher.outstanding-bills') }}',
            type: 'GET',
            data: {
                ledger_id: ledgerId
            },
            success: function(res) {
                if (!res.enabled) return;
                if ((!res.fb || res.fb.length === 0) && (!res.gr || res.gr.length === 0)) return;

                jvFb = res.fb || [];
                jvGr = res.gr || [];

                $('#modalTitle').text('Adjust Bills for ' + res.party_name);
                $('#statJvAmount').text('₹' + fmtNum(jvCurrentRowAmount));

                renderTables();
                updateStats();
                $('#jvBillModalOverlay').addClass('show');
            }
        });
    }

    function renderTables() {
        // Render Freight Bills
        var fbHtml = '';
        jvFb.forEach(function(b) {
            var sKey = 'freight_bill_' + b.id;
            var adjObj = jvSelectedAdj[sKey] || {
                amount: 0
            };
            fbHtml += '<tr>' +
                '<td><input type="checkbox" ' + (adjObj.amount > 0 ? 'checked' : '') + ' class="adj-check" value="' + sKey + '"></td>' +
                '<td>' + b.invoice_no + '</td>' +
                '<td>' + b.bill_date + '</td>' +
                '<td class="text-danger">₹' + fmtNum(b.outstanding) + '</td>' +
                '<td><input type="number" class="form-control form-control-sm adj-input" step="0.01" value="' + adjObj.amount + '" data-max="' + b.outstanding + '" data-key="' + sKey + '" data-ref="' + b.invoice_no + '"></td>' +
                '</tr>';
        });
        $('#fbBody').html(fbHtml || noDataRow(5));

        // Render GR Entries
        var grHtml = '';
        jvGr.forEach(function(e) {
            var sKey = 'freight_entry_' + e.id;
            var adjObj = jvSelectedAdj[sKey] || {
                amount: 0
            };
            grHtml += '<tr>' +
                '<td><input type="checkbox" ' + (adjObj.amount > 0 ? 'checked' : '') + ' class="adj-check" value="' + sKey + '"></td>' +
                '<td>' + e.invoice_no + '</td>' +
                '<td>' + e.bill_date + '</td>' +
                '<td class="text-danger">₹' + fmtNum(e.outstanding) + '</td>' +
                '<td><input type="number" class="form-control form-control-sm adj-input" step="0.01" value="' + adjObj.amount + '" data-max="' + e.outstanding + '" data-key="' + sKey + '" data-ref="' + e.invoice_no + '"></td>' +
                '</tr>';
        });
        $('#grBody').html(grHtml || noDataRow(5));

        attachModalEvents();
    }

    function attachModalEvents() {
        $('.adj-input').on('input', function() {
            var val = parseFloat($(this).val()) || 0;
            var max = parseFloat($(this).data('max')) || 0;
            var key = $(this).data('key');
            var ref = $(this).data('ref');

            if (val > max) {
                $(this).val(max);
                val = max;
            }

            if (val > 0) {
                jvSelectedAdj[key] = {
                    amount: val,
                    invoice_no: ref
                };
                $(this).closest('tr').find('.adj-check').prop('checked', true);
            } else {
                delete jvSelectedAdj[key];
                $(this).closest('tr').find('.adj-check').prop('checked', false);
            }
            updateStats();
        });

        $('.adj-check').on('change', function() {
            var row = $(this).closest('tr');
            var input = row.find('.adj-input');
            if ($(this).is(':checked')) {
                if ((parseFloat(input.val()) || 0) === 0) {
                    var remaining = jvCurrentRowAmount - getTotalAdjusted();
                    var max = parseFloat(input.data('max'));
                    var take = Math.min(remaining, max);
                    input.val(take > 0 ? take : 0).trigger('input');
                }
            } else {
                input.val(0).trigger('input');
            }
        });
    }

    function getTotalAdjusted() {
        return Object.values(jvSelectedAdj).reduce((a, b) => a + (parseFloat(b.amount) || 0), 0);
    }

    function updateStats() {
        var total = getTotalAdjusted();
        var remaining = jvCurrentRowAmount - total;

        $('#statAdjustedAmount').text('₹' + fmtNum(total));
        $('#statRemainingAmount').text('₹' + fmtNum(remaining));

        if (remaining < 0) {
            $('#statRemainingAmount').addClass('remaining');
        } else {
            $('#statRemainingAmount').removeClass('remaining');
        }
    }

    function confirmJvSelection() {
        var total = getTotalAdjusted();
        if (total > jvCurrentRowAmount + 0.01) {
            alert('Adjusted amount cannot exceed JV row amount!');
            return;
        }

        var adjustments = [];
        var refs = [];

        Object.keys(jvSelectedAdj).forEach(function(key) {
            var parts = key.split('_');
            var id = parts.pop();
            var type = parts.join('_');
            var data = jvSelectedAdj[key];

            adjustments.push({
                bill_id: id,
                bill_type: type,
                adjusted_amount: data.amount,
                invoice_no: data.invoice_no
            });
            refs.push(data.invoice_no);
        });

        if (jvTargetRow) {
            jvTargetRow.find('.row-adj-data').val(JSON.stringify(adjustments));
            jvTargetRow.find('input[name="invoice_no[]"]').val(refs.join(', '));

            // Render summary below row
            var summaryHtml = '<div class="adjustment-summary-container"><strong>Adjusted:</strong> ';
            summaryHtml += adjustments.map(a => a.invoice_no + ' (' + fmtNum(a.adjusted_amount) + ')').join(', ');
            summaryHtml += '</div>';
            jvTargetRow.find('.row-adj-summary').html(summaryHtml);
        }

        closeJvModal();
    }

    function closeJvModal() {
        $('#jvBillModalOverlay').removeClass('show');
        jvTargetRow = null;
    }

    function fmtNum(n) {
        return parseFloat(n || 0).toLocaleString('en-IN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function noDataRow(cols) {
        return '<tr><td colspan="' + cols + '" class="text-center text-muted py-3">No records found</td></tr>';
    }
</script>
@endpush