@extends('layouts.admin.master')

@section('content')
        @include('components.admin.map-navigation-hub', ['links' => $mapLinks ?? []])
<!-- Peta -->
        <div class="maps">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Peta Wilayah</h5>
                </div>
                <div class="card-body p-0">
                    <div class="d-flex">
                        <!-- Area Peta (80% width) -->
                        <div id="peta" class="map-container" style="width: 80%; height: 500px;">
                            <!-- Tampilan Peta disini - Leaflet -->
                        </div>

                        <!-- Area Tombol Aksi (20% width) -->
                        <div class="d-flex flex-column p-3" style="width: 20%; background: #f8f9fa; border-left: 1px solid #dee2e6;">
                            <a href="javascript:void(0);" class="stat-card-link mb-3" data-toggle="modal" data-target="#uploadModal">
                                <div class="stat-card card-timur p-2 text-center" style="font-size: 0.85rem;">
                                    <div class="stat-icon stat-icon-timur mb-1" style="font-size: 1.4rem;">
                                        <i class="fas fa-upload"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="stat-title">Import Peta/Upload SHP</div>
                                    </div>
                                </div>
                            </a>

                            <a href="javascript:void(0);" class="stat-card-link" data-toggle="modal" data-target="#addModal">
                                <div class="stat-card card-selatan p-2 text-center" style="font-size: 0.85rem;">
                                    <div class="stat-icon stat-icon-selatan mb-1" style="font-size: 1.4rem;">
                                        <i class="fas fa-plus-circle"></i>
                                    </div>
                                    <div class="stat-content">
                                        <div class="stat-title">Tambah Data Lokasi/Wilayah</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Tabel Pengaturan Data Peta -->
        <div class="table-responsive mt-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Daftar Titik Lokasi & Wilayah</h5>
                <div class="d-flex">
                    <!-- Form Pencarian -->
                    <form method="GET" action="{{ request()->url() }}" class="mr-2">
                        <div class="input-group">
                            <input type="text" name="search" class="form-control form-control-sm"
                                   placeholder="Cari data..." value="{{ request('search') }}">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary btn-sm" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>

                    <!-- Dropdown Jumlah Baris -->
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
                                type="button" id="dropdownMenuButton"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Tampilkan: {{ request('per_page', 10) }} baris
                        </button>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['per_page' => 10]) }}">10 baris</a>
                            <a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['per_page' => 25]) }}">25 baris</a>
                            <a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['per_page' => 50]) }}">50 baris</a>
                            <a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['per_page' => 100]) }}">100 baris</a>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-striped table-hover" id="tabel-data">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th>Nama</th>
                        <th>Kategori</th>
                        <th>Ikon</th>
                        <th>Zoom Level</th>
                        <th>Dibuat Oleh</th>
                        <th>Dibuat Pada</th>
                        <th width="15%">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($penduduk_peta as $item)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $item->nama }}</td>
                        <td>
                            @if($item->kategori)
                                <span class="badge" style="background-color: {{ $item->kategori->warna_default }}; color: white">
                                    {{ $item->kategori->nama }}
                                </span>
                            @else
                                <span class="badge bg-secondary">Tidak ada kategori</span>
                            @endif
                        </td>
                        <td>
                            @if($item->ikon)
                                <img src="{{ asset($item->ikon->url) }}" alt="{{ $item->ikon->nama }}" style="height: 24px;">
                            @elseif($item->kategori && $item->kategori->ikon_default)
                                <img src="{{ asset($item->kategori->ikon_default) }}" alt="Default" style="height: 24px;">
                            @else
                                <i class="fas fa-map-marker-alt"></i>
                            @endif
                        </td>
                        <td>{{ $item->zoom_level }}</td>
                        <td>{{ $item->user->name ?? 'System' }}</td>
                        <td>{{ $item->created_at->translatedFormat('d F Y H:i') }}</td>
                        <td>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-primary" title="Edit"
                                    onclick="editData({{ $item->id }})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger" title="Hapus"
                                    onclick="deleteData({{ $item->id }}, '{{ $item->nama }}')">
                                    <i class="fas fa-trash"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-success" title="Tampilkan di Peta"
                                    onclick="showOnMap({{ $item->id }})">
                                    <i class="fas fa-map-marked-alt"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Pagination -->
            <div class="d-flex justify-content-between align-items-center my-4">  <!-- my-4 untuk margin vertikal -->
                <div class="text-muted font-size-md">  <!-- Class custom -->
                    Menampilkan {{ $penduduk_peta->firstItem() }} - {{ $penduduk_peta->lastItem() }} dari {{ $penduduk_peta->total() }} data
                </div>
                <div class="pagination-wrapper">  <!-- Wrapper tambahan -->
                    {{ $penduduk_peta->onEachSide(2)->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

    <!-- Modal Upload SHP -->
    <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">Upload Shapefile</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ route('admin.peta.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="file">Pilih File ZIP (.zip) berisi .shp</label>
                            <input type="file" class="form-control" id="file" name="file_shp" required>
                        </div>
                        <div class="form-group mt-2">
                            <label for="kategori_id">Kategori</label>
                            <select name="kategori_id" id="kategori_id" class="form-control" required>
                                @foreach ($kategoris as $kategori)
                                    <option value="{{ $kategori->id }}">{{ $kategori->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal Tambah Data -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">Tambah Data Lokasi/Wilayah</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="addForm" method="POST" action="{{ route('admin.peta.insert') }}">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="add-nama">Nama Lokasi/Wilayah</label>
                            <input type="text" class="form-control" id="add-nama" name="nama" required>
                        </div>
                        <div class="form-group">
                            <label for="add-kategori">Kategori</label>
                            <select class="form-control" id="add-kategori" name="kategori_id" required>
                                <option value="">Pilih Kategori</option>
                                @foreach($kategoris as $kategori)
                                    <option value="{{ $kategori->id }}" data-color="{{ $kategori->warna_default }}">
                                        {{ $kategori->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="add-ikon">Ikon</label>
                            <select class="form-control" id="add-ikon" name="ikon_id">
                                <option value="">Pilih Ikon (Opsional)</option>
                                @foreach($peta_ikon as $ikon)
                                    <option value="{{ $ikon->id }}">{{ $ikon->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="add-zoom">Zoom Level</label>
                            <input type="number" class="form-control" id="add-zoom" name="zoom_level" min="10" max="19" value="15" required>
                        </div>
                        <div class="form-group">
                            <label for="add-latitude">Latitude</label>
                            <input type="text" class="form-control" id="add-latitude" name="latitude" required>
                        </div>
                        <div class="form-group">
                            <label for="add-longitude">Longitude</label>
                            <input type="text" class="form-control" id="add-longitude" name="longitude" required>
                        </div>
                        <div class="form-group">
                            <label for="add-keterangan">Keterangan</label>
                            <textarea class="form-control" id="add-keterangan" name="keterangan" rows="3"></textarea>
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="add-is-polygon" name="is_polygon">
                            <label class="form-check-label" for="add-is-polygon">Data Polygon/Wilayah</label>
                        </div>
                        <div id="polygon-coordinates-container" style="display: none;">
                            <div class="form-group">
                                <label>Koordinat Polygon (GeoJSON)</label>
                                <textarea class="form-control" id="add-polygon-coordinates" name="polygon_coordinates" rows="5" placeholder='{"type":"Polygon","coordinates":[[[...]]]}'></textarea>
                            </div>
                            <button type="button" class="btn btn-sm btn-info mb-2" onclick="drawPolygonOnMap()">
                                <i class="fas fa-draw-polygon"></i> Gambar di Peta
                            </button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal Edit Data -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Edit Data Peta</h5>
                    <!-- Tombol Close (X) -->
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="editForm" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit-geometry-type" name="geometry_type">
                    <input type="hidden" id="edit-geojson" name="geojson">
                    <input type="hidden" id="edit-id" name="id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="edit-nama">Nama</label>
                            <input type="text" class="form-control" id="edit-nama" name="nama" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-kategori">Kategori</label>
                            <select class="form-control" id="edit-kategori" name="kategori_id" required>
                                @foreach($kategoris as $kategori)
                                    <option value="{{ $kategori->id }}">{{ $kategori->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-ikon">Ikon</label>
                            <select class="form-control" id="edit-ikon" name="ikon_id">
                                <option value="">Pilih Ikon</option>
                                @foreach($peta_ikon as $ikon)
                                    <option value="{{ $ikon->id }}">{{ $ikon->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit-zoom">Zoom Level</label>
                            <input type="number" class="form-control" id="edit-zoom" name="zoom_level" min="10" max="19" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-latitude">Latitude</label>
                            <input type="text" class="form-control" id="edit-latitude" name="latitude" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-longitude">Longitude</label>
                            <input type="text" class="form-control" id="edit-longitude" name="longitude" required>
                        </div>
                        <div class="form-group">
                            <label for="edit-keterangan">Keterangan</label>
                            <textarea class="form-control" id="edit-keterangan" name="keterangan" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.fullscreen/Control.FullScreen.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-minimap@3.6.1/dist/Control.MiniMap.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.locatecontrol@0.76.1/dist/L.Control.Locate.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css" />
    <style>
    /* Layout */
    .map-container {z-index: 1; width: 100%; height: 500px; border-radius: 8px; overflow: hidden; background-color: #f0f0f0; position: relative; }
    .row:first-child { justify-content: flex-end; }

    /* Cards */
    .stat-card { border-radius: 10px; padding: 10px !important; height: auto !important; min-height: 80px; display: flex; align-items: center; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer; }
    .stat-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    .stat-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; margin-right: 10px; flex-shrink: 0; }
    .stat-content { flex: 1; }
    .stat-title { font-size: 0.75rem; color: #6c757d; margin-bottom: 5px; }

    /* Card Variants */
    .card-selatan { border-left: 4px solid #e74c3c; background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(255, 255, 255, 0.9)); }
    .stat-icon-selatan { background: linear-gradient(135deg, #e74c3c, #c0392b); }
    .card-timur { border-left: 4px solid #1abc9c; background: linear-gradient(135deg, rgba(26, 188, 156, 0.1), rgba(255, 255, 255, 0.9)); }
    .stat-icon-timur { background: linear-gradient(135deg, #1abc9c, #16a085); }

    /* Map Elements */
    .leaflet-marker-draggable { cursor: move !important; }
    .leaflet-control-layers { background: rgba(255, 255, 255, 0.8); }

    /* Buttons */
    .popup-btn { padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 5px; }
    .save-btn { background-color: #28a745; color: white; }
    .save-btn:hover { background-color: #218838; }
    .delete-btn { background-color: #dc3545; color: white; }
    .zoom-btn { background-color: #17a2b8; color: white; }
    .edit-btn { background-color: #ffc107; color: black; }
    .popup-btn i { font-size: 12px; }

    /* Tables */
    .table-controls { margin-bottom: 1rem; }
    .table-controls .form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: 0.875rem; }
    .table-controls .input-group { width: auto; }
    .pagination-info { font-size: 0.9rem; }

    /* Responsive */
    @media (max-width: 768px) {
        .stat-card { flex-direction: column; text-align: center; padding: 10px !important; }
        .stat-icon { margin-right: 0; margin-bottom: 8px; }
    }

    .leaflet-bar {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        border-radius: 4px;
    }
    .leaflet-bar a {
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: #333;
    }
    .leaflet-bar a:hover {
        background-color: #f4f4f4;
    }
    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: #f4f4f4;
        color: #bbb;
    }
    .leaflet-bar a:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .leaflet-bar a:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom: none;
    }

    .font-size-md {
        font-size: 1.05rem;  /* Sedikit lebih besar dari default */
    }
    .pagination-wrapper .pagination {
        margin: 0;
    }
    .pagination-wrapper .page-item {
        margin: 0 3px;
    }
    .pagination-wrapper .page-link {
        padding: 0.6rem 0.9rem;
        font-size: 1.05rem;
        border-radius: 0.3rem;
    }
    .pagination-wrapper .page-item.active .page-link {
        font-weight: bold;
    }
    </style>
@endsection

@section('javascript')
    <!-- Leaflet Core -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <!-- Leaflet Plugins -->
    <script src="https://unpkg.com/leaflet.fullscreen@2.4.0/Control.FullScreen.js"></script>
    <script src="https://unpkg.com/leaflet-minimap@3.6.1/dist/Control.MiniMap.min.js"></script>
    <script src="https://unpkg.com/leaflet.locatecontrol@0.76.1/dist/L.Control.Locate.min.js"></script>
    <script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
    <script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.3/sweetalert2.all.min.js" integrity="sha512-1RuT3Xs+fbL5f+4MCot2I8PpBFRu4flycFf5s2x4PoBMTKbPgHBEEwQ1LovEIhrMaR3S8bJfnlBTbWJbKdj8Fg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- <script src="https://unpkg.com/leaflet-easyprint@2.1.9/dist/bundle.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <!-- DataTables -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="{{ asset('assets/templates/admin/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>

    <!-- Dynamic Resource Loader -->
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: [
                'page_title' => $page_attr['title'],
            ],
        );
    @endphp
    <script>
        window.mapCoreConfig = Object.assign({}, window.mapCoreConfig || {}, {
            center: @json(config('leaflet.map_center')),
            zoom: @json(config('leaflet.map_zoom')),
            minZoom: @json(config('leaflet.min_zoom')),
            maxZoom: @json(config('leaflet.max_zoom')),
            maxBounds: @json(config('leaflet.map_bounds')),
            fallbackTileUrl: @json(config('leaflet.fallback_tile_url')),
        });
        window.mapFeatureFlags = Object.assign({}, window.mapFeatureFlags || {}, @json(config('leaflet.features')));
    </script>
    <script src="{{ $resource }}"></script>
    <script>
        @if (app()->environment('local'))
            window.layerGroups = layerGroups;
            window.map = map;
        @endif
    </script>
@endsection