@extends('master')
@push('styles')
    <style>
        /* ── LAPORAN PAGE ── */
        .lap-filter-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            padding: 18px 22px;
            margin-bottom: 16px;
        }
        .lap-filter-head {
            font-family: 'Sora', sans-serif;
            font-size: 13px; font-weight: 600;
            color: var(--gray-600);
            margin-bottom: 14px;
            display: flex; align-items: center; gap: 6px;
        }
        .lap-filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            align-items: flex-end;
        }
        .lap-filter-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1 1 180px;
        }
        .lap-filter-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--gray-600);
        }
        .lap-filter-actions {
            display: flex;
            gap: 8px;
            padding-bottom: 2px;
            flex-basis: 100%;
            justify-content: flex-end;
        }
        .lap-filter-input {
            height: 40px;
            padding: 8px 12px;
            font-size: 13px;
            border-radius: 10px;
            border: 1.5px solid var(--gray-200);
            background: var(--white);
            color: var(--gray-900);
            outline: none; width: 100%;
            transition: border-color 0.15s;
            font-family: 'DM Sans', sans-serif;
        }
        .lap-filter-input:focus { border-color: var(--red-main); }
        .btn-lap-filter {
            height: 40px;
            padding: 0 20px;
            font-size: 13px; font-weight: 600;
            background: var(--red-main); color: white; border: none;
            border-radius: 10px; cursor: pointer;
            white-space: nowrap; transition: background 0.15s;
            font-family: 'Sora', sans-serif;
            box-shadow: 0 3px 10px rgba(163,45,45,0.22);
        }
        .btn-lap-filter:hover { background: var(--red-800); }
        .btn-lap-reset {
            height: 40px;
            padding: 0 14px;
            font-size: 13px; font-weight: 500;
            background: var(--white); color: var(--gray-600);
            border: 1.5px solid var(--gray-200);
            border-radius: 10px; cursor: pointer;
            white-space: nowrap; transition: background 0.15s;
            font-family: 'DM Sans', sans-serif;
        }
        .btn-lap-reset:hover { background: var(--gray-50); }
        .btn-lap-export {
            height: 40px;
            padding: 0 16px;
            font-size: 13px; font-weight: 600;
            background: var(--white); color: var(--gray-700);
            border: 1.5px solid var(--gray-200);
            border-radius: 10px; cursor: pointer;
            white-space: nowrap; transition: all 0.15s;
            font-family: 'Sora', sans-serif;
            display: flex; align-items: center; gap: 6px;
        }
        .btn-lap-export:hover { background: var(--gray-50); border-color: var(--gray-400); }

        /* Tom-select fix */
        .ts-control .item {
            display: inline-flex !important;
        }

        /* Table Card */
        .lap-table-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            overflow: hidden;
        }
        .lap-table-header {
            padding: 16px 22px;
            display: flex; align-items: center; justify-content: space-between;
            border-bottom: 1px solid var(--gray-200);
            flex-wrap: wrap; gap: 10px;
        }
        .lap-table-header-left { display: flex; align-items: center; gap: 10px; }
        .lap-table-title {
            font-family: 'Sora', sans-serif;
            font-size: 15px; font-weight: 600; color: var(--gray-900);
        }
        .lap-badge-count {
            font-size: 11px; font-weight: 600; padding: 3px 9px;
            background: var(--red-pale); color: var(--red-800);
            border-radius: 20px; border: 1px solid var(--red-light);
        }
        .lap-table-scroll {
            overflow-x: auto;
            position: relative;
        }
        .lap-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
        .lap-table thead th {
            padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600;
            color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            white-space: nowrap; font-family: 'Sora', sans-serif;
        }
        .lap-table thead th.sortable { cursor: pointer; user-select: none; }
        .lap-table thead th.sortable:hover { color: var(--gray-900); }
        .sort-icon-lap { margin-left: 3px; opacity: 0.4; font-size: 10px; }
        .lap-table tbody tr {
            border-bottom: 1px solid var(--gray-100);
            transition: background 0.12s;
        }
        .lap-table tbody tr:last-child { border-bottom: none; }
        .lap-table tbody tr:hover { background: var(--gray-50); }
        .lap-table tbody td { padding: 12px 16px; vertical-align: middle; }
        .td-no-lap { color: var(--gray-400); font-size: 12px; }

        /* Role badge (reuse from reg) */
        .role-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 3px 10px; border-radius: 20px; font-family: 'Sora', sans-serif;
        }
        .role-fa    { background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; }
        .role-agro  { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }
        .role-mm    { background: #FAEEDA; color: #854F0B; border: 1px solid #FAC775; }

        /* Empty */
        .lap-empty {
            padding: 48px 20px; text-align: center;
            color: var(--gray-400); font-size: 13px;
        }
        /* Pagination */
        .lap-table-footer {
            padding: 14px 22px;
            display: flex; align-items: center; justify-content: space-between;
            border-top: 1px solid var(--gray-200);
            flex-wrap: wrap; gap: 10px;
        }
        .pag-info-lap { font-size: 12px; color: var(--gray-400); }
        .pag-btns-lap { display: flex; align-items: center; gap: 4px; }
        .pag-btn-lap {
            min-width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            border: 1.5px solid var(--gray-200);
            border-radius: 8px; background: var(--white);
            color: var(--gray-900); font-size: 12px; font-weight: 600;
            cursor: pointer; transition: all 0.12s; padding: 0 8px;
            font-family: 'Sora', sans-serif;
        }
        .pag-btn-lap:hover:not(:disabled) { background: var(--gray-100); }
        .pag-btn-lap.active { background: var(--red-main); color: white; border-color: var(--red-main); }
        .pag-btn-lap:disabled { opacity: 0.3; cursor: not-allowed; }

        /* Loading Overlay */
        .table-loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(2px);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            color: var(--gray-600);
            font-size: 14px;
            text-align: center;
        }
        .loading-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid var(--gray-200);
            border-top: 3px solid var(--red-main);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
@endpush

@section('content')
    <div class="page-view active">
        <div>
            <div class="lap-filter-card">
                <div class="lap-filter-head">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M2 4h12M4 8h8M6 12h4"/></svg>
                    Filter Laporan
                </div>
                <div class="lap-filter-row">
                    @canany(['isSuperAdmin', 'isAdmin'])
                        <div class="lap-filter-field">
                            <div class="lap-filter-label">Marketing Manager</div>
                            <select class="lap-filter-input" id="dashFilterMk" multiple>
                            </select>
                        </div>
                        <div class="lap-filter-field" >
                            <div class="lap-filter-label">Agronomis</div>
                            <select class="lap-filter-input" id="dashFilterAgronomis" multiple>
                            </select>
                        </div>
                        <div class="lap-filter-field">
                            <div class="lap-filter-label">FA</div>
                            <select class="lap-filter-input" id="dashFilterFA" multiple>
                            </select>
                        </div>
                    @endcanany
                    @can('isMK')
                        <div class="lap-filter-field" >
                            <div class="lap-filter-label">Agronomis</div>
                            <select class="lap-filter-input" id="dashFilterAgronomis" multiple>
                            </select>
                        </div>
                        <div class="lap-filter-field">
                            <div class="lap-filter-label">FA</div>
                            <select class="lap-filter-input" id="dashFilterFA" multiple>
                            </select>
                        </div>
                    @endcan
                    @can('isAgronomist')
                        <div class="lap-filter-field">
                            <div class="lap-filter-label">FA</div>
                            <select class="lap-filter-input" id="dashFilterFA" multiple>
                            </select>
                        </div>
                    @endcan
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Pilih Tanggal</div>
                        <input class="lap-filter-input" type="text" name="daterange" id="date-range" />
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Urutkan Berdasarkan</div>
                        <select class="lap-filter-input" id="sort-by">
                            <option value="check_in">Tanggal Check-in</option>
                            <option value="check_out">Tanggal Check-out</option>
                            <option value="users.name">Nama Pengguna</option>
                        </select>
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Arah Urutan</div>
                        <select class="lap-filter-input" id="sort-dir">
                            <option value="desc">Terbaru ke Terlama</option>
                            <option value="asc">Terlama ke Terbaru</option>
                        </select>
                    </div>
                    <div class="lap-filter-actions">
                        <button class="btn-lap-filter" onclick="applyReportFilter()">Terapkan</button>
                        <button class="btn-lap-reset" onclick="resetReportFilter()">Reset</button>
                        <button class="btn-lap-export" onclick="showToastLap('Fitur export akan segera tersedia.','')">
                            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 10v3h10v-3M8 2v8M5 7l3 3 3-3"/></svg>
                            Export
                        </button>
                    </div>
                </div>
            </div>

            <!-- Table -->
            <div class="lap-table-card">
                <div class="lap-table-header">
                    <div class="lap-table-header-left">
                        <span class="lap-table-title">Log Absensi</span>
                        <span class="lap-badge-count" id="lap-badge-count">0 data</span>
                    </div>
                </div>
                <div class="lap-table-scroll">
                    <div id="table-loading" class="table-loading-overlay" style="display: none;">
                        <div class="loading-content">
                            <div class="loading-spinner"></div>
                            <span>Memuat data...</span>
                        </div>
                    </div>
                    <table id="lap-table" class="lap-table">
                        <thead>
                        <tr>
                            <th style="width:44px">No.</th>
                            <th class="sortable" data-sort-by="users.name">Nama</th>
                            <th>Jabatan</th>
                            <th class="sortable" data-sort-by="check_in">Check-in</th>
                            <th class="sortable" data-sort-by="check_out">Check-out</th>
                        </tr>
                        </thead>
                        <tbody id="lap-tbl-body"></tbody>
                    </table>
                </div>
                <div id="lap-empty" class="lap-empty" style="display:none">Tidak ada data yang ditemukan.</div>
                <div class="lap-table-footer">
                    <div class="pag-info-lap" id="lap-pag-info"></div>
                    <div class="pag-btns-lap" id="lap-pag-btns"></div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        window.Laravel = {
            routes: {
                query: '{{ route("report.query") }}',
                listMk: '{{ route("team.list-marketing-managers") }}',
                listAgronomis: '{{ route("team.list-agronomists") }}',
                listFa: '{{ route("team.list-fa") }}',
            },
            userRole: '{{ Auth::user()->role->type_role->value }}'
        };
    </script>
    @vite(['resources/js/report.js'])
@endpush