@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard Admin')
@section('page_subtitle', 'Ringkasan data dan peta persebaran wisata Kabupaten Lumajang')

@section('content')
<div class="row g-3 mb-4">
    <div class="col-12 col-md-4">
        <div class="card soft-card h-100">
            <div class="card-body d-flex align-items-center justify-content-between gap-3">
                <div>
                    <small class="text-muted fw-semibold">Total Wisata</small>
                    <div class="display-6 fw-bold mb-0">{{ number_format($totalWisata) }}</div>
                </div>
                <div class="stat-icon"><i class="bi bi-map"></i></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card soft-card h-100">
            <div class="card-body d-flex align-items-center justify-content-between gap-3">
                <div>
                    <small class="text-muted fw-semibold">Total User</small>
                    <div class="display-6 fw-bold mb-0">{{ number_format($totalUser) }}</div>
                </div>
                <div class="stat-icon"><i class="bi bi-people"></i></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card soft-card h-100">
            <div class="card-body d-flex align-items-center justify-content-between gap-3">
                <div>
                    <small class="text-muted fw-semibold">Total Kategori</small>
                    <div class="display-6 fw-bold mb-0">{{ number_format($totalKategori) }}</div>
                </div>
                <div class="stat-icon"><i class="bi bi-tags"></i></div>
            </div>
        </div>
    </div>
</div>

<div class="card soft-card admin-map-card">
    <div class="card-body">
        <div class="d-flex flex-column flex-xl-row justify-content-between gap-3 mb-3">
            <div>
                <h2 class="h5 fw-bold mb-1">Peta Persebaran Wisata Kabupaten Lumajang</h2>
                <p class="text-muted mb-0">Visualisasi lokasi seluruh destinasi wisata berdasarkan data yang tersimpan pada sistem.</p>
            </div>
            <div class="map-actions">
                <div class="input-group">
                    <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                    <input class="form-control" id="tourismMapSearch" type="search" placeholder="Cari wisata">
                </div>
                <select class="form-select" id="tourismMapMedia" aria-label="Filter marker">
                    <option value="all">Semua</option>
                    <option value="ar">AR</option>
                    <option value="video">Video</option>
                </select>
                <button class="btn btn-outline-ocean" id="tourismMapFit" type="button">
                    <i class="bi bi-arrows-fullscreen me-1"></i>Fit Marker
                </button>
                <button class="btn btn-outline-ocean" id="tourismMapReset" type="button">
                    <i class="bi bi-arrow-clockwise me-1"></i>Reset View
                </button>
            </div>
        </div>

        <div class="map-shell">
            <div id="tourismMap" class="tourism-map" data-empty-message="Belum ada wisata dengan koordinat latitude dan longitude."></div>
            <div class="map-legend">
                <div class="fw-semibold mb-2">Legenda</div>
                <div class="d-flex align-items-center gap-2 mb-1"><span class="legend-dot legend-dot-ar"></span><span>Wisata Augmented Reality</span></div>
                <div class="d-flex align-items-center gap-2"><span class="legend-dot legend-dot-video"></span><span>Wisata Video</span></div>
            </div>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-12 col-md-4">
                <div class="map-stat">
                    <small>Jumlah Marker</small>
                    <strong id="mapTotalMarkers">0</strong>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="map-stat">
                    <small>Jumlah Wisata AR</small>
                    <strong id="mapArMarkers">0</strong>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="map-stat">
                    <small>Jumlah Wisata Video</small>
                    <strong id="mapVideoMarkers">0</strong>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="{{ asset('css/admin-dashboard-map.css') }}">
@endpush


@push('scripts')

<script>
    window.tourismMapData = @json($mapWisatas);
</script>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script src="{{ asset('js/admin-dashboard-map.js') }}"></script>

@endpush