@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;
        }

        /* ── CUSTOMER DETAIL PAGE ── */
        .detail-header {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 20px;
        }
        .detail-back-btn {
            display: flex; align-items: center; gap: 6px;
            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;
            font-family: 'DM Sans', sans-serif; transition: all 0.15s;
            text-decoration: none;
        }
        .detail-back-btn:hover { background: var(--gray-50); }
        .detail-title {
            font-family: 'Sora', sans-serif;
            font-size: 20px; font-weight: 700; color: var(--gray-900);
        }

        /* Info Card */
        .detail-info-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            padding: 22px;
            margin-bottom: 16px;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        @media (max-width: 900px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .info-grid { grid-template-columns: 1fr; } }
        .info-item {
            display: flex; flex-direction: column; gap: 6px;
        }
        .info-label {
            font-size: 11px; font-weight: 600; color: var(--gray-500);
            font-family: 'Sora', sans-serif; text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .info-value {
            font-size: 14px; font-weight: 500; color: var(--gray-900);
            font-family: 'DM Sans', sans-serif;
        }
        .info-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 4px 12px; border-radius: 20px; font-family: 'Sora', sans-serif;
            width: fit-content;
        }
        .badge-dealer   { background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; }
        .badge-retailer { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }
        .badge-farmer   { background: #FAEEDA; color: #854F0B; border: 1px solid #FAC775; }

        /* Tabs */
        .detail-tabs {
            display: flex; gap: 4px; margin-bottom: 16px;
            background: var(--gray-100); border-radius: 12px; padding: 4px;
            width: fit-content;
        }
        .detail-tab {
            padding: 8px 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;
        }
        .detail-tab.active {
            background: var(--white); color: var(--gray-900);
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }

        /* FA List Card */
        .detail-fa-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .detail-card-header {
            padding: 18px 22px;
            border-bottom: 1px solid var(--gray-200);
            display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 10px;
        }
        .detail-card-title {
            font-family: 'Sora', sans-serif;
            font-size: 15px; font-weight: 600; color: var(--gray-900);
            display: flex; align-items: center; gap: 8px;
        }
        .detail-card-badge {
            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);
        }

        /* FA Grid */
        .fa-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            padding: 22px;
        }
        .fa-item {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            transition: all 0.2s;
            cursor: pointer;
        }
        .fa-item:hover {
            border-color: var(--red-main);
            box-shadow: 0 4px 12px rgba(163,45,45,0.12);
        }
        .fa-avatar {
            width: 64px; height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 700; font-size: 24px;
            margin: 0 auto 12px;
            font-family: 'Sora', sans-serif;
        }
        .fa-name {
            font-family: 'Sora', sans-serif;
            font-size: 13px; font-weight: 600; color: var(--gray-900);
            margin-bottom: 4px;
        }
        .fa-role {
            font-size: 11px; font-weight: 500; color: var(--gray-500);
            font-family: 'DM Sans', sans-serif;
            margin-bottom: 10px;
        }
        .fa-stat {
            font-size: 12px; font-weight: 600;
            color: var(--red-main); font-family: 'Sora', sans-serif;
        }

        /* Map Card */
        .detail-map-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .detail-map-body {
            position: relative;
            background: #f0f4f8;
            height: 380px;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .detail-map-placeholder {
            text-align: center; color: var(--gray-400);
        }
        .detail-map-placeholder svg { margin-bottom: 10px; opacity: 0.4; }
        .detail-map-placeholder p { font-size: 13px; font-family: 'DM Sans', sans-serif; }

        /* Map 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-checkin  { background: #A32D2D; }
        .dot-photo    { background: #3B6D11; }

        /* Visit Log Table */
        .detail-table-card {
            background: var(--white);
            border-radius: 14px;
            border: 1px solid var(--gray-200);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .detail-table-scroll { overflow-x: auto; }
        .detail-table {
            width: 100%; border-collapse: collapse; font-size: 13px; min-width: 800px;
        }
        .detail-table thead th {
            padding: 12px 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;
        }
        .detail-table tbody tr {
            border-bottom: 1px solid var(--gray-100);
            transition: background 0.12s;
        }
        .detail-table tbody tr:last-child { border-bottom: none; }
        .detail-table tbody tr:hover { background: var(--gray-50); }
        .detail-table tbody td { padding: 12px 16px; vertical-align: middle; }

        /* Visit Type Badge */
        .visit-type-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 4px 10px; border-radius: 20px; font-family: 'Sora', sans-serif;
        }
        .visit-type-checkin { background: var(--red-pale); color: var(--red-800); border: 1px solid var(--red-light); }
        .visit-type-photo   { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }

        /* Empty State */
        .detail-empty {
            padding: 48px 20px; text-align: center;
            color: var(--gray-400); font-size: 13px;
        }

        /* Pagination */
        .detail-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-detail { font-size: 12px; color: var(--gray-400); }
        .pag-btns-detail { display: flex; align-items: center; gap: 4px; }
        .pag-btn-detail {
            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-detail:hover:not(:disabled) { background: var(--gray-100); }
        .pag-btn-detail.active { background: var(--red-main); color: white; border-color: var(--red-main); }
        .pag-btn-detail:disabled { opacity: 0.3; cursor: not-allowed; }

        /* Photo Gallery */
        .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;
            font-size: 12px; color: var(--gray-400);
        }

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

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

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

        <!-- Header -->
        <div class="detail-header">
            <a href="{{ route('customer.view') }}" class="detail-back-btn">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M10 2L4 8l6 6"/>
                </svg>
                Kembali
            </a>
            <div>
                <h1 class="detail-title">{{ $customer->name }}</h1>
            </div>
        </div>

        <!-- Info Card -->
        <div class="detail-info-card">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">Tipe Customer</div>
                    <div class="info-badge {{ $customer->type == 1 ? 'badge-dealer' : ($customer->type == 2 ? 'badge-retailer' : 'badge-farmer') }}" id="customer-type">
                        {{ $customer->type == 1 ? 'Dealer' : ($customer->type == 2 ? 'Retailer' : 'Petani') }}
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">Nama Pemilik</div>
                    <div class="info-value" id="customer-owner">{{ $customer->owner_name }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">No. HP</div>
                    <div class="info-value" id="customer-phone">{{ $customer->phone_number }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Alamat</div>
                    <div class="info-value" id="customer-address">{{ $customer->address }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Tanggal Terdaftar</div>
                    <div class="info-value" id="customer-registered">{{ $customer->created_at->format('d M Y') }}</div>
                </div>
                @if($customer->type == 3)
                <div class="info-item">
                    <div class="info-label">Luas Lahan</div>
                    <div class="info-value" id="customer-land">{{ $customer->land_area ? number_format($customer->land_area, 0, ',', '.') . ' m²' : '—' }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Tipe Crop</div>
                    <div class="info-value" id="customer-crop">{{ $customer->type_crop ?? '—' }}</div>
                </div>
                @endif
            </div>
        </div>

        <!-- Tabs -->
        <div class="detail-tabs">
            <button class="detail-tab active" onclick="switchTab('fa-list', this)">FA & Agronomis</button>
            <button class="detail-tab" onclick="switchTab('peta', this)">Peta Koordinat</button>
            <button class="detail-tab" onclick="switchTab('visit-log', this)">Log Visit</button>
        </div>

        <!-- ── TAB: FA & AGRONOMIS ── -->
        <div id="tab-fa-list">
            <div class="detail-fa-card">
                <div class="detail-card-header">
                    <div class="detail-card-title">
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="8" cy="5" r="3"/><path d="M3 14c0-2.8 2.2-5 5-5s5 2.2 5 5"/></svg>
                        Tim FA & Agronomis
                    </div>
                    <span class="detail-card-badge" id="fa-count">0 orang</span>
                </div>
                <div class="fa-grid" id="fa-grid">
                    <!-- FA Items akan di-generate di sini -->
                </div>
            </div>
        </div>

        <!-- ── TAB: PETA ── -->
        <div id="tab-peta" style="display:none">
            <div class="detail-map-card">
                <div class="detail-card-header">
                    <div class="detail-card-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 Koordinat Visit
                    </div>
                    <span style="font-size:12px;color:var(--gray-400);font-family:'DM Sans',sans-serif;">Lokasi check-in & foto visit</span>
                </div>
                <div class="detail-map-body" id="map">
                    <div class="detail-map-placeholder">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                            <rect x="3" y="3" width="18" height="18" rx="2"/>
                            <path d="M3 9l5-5m8 0l5 5M21 15l-5-5m-8 0l-5 5"/>
                        </svg>
                        <p>Maps akan ditampilkan di sini</p>
                    </div>
                </div>
                <div class="map-legend">
                    <div class="map-legend-item"><div class="map-dot dot-checkin"></div> Check-in / Absensi</div>
                    <div class="map-legend-item"><div class="map-dot dot-photo"></div> Foto Visit</div>
                </div>
            </div>

            <!-- Koordinat List -->
            <div class="detail-table-card">
                <div class="detail-card-header">
                    <div class="detail-card-title">
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="8" cy="8" r="6"/><path d="M8 4v8M4 8h8"/></svg>
                        Daftar Koordinat
                    </div>
                    <span class="detail-card-badge" id="coord-count">0 titik</span>
                </div>
                <div class="detail-table-scroll">
                    <table class="detail-table">
                        <thead>
                        <tr>
                            <th style="width:44px">No.</th>
                            <th>FA / Agronomis</th>
                            <th>Tipe Aktivitas</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th>Tanggal & Jam</th>
                            <th>Foto</th>
                        </tr>
                        </thead>
                        <tbody id="coord-tbl-body">
                            <!-- Table rows will go here -->
                        </tbody>
                    </table>
                </div>
                <div id="coord-empty" class="detail-empty" style="display:block">Tidak ada data koordinat yang ditemukan.</div>
            </div>
        </div>

        <!-- ── TAB: VISIT LOG ── -->
        <div id="tab-visit-log" style="display:none">
            <div class="detail-table-card">
                <div class="detail-card-header">
                    <div class="detail-card-title">
                        <svg width="14" height="14" 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>
                        Riwayat Kunjungan
                    </div>
                    <span class="detail-card-badge" id="visit-count">0 visit</span>
                </div>
                <div id="visit-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="detail-table-scroll">
                    <table class="detail-table">
                        <thead>
                        <tr>
                            <th style="width:44px">No.</th>
                            <th>FA / Agronomis</th>
                            <th>Jabatan</th>
                            <th>Tipe Aktivitas</th>
                            <th>Keterangan</th>
                            <th>Tanggal & Jam</th>
                            <th>Foto</th>
                        </tr>
                        </thead>
                        <tbody id="visit-tbl-body">
                            <!-- Sample data for illustration -->
                        </tbody>
                    </table>
                </div>
                <div id="visit-empty" class="detail-empty" style="display:block">Tidak ada data kunjungan yang ditemukan.</div>
                <div class="detail-table-footer">
                    <div class="pag-info-detail" id="visit-pag-info">Menampilkan 0 dari 0 data</div>
                    <div class="pag-btns-detail" id="visit-pag-btns"></div>
                </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>

@endsection

@push('scripts')
    <!-- Mapbox GL JS -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
    <script>
        // Tab switching functionality
        function switchTab(tabName, buttonEl) {
            // Hide all tabs
            const tabs = document.querySelectorAll('[id^="tab-"]');
            tabs.forEach(tab => tab.style.display = 'none');

            // Remove active class from all buttons
            const buttons = document.querySelectorAll('.detail-tab');
            buttons.forEach(btn => btn.classList.remove('active'));

            // Show selected tab
            const tabEl = document.getElementById('tab-' + tabName);
            if (tabEl) {
                tabEl.style.display = 'block';
            }

            // Add active class to clicked button
            buttonEl.classList.add('active');

            // Initialize map when peta tab is clicked
            if (tabName === 'peta') {
                initializeMap();
            }
        }

        // Initialize Mapbox
        function initializeMap() {
            const mapEl = document.getElementById('map');

            // Check if map is already initialized
            if (mapEl.classList.contains('mapboxgl-canvas-container')) {
                return;
            }

            // Set token
            mapboxgl.accessToken = 'pk.eyJ1IjoiY2VjZTIzNCIsImEiOiJjbXAyMDd6NGgwMDJzMnNxOGh6OTRlZzBpIn0.fvPSOhpAiWnGGBavXnWkZA';

            // Create map
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/light-v11',
                center: [106.8456, -6.2088], // Jakarta center
                zoom: 13
            });

            // Add sample markers
            const markers = [
                {
                    lat: -6.2088,
                    lng: 106.8456,
                    type: 'checkin',
                    name: 'Check-in Pagi',
                    time: '07:30',
                    fa: 'Ahmad Fauzi'
                },
                {
                    lat: -6.2150,
                    lng: 106.8500,
                    type: 'photo',
                    name: 'Foto Visit',
                    time: '09:15',
                    fa: 'Ahmad Fauzi'
                },
                {
                    lat: -6.2000,
                    lng: 106.8300,
                    type: 'photo',
                    name: 'Pemeriksaan Tanaman',
                    time: '14:45',
                    fa: 'Dewi Anggraini'
                }
            ];

            // Add markers to map
            markers.forEach(marker => {
                const color = marker.type === 'checkin' ? '#A32D2D' : '#3B6D11';
                const el = document.createElement('div');
                el.className = 'marker';
                el.style.backgroundColor = color;
                el.style.width = '12px';
                el.style.height = '12px';
                el.style.borderRadius = '50%';
                el.style.cursor = 'pointer';
                el.style.border = '3px solid white';

                new mapboxgl.Marker(el)
                    .setLngLat([marker.lng, marker.lat])
                    .setPopup(new mapboxgl.Popup({ offset: 25 })
                        .setHTML('<h4>' + marker.name + '</h4><p><strong>' + marker.fa + '</strong></p><p>' + marker.time + '</p>'))
                    .addTo(map);
            });

            map.on('load', function() {
                // Map is loaded
            });
        }

        // Lightbox functionality
        function openLightbox(src) {
            document.getElementById('lightbox').classList.add('open');
            document.getElementById('lightbox-img').src = src;
        }

        function closeLightbox() {
            document.getElementById('lightbox').classList.remove('open');
        }

        // Close lightbox when pressing Escape
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeLightbox();
            }
        });

        // Sample data - in production this would come from DB/API
        document.addEventListener('DOMContentLoaded', function() {
            // FA count and visit count will be loaded from API in production
            // (counts are already set to 0 in the HTML)
        });
    </script>
@endpush