@if (isset($akses->detail_klaim))
    @if ($akses->detail_klaim->view == 1)
        <input type="hidden" id="update" value="{{ $akses->detail_klaim->update }}">
        <input type="hidden" id="delete" value="{{ $akses->detail_klaim->delete }}">
        {{-- Hidden input tetap untuk JS baca value --}}
        <input type="hidden" id="filter_type" value="vehicle">

        <div class="card card-table">
            <div class="card-header" style="flex-direction: column; gap: 14px; align-items: stretch;">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="card-title">Daftar {{ $title }}</div>
                    <br>
                    <hr style="width: 100%; display: flex; margin-top: 0px; border: 1px dashed #ccc;">
                    <br>
                    <div class="d-flex align-items-center" style="gap: 8px; justify-content: flex-end;">
                        <button class="btn btn-secondary btn-sm" onclick="Klaim.exportExcel(this, event)">
                            <i class="fa-solid fa-file-export"></i> Export
                        </button>
                        @if ($akses->detail_klaim->insert == 1)
                            <button class="btn btn-primary btn-sm" onclick="Klaim.add(this, event)">
                                <i class="fa-solid fa-plus"></i> Tambah
                            </button>
                        @endif
                    </div>
                </div>

                {{-- Filter Tabs --}}
                <div class="page-tabs" id="klaim-filter-tabs">
                    <button class="tab-btn active" data-type="vehicle" onclick="Klaim.setKlaimFilter(this, 'vehicle')">
                        <i class="fa-solid fa-car" style="margin-right:5px;"></i> Kendaraan
                    </button>
                    <button class="tab-btn" data-type="pa" onclick="Klaim.setKlaimFilter(this, 'pa')">
                        <i class="fa-solid fa-person-walking" style="margin-right:5px;"></i> Personal Accident
                    </button>
                    <button class="tab-btn" data-type="cargo" onclick="Klaim.setKlaimFilter(this, 'cargo')">
                        <i class="fa-solid fa-box" style="margin-right:5px;"></i> Cargo
                    </button>
                    <button class="tab-btn" data-type="building" onclick="Klaim.setKlaimFilter(this, 'building')">
                        <i class="fa-solid fa-building" style="margin-right:5px;"></i> Building
                    </button>
                    <button class="tab-btn" data-type="other" onclick="Klaim.setKlaimFilter(this, 'other')">
                        <i class="fa-solid fa-ellipsis" style="margin-right:5px;"></i> Other
                    </button>
                </div>
            </div>
            <div class="card-body">
                <table id="table-data" class="dataTable" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>No Trans</th>
                            <th>No Polis</th>
                            <th>Lokasi Kejadian</th>
                            <th>Tgl Kejadian</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    @else
        @include('web.alert.message')
    @endif
@else
    @include('web.alert.message')
@endif