{{-- resources/views/assessments/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Assessment - Compute Fees')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0"><i class="bi bi-calculator me-2"></i>Compute Fees</h4>
        </div>

        {{-- FINDER ONLY (Search / Open Modal) --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <form class="row g-2" id="appFinderForm">
                    <div class="col-md-4">
                        <label class="form-label small text-muted">Application / Tracking No.</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-hash"></i></span>
                            <input type="text" class="form-control" id="txtAppNo" placeholder="e.g. APP-2025-000123">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label small text-muted">Owner / Business Name</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control" id="txtName"
                                placeholder="e.g. Dela Cruz / DC Trading">
                        </div>
                    </div>
                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="button" id="btnQuickFind" class="btn btn-primary w-50">
                            <i class="bi bi-search me-1"></i> Quick Find
                        </button>
                        <button type="button" id="btnBrowse" class="btn btn-secondary w-50" data-bs-toggle="modal"
                            data-bs-target="#modalAppPicker">
                            <i class="bi bi-list-task me-1"></i> Browse
                        </button>
                    </div>
                </form>
                <div class="small text-muted mt-2">
                    Tip: Use <strong>Quick Find</strong> to search by exact App/Tracking No., or <strong>Browse</strong> to
                    pick from a list.
                </div>
            </div>
        </div>

        {{-- HIDDEN UNTIL APP SELECTED --}}
        <div id="assessmentWorkArea" class="d-none">
            <div class="row g-3">
                <div class="col-12 col-lg-8">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h6 class="mb-1">Application Details</h6>
                                    <div class="small text-muted" id="lblType">—</div>
                                </div>
                                <span id="badgeStatus" class="badge text-bg-secondary">PENDING</span>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="border rounded p-3">
                                        <div class="fw-semibold mb-1"><i class="bi bi-person-badge me-2"></i>Owner</div>
                                        <div class="small" id="lblOwner">—</div>
                                        <div class="small" id="lblTin">TIN: —</div>
                                        <div class="small" id="lblContact">Contact: —</div>
                                        <div class="small mt-1"><span class="text-muted">App No.:</span> <span
                                                id="lblAppNo">—</span></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="border rounded p-3">
                                        <div class="fw-semibold mb-1"><i class="bi bi-shop me-2"></i>Business</div>
                                        <div class="small" id="lblBusiness">—</div>
                                        <div class="small" id="lblLine">Line: —</div>
                                        <div class="small" id="lblGross">Gross Receipts (Prev. Yr): —</div>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            {{-- Fees Table --}}
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Fees Breakdown</h6>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-secondary" data-bs-toggle="modal"
                                        data-bs-target="#modalAddFee" id="btnAddFee" disabled>
                                        <i class="bi bi-plus-circle me-1"></i>Add Fee
                                    </button>
                                    <button class="btn btn-sm btn-secondary" data-bs-toggle="modal"
                                        data-bs-target="#modalAdjustments" id="btnAdjustments" disabled>
                                        <i class="bi bi-sliders me-1"></i>Adjustments
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table id="feesTable" class="table table-sm table-striped table-bordered align-middle"
                                    style="width:100%">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="bg-success text-white">Code</th>
                                            <th class="bg-success text-white">Description</th>
                                            <th class="bg-success text-white">Basis</th>
                                            <th class="bg-success text-white text-center">Qty</th>
                                            <th class="bg-success text-white text-center">Rate</th>
                                            <th class="bg-success text-white text-center">Amount</th>
                                            <th class="bg-success text-white text-center">Surcharge</th>
                                            <th class="bg-success text-white text-center">Interest</th>
                                            <th class="bg-success text-white text-center">Total</th>{{--  --}}
                                            <th class="bg-success text-white text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- loaded dynamically after selection --}}
                                    </tbody>
                                    <tfoot class="table-light">
                                        <tr>
                                            <th colspan="5" class="text-end">Sub-Total:</th>
                                            <th class="text-end" id="ftAmount">0.00</th>
                                            <th class="text-end" id="ftSurcharge">0.00</th>
                                            <th class="text-end" id="ftInterest">0.00</th>
                                            <th class="text-end" id="ftTotal">0.00</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                            {{-- Endorsements status (static badges for MVP) --}}
                            <div class="mt-3">
                                <span class="badge text-bg-success me-1"><i
                                        class="bi bi-check-circle me-1"></i>Health</span>
                                <span class="badge text-bg-warning me-1"><i
                                        class="bi bi-hourglass-split me-1"></i>Zoning</span>
                                <span class="badge text-bg-success me-1"><i
                                        class="bi bi-check-circle me-1"></i>Engineering</span>
                                <span class="badge text-bg-success me-1"><i class="bi bi-check-circle me-1"></i>BFP</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Totals / Actions --}}
                <div class="col-12 col-lg-4">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6 class="mb-3">Computation Summary</h6>

                            <div class="d-flex justify-content-between small mb-1">
                                <span>Assessed Fees</span><span id="sumAssessed">₱ 0.00</span>
                            </div>
                            <div class="d-flex justify-content-between small mb-1">
                                <span>Discounts</span><span id="sumDiscounts">₱ 0.00</span>
                            </div>
                            <div class="d-flex justify-content-between small mb-1">
                                <span>Surcharges</span><span id="sumSurcharges">₱ 0.00</span>
                            </div>
                            <div class="d-flex justify-content-between small mb-3">
                                <span>Interests</span><span id="sumInterests">₱ 0.00</span>
                            </div>

                            <div class="border-top pt-2">
                                <div class="d-flex justify-content-between fw-semibold">
                                    <span>Total Payable</span><span id="sumTotal">₱ 0.00</span>
                                </div>
                            </div>

                            <div class="mt-3 d-grid gap-2">
                                <button class="btn btn-success" id="btnSaveLock" disabled>
                                    <i class="bi bi-check2-circle me-1"></i> Save Assessment (Lock)
                                </button>
                                <button class="btn btn-primary" id="btnProceedReceipt" disabled>
                                    <i class="bi bi-receipt me-1"></i> Proceed to Receipt
                                </button>
                                <button class="btn btn-secondary" id="btnPrintSOA" disabled>
                                    <i class="bi bi-printer me-1"></i> Print SOA (Preview)
                                </button>
                            </div>

                            <hr>
                            <div class="small text-muted">
                                “Proceed to Receipt” enables after the assessment is locked (MVP behavior).
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> {{-- /assessmentWorkArea --}}
    </div>

    {{-- Applications Picker Modal (static list) --}}
    <div class="modal fade" id="modalAppPicker" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"><i class="bi bi-list-task me-2"></i>Select Application</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table id="tblAppPicker" class="table table-sm table-striped table-bordered align-middle"
                        style="width:100%">
                        <thead class="table-light">
                            <tr>
                                <th></th>
                                <th>App No.</th>
                                <th>Type</th>
                                <th>Owner</th>
                                <th>Business</th>
                                <th>Line</th>
                                <th class="text-end">Gross (Prev Yr)</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Static sample dataset rendered by JS for clarity --}}
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary btn-sm" id="btnUseSelected" disabled><i
                            class="bi bi-check2-circle me-1"></i>Use Selected</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Add Fee Modal (static) --}}
    <div class="modal fade" id="modalAddFee" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"><i class="bi bi-plus-circle me-2"></i>Add Fee</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="row g-2">
                        <div class="col-md-4">
                            <label class="form-label small">Fee Code</label>
                            <input type="text" class="form-control form-control-sm" value="MP-FEE">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label small">Description</label>
                            <input type="text" class="form-control form-control-sm" value="Mayor’s Permit Fee">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small">Basis</label>
                            <select class="form-select form-select-sm">
                                <option selected>Fixed</option>
                                <option>Gross-based</option>
                                <option>Headcount</option>
                                <option>Schedule</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small">Qty</label>
                            <input type="number" class="form-control form-control-sm text-end" value="1">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Rate</label>
                            <input type="text" class="form-control form-control-sm text-end" value="2000.00">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small">Amount</label>
                            <input type="text" class="form-control form-control-sm text-end" value="2000.00">
                        </div>
                    </form>
                    <div class="small text-muted mt-2">
                        MVP: static only. Later, load from “Fee Schedules”.
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary btn-sm"><i class="bi bi-save me-1"></i>Add</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Adjustments Modal (static) --}}
    <div class="modal fade" id="modalAdjustments" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"><i class="bi bi-sliders me-2"></i>Adjustments</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="row g-2">
                        <div class="col-md-6">
                            <label class="form-label small">Surcharge (%)</label>
                            <input type="number" class="form-control form-control-sm text-end" value="0">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">Interest (%)</label>
                            <input type="number" class="form-control form-control-sm text-end" value="0">
                        </div>
                        <div class="col-12">
                            <label class="form-label small">Discount (₱)</label>
                            <input type="number" class="form-control form-control-sm text-end" value="0">
                        </div>
                    </form>
                    <div class="small text-muted mt-2">
                        MVP only. Logic comes later based on filing dates & ordinance rules.
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary btn-sm"><i class="bi bi-check2-circle me-1"></i>Apply</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            // ---------- Static demo data -----------
            var appData = [{
                    appNo: 'APP-2025-000123',
                    type: 'RENEWAL',
                    owner: 'Juan Dela Cruz',
                    tin: '123-456-789',
                    contact: '0917 123 4567',
                    business: 'DC Trading',
                    line: 'Retail (Non-food)',
                    gross: 3500000
                },
                {
                    appNo: 'APP-2025-000222',
                    type: 'NEW',
                    owner: 'Maria Santos',
                    tin: '234-567-890',
                    contact: '0918 222 3333',
                    business: 'MS Boutique',
                    line: 'Retail (Clothing)',
                    gross: 500000
                },
                {
                    appNo: 'APP-2025-000333',
                    type: 'AMENDMENT',
                    owner: 'Jose Reyes',
                    tin: '345-678-901',
                    contact: '0919 111 2222',
                    business: 'JR Logistics',
                    line: 'Warehouse',
                    gross: 12000000
                }
            ];

            // sample fees we’ll load after selection (purely static)
            function getStaticFeesFor(app) {
                // pretend we compute based on line/gross
                var busTax = (app.gross * 0.015);
                return [{
                        code: 'BUS-TAX',
                        desc: 'Business Tax (' + app.line + ')',
                        basis: 'Gross: ₱' + fmtNum(app.gross) + ' x 1.5%',
                        qty: 1,
                        rate: '—',
                        amount: busTax,
                        surcharge: 0,
                        interest: 0
                    },
                    {
                        code: 'MP-FEE',
                        desc: 'Mayor’s Permit Fee',
                        basis: 'Fixed',
                        qty: 1,
                        rate: 2000,
                        amount: 2000,
                        surcharge: 0,
                        interest: 0
                    },
                    {
                        code: 'SAN-FEE',
                        desc: 'Sanitary Inspection Fee',
                        basis: 'Heads: 10 x ₱100',
                        qty: 10,
                        rate: 100,
                        amount: 1000,
                        surcharge: 0,
                        interest: 0
                    },
                    {
                        code: 'BFP-FEE',
                        desc: 'Fire Safety Inspection (BFP)',
                        basis: 'Schedule-based',
                        qty: 1,
                        rate: 1500,
                        amount: 1500,
                        surcharge: 0,
                        interest: 0
                    },
                ];
            }

            // ---------- Utilities ----------
            function fmtNum(n) {
                return (Number(n) || 0).toLocaleString('en-PH', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function peso(n) {
                return '₱ ' + fmtNum(n);
            }

            // ---------- App Picker DataTable ----------
            var appPickerTable = $('#tblAppPicker').DataTable({
                paging: true,
                searching: true,
                info: true,
                ordering: true,
                columnDefs: [{
                    targets: [6],
                    className: 'text-end'
                }, {
                    targets: [0],
                    orderable: false
                }],
                data: appData.map(function(a) {
                    return [
                        '', a.appNo, a.type, a.owner, a.business, a.line, fmtNum(a.gross)
                    ];
                }),
                createdRow: function(row, data, dataIndex) {
                    // add radio selector in first column
                    $('td:eq(0)', row).html('<input type="radio" name="appPick" value="' + appData[
                        dataIndex].appNo + '">');
                }
            });

            var selectedApp = null;
            var selectedFees = [];
            var feesDT = $('#feesTable').DataTable({
                paging: false,
                searching: false,
                info: false,
                ordering: false,
                columnDefs: [{
                        targets: [3, 4, 5, 6, 7, 8],
                        className: 'text-end'
                    },
                    {
                        targets: [9],
                        className: 'text-center'
                    }
                ],
                data: [] // empty until choose app
            });

            // render fees rows into DataTable
            function renderFees() {
                feesDT.clear();
                selectedFees.forEach(function(f) {
                    feesDT.row.add([
                        f.code,
                        f.desc,
                        f.basis,
                        '<span class="d-block text-end">' + fmtNum(f.qty) + '</span>',
                        '<span class="d-block text-end">' + (isNaN(f.rate) ? f.rate : fmtNum(f
                            .rate)) + '</span>',
                        '<span class="d-block text-end">' + fmtNum(f.amount) + '</span>',
                        '<span class="d-block text-end">' + fmtNum(f.surcharge) + '</span>',
                        '<span class="d-block text-end">' + fmtNum(f.interest) + '</span>',
                        '<span class="d-block text-end">' + fmtNum(f.amount + f.surcharge + f
                            .interest) + '</span>',
                        '<div class="btn-group btn-group-sm">' +
                        '<button class="btn btn-primary" disabled><i class="bi bi-pencil"></i></button>' +
                        '<button class="btn btn-danger" disabled><i class="bi bi-trash"></i></button>' +
                        '</div>'
                    ]);
                });
                feesDT.draw();
                computeTotals();
            }

            function computeTotals() {
                var amt = 0,
                    sur = 0,
                    intt = 0,
                    tot = 0;
                selectedFees.forEach(function(f) {
                    amt += f.amount;
                    sur += f.surcharge;
                    intt += f.interest;
                });
                tot = amt + sur + intt;

                $('#ftAmount').text(fmtNum(amt));
                $('#ftSurcharge').text(fmtNum(sur));
                $('#ftInterest').text(fmtNum(intt));
                $('#ftTotal').text(fmtNum(tot));

                $('#sumAssessed').text(peso(amt));
                $('#sumSurcharges').text(peso(sur));
                $('#sumInterests').text(peso(intt));
                $('#sumDiscounts').text('₱ 0.00');
                $('#sumTotal').text(peso(tot));
            }

            function showSelectedApp(app) {
                selectedApp = app;
                $('#assessmentWorkArea').removeClass('d-none');

                // fill details
                $('#lblType').text(app.type);
                $('#badgeStatus').removeClass('text-bg-secondary').addClass('text-bg-info').text(app.type);
                $('#lblOwner').text(app.owner);
                $('#lblTin').text('TIN: ' + app.tin);
                $('#lblContact').text('Contact: ' + app.contact);
                $('#lblAppNo').text(app.appNo);
                $('#lblBusiness').text(app.business);
                $('#lblLine').text('Line: ' + app.line);
                $('#lblGross').text('Gross Receipts (Prev. Yr): ' + peso(app.gross));

                // enable fee buttons + save
                $('#btnAddFee, #btnAdjustments, #btnSaveLock, #btnPrintSOA').prop('disabled', false);

                // load static fees for demo
                selectedFees = getStaticFeesFor(app);
                renderFees();

                // receipt still locked
                $('#btnProceedReceipt').prop('disabled', true);
            }

            // ---------- Events ----------
            // Browse: enable "Use Selected" when a row radio is clicked
            $('#tblAppPicker').on('change', 'input[name="appPick"]', function() {
                $('#btnUseSelected').prop('disabled', false);
            });

            $('#btnUseSelected').on('click', function() {
                var val = $('input[name="appPick"]:checked').val();
                var app = appData.find(a => a.appNo === val);
                if (app) {
                    showSelectedApp(app);
                    var picker = bootstrap.Modal.getInstance(document.getElementById('modalAppPicker'));
                    picker.hide();
                }
            });

            // Quick Find: by exact app number OR by name/business (first match)
            $('#btnQuickFind').on('click', function() {
                var no = $('#txtAppNo').val().trim();
                var name = $('#txtName').val().trim().toLowerCase();
                var app = null;

                if (no) {
                    app = appData.find(a => a.appNo.toLowerCase() === no.toLowerCase());
                }
                if (!app && name) {
                    app = appData.find(a =>
                        a.owner.toLowerCase().includes(name) || a.business.toLowerCase().includes(name)
                    );
                }

                if (app) {
                    showSelectedApp(app);
                } else {
                    // fallback: open modal and prefilter
                    $('#modalAppPicker').modal('show');
                    appPickerTable.search(name || no).draw();
                }
            });

            // Save/Lock -> enables Proceed to Receipt
            $('#btnSaveLock').on('click', function() {
                $(this).prop('disabled', true);
                $('#btnProceedReceipt').prop('disabled', false);
                $('#badgeStatus').removeClass('text-bg-info').addClass('text-bg-success').text('LOCKED');
            });
        });
    </script>
@endpush