@extends('layouts.app')

@section('title', 'Applications')

@section('content')
    <div>
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0"><i class="bi bi-card-list me-2"></i>Applications</h4>
        </div>

        {{-- Top Filters (submit-free; just feeds DataTables ajax params) --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <form class="row g-2" id="filtersForm">
                    <div class="col-md-3">
                        <label class="form-label small text-muted">Quick Filter (q)</label>
                        <input type="text" id="fltQ" class="form-control form-control-sm"
                            placeholder="permit / type / status / remarks" value="{{ old('q', $q ?? '') }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small text-muted">Tax Year</label>
                        <input type="number" id="fltYear" class="form-control form-control-sm" placeholder="e.g. 2025"
                            value="{{ old('year', $year ?? '') }}">
                    </div>
                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="button" id="btnApply" class="btn btn-primary btn-sm">
                            <i class="bi bi-search me-1"></i> Apply
                        </button>
                        <button type="button" id="btnReset" class="btn btn-outline-secondary btn-sm">
                            <i class="bi bi-arrow-clockwise me-1"></i> Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Table --}}
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="appsTable" class="table table-sm table-bordered align-middle" style="width:100%">
                        <thead>
                            <tr>
                                <th class="bg-success text-white text-center">Application No</th>
                                <th class="bg-success text-white">Permit No</th>
                                <th class="bg-success text-white">Type</th>
                                <th class="bg-success text-white">Tax Year</th>
                                <th class="bg-success text-white">Filed At</th>
                                <th class="bg-success text-white">Status</th>
                                <th class="bg-success text-white">Remarks</th>
                                <th class="bg-success text-white">Created</th>
                                <th class="bg-success text-white" style="width:90px;">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="small text-muted mt-2">
                    Tip: Use the table’s search box for quick, global matching; top filters narrow the dataset before it
                    loads.
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Map statuses → Bootstrap row classes
            const statusClassMap = {
                // normalize to lowercase keys
                'approved': 'table-success',
                'active': 'table-success',
                'pending': 'table-warning',
                'for payment': 'table-warning',
                'under review': 'table-info',
                'processing': 'table-info',
                'rejected': 'table-danger',
                'denied': 'table-danger',
                'cancelled': 'table-danger',
                'canceled': 'table-secondary',
                'draft': 'table-light',
            };

            // all contextual classes we might add (used to cleanly reset)
            const rowClasses =
                'table-success table-warning table-danger table-info table-secondary table-light table-primary table-active';

            var table = $('#appsTable').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                lengthChange: true,
                order: [
                    [6, 'desc']
                ], // created_at desc
                ajax: {
                    url: "{{ route('applications.indexdt') }}",
                    data: function(d) {
                        d.q = $('#fltQ').val();
                        d.year = $('#fltYear').val();
                    }
                },
                columns: [{
                        data: 'application_no',
                        name: 'application_no'
                    },
                    {
                        data: 'permit_no',
                        name: 'permit_no'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'tax_year',
                        name: 'tax_year',
                        className: 'text-end'
                    },
                    {
                        data: 'filed_at',
                        name: 'filed_at'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'remarks',
                        name: 'remarks'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },
                ],

                // Color the whole row based on status
                rowCallback: function(row, data) {
                    // remove any previous contextual class (important on redraw)
                    $(row).removeClass(rowClasses);

                    // data.status can be text or HTML; get text safely
                    let statusText = '';
                    if (typeof data.status === 'string') {
                        // strip any HTML tags just in case
                        statusText = $('<div>').html(data.status).text().trim().toLowerCase();
                    }

                    const cls = statusClassMap[statusText];
                    if (cls) $(row).addClass(cls);
                }
            });

            $('#btnApply').on('click', function() {
                table.ajax.reload();
            });

            $('#btnReset').on('click', function() {
                $('#fltQ').val('');
                $('#fltYear').val('');
                table.search('').columns().search('').draw();
                table.ajax.reload();
            });
        });
    </script>
@endpush