@extends('layouts.adminlte')

@section('title', 'MASTER LOCATION GPS')
@section('page_title', 'MASTER LOCATION GPS')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/leaflet/leaflet.css') }}" />
    <style>
        #osmMapPicker {
            height: 420px;
            width: 100%;
            border: 1px solid #dee2e6;
            border-radius: .5rem;
        }
        .osm-search-results {
            max-height: 200px;
            overflow: auto;
            border: 1px solid #e5e7eb;
            border-radius: .5rem;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master Titik GPS (Geofence)</h3>
            <button class="btn btn-primary btn-sm" id="btnAddLocation"><i class="fas fa-plus me-1"></i>Tambah</button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="locationTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Kode</th>
                            <th>Nama Lokasi</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th>Radius (m)</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="locationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="locationModalTitle">Tambah Location GPS</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="locationForm">
                    <div class="modal-body">
                        <input type="hidden" id="locationId" />
                        <div class="mb-3">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="locationCode" maxlength="40" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nama Lokasi</label>
                            <input type="text" class="form-control" id="locationName" maxlength="120" required />
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Latitude</label>
                                <input type="number" step="0.0000001" class="form-control" id="locationLatitude" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Longitude</label>
                                <input type="number" step="0.0000001" class="form-control" id="locationLongitude" required />
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex gap-2 flex-wrap mb-2">
                                <button type="button" class="btn btn-outline-primary btn-sm" id="btnToggleMapMode">
                                    <i class="fas fa-map-location-dot me-1"></i>Mode Map OpenStreet
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnUseCurrentLocation">
                                    <i class="fas fa-location-crosshairs me-1"></i>Pakai Lokasi Saya
                                </button>
                            </div>
                            <div id="mapModeWrap" class="d-none">
                                <div class="row g-2 mb-2">
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" id="osmSearchInput" placeholder="Cari lokasi (OpenStreetMap)" />
                                    </div>
                                    <div class="col-md-4">
                                        <button type="button" class="btn btn-outline-primary w-100" id="btnOsmSearch">
                                            <i class="fas fa-search me-1"></i>Search
                                        </button>
                                    </div>
                                    <div class="col-12">
                                        <div class="osm-search-results d-none" id="osmSearchResults"></div>
                                    </div>
                                </div>
                                <div id="osmMapPicker"></div>
                                <small class="text-muted">Klik peta atau geser marker untuk isi Latitude/Longitude otomatis.</small>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Radius (meter)</label>
                            <input type="number" min="1" max="10000" step="0.01" class="form-control" id="locationRadius" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Deskripsi</label>
                            <textarea class="form-control" id="locationDescription" rows="2"></textarea>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="locationActive" checked />
                            <label class="form-check-label" for="locationActive">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/leaflet/leaflet.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const modal = new bootstrap.Modal(document.getElementById('locationModal'));
            const modalEl = document.getElementById('locationModal');
            const table = $('#locationTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'code' },
                    { data: 'name' },
                    { data: 'latitude', render: (v) => Number(v || 0).toFixed(7) },
                    { data: 'longitude', render: (v) => Number(v || 0).toFixed(7) },
                    { data: 'radius_meter', render: (v) => Number(v || 0).toFixed(2) },
                    { data: 'is_active', render: (v) => `<span class="badge text-bg-${v ? 'success' : 'secondary'}">${v ? 'Aktif' : 'Nonaktif'}</span>` },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button>
                        `
                    }
                ]
            });

            let rowsCache = [];
            let osmMap = null;
            let osmMarker = null;
            let osmCircle = null;
            let mapModeActive = false;
            let lastSearchResults = [];

            const toNumber = (value) => {
                const n = Number((value || '').toString().trim());
                return Number.isFinite(n) ? n : null;
            };

            const readLatLng = () => {
                const lat = toNumber($('#locationLatitude').val());
                const lng = toNumber($('#locationLongitude').val());
                if (lat === null || lng === null) return null;
                return { lat, lng };
            };

            const writeLatLng = (lat, lng) => {
                $('#locationLatitude').val(Number(lat).toFixed(7));
                $('#locationLongitude').val(Number(lng).toFixed(7));
            };

            const ensureMap = () => {
                if (osmMap) return;
                osmMap = L.map('osmMapPicker');
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: '&copy; OpenStreetMap contributors'
                }).addTo(osmMap);

                const defaultCenter = [-6.2000000, 106.8166667];
                osmMap.setView(defaultCenter, 13);

                osmMarker = L.marker(defaultCenter, { draggable: true }).addTo(osmMap);
                osmCircle = L.circle(defaultCenter, { radius: 100, color: '#2563eb', fillColor: '#93c5fd', fillOpacity: 0.2 }).addTo(osmMap);

                osmMap.on('click', function (e) {
                    const { lat, lng } = e.latlng;
                    osmMarker.setLatLng([lat, lng]);
                    if (osmCircle) osmCircle.setLatLng([lat, lng]);
                    writeLatLng(lat, lng);
                });

                osmMarker.on('dragend', function () {
                    const pos = osmMarker.getLatLng();
                    if (osmCircle) osmCircle.setLatLng(pos);
                    writeLatLng(pos.lat, pos.lng);
                });
            };

            const syncMapToInput = () => {
                if (!mapModeActive) return;
                ensureMap();
                const point = readLatLng();
                if (point) {
                    osmMarker.setLatLng([point.lat, point.lng]);
                    if (osmCircle) osmCircle.setLatLng([point.lat, point.lng]);
                    osmMap.setView([point.lat, point.lng], Math.max(osmMap.getZoom(), 15));
                }
                setTimeout(() => osmMap.invalidateSize(), 50);
            };

            const syncRadiusToMap = () => {
                if (!mapModeActive) return;
                ensureMap();
                const r = Number($('#locationRadius').val() || 0);
                if (osmCircle && Number.isFinite(r) && r > 0) {
                    osmCircle.setRadius(r);
                }
            };

            const setMapMode = (active) => {
                mapModeActive = !!active;
                $('#mapModeWrap').toggleClass('d-none', !mapModeActive);
                $('#btnToggleMapMode').html(mapModeActive
                    ? '<i class="fas fa-map-location-dot me-1"></i>Sembunyikan Map'
                    : '<i class="fas fa-map-location-dot me-1"></i>Mode Map OpenStreet');
                if (mapModeActive) {
                    ensureMap();
                    syncMapToInput();
                    syncRadiusToMap();
                }
            };

            const renderSearchResults = (items) => {
                const $wrap = $('#osmSearchResults');
                if (!items || items.length === 0) {
                    $wrap.addClass('d-none').html('');
                    return;
                }
                $wrap.removeClass('d-none').html(items.map((item, idx) => `
                    <button type="button" class="list-group-item list-group-item-action osm-item" data-idx="${idx}">
                        <div class="fw-semibold">${item.display_name || 'Lokasi'}</div>
                        <div class="small text-muted">${item.lat}, ${item.lon}</div>
                    </button>
                `).join(''));
            };

            const doOsmSearch = () => {
                const q = ($('#osmSearchInput').val() || '').toString().trim();
                if (!q) {
                    renderSearchResults([]);
                    return;
                }
                $('#btnOsmSearch').prop('disabled', true).text('Searching...');
                fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(q)}`, {
                    headers: {
                        'Accept': 'application/json'
                    }
                }).then(r => r.json())
                  .then(data => {
                      lastSearchResults = Array.isArray(data) ? data.slice(0, 8) : [];
                      renderSearchResults(lastSearchResults);
                  })
                  .catch(() => {
                      Swal.fire('Error', 'Gagal search lokasi. Coba lagi.', 'error');
                  })
                  .finally(() => {
                      $('#btnOsmSearch').prop('disabled', false).html('<i class="fas fa-search me-1"></i>Search');
                  });
            };

            const loadData = () => {
                $.getJSON('{{ route('master_location_gps.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
            };

            $('#btnAddLocation').on('click', function () {
                $('#locationModalTitle').text('Tambah Location GPS');
                $('#locationId').val('');
                $('#locationCode').val('');
                $('#locationName').val('');
                $('#locationLatitude').val('');
                $('#locationLongitude').val('');
                $('#locationRadius').val('100');
                $('#locationDescription').val('');
                $('#locationActive').prop('checked', true);
                setMapMode(true);
                modal.show();
            });

            $('#locationTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#locationModalTitle').text('Edit Location GPS');
                $('#locationId').val(row.id);
                $('#locationCode').val(row.code || '');
                $('#locationName').val(row.name || '');
                $('#locationLatitude').val(row.latitude ?? '');
                $('#locationLongitude').val(row.longitude ?? '');
                $('#locationRadius').val(row.radius_meter ?? '100');
                $('#locationDescription').val(row.description || '');
                $('#locationActive').prop('checked', !!row.is_active);
                setMapMode(true);
                modal.show();
            });

            $('#btnToggleMapMode').on('click', function () {
                setMapMode(!mapModeActive);
            });

            $('#btnOsmSearch').on('click', doOsmSearch);
            $('#osmSearchInput').on('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    doOsmSearch();
                }
            });
            let osmSearchTimer = null;
            $('#osmSearchInput').on('input', function () {
                if (!mapModeActive) {
                    setMapMode(true);
                }
                if (osmSearchTimer) clearTimeout(osmSearchTimer);
                osmSearchTimer = setTimeout(doOsmSearch, 400);
            });
            $('#osmSearchResults').on('click', '.osm-item', function () {
                const idx = Number($(this).data('idx'));
                const item = lastSearchResults[idx];
                if (!item) return;
                const lat = Number(item.lat);
                const lon = Number(item.lon);
                writeLatLng(lat, lon);
                setMapMode(true);
                syncMapToInput();
            });

            $('#locationLatitude, #locationLongitude').on('input change', function () {
                syncMapToInput();
            });
            $('#locationRadius').on('input change', function () {
                syncRadiusToMap();
            });

            $('#btnUseCurrentLocation').on('click', function () {
                if (!navigator.geolocation) {
                    Swal.fire('Error', 'Browser tidak mendukung geolocation.', 'error');
                    return;
                }
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        writeLatLng(lat, lng);
                        setMapMode(true);
                        syncMapToInput();
                    },
                    function () {
                        Swal.fire('Error', 'Gagal mengambil lokasi. Pastikan izin lokasi aktif.', 'error');
                    },
                    { enableHighAccuracy: true, timeout: 12000, maximumAge: 0 }
                );
            });

            modalEl.addEventListener('shown.bs.modal', function () {
                if (mapModeActive && osmMap) {
                    setTimeout(() => osmMap.invalidateSize(), 50);
                }
            });

            $('#locationForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#locationId').val();
                const payload = {
                    code: ($('#locationCode').val() || '').toString().trim(),
                    name: ($('#locationName').val() || '').toString().trim(),
                    latitude: ($('#locationLatitude').val() || '').toString().trim(),
                    longitude: ($('#locationLongitude').val() || '').toString().trim(),
                    radius_meter: ($('#locationRadius').val() || '').toString().trim(),
                    description: ($('#locationDescription').val() || '').toString().trim(),
                    is_active: $('#locationActive').is(':checked') ? 1 : 0
                };
                if (!payload.code || !payload.name || !payload.latitude || !payload.longitude || !payload.radius_meter) {
                    Swal.fire('Warning', 'Kode, Nama, Latitude, Longitude, dan Radius wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id ? `{{ url('/master-location-gps') }}/${id}` : '{{ route('master_location_gps.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#locationTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete location GPS?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-location-gps') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            loadData();
        });
    </script>
@endpush