@extends('layouts.main')

@push('style')
    <link rel="stylesheet" href="{{ asset('assets/css/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/themify-icons.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

    <style>
        /* ── Stat cards ─────────────────────────────────────────────────────── */
        .stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            transition: box-shadow .2s;
        }
        .stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

        .stat-icon {
            width: 48px; height: 48px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
        }
        .stat-value { font-size: 1.75rem; font-weight: 700; color: #1a202c; }
        .stat-label { font-size: .8rem; color: #718096; margin-top: 2px; }

        /* ── Officer list ───────────────────────────────────────────────────── */
        .officer-row {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: box-shadow .2s, border-color .2s;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }
        .officer-row:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,.08);
            border-color: #bfdbfe;
            color: inherit;
        }
        .officer-avatar {
            width: 42px; height: 42px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 1rem;
            flex-shrink: 0;
        }
        .badge-online  { background: #dcfce7; color: #166534; }
        .badge-offline { background: #f1f5f9; color: #64748b; }

        .last-update { font-size: .72rem; color: #94a3b8; margin-top: 2px; }

        /* ── Pulse animation ────────────────────────────────────────────────── */
        @keyframes pulse {
            0%,100% { opacity: 1; }
            50%      { opacity: .3; }
        }
        .pulse-dot {
            display: inline-block;
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #22c55e;
            animation: pulse 1.8s infinite;
            margin-right: 4px;
            vertical-align: middle;
        }

        /* ════════════════════════════════════════════════════════════════════
           TRACKING MODAL
        ════════════════════════════════════════════════════════════════════ */
        #trackingModal .modal-dialog {
            max-width: 100%;
            width: 100%;
            margin: 0;
            height: 100%;
        }
        #trackingModal .modal-content {
            height: 100vh;
            border: none;
            border-radius: 0;
            display: flex;
            flex-direction: column;
        }
        #trackingModal .modal-header {
            background: #0f172a;
            color: #fff;
            border-bottom: 1px solid #1e293b;
            padding: 10px 16px;
            flex-shrink: 0;
            z-index: 10;
        }
        #trackingModal .modal-header .modal-title {
            font-size: .95rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #trackingModal .modal-header .btn-close {
            filter: invert(1);
            opacity: .7;
        }
        #trackingModal .modal-body {
            padding: 0;
            flex: 1;
            overflow: hidden;
            display: flex;
        }

        /* ── Modal inner layout ──────────────────────────────────────────── */
        .modal-tracking-wrapper {
            display: flex;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* Sidebar */
        .modal-tracking-panel {
            width: 300px;
            min-width: 300px;
            background: #fff;
            border-right: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .modal-panel-header {
            padding: 14px;
            border-bottom: 1px solid #e2e8f0;
            flex-shrink: 0;
        }
        .modal-panel-search input {
            border-radius: 8px;
            border: 1.5px solid #e2e8f0;
            padding: 8px 12px;
            font-size: .85rem;
            width: 100%;
            outline: none;
            transition: border-color .2s;
        }
        .modal-panel-search input:focus { border-color: #1d4ed8; }

        .modal-officer-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }
        .modal-officer-item {
            padding: 11px;
            border-radius: 10px;
            border: 1.5px solid #e2e8f0;
            margin-bottom: 7px;
            cursor: pointer;
            transition: all .2s;
        }
        .modal-officer-item:hover,
        .modal-officer-item.active {
            border-color: #1d4ed8;
            background: #eff6ff;
        }
        .modal-officer-item .mo-name   { font-size: .875rem; font-weight: 600; color: #1e293b; }
        .modal-officer-item .mo-coords { font-size: .72rem; color: #94a3b8; font-family: monospace; margin-top: 2px; }
        .modal-officer-item .mo-speed  { font-size: .75rem; color: #64748b; }
        .mo-ava {
            width: 34px; height: 34px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: .85rem;
            flex-shrink: 0;
        }
        .mo-status {
            width: 8px; height: 8px; border-radius: 50%;
            display: inline-block; margin-right: 4px;
        }
        .mo-online  { background: #22c55e; }
        .mo-offline { background: #94a3b8; }

        /* Map area */
        .modal-map-wrapper { position: relative; flex: 1; }
        #modal-tracking-map { width: 100%; height: 100%; }

        /* Floating overlay */
        .modal-map-overlay {
            position: absolute;
            top: 14px; right: 14px;
            background: #fff;
            border-radius: 10px;
            padding: 10px 14px;
            box-shadow: 0 4px 16px rgba(0,0,0,.12);
            font-size: .8rem;
            z-index: 10;
            min-width: 150px;
        }
        .modal-fit-btn {
            position: absolute;
            bottom: 110px; right: 12px;
            background: #fff;
            border: none;
            border-radius: 8px;
            padding: 9px;
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
            cursor: pointer;
            z-index: 10;
        }

        @keyframes modal-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
        .modal-pulse { animation: modal-pulse 1.5s infinite; }

        /* Fullscreen modal slide-in */
        #trackingModal.fade .modal-dialog {
            transform: translateY(30px);
            transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
        }
        #trackingModal.show .modal-dialog {
            transform: translateY(0);
        }

        /* Open Live Map button */
        .btn-live-map {
            background: linear-gradient(135deg, #1d4ed8, #2563eb);
            color: #fff !important;
            border: none;
            border-radius: 20px;
            padding: 6px 16px;
            font-size: .8rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 8px rgba(29,78,216,.3);
            cursor: pointer;
            transition: transform .15s, box-shadow .15s;
            text-decoration: none;
        }
        .btn-live-map:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(29,78,216,.4);
        }
        .live-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #4ade80;
            animation: modal-pulse 1.5s infinite;
        }

        @media (max-width: 768px) {
            .modal-tracking-panel {
                width: 100%;
                min-width: unset;
                height: 200px;
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
            }
            .modal-tracking-wrapper { flex-direction: column; }
        }
    </style>
@endpush

@section('content')

    {{-- Preloader --}}
    <div class="preloader" id="preloader">
        <div class="loading">
            <img src="{{ asset('assets/img/loading-buffering.gif') }}" width="80">
            <p>Harap Tunggu</p>
        </div>
    </div>

    {{-- Page header --}}
    <div class="content__header content__boxed overlapping">
        <div class="content__wrap">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('index-dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item" aria-current="page">{{ $titleMenu }}</li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
                </ol>
            </nav>
            <h1 class="page-title mb-0 mt-2">{{ $titleMenu }} {{ $title }}</h1>
        </div>
    </div>

    {{-- Main content --}}
    <div class="content__boxed">
        <div class="content__wrap">
            <div class="row">
                <div class="col-sm-12 mt-2">
                    <div class="card">
                        <div class="card bg-info" style="min-height:5px;border-radius:1px;"></div>
                        <div class="card-body">

                            {{-- ── Stat cards ────────────────────────────────── --}}
                            <div class="d-flex flex-wrap gap-2 mb-4">
                                <div class="stat-card flex-fill d-flex align-items-center gap-3 py-2 px-3">
                                    <div class="stat-icon" style="background:#eff6ff"><i class="bi bi-people" style="color:#1d4ed8"></i></div>
                                    <div><div class="stat-value" id="total-officers">-</div><div class="stat-label">Total Petugas</div></div>
                                </div>
                                <div class="stat-card flex-fill d-flex align-items-center gap-3 py-2 px-3">
                                    <div class="stat-icon" style="background:#f0fdf4"><i class="bi bi-person-check" style="color:#16a34a"></i></div>
                                    <div><div class="stat-value text-success" id="online-officers">-</div><div class="stat-label">Sedang Online</div></div>
                                </div>
                                <div class="stat-card flex-fill d-flex align-items-center gap-3 py-2 px-3">
                                    <div class="stat-icon" style="background:#fef9c3"><i class="bi bi-person-dash" style="color:#ca8a04"></i></div>
                                    <div><div class="stat-value text-warning" id="offline-officers">-</div><div class="stat-label">Sedang Offline</div></div>
                                </div>
                                <div class="stat-card flex-fill d-flex align-items-center gap-3 py-2 px-3">
                                    <div class="stat-icon" style="background:#fdf4ff"><i class="bi bi-clock-history" style="color:#9333ea"></i></div>
                                    <div><div class="stat-value" id="last-update-time" style="font-size:1.2rem">-</div><div class="stat-label">Update Terakhir</div></div>
                                </div>
                            </div>

                            {{-- ── Officer list + mini map ────────────────────── --}}
                            <div class="row g-3">
                                <div class="col-lg-4">
                                    <div class="stat-card h-100">
                                        <div class="d-flex align-items-center justify-content-between mb-3">
                                            <h6 class="mb-0" style="font-weight:600">
                                                Daftar Petugas
                                                <span class="badge bg-success ms-1 rounded-pill"
                                                      id="online-badge" style="font-size:.65rem">0</span>
                                            </h6>
                                            {{-- ↓ Tombol buka modal (ganti route lama) --}}
                                            <button class="btn-live-map" data-bs-toggle="modal" data-bs-target="#trackingModal">
                                                <span class="live-dot"></span> Live Map
                                            </button>
                                        </div>
                                        <div id="officer-list" class="d-flex flex-column gap-2">
                                            <div class="text-center text-muted py-4">
                                                <div class="spinner-border spinner-border-sm me-2"></div>
                                                Memuat data...
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-8">
                                    <div class="stat-card" style="padding:0;overflow:hidden;border-radius:12px;height:100%;min-height:480px">
                                        <div id="mini-map" style="height:500px;width:100%"></div>
                                    </div>
                                </div>
                            </div>

<div class="row mt-3">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                                            <h5 class="mb-0">
                                                <i class="bi bi-map"></i>
                                                Tracking Summary
                                            </h5>
                                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                                <select id="filterOfficer" class="form-select form-select-sm" style="width:auto;min-width:200px">
                                                    <option value="">All Officers</option>
                                                    @foreach($officers ?? [] as $officer)
                                                        <option value="{{ $officer->id }}">{{ $officer->name }}</option>
                                                    @endforeach
                                                </select>
                                                <input type="date" id="filterDate" class="form-control form-control-sm" style="width:auto;min-width:180px">
                                                <button type="button" id="btnResetFilter" class="btn btn-sm btn-outline-secondary">
                                                    <i class="bi bi-arrow-counterclockwise"></i> Reset
                                                </button>
                                            </div>
                                        </div>

                                        <div class="card-body">
                                            <table id="trackingSummaryTable" class="table table-striped table-hover w-100">
                                                <thead>
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>Officer</th>
                                                        <th>Distance</th>
                                                        <th>Duration</th>
                                                        <th>Avg Speed</th>
                                                        <th>Max Speed</th>
                                                        <th>
                                                            Points
                                                            <i class="bi bi-info-circle text-muted ms-1"
                                                               data-bs-toggle="tooltip"
                                                               data-bs-placement="top"
                                                               title="Jumlah sample GPS yang terekam selama perjalanan."></i>
                                                        </th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>{{-- card-body --}}
                    </div>{{-- card --}}
                </div>
            </div>
        </div>
    </div>


    {{-- ════════════════════════════════════════════════════════════════════════
         TRACKING MODAL — fullscreen, semua logika tracking ada di sini
    ════════════════════════════════════════════════════════════════════════ --}}
    <div class="modal fade" id="trackingModal" tabindex="-1" aria-labelledby="trackingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">

                {{-- Header --}}
                <div class="modal-header">
                    <div class="modal-title" id="trackingModalLabel">
                        <i class="bi bi-broadcast text-success modal-pulse"></i>
                        Live Tracking Petugas
                        <span class="badge bg-success ms-2 rounded-pill" id="modal-online-badge"
                              style="font-size:.7rem;font-weight:600">0 Online</span>
                    </div>
                    <div class="ms-auto d-flex align-items-center gap-3 me-2">
                        <span id="modal-overlay-count" style="font-size:.8rem;color:#94a3b8">Memuat...</span>
                        <span id="modal-overlay-time" style="font-size:.75rem;color:#475569"></span>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                {{-- Body --}}
                <div class="modal-body">
                    <div class="modal-tracking-wrapper">

                        {{-- Left panel: daftar petugas --}}
                        <div class="modal-tracking-panel">
                            <div class="modal-panel-header">
                                <div class="modal-panel-search">
                                    <input type="text" id="modal-search-input" placeholder="🔍  Cari nama petugas...">
                                </div>
                            </div>
                            <div class="modal-officer-list" id="modal-officer-list">
                                <div class="text-center text-muted py-5" style="font-size:.85rem">
                                    <div class="spinner-border spinner-border-sm mb-2 d-block mx-auto"></div>
                                    Memuat data petugas...
                                </div>
                            </div>
                        </div>

                        {{-- Map --}}
                        <div class="modal-map-wrapper">
                            <div id="modal-tracking-map"></div>

                            {{-- Fit-all button --}}
                            <button class="modal-fit-btn" onclick="modalFitAll()" title="Fit semua marker">
                                <i class="bi bi-fullscreen" style="font-size:1.1rem;color:#374151"></i>
                            </button>
                        </div>

                    </div>
                </div>{{-- modal-body --}}
            </div>
        </div>
    </div>
    {{-- ── END TRACKING MODAL ── --}}

    <div class="modal fade" id="routeModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" style="border-radius:14px;overflow:hidden">

                <div class="modal-header" style="background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;border-bottom:1px solid #1e293b">
                    <div>
                        <h5 class="modal-title mb-0 d-flex align-items-center gap-2" style="font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)">
                            <i class="bi bi-geo-alt-fill text-success"></i>
                            <span>Route Tracking</span>
                        </h5>
                        <div id="route-modal-subtitle" class="text-white-50" style="font-size:.8rem;margin-top:2px">
                            Memuat data rute...
                        </div>
                    </div>
                    <button type="button"
                            class="btn-close btn-close-white"
                            data-bs-dismiss="modal">
                    </button>
                </div>

                {{-- Summary panel (informative + tidy) --}}
                <div id="route-summary-panel" class="px-3 py-3" style="background:#f8fafc;border-bottom:1px solid #e2e8f0">
                    <div class="row g-2 text-center">
                        <div class="col">
                            <div class="rs-tile">
                                <div class="rs-label">Start</div>
                                <div class="rs-value text-success" id="rs-start">-</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rs-tile">
                                <div class="rs-label">Finish</div>
                                <div class="rs-value text-danger" id="rs-end">-</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rs-tile">
                                <div class="rs-label">Distance</div>
                                <div class="rs-value" id="rs-distance">-</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rs-tile">
                                <div class="rs-label">Duration</div>
                                <div class="rs-value" id="rs-duration">-</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rs-tile">
                                <div class="rs-label">Avg</div>
                                <div class="rs-value" id="rs-avg">-</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rs-tile">
                                <div class="rs-label">Max</div>
                                <div class="rs-value" id="rs-max">-</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="rs-tile">
                                                        <div class="rs-label">Points
                                                            <i class="bi bi-info-circle text-muted"
                                                               data-bs-toggle="tooltip"
                                                               title="Titik rute setelah dedup 50m / total GPS terekam."></i>
                                                        </div>
                                <div class="rs-value" id="rs-points">-</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-body p-0 position-relative">
                    <div id="route-map" style="height:600px;"></div>

                    {{-- Legend (top-left of map) --}}
                    <div id="route-legend" class="route-legend">
                        <div class="rl-item" id="rl-start-row">
                            <span class="rl-pin rl-pin-start"></span>
                            <span>Start</span>
                        </div>
                        <div class="rl-item" id="rl-finish-row">
                            <span class="rl-pin rl-pin-finish"></span>
                            <span>Finish</span>
                        </div>
                        <div class="rl-item" id="rl-path-row">
                            <span class="rl-line"></span>
                            <span>Path</span>
                        </div>
                        <div class="rl-item" id="rl-stationary-row" style="display:none">
                            <span class="rl-pin rl-pin-stationary"></span>
                            <span>Tidak bergerak</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection

{{-- gps-tracker JS (untuk officer list di index, mini-map, dll) --}}
@include('officeractivity::gps-tracker.js')