@extends('layouts.app')

@section('title', 'Applications › Endorsements')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <h1 class="h4 mb-0">Endorsements (Health, Zoning, BFP, etc.)</h1>
                <small class="text-muted">Static demo list • shows inter-agency endorsements routing</small>
            </div>
            <a href="{{ route('applications.index') }}" class="btn btn-danger btn-sm">
                <i class="bi bi-arrow-left"></i> Back to Applications
            </a>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <form class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label mb-0 small">Endorsement</label>
                        <select class="form-select form-select-sm" id="filterEndorseType">
                            <option value="">All</option>
                            <option>Sanitary/Health</option>
                            <option>Zoning</option>
                            <option>Fire Safety (BFP)</option>
                            <option>Environmental</option>
                            <option>Engineering</option>
                            <option>Tricycle/Transport</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-0 small">Status</label>
                        <select class="form-select form-select-sm" id="filterEndorseStatus">
                            <option value="">All</option>
                            <option>Pending</option>
                            <option>For Inspection</option>
                            <option>Complied</option>
                            <option>Approved</option>
                            <option>Disapproved</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-0 small">Application Type</label>
                        <select class="form-select form-select-sm" id="filterAppType">
                            <option value="">All</option>
                            <option>New</option>
                            <option>Renewal</option>
                            <option>Amendment</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="button" class="btn btn-primary btn-sm me-2" id="btnApplyEndorseFilters">
                            <i class="bi bi-funnel"></i> Apply
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnResetEndorseFilters">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="endorsementsTable" class="table table-striped table-hover table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="bg-success text-white">Tracking No.</th>
                                <th class="bg-success text-white">Business Name</th>
                                <th class="bg-success text-white">Owner</th>
                                <th class="bg-success text-white">Application</th>
                                <th class="bg-success text-white">Endorsement</th>
                                <th class="bg-success text-white">Assigned Office</th>
                                <th class="bg-success text-white">Inspector</th>
                                <th class="bg-success text-white">Date Requested</th>
                                <th class="bg-success text-white">Status</th>
                                <th class="bg-success text-white">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $rows = [
                                    [
                                        'track' => 'TRK-2025-0915-001',
                                        'biz' => 'Sunrise Mini Mart',
                                        'owner' => 'Juan Dela Cruz',
                                        'apptype' => 'Amendment',
                                        'endorse' => 'Zoning',
                                        'office' => 'CPDO - Zoning',
                                        'inspector' => 'Engr. P. Cruz',
                                        'date' => '2025-09-15',
                                        'status' => 'Approved',
                                    ],
                                    [
                                        'track' => 'TRK-2025-0917-004',
                                        'biz' => 'Blue Ocean Eatery',
                                        'owner' => 'Maria Santos',
                                        'apptype' => 'New',
                                        'endorse' => 'Sanitary/Health',
                                        'office' => 'City Health Office',
                                        'inspector' => 'Nurse A. Santos',
                                        'date' => '2025-09-17',
                                        'status' => 'For Inspection',
                                    ],
                                    [
                                        'track' => 'TRK-2025-0920-002',
                                        'biz' => 'TechCraft Solutions',
                                        'owner' => 'Pedro Reyes',
                                        'apptype' => 'Renewal',
                                        'endorse' => 'Fire Safety (BFP)',
                                        'office' => 'BFP - Fire Safety',
                                        'inspector' => 'SFO2 R. Dizon',
                                        'date' => '2025-09-20',
                                        'status' => 'Pending',
                                    ],
                                    [
                                        'track' => 'TRK-2025-0921-003',
                                        'biz' => 'Happy Paws Grooming',
                                        'owner' => 'Ana Dizon',
                                        'apptype' => 'New',
                                        'endorse' => 'Environmental',
                                        'office' => 'CENRO',
                                        'inspector' => 'Env. Officer L. Lim',
                                        'date' => '2025-09-21',
                                        'status' => 'Complied',
                                    ],
                                    [
                                        'track' => 'TRK-2025-1001-005',
                                        'biz' => 'Golden Harvest Trading',
                                        'owner' => 'Jose Tan',
                                        'apptype' => 'Renewal',
                                        'endorse' => 'Engineering',
                                        'office' => 'CEO - Engineering',
                                        'inspector' => 'Engr. M. Go',
                                        'date' => '2025-10-01',
                                        'status' => 'Approved',
                                    ],
                                    [
                                        'track' => 'TRK-2025-1007-007',
                                        'biz' => 'Lotus Spa & Wellness',
                                        'owner' => 'Liza Lim',
                                        'apptype' => 'Amendment',
                                        'endorse' => 'Fire Safety (BFP)',
                                        'office' => 'BFP - Fire Safety',
                                        'inspector' => 'FO1 J. Uy',
                                        'date' => '2025-10-07',
                                        'status' => 'Disapproved',
                                    ],
                                ];
                            @endphp

                            @foreach ($rows as $r)
                                <tr data-endorse="{{ $r['endorse'] }}" data-status="{{ $r['status'] }}"
                                    data-apptype="{{ $r['apptype'] }}">
                                    <td>{{ $r['track'] }}</td>
                                    <td>{{ $r['biz'] }}</td>
                                    <td>{{ $r['owner'] }}</td>
                                    <td><span class="badge bg-secondary-subtle text-secondary">{{ $r['apptype'] }}</span>
                                    </td>
                                    <td><span class="badge bg-info-subtle text-info">{{ $r['endorse'] }}</span></td>
                                    <td>{{ $r['office'] }}</td>
                                    <td>{{ $r['inspector'] }}</td>
                                    <td>{{ \Carbon\Carbon::parse($r['date'])->format('M d, Y') }}</td>
                                    <td>
                                        @php
                                            $statusClass =
                                                [
                                                    'Pending' => 'warning',
                                                    'For Inspection' => 'primary',
                                                    'Complied' => 'info',
                                                    'Approved' => 'success',
                                                    'Disapproved' => 'danger',
                                                ][$r['status']] ?? 'secondary';
                                        @endphp
                                        <span class="badge bg-{{ $statusClass }}">{{ $r['status'] }}</span>
                                    </td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-primary btn-route">
                                                <i class="bi bi-diagram-3"></i>
                                            </button>
                                            <button class="btn btn-outline-secondary btn-view">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-outline-dark">
                                                <i class="bi bi-three-dots"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Route/Timeline Modal -->
    <div class="modal fade" id="routeModal" 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">Endorsement Route</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="list-group" id="routeList">
                        <!-- populated by JS -->
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            const $table = $('#endorsementsTable').DataTable({
                responsive: true,
                pageLength: 10,
                order: [
                    [7, 'desc']
                ],
                columnDefs: [{
                    targets: -1,
                    orderable: false,
                    searchable: false
                }]
            });

            // Filters
            $('#btnApplyEndorseFilters').on('click', function() {
                const type = $('#filterEndorseType').val();
                const status = $('#filterEndorseStatus').val();
                const apptype = $('#filterAppType').val();

                $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                    const $row = $($table.row(dataIndex).node());
                    const rowType = ($row.data('endorse') + '');
                    const rowStatus = ($row.data('status') + '');
                    const rowAppType = ($row.data('apptype') + '');

                    const passType = !type || rowType === type;
                    const passStatus = !status || rowStatus === status;
                    const passAppType = !apptype || rowAppType === apptype;

                    return passType && passStatus && passAppType;
                });

                $table.draw();
                $.fn.dataTable.ext.search.pop();
            });

            $('#btnResetEndorseFilters').on('click', function() {
                $('#filterEndorseType').val('');
                $('#filterEndorseStatus').val('');
                $('#filterAppType').val('');
                $table.search('').columns().search('').draw();
            });

            // Simple static routing preview
            const routeTemplates = {
                'Sanitary/Health': [
                    ['Received at BPLO', '2025-09-10 08:21', 'BPLO Frontline'],
                    ['Forwarded to City Health', '2025-09-10 10:05', 'BPLO Encoder'],
                    ['Inspection Scheduled', '2025-09-12 09:00', 'CHO'],
                    ['Inspection Result Uploaded', '2025-09-13 16:30', 'CHO'],
                    ['Compliance Verified', '2025-09-14 14:22', 'BPLO Evaluator'],
                    ['Approved', '2025-09-15 09:10', 'BPLO Chief'],
                ],
                'Zoning': [
                    ['Received at BPLO', '2025-09-12 10:00', 'BPLO Frontline'],
                    ['Forwarded to CPDO-Zoning', '2025-09-12 14:00', 'BPLO Encoder'],
                    ['Assessment Cleared', '2025-09-13 15:45', 'CPDO-Zoning'],
                    ['Approved', '2025-09-14 10:30', 'BPLO Chief'],
                ],
                'Fire Safety (BFP)': [
                    ['Received at BPLO', '2025-09-18 11:12', 'BPLO Frontline'],
                    ['Forwarded to BFP', '2025-09-18 13:05', 'BPLO Encoder'],
                    ['Inspection Scheduled', '2025-09-20 08:00', 'BFP'],
                    ['FSIC Issued', '2025-09-21 16:00', 'BFP'],
                    ['Approved', '2025-09-22 09:20', 'BPLO Chief'],
                ],
                'Environmental': [
                    ['Received at BPLO', '2025-09-19 09:32', 'BPLO Frontline'],
                    ['Forwarded to CENRO', '2025-09-19 11:40', 'BPLO Encoder'],
                    ['Compliance Submitted', '2025-09-20 14:15', 'Applicant'],
                    ['Complied', '2025-09-21 10:00', 'CENRO'],
                    ['Approved', '2025-09-21 16:10', 'BPLO Chief'],
                ],
                'Engineering': [
                    ['Received at BPLO', '2025-09-30 13:25', 'BPLO Frontline'],
                    ['Forwarded to CEO', '2025-09-30 15:00', 'BPLO Encoder'],
                    ['Structural Review Completed', '2025-10-01 10:40', 'CEO'],
                    ['Approved', '2025-10-01 15:05', 'BPLO Chief'],
                ],
                'Tricycle/Transport': [
                    ['Received at BPLO', '2025-09-25 08:10', 'BPLO Frontline'],
                    ['Forwarded to CTO-TODA', '2025-09-25 09:00', 'BPLO Encoder'],
                    ['Motorpool Inspection', '2025-09-26 13:00', 'CTO'],
                    ['Approved', '2025-09-27 10:10', 'BPLO Chief'],
                ],
            };

            $(document).on('click', '.btn-route', function() {
                const $tr = $(this).closest('tr');
                const endorse = $tr.find('td:eq(4)').text().trim();
                const route = routeTemplates[endorse] || [];

                const html = route.map(([step, when, by], i) => `
        <li class="list-group-item d-flex align-items-start">
          <div class="me-3">
            <span class="badge bg-secondary">${i+1}</span>
          </div>
          <div>
            <div class="fw-semibold">${step}</div>
            <div class="small text-muted">${when} • ${by}</div>
          </div>
        </li>
      `).join('');

                $('#routeList').html(html || '<li class="list-group-item">No route available</li>');
                const modal = new bootstrap.Modal(document.getElementById('routeModal'));
                modal.show();
            });
        });
    </script>
@endpush