@extends('admin_dashboard')
@section('admin')

<style>
    .je-header {
        background: linear-gradient(135deg, #1a3a5c, #0f2540);
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px 6px 0 0;
        font-weight: 600;
        font-size: .95rem;
        letter-spacing: .03em;
    }
    .je-header i { margin-right: 6px; opacity: .85; }
    .je-card { border: 1px solid #d8e4ef; border-radius: 0 0 6px 6px; }
    .cash-badge {
        background: #e8f7ec;
        color: #28a745;
        border: 1px solid #c3e6cb;
        border-radius: 6px;
        padding: 6px 14px;
        font-size: .85rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .form-label { font-size: .8rem; font-weight: 600; color: #344563; margin-bottom: 3px; }
    #myTable thead th {
        background: #e6edf5;
        color: #1a3a5c;
        font-size: .78rem;
        font-weight: 700;
        border-color: #cdd8e8;
    }
    #myTable td { font-size: .82rem; vertical-align: middle; }
    #basic-datatable thead th {
        background: #1a3a5c;
        color: #fff;
        font-size: .78rem;
        font-weight: 600;
        border-color: #2a4a6c;
    }
    #basic-datatable tbody tr:hover { background: #f0f6fc; }
    #basic-datatable td { font-size: .82rem; vertical-align: middle; }
    #basic-datatable td.text-end { font-family: monospace; }
    .diff-badge {
        font-size: .82rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 4px;
    }
</style>

<div class="content">
<div class="container-fluid">

    {{-- Page Title --}}
    <div class="page-title-box mb-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <h4 class="page-title mb-0" style="color:#1a3a5c;">
            <i class="mdi mdi-book-edit-outline me-1"></i> Journal Entry
        </h4>
        <div class="d-flex align-items-center gap-3">
            <span class="cash-badge">
                <i class="mdi mdi-cash"></i> Cash in Hand: <strong id="cus_ttl">{{ $cash_total }}</strong>
            </span>
            <a href="{{ route('work.type.index') }}" class="btn btn-warning btn-sm px-3">
                <i class="mdi mdi-format-list-bulleted me-1"></i> All Vouchers
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible py-2 mb-3">
            <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- ══ ENTRY FORM ══ --}}
    <div class="mb-3">
        <div class="je-header">
            <i class="mdi mdi-plus-circle-outline"></i> New Journal Entry
        </div>
        <div class="card je-card shadow-sm mb-0">
            <div class="card-body pt-3 pb-2">
                <form id="myForm" method="post" action="{{ route('journal.store') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-2">
                        <div class="col-md-2">
                            <label class="form-label">Date</label>
                            <input class="form-control form-control-sm" type="text" id="date" name="date"
                                   value="{{ (new DateTime('now', new DateTimezone('Asia/Dhaka')))->format('d-m-Y') }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Reference No.</label>
                            <input class="form-control form-control-sm" type="text" name="ref_no" id="ref_no">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Ledger Name</label>
                            <input type="hidden" id="ledger_id" name="ledger_id">
                            <input list="ledger_names" id="ledger_name" name="ledger_name"
                                   class="form-control form-control-sm" placeholder="Search ledger…">
                            <datalist id="ledger_names">
                                @foreach($heads as $head)
                                <option value="{{ $head->ledger_name }}" data-id="{{ $head->id }}"></option>
                                @endforeach
                            </datalist>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Sub-Ledger</label>
                            <input type="hidden" id="subledger_id" name="subledger_id">
                            <input list="subledgers" id="subledger_name" name="subledger_name"
                                   class="form-control form-control-sm" placeholder="Search sub-ledger…">
                            <datalist id="subledgers"></datalist>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Project</label>
                            <input type="hidden" id="project_id" name="project_id">
                            <input list="project_names" id="project_name" name="project_name"
                                   class="form-control form-control-sm" placeholder="Search project…" required>
                            <datalist id="project_names">
                                @foreach($projects as $project)
                                <option value="{{ $project->project_name }}" data-id="{{ $project->id }}"></option>
                                @endforeach
                            </datalist>
                        </div>
                        <div class="col-md-1">
                            <label class="form-label">Dr. Amount</label>
                            <input class="form-control form-control-sm" type="number" name="dr_amount" id="dr_amount" value="0" min="0" step="0.01">
                        </div>
                        <div class="col-md-1">
                            <label class="form-label">Cr. Amount</label>
                            <input class="form-control form-control-sm" type="number" id="cr_amount" name="cr_amount" value="0" min="0" step="0.01">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <input class="form-control form-control-sm" type="text" id="description" name="description" placeholder="Optional description…">
                        </div>
                    </div>

                    {{-- Staged Entries Preview Table --}}
                    <div class="mt-3" id="myTableWrapper" style="display:none;">
                        <p class="section-label mb-1" style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#1a3a5c;border-bottom:2px solid #e0e8f0;padding-bottom:3px;">
                            <i class="mdi mdi-table-edit"></i> Staged Entries
                        </p>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm mb-1" id="myTable" style="background:#fff;">
                                <thead>
                                    <tr>
                                        <th>Ledger Name</th>
                                        <th>Sub-Ledger</th>
                                        <th class="text-end">Dr. Amount</th>
                                        <th class="text-end">Cr. Amount</th>
                                        <th style="width:50px;"></th>
                                    </tr>
                                </thead>
                                <tbody style="background:#fffde7;"></tbody>
                            </table>
                        </div>
                    </div>

                    <div class="mt-2 mb-1">
                        <button type="submit" class="btn btn-success btn-sm px-4 btn_submit" disabled>
                            <i class="mdi mdi-content-save-outline me-1"></i> Save Journal
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- ══ TRANSACTIONS TABLE ══ --}}
    <div>
        <div class="je-header">
            <i class="mdi mdi-format-list-bulleted"></i> Journal Transactions
        </div>
        <div class="card je-card shadow-sm mb-0">
            <div class="card-body p-2">
                <div class="table-responsive">
                    <table id="basic-datatable" class="table table-bordered table-hover mb-0 w-100">
                        <thead>
                            <tr>
                                <th style="width:45px;">#</th>
                                <th>Date</th>
                                <th>Tran. No.</th>
                                <th>Ledger Name</th>
                                <th>Description</th>
                                <th class="text-end">Dr. Amount</th>
                                <th class="text-end">Cr. Amount</th>
                                <th class="text-center" style="width:70px;">Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($all_trans as $key => $item)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $item->date }}</td>
                                <td>{{ $item->invoice_no }}</td>
                                <td>{{ $item->ledger_name }}</td>
                                <td>{{ $item->description }}</td>
                                <td class="text-end">{{ $item->dr_amount ? number_format($item->dr_amount, 2) : '—' }}</td>
                                <td class="text-end">{{ $item->cr_amount ? number_format($item->cr_amount, 2) : '—' }}</td>
                                <td class="text-center">
                                    <form action="{{ route('delete.voucher', $item->invoice_no) }}" method="POST" class="d-inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm py-0 px-2"
                                                onclick="return confirm('Are you sure you want to delete?')">
                                            <i class="mdi mdi-trash-can-outline"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    const cashInHand = parseFloat("{{ $cash_total }}") || 0;
    const cashAtBank = parseFloat("{{ $bank_total }}") || 0;

    // ── Ledger: Enter key → fetch sub-ledgers ──────────────────────────────
    document.addEventListener('DOMContentLoaded', function () {
        const ledgerInput    = document.getElementById('ledger_name');
        const ledgerIdInput  = document.getElementById('ledger_id');
        const subLedgerInput = document.getElementById('subledger_name');
        const subLedgerList  = document.getElementById('subledgers');

        ledgerInput.addEventListener('keypress', function (e) {
            if (e.key !== 'Enter') return;
            e.preventDefault();
            const option = [...document.querySelectorAll('#ledger_names option')]
                .find(o => o.value === this.value);
            if (!option) { alert('Please select a valid ledger'); return; }
            ledgerIdInput.value = option.dataset.id;
            subLedgerList.innerHTML = '';
            fetch(`/get-sub-ledgers/${option.dataset.id}`)
                .then(r => r.json())
                .then(data => {
                    data.forEach(sub => {
                        const opt = document.createElement('option');
                        opt.value = sub.subledger_name;
                        opt.dataset.id = sub.id;
                        subLedgerList.appendChild(opt);
                    });
                    subLedgerInput.focus();
                }).catch(err => console.error(err));
        });

        // Sub-ledger: Enter key → project
        subLedgerInput.addEventListener('keypress', function (e) {
            if (e.key !== 'Enter') return;
            e.preventDefault();
            const selected = [...subLedgerList.options].find(o => o.value === this.value);
            document.getElementById('subledger_id').value = selected ? selected.dataset.id : '';
            document.getElementById('project_name').focus();
        });

        // Project: Enter key → dr_amount
        const projectInput   = document.getElementById('project_name');
        const projectIdInput = document.getElementById('project_id');
        projectInput.addEventListener('keypress', function (e) {
            if (e.key !== 'Enter') return;
            e.preventDefault();
            const option = [...document.querySelectorAll('#project_names option')]
                .find(o => o.value === this.value);
            if (!option) { alert('Please select a valid project'); return; }
            projectIdInput.value = option.dataset.id;
            document.getElementById('dr_amount').select();
        });
    });

    // ── Tab-through via Enter ──────────────────────────────────────────────
    $('#date').keypress(function(e)      { if (e.which===13){ e.preventDefault(); $('#ref_no').focus().select(); } });
    $('#ref_no').keypress(function(e)    { if (e.which===13){ e.preventDefault(); $('#ledger_name').focus().select(); } });
    $('#dr_amount').keypress(function(e) { if (e.which===13){ e.preventDefault(); $('#cr_amount').select(); } });

    $('#description').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            $('.btn_submit').prop('disabled', false).focus();
        }
    });

    $(document).ready(function() { $('#ref_no').focus().select(); });

    // ── Prevent Enter from submitting form ────────────────────────────────
    $(document).ready(function() {
        $('#myForm input').on('keypress', function(e) { if (e.which===13) e.preventDefault(); });
    });

    // ── Cr amount Enter: validate & stage row ─────────────────────────────
    $('#cr_amount').keypress(function(e) {
        if (e.which !== 13) return;
        e.preventDefault();

        const ledger_id    = $('#ledger_id').val();
        const ledger_name  = $('#ledger_name').val();
        const subledger_id = $('#subledger_id').val();
        const subledger_name = $('#subledger_name').val();
        const dr_amount    = parseFloat($('#dr_amount').val()) || 0;
        const cr_amount    = parseFloat($('#cr_amount').val()) || 0;

        if (ledger_id == 3 && cr_amount > cashInHand) {
            alert(`Cash amount cannot exceed cash in hand: ${cashInHand.toFixed(2)}`);
            $('#cr_amount').focus().select(); return;
        }
        if (ledger_id == 4 && cr_amount > cashAtBank) {
            alert(`Amount cannot exceed cash at bank: ${cashAtBank.toFixed(2)}`);
            $('#cr_amount').focus().select(); return;
        }
        if (dr_amount > 0 && cr_amount > 0) {
            alert("Cannot enter both Debit and Credit at the same time");
            return;
        }

        // Stage the row
        $('#myTable tbody').prepend(`
            <tr class="child">
                <td style="font-size:12px;" data-ledger-id="${ledger_id}">${ledger_name}</td>
                <td style="font-size:12px;" data-subledger-id="${subledger_id}">${subledger_name}</td>
                <td style="font-size:12px;" class="text-end">${dr_amount}</td>
                <td style="font-size:12px;" class="text-end">${cr_amount}</td>
                <td class="text-center"><button class="btn btn-danger btn-sm py-0 px-1 btnDelete"><i class="mdi mdi-close"></i></button></td>
            </tr>`);

        $('#ledger_id,#ledger_name,#subledger_id,#subledger_name').val('');
        $('#dr_amount,#cr_amount').val('0');
        $('#description').val('');
        $('#myTableWrapper').show();

        const diff = calculateTotalsAndDifference();
        if (diff !== 0) { $('#ledger_name').focus(); }
        else            { $('#description').focus(); }
    });

    // ── Calculate totals & auto-fill difference ───────────────────────────
    function calculateTotalsAndDifference() {
        let totalDr = 0, totalCr = 0;
        $('#myTable tbody tr').each(function() {
            totalDr += parseFloat($(this).find('td:eq(2)').text()) || 0;
            totalCr += parseFloat($(this).find('td:eq(3)').text()) || 0;
        });
        const diff = Math.abs(totalDr - totalCr);
        if      (totalDr > totalCr) { $('#cr_amount').val(diff); $('#dr_amount').val('0'); }
        else if (totalCr > totalDr) { $('#dr_amount').val(diff); $('#cr_amount').val('0'); }
        else                        { $('#cr_amount').val('0');  $('#dr_amount').val('0'); }
        return diff;
    }

    // ── Delete staged row ─────────────────────────────────────────────────
    $('#myTable').on('click', '.btnDelete', function(e) {
        e.preventDefault();
        if (confirm('Remove this entry?')) {
            $(this).closest('tr').remove();
            if ($('#myTable tbody tr').length === 0) $('#myTableWrapper').hide();
            calculateTotalsAndDifference();
        }
    });

    // ── Save button: validate balanced ────────────────────────────────────
    $('.btn_submit').on('click', function(event) {
        if (calculateTotalsAndDifference() !== 0) {
            event.preventDefault();
            alert('Total Debit and Total Credit must be equal.');
        }
    });

    // ── Inject table_data on submit ───────────────────────────────────────
    $(document).ready(function() {
        $('form').on('submit', function(event) {
            let totalDr = 0, totalCr = 0;
            $('#myTable tbody tr').each(function() {
                totalDr += parseFloat($(this).find('td:eq(2)').text()) || 0;
                totalCr += parseFloat($(this).find('td:eq(3)').text()) || 0;
            });
            if (totalDr !== totalCr) {
                event.preventDefault();
                alert('Debit and Credit amounts must be equal!');
                return false;
            }
            const tableData = [];
            $('#myTable tbody tr').each(function() {
                tableData.push({
                    ledger_id:    $(this).find('td:eq(0)').data('ledger-id'),
                    subledger_id: $(this).find('td:eq(1)').data('subledger-id') || null,
                    dr_amount:    $(this).find('td:eq(2)').text(),
                    cr_amount:    $(this).find('td:eq(3)').text()
                });
            });
            $('<input>', { type: 'hidden', name: 'table_data', value: JSON.stringify(tableData) }).appendTo(this);
        });
    });
</script>
@endsection