@extends('master')
@push('styles')
    <!-- Mapbox CSS -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        /* ── MAPBOX CUSTOM STYLING ── */
        .mapboxgl-popup-content {
            padding: 12px;
            border-radius: 8px;
            font-family: 'DM Sans', sans-serif;
        }
        .mapboxgl-popup-content h4 {
            margin: 0 0 8px 0;
            font-family: 'Sora', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-900);
        }
        .mapboxgl-popup-content p {
            margin: 4px 0;
            font-size: 12px;
            color: var(--gray-600);
        }
        .mapboxgl-popup-close-button {
            width: 24px;
            height: 24px;
            font-size: 20px;
        }

        /* ── 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; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
        .lap-filter-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 140px; min-width: 120px; }
        .lap-filter-label { font-size: 11px; font-weight: 500; color: var(--gray-600); }
        .lap-filter-input {
            padding: 8px 10px; font-size: 13px;
            border-radius: 10px;
            border: 1.5px solid var(--gray-200);
            background: var(--gray-50);
            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 {
            padding: 8px 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 {
            padding: 8px 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 {
            padding: 8px 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); }

        /* Map Card */
        .lap-map-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .lap-map-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-map-title {
            font-family: 'Sora', sans-serif;
            font-size: 15px; font-weight: 600; color: var(--gray-900);
            display: flex; align-items: center; gap: 8px;
        }
        .lap-map-body {
            position: relative;
            background: #f0f4f8;
            height: 380px;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .lap-map-placeholder {
            text-align: center; color: var(--gray-400);
        }
        .lap-map-placeholder svg { margin-bottom: 10px; opacity: 0.4; }
        .lap-map-placeholder p { font-size: 13px; font-family: 'DM Sans', sans-serif; }

        /* Map pin legend */
        .map-legend {
            padding: 12px 22px;
            display: flex; gap: 16px; flex-wrap: wrap;
            border-top: 1px solid var(--gray-200);
            background: var(--gray-50);
        }
        .map-legend-item {
            display: flex; align-items: center; gap: 6px;
            font-size: 11px; font-weight: 500; color: var(--gray-600);
            font-family: 'DM Sans', sans-serif;
        }
        .map-dot {
            width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
        }
        .dot-dealer   { background: #185FA5; }
        .dot-retailer { background: #3B6D11; }
        .dot-farmer   { background: #854F0B; }
        .dot-checkin  { background: #A32D2D; }

        /* Stats Row */
        .lap-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        @media (max-width: 900px) { .lap-stats-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 500px) { .lap-stats-grid { grid-template-columns: 1fr; } }

        .lap-stat-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            padding: 16px 20px;
        }
        .lap-stat-label {
            font-size: 11px; font-weight: 600; color: var(--gray-500);
            font-family: 'Sora', sans-serif; text-transform: uppercase;
            letter-spacing: 0.05em; margin-bottom: 8px;
            display: flex; align-items: center; gap: 6px;
        }
        .lap-stat-val {
            font-size: 28px; font-weight: 700; color: var(--gray-900);
            font-family: 'Sora', sans-serif; line-height: 1;
            margin-bottom: 4px;
        }
        .lap-stat-sub { font-size: 11px; color: var(--gray-400); font-family: 'DM Sans', sans-serif; }

        /* 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; }
        .lap-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 800px; }
        .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; }

        /* Visit type badge */
        .visit-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 3px 10px; border-radius: 20px; font-family: 'Sora', sans-serif;
        }
        .visit-dealer   { background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; }
        .visit-retailer { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }
        .visit-farmer   { background: #FAEEDA; color: #854F0B; border: 1px solid #FAC775; }
        .visit-checkin  { background: var(--red-pale); color: var(--red-800); border: 1px solid var(--red-light); }

        /* 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; }

        .coord-text { font-size: 11px; color: var(--gray-400); font-family: 'DM Sans', sans-serif; }

        /* 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; }

        /* Photo preview */
        .photo-thumb {
            width: 36px; height: 36px; border-radius: 8px;
            object-fit: cover; border: 1px solid var(--gray-200);
            cursor: pointer; transition: opacity 0.12s;
        }
        .photo-thumb:hover { opacity: 0.8; }
        .photo-none { width: 36px; height: 36px; border-radius: 8px; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }

        /* Lightbox */
        .lightbox-backdrop {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.75); z-index: 700;
            align-items: center; justify-content: center;
        }
        .lightbox-backdrop.open { display: flex; }
        .lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 12px; }
        .lightbox-close {
            position: absolute; top: 20px; right: 20px;
            background: rgba(255,255,255,0.15); border: none; color: white;
            border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 18px; line-height: 1;
        }
        .lightbox-close:hover { background: rgba(255,255,255,0.25); }

        /* Tabs */
        .lap-tabs {
            display: flex; gap: 4px; margin-bottom: 16px;
            background: var(--gray-100); border-radius: 12px; padding: 4px;
            width: fit-content;
        }
        .lap-tab {
            padding: 7px 18px; font-size: 13px; font-weight: 600;
            border: none; background: none; border-radius: 9px;
            cursor: pointer; color: var(--gray-500); font-family: 'Sora', sans-serif;
            transition: all 0.15s; white-space: nowrap;
        }
        .lap-tab.active {
            background: var(--white); color: var(--gray-900);
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
    </style>
@endpush

@section('content')
    <div class="page-view active">

        <!-- Tabs -->
        <div class="lap-tabs">
            <button class="lap-tab active" onclick="switchTab('absensi', this)">Absensi & Visit</button>
            <button class="lap-tab" onclick="switchTab('map', this)">Peta Visit</button>
        </div>

        <!-- ── TAB: ABSENSI & VISIT ── -->
        <div id="tab-absensi">

            <!-- Stats -->
            <div class="lap-stats-grid" id="stats-grid">
                <div class="lap-stat-card">
                    <div class="lap-stat-label">
                        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="8" cy="8" r="6"/><path d="M8 5v3.5L10 10"/></svg>
                        Total Absensi
                    </div>
                    <div class="lap-stat-val" id="stat-absensi">0</div>
                    <div class="lap-stat-sub">check-in hari ini</div>
                </div>
                <div class="lap-stat-card">
                    <div class="lap-stat-label">
                        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="3" width="12" height="10" rx="2"/><path d="M5 3V2M11 3V2M2 7h12"/></svg>
                        Visit Dealer
                    </div>
                    <div class="lap-stat-val" id="stat-dealer">0</div>
                    <div class="lap-stat-sub">total kunjungan</div>
                </div>
                <div class="lap-stat-card">
                    <div class="lap-stat-label">
                        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 13V7l5-4 5 4v6"/><path d="M6 13v-3h4v3"/></svg>
                        Visit Retailer
                    </div>
                    <div class="lap-stat-val" id="stat-retailer">0</div>
                    <div class="lap-stat-sub">total kunjungan</div>
                </div>
                <div class="lap-stat-card">
                    <div class="lap-stat-label">
                        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 12c0-3 2-5 4-5s4 2 4 5"/><circle cx="10" cy="4" r="2"/></svg>
                        Visit Farmer
                    </div>
                    <div class="lap-stat-val" id="stat-farmer">0</div>
                    <div class="lap-stat-sub">total kunjungan</div>
                </div>
            </div>

            <!-- Filter -->
            <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">
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Nama FA / Agronomis</div>
                        <input class="lap-filter-input" id="lf-nama" placeholder="Cari nama..." />
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Jabatan</div>
                        <select class="lap-filter-input" id="lf-role">
                            <option value="">Semua</option>
                            <option value="FA">FA</option>
                            <option value="Agronomi">Agronomi</option>
                            <option value="Marketing Manager">Marketing Manager</option>
                        </select>
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Tipe Aktivitas</div>
                        <select class="lap-filter-input" id="lf-tipe">
                            <option value="">Semua</option>
                            <option value="Check-in">Check-in / Absensi</option>
                            <option value="Dealer">Visit Dealer</option>
                            <option value="Retailer">Visit Retailer</option>
                            <option value="Farmer">Visit Farmer</option>
                        </select>
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Dari Tanggal</div>
                        <input class="lap-filter-input" type="date" id="lf-dari" />
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Sampai Tanggal</div>
                        <input class="lap-filter-input" type="date" id="lf-sampai" />
                    </div>
                    <div style="display:flex;gap:8px;align-self:flex-end;">
                        <button class="btn-lap-filter" onclick="applyLapFilter()">Terapkan</button>
                        <button class="btn-lap-reset" onclick="resetLapFilter()">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 & Visit</span>
                        <span class="lap-badge-count" id="lap-badge-count">0 data</span>
                    </div>
                </div>
                <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>
                <div class="lap-table-scroll">
                    <table id="lap-table" class="lap-table">
                        <thead>
                        <tr>
                            <th style="width:44px">No.</th>
                            <th>Nama</th>
                            <th>Jabatan</th>
                            <th>Tipe Aktivitas</th>
                            <th>Tujuan / Customer</th>
                            <th>Foto</th>
                            <th>Koordinat</th>
                            <th>Tanggal & Jam</th>
                            <th>Keterangan</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>

        <!-- ── TAB: PETA ── -->
        <div id="tab-map" style="display:none">
            <!-- Filter for map -->
            <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 Peta
                </div>
                <div class="lap-filter-row">
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">FA / Agronomis</div>
                        <select class="lap-filter-input" id="mf-fa">
                            <option value="">Semua</option>
                            <option value="Ahmad Fauzi">Ahmad Fauzi</option>
                            <option value="Dewi Anggraini">Dewi Anggraini</option>
                            <option value="Rizky Pratama">Rizky Pratama</option>
                            <option value="Siti Rahayu">Siti Rahayu</option>
                            <option value="Fajar Maulana">Fajar Maulana</option>
                        </select>
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Jabatan</div>
                        <select class="lap-filter-input" id="mf-role">
                            <option value="">Semua</option>
                            <option value="FA">FA</option>
                            <option value="Agronomi">Agronomi</option>
                        </select>
                    </div>
                    <div class="lap-filter-field">
                        <div class="lap-filter-label">Tanggal</div>
                        <input class="lap-filter-input" type="date" id="mf-tgl" />
                    </div>
                    <div style="display:flex;gap:8px;align-self:flex-end;">
                        <button class="btn-lap-filter" onclick="showToastLap('Filter peta diterapkan.','')">Terapkan</button>
                        <button class="btn-lap-reset" onclick="document.getElementById('mf-fa').value='';document.getElementById('mf-role').value='';document.getElementById('mf-tgl').value=''">Reset</button>
                    </div>
                </div>
            </div>

            <div class="lap-map-card">
                <div class="lap-map-header">
                    <div class="lap-map-title">
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M8 2C5.8 2 4 3.8 4 6c0 3.3 4 8 4 8s4-4.7 4-8c0-2.2-1.8-4-4-4z"/><circle cx="8" cy="6" r="1.5"/></svg>
                        Peta Visit
                    </div>
                    <span style="font-size:12px;color:var(--gray-400);font-family:'DM Sans',sans-serif;" id="map-info">Memuat peta...</span>
                </div>
                <div class="lap-map-body" id="map">
                    <!-- Mapbox akan di-render di sini -->
                </div>
                <div class="map-legend">
                    <div class="map-legend-item"><div class="map-dot dot-dealer"></div> Visit Dealer</div>
                    <div class="map-legend-item"><div class="map-dot dot-retailer"></div> Visit Retailer</div>
                    <div class="map-legend-item"><div class="map-dot dot-farmer"></div> Visit Farmer</div>
                    <div class="map-legend-item"><div class="map-dot dot-checkin"></div> Check-in / Absensi</div>
                </div>
            </div>

            <!-- Visit points list -->
            <div class="lap-table-card">
                <div class="lap-table-header">
                    <div class="lap-table-header-left">
                        <span class="lap-table-title">Daftar Titik Koordinat</span>
                        <span class="lap-badge-count" id="map-badge-count">— titik</span>
                    </div>
                </div>
                <div class="lap-table-scroll">
                    <table class="lap-table">
                        <thead>
                        <tr>
                            <th style="width:44px">No.</th>
                            <th>Nama</th>
                            <th>Jabatan</th>
                            <th>Tipe</th>
                            <th>Tujuan</th>
                            <th>Koordinat Check-in</th>
                            <th>Koordinat Check-out</th>
                            <th>Tanggal</th>
                        </tr>
                        </thead>
                        <tbody id="map-tbl-body"></tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <!-- Lightbox -->
    <div class="lightbox-backdrop" id="lightbox" onclick="closeLightbox()">
        <button class="lightbox-close" onclick="closeLightbox()">×</button>
        <img class="lightbox-img" id="lightbox-img" src="" alt="Foto Visit" />
    </div>

    <!-- Toast -->
    <div class="toast" id="toast-lap"></div>
@endsection

@push('scripts')
    <!-- Mapbox GL JS -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
    <script>
        window.Laravel = {
            routes: {
                query: '{{ route("report.query") }}',
                mapboxToken: 'pk.eyJ1IjoiY2VjZTIzNCIsImEiOiJjbXAyMDd6NGgwMDJzMnNxOGh6OTRlZzBpIn0.fvPSOhpAiWnGGBavXnWkZA' // Replace with your token
            }
        };
    </script>
    @vite(['resources/js/report.js'])
@endpush