@extends('layouts.app')

@section('title', 'Void / Adjust OR')

@section('content')
    <div class="py-3">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0"><i class="bi bi-slash-circle me-2"></i>Void / Adjust Official Receipt</h4>
            <div class="d-flex gap-2">
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#mdlChooseOR">
                    <i class="bi bi-search me-1"></i> Find / Choose OR
                </button>
            </div>
        </div>

        {{-- Filters quick bar (optional for MVP; static) --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <div class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">OR Number</label>
                        <input id="txtQuickOr" type="text" class="form-control" placeholder="Enter OR No. (static)">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Date</label>
                        <input id="dtQuickDate" type="date" class="form-control" value="{{ date('Y-m-d') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Cashier</label>
                        <input id="txtQuickCashier" type="text" class="form-control" placeholder="cashier@lgu.local">
                    </div>
                    <div class="col-md-3 d-grid">
                        <button id="btnQuickFind" class="btn btn-outline-secondary"><i class="bi bi-search me-1"></i>Find
                            (static)</button>
                    </div>
                </div>
            </div>
        </div>

        @php
            // ---------- STATIC MOCK DATA (MVP) ----------
            // OR header-level list (for modal and quick search)
            $orRows = [
                [
                    'or_no' => '001120',
                    'issued_at' => '2025-10-18 09:05',
                    'cashier' => 'cashier1@lgu.local',
                    'shift' => 'S-2025-10-18-A',
                    'assessment_no' => 'ASM-2025-00421',
                    'payor' => 'Dev Coffee Roasters',
                    'method' => 'Cash',
                    'fund' => 'General Fund',
                    'discount' => 0.0,
                    'surcharge' => 250.0,
                    'interest' => 0.0,
                    'amount' => 12500.0,
                    'net' => 12750.0,
                    'status' => 'Issued',
                    'in_deposit' => false, // cannot void if true (without supervisor override)
                    'items' => [
                        [
                            'code' => 'BP-TAX',
                            'desc' => 'Business Tax - Retail',
                            'fund' => 'General Fund',
                            'amount' => 9000.0,
                        ],
                        ['code' => 'REG-FEE', 'desc' => 'Regulatory Fee', 'fund' => 'General Fund', 'amount' => 2000.0],
                        ['code' => 'SUR', 'desc' => 'Surcharge', 'fund' => 'General Fund', 'amount' => 250.0],
                        ['code' => 'OTH', 'desc' => 'Misc', 'fund' => 'General Fund', 'amount' => 1250.0],
                    ],
                ],
                [
                    'or_no' => '001121',
                    'issued_at' => '2025-10-18 09:20',
                    'cashier' => 'cashier1@lgu.local',
                    'shift' => 'S-2025-10-18-A',
                    'assessment_no' => 'ASM-2025-00422',
                    'payor' => 'Byte Bakery',
                    'method' => 'Check',
                    'fund' => 'General Fund',
                    'discount' => 0.0,
                    'surcharge' => 200.0,
                    'interest' => 0.0,
                    'amount' => 8000.0,
                    'net' => 8200.0,
                    'status' => 'Issued',
                    'in_deposit' => true, // simulate included in RCD/Deposit
                    'items' => [
                        [
                            'code' => 'BP-TAX',
                            'desc' => 'Business Tax - Retail',
                            'fund' => 'General Fund',
                            'amount' => 6000.0,
                        ],
                        ['code' => 'REG-FEE', 'desc' => 'Regulatory Fee', 'fund' => 'General Fund', 'amount' => 2000.0],
                        ['code' => 'SUR', 'desc' => 'Surcharge', 'fund' => 'General Fund', 'amount' => 200.0],
                    ],
                ],
                [
                    'or_no' => '001122',
                    'issued_at' => '2025-10-18 10:10',
                    'cashier' => 'cashier2@lgu.local',
                    'shift' => 'S-2025-10-18-B',
                    'assessment_no' => 'ASM-2025-00400',
                    'payor' => 'Pixel Print Shop',
                    'method' => 'Cash',
                    'fund' => 'General Fund',
                    'discount' => 0.0,
                    'surcharge' => 0.0,
                    'interest' => 0.0,
                    'amount' => 5000.0,
                    'net' => 5000.0,
                    'status' => 'Voided',
                    'in_deposit' => false,
                    'items' => [
                        ['code' => 'FEE', 'desc' => 'Sample Fee', 'fund' => 'General Fund', 'amount' => 5000.0],
                    ],
                ],
            ];
        @endphp

        <div class="row g-3">
            {{-- LEFT: RECEIPT DETAILS --}}
            <div class="col-lg-7">

                {{-- Empty state --}}
                <div id="panelEmpty" class="card shadow-sm">
                    <div class="card-body py-5 text-center text-muted">
                        <div class="mb-2"><i class="bi bi-receipt fs-1"></i></div>
                        <div class="fs-5 fw-semibold">No OR selected</div>
                        <div class="mb-3">Find an OR to void or create an adjusting receipt.</div>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#mdlChooseOR">
                            <i class="bi bi-search me-1"></i> Find / Choose OR
                        </button>
                    </div>
                </div>

                {{-- Details --}}
                <div id="panelDetails" class="d-none">
                    <div class="card shadow-sm mb-3">
                        <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
                            <span>Receipt Details</span>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-secondary" data-bs-toggle="modal"
                                    data-bs-target="#mdlChooseOR">
                                    <i class="bi bi-arrow-repeat me-1"></i> Change
                                </button>
                                <button id="btnClear" class="btn btn-outline-danger">
                                    <i class="bi bi-x-circle me-1"></i> Clear
                                </button>
                            </div>
                        </div>
                        <div class="card-body">

                            <div id="orGuards" class="mb-3 d-none">
                                <div id="guardVoided" class="alert alert-danger d-none mb-2">
                                    <i class="bi bi-exclamation-octagon me-2"></i> This OR is already
                                    <strong>Voided</strong>.
                                    You cannot void it again. You may review audit logs or print copies if allowed.
                                </div>
                                <div id="guardDeposit" class="alert alert-warning d-none mb-0">
                                    <i class="bi bi-shield-lock me-2"></i> This OR has been included in a
                                    <strong>deposit/RCD</strong>.
                                    Voiding requires <strong>Supervisor override</strong> and proper documentation.
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label class="form-label">OR No.</label>
                                    <input id="txtOrNo" type="text" class="form-control" value="" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Issued At</label>
                                    <input id="txtIssuedAt" type="text" class="form-control" value="" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Status</label>
                                    <input id="txtStatus" type="text" class="form-control" value="" readonly>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-6">
                                    <label class="form-label">Cashier / Shift</label>
                                    <input id="txtCashierShift" type="text" class="form-control" value="" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Assessment No.</label>
                                    <input id="txtAssessmentNo" type="text" class="form-control" value="" readonly>
                                </div>
                            </div>

                            <div class="mb-2">
                                <label class="form-label">Payor</label>
                                <input id="txtPayor" type="text" class="form-control" value="" readonly>
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label class="form-label">Method</label>
                                    <input id="txtMethod" type="text" class="form-control" value="" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Fund</label>
                                    <input id="txtFund" type="text" class="form-control" value="" readonly>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Net Amount</label>
                                    <input id="txtNet" type="text" class="form-control text-end" value=""
                                        readonly>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm table-striped align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="bg-success text-white">Fee Code</th>
                                            <th class="bg-success text-white">Description</th>
                                            <th class="bg-success text-white">Fund</th>
                                            <th class="bg-success text-white" class="text-end">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tblItemsBody">
                                        {{-- filled by JS --}}
                                    </tbody>
                                    <tfoot class="table-secondary">
                                        <tr>
                                            <th colspan="3" class="text-end">Total</th>
                                            <th id="tdTotal" class="text-end">0.00</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            {{-- RIGHT: ACTION + AUDIT --}}
            <div class="col-lg-5">

                {{-- Action --}}
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-light fw-semibold">Action</div>
                    <div class="card-body">
                        <div class="mb-2">
                            <label class="form-label">Action Type</label>
                            <select class="form-select" id="actionType">
                                <option value="void">Void Receipt</option>
                                <option value="adjust">Create Adjusting Receipt</option>
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Reason</label>
                            <textarea id="txtReason" class="form-control" rows="2" placeholder="State the reason (required)"></textarea>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Authorized By</label>
                            <input id="txtAuthorizedBy" type="text" class="form-control"
                                placeholder="Supervisor User (required if deposit/override)">
                        </div>
                        <div class="d-grid gap-2">
                            <button id="btnConfirmVoid" class="btn btn-danger"><i class="bi bi-slash-circle me-1"></i>
                                Confirm Void</button>
                            <button id="btnProceedAdjust" class="btn btn-warning text-dark"><i
                                    class="bi bi-arrow-repeat me-1"></i> Proceed to Adjustment</button>
                        </div>
                        <div class="form-text mt-2">
                            Voiding is not allowed if the OR is already included in a deposit/RCD <strong>unless</strong> a
                            supervisor authorizes.
                        </div>
                    </div>
                </div>

                {{-- Audit Trail --}}
                <div class="card shadow-sm">
                    <div class="card-header bg-light fw-semibold">Audit Trail (Snapshot)</div>
                    <div class="card-body">
                        <ul id="ulAudit" class="list-unstyled mb-0 small">
                            <li><i class="bi bi-dot"></i> Select an OR to view audit entries.</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        {{-- Choose OR Modal --}}
        <div class="modal fade" id="mdlChooseOR" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-journal-text me-2"></i>Choose OR</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="input-group mb-2">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" id="txtModalFilter" class="form-control"
                                placeholder="Filter by OR no, assessment no, payor...">
                        </div>

                        <div class="table-responsive" style="max-height: 420px; overflow:auto;">
                            <table class="table table-sm table-hover align-middle" id="tblORs">
                                <thead class="table-light">
                                    <tr>
                                        <th class="bg-success text-white">OR No</th>
                                        <th class="bg-success text-white">Issued At</th>
                                        <th class="bg-success text-white">Assessment No</th>
                                        <th class="bg-success text-white">Payor</th>
                                        <th class="bg-success text-white" class="text-end">Net</th>
                                        <th class="bg-success text-white">Status</th>
                                        <th class="bg-success text-white" style="width:60px;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($orRows as $r)
                                        <tr data-or='@json($r)'>
                                            <td class="fw-semibold">{{ $r['or_no'] }}</td>
                                            <td>{{ $r['issued_at'] }}</td>
                                            <td>{{ $r['assessment_no'] }}</td>
                                            <td>{{ $r['payor'] }}</td>
                                            <td class="text-end">{{ number_format($r['net'], 2) }}</td>
                                            <td>
                                                @if ($r['status'] === 'Voided')
                                                    <span class="badge bg-danger">VOID</span>
                                                @else
                                                    <span class="badge bg-success">Issued</span>
                                                @endif
                                            </td>
                                            <td class="text-end">
                                                <button class="btn btn-primary btn-sm btn-choose"><i
                                                        class="bi bi-check2-circle"></i></button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="small text-muted">Static list for MVP.</div>
                    </div>
                    <div class="modal-footer">
                        <button id="btnClearFromModal" class="btn btn-outline-danger">Clear selection</button>
                        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Toasts --}}
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 9999">
            <div id="toastOk" class="toast align-items-center text-bg-success border-0" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">Done (static).</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
                </div>
            </div>
            <div id="toastWarn" class="toast align-items-center text-bg-warning border-0" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">Check inputs.</div>
                    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        $(function() {

            // ---------- helpers ----------
            function fmt(n) {
                return (Number(n) || 0).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function showPanelDetails(show) {
                if (show) {
                    $('#panelEmpty').addClass('d-none');
                    $('#panelDetails').removeClass('d-none');
                } else {
                    $('#panelDetails').addClass('d-none');
                    $('#panelEmpty').removeClass('d-none');
                }
            }

            function toastOk(msg) {
                if (msg) $('#toastOk .toast-body').text(msg);
                bootstrap.Toast.getOrCreateInstance('#toastOk').show();
            }

            function toastWarn(msg) {
                if (msg) $('#toastWarn .toast-body').text(msg);
                bootstrap.Toast.getOrCreateInstance('#toastWarn').show();
            }

            // ---------- state ----------
            var currentOR = null;

            // ---------- load OR into UI ----------
            function loadOR(data) {
                if (!data) return;

                // guards
                $('#orGuards').removeClass('d-none');
                $('#guardVoided').toggleClass('d-none', data.status !== 'Voided');
                $('#guardDeposit').toggleClass('d-none', !data.in_deposit);

                // header fields
                $('#txtOrNo').val(data.or_no || '');
                $('#txtIssuedAt').val(data.issued_at || '');
                $('#txtStatus').val(data.status || '');
                $('#txtCashierShift').val(((data.cashier || '') + ' / ' + (data.shift || '')).trim());
                $('#txtAssessmentNo').val(data.assessment_no || '');
                $('#txtPayor').val(data.payor || '');
                $('#txtMethod').val(data.method || '');
                $('#txtFund').val(data.fund || '');
                $('#txtNet').val(fmt(data.net || 0));

                // items table
                var $tb = $('#tblItemsBody').empty();
                var sum = 0;
                (data.items || []).forEach(function(it) {
                    var amt = Number(it.amount) || 0;
                    sum += amt;
                    $tb.append(
                        '<tr>' +
                        '<td>' + (it.code || '') + '</td>' +
                        '<td>' + (it.desc || '') + '</td>' +
                        '<td>' + (it.fund || '') + '</td>' +
                        '<td class="text-end">' + fmt(amt) + '</td>' +
                        '</tr>'
                    );
                });
                $('#tdTotal').text(fmt(sum));

                currentOR = data;
                showPanelDetails(true);
            }

            function clearSelection() {
                currentOR = null;
                $('#orGuards').addClass('d-none');
                $('#guardVoided, #guardDeposit').addClass('d-none');

                $('#txtOrNo, #txtIssuedAt, #txtStatus, #txtCashierShift, #txtAssessmentNo, #txtPayor, #txtMethod, #txtFund')
                    .val('');
                $('#txtNet').val('0.00');
                $('#tblItemsBody').empty();
                $('#tdTotal').text('0.00');

                $('#txtReason').val('');
                $('#txtAuthorizedBy').val('');

                showPanelDetails(false);
            }

            // ---------- events ----------
            // Modal choose
            $(document).on('click', '#tblORs .btn-choose', function(e) {
                e.preventDefault();
                var row = $(this).closest('tr').data('or');
                if (row) {
                    loadOR(row);
                    bootstrap.Modal.getOrCreateInstance('#mdlChooseOR').hide();
                }
            });

            // Modal filter
            $('#txtModalFilter').on('input', function() {
                var q = ($(this).val() || '').trim().toLowerCase();
                $('#tblORs tbody tr').each(function() {
                    var d = $(this).data('or') || {};
                    var ok = !q ||
                        (d.or_no || '').toLowerCase().includes(q) ||
                        (d.assessment_no || '').toLowerCase().includes(q) ||
                        (d.payor || '').toLowerCase().includes(q);
                    $(this).toggle(ok);
                });
            });

            // Quick find (static; looks up in-table list)
            $('#btnQuickFind').on('click', function(e) {
                e.preventDefault();
                var target = ($('#txtQuickOr').val() || '').trim().toLowerCase();
                if (!target) {
                    toastWarn('Enter an OR number.');
                    return;
                }
                var found = null;
                $('#tblORs tbody tr').each(function() {
                    var d = $(this).data('or') || {};
                    if ((d.or_no || '').toLowerCase() === target) {
                        found = d;
                        return false;
                    }
                });
                if (found) {
                    loadOR(found);
                    toastOk('OR ' + found.or_no + ' loaded.');
                } else {
                    toastWarn('OR not found in static list.');
                }
            });

            // Clear
            $('#btnClear, #btnClearFromModal').on('click', function(e) {
                e.preventDefault();
                clearSelection();
                var m = bootstrap.Modal.getOrCreateInstance('#mdlChooseOR');
                m.hide();
            });

            // Esc to clear
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' && !$('#panelDetails').hasClass('d-none')) {
                    clearSelection();
                }
            });

            // Confirm Void
            $('#btnConfirmVoid').on('click', function(e) {
                e.preventDefault();
                if (!currentOR) {
                    toastWarn('Select an OR first.');
                    return;
                }

                var reason = ($('#txtReason').val() || '').trim();
                if (!reason) {
                    toastWarn('Reason is required.');
                    return;
                }

                // guard checks (static)
                if (currentOR.status === 'Voided') {
                    toastWarn('Already voided.');
                    return;
                }
                var needsSupervisor = !!currentOR.in_deposit;
                var supervisor = ($('#txtAuthorizedBy').val() || '').trim();
                if (needsSupervisor && !supervisor) {
                    toastWarn('Supervisor authorization required (OR already in deposit).');
                    return;
                }

                // (static) mark as voided in UI
                currentOR.status = 'Voided';
                loadOR(currentOR); // refresh guards
                // append fake audit entry
                $('#ulAudit').prepend('<li><i class="bi bi-dot"></i> Voided by you at ' + new Date()
                    .toLocaleString() + ' (static)</li>');
                toastOk('OR ' + (currentOR.or_no || '') + ' voided (static).');
            });

            // Proceed to Adjustment
            $('#btnProceedAdjust').on('click', function(e) {
                e.preventDefault();
                if (!currentOR) {
                    toastWarn('Select an OR first.');
                    return;
                }
                var reason = ($('#txtReason').val() || '').trim();
                if (!reason) {
                    toastWarn('Reason is required.');
                    return;
                }

                // (static) pretend we navigate to Adjusting Receipt flow
                $('#ulAudit').prepend('<li><i class="bi bi-dot"></i> Adjustment initiated at ' + new Date()
                    .toLocaleString() + ' (static)</li>');
                toastOk('Proceed to Adjusting Receipt (static).');
                alert(
                    'Adjusting Receipt flow (static) — wire this to your create-adjustment page with assessment linkage.'
                );
            });

            // Start with empty state
            showPanelDetails(false);

        });
    </script>
@endpush