@extends('layouts.app')
@include('partials.back')

@section('title', 'Shop location')

@push('head')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css">
<style>
    #map { width:100%; height:460px; border-radius:14px; z-index:0; }
    .loc-input { height:44px; border:1px solid #ccc; border-radius:10px; padding:0 14px; }
</style>
@endpush

@section('content')
<div style="max-width:720px;margin:0 auto;padding:24px">
    <h1 style="font-size:24px;font-weight:700;margin-bottom:8px">Shop area</h1>
    <p style="font-size:14px;color:#666;margin-bottom:16px">
        Customers can only order from inside the blue shape. Use the polygon or rectangle tool (top left of the map),
        click each corner, then click the first point to finish. Use the edit tool to drag corners.
    </p>

    @if (session('status'))
        <div style="background:#e7f6ec;color:#1a6b35;padding:10px 14px;border-radius:10px;margin-bottom:12px">{{ session('status') }}</div>
    @endif
    @if ($errors->any())
        <div style="background:#ffdad6;color:#93000a;padding:10px 14px;border-radius:10px;margin-bottom:12px">
            @foreach ($errors->all() as $e)<div>{{ $e }}</div>@endforeach
        </div>
    @endif

    <div style="display:flex;gap:8px;margin-bottom:10px">
        <input id="search" type="text" class="loc-input" style="flex:1" placeholder="Search an address or place name">
        <button type="button" id="searchBtn"
                style="height:44px;padding:0 16px;border:0;border-radius:10px;background:#111;color:#fff;font-weight:700;cursor:pointer">Search</button>
        <button type="button" id="useMe"
                style="height:44px;padding:0 16px;border:0;border-radius:10px;background:#e9e7ed;font-weight:700;cursor:pointer">My location</button>
    </div>

    <div id="map"></div>
    <p id="geoMsg" style="font-size:13px;margin:8px 0 0;min-height:18px"></p>

    <form method="POST" action="{{ route('admin.shop.update') }}" style="display:flex;flex-direction:column;gap:12px;margin-top:12px">
        @csrf @method('PUT')

        <input type="hidden" id="polygon" name="polygon" value="{{ old('polygon', $shop->polygon ?? '') }}">

        <label style="font-weight:700;font-size:14px" for="radius">Fallback radius (meters)</label>
        <input id="radius" name="radius" type="number" min="10" max="5000" class="loc-input" value="{{ old('radius', $shop->radius ?? 100) }}">
        <small style="color:#666">Only used when no area is drawn.</small>

        <button type="submit"
                style="height:46px;border:0;border-radius:10px;background:#0058bc;color:#fff;font-weight:700;cursor:pointer">
            Save
        </button>
    </form>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script>
(function () {
    const polyEl = document.getElementById('polygon');
    const msg    = document.getElementById('geoMsg');

    let saved = [];
    try { saved = JSON.parse(polyEl.value || '[]'); } catch (e) {}
    const hasShape = Array.isArray(saved) && saved.length >= 3;
    const shapeStyle = { color: '#0058bc', fillColor: '#0058bc', fillOpacity: 0.15 };

    // No shape yet: start at the saved shop point (lat/lng from the old circle setup)
    const oldPos = @json($shop && $shop->lat !== null ? [(float) $shop->lat, (float) $shop->lng] : null);
    const start  = hasShape ? saved[0] : (oldPos || [11.5564, 104.9282]);   // default: Phnom Penh

    const map = L.map('map').setView(start, hasShape || oldPos ? 18 : 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    const drawn = new L.FeatureGroup().addTo(map);

    if (hasShape) {
        const layer = L.polygon(saved, shapeStyle).addTo(drawn);
        map.fitBounds(layer.getBounds(), { padding: [30, 30] });
    }

    map.addControl(new L.Control.Draw({
        draw: {
            polygon: { allowIntersection: false, showArea: true, shapeOptions: shapeStyle },
            rectangle: { shapeOptions: shapeStyle },
            polyline: false, circle: false, marker: false, circlemarker: false
        },
        edit: { featureGroup: drawn }
    }));

    // Write the current shape into the hidden field
    function sync() {
        const layer = drawn.getLayers()[0];
        if (!layer) { polyEl.value = ''; return; }
        const pts = layer.getLatLngs()[0].map(p => [+p.lat.toFixed(7), +p.lng.toFixed(7)]);
        polyEl.value = JSON.stringify(pts);
    }

    map.on(L.Draw.Event.CREATED, e => { drawn.clearLayers(); drawn.addLayer(e.layer); sync(); });   // one shape only
    map.on(L.Draw.Event.EDITED, sync);
    map.on(L.Draw.Event.DELETED, sync);

    // Move the map to your location (does not change the shape)
    document.getElementById('useMe').addEventListener('click', () => {
        msg.style.color = '#666'; msg.textContent = 'Getting your location...';
        if (!navigator.geolocation) { msg.style.color = '#B3261E'; msg.textContent = 'This browser cannot get location.'; return; }
        navigator.geolocation.getCurrentPosition(
            p => {
                map.setView([p.coords.latitude, p.coords.longitude], 19);
                msg.style.color = '#1a6b35';
                msg.textContent = 'Map moved to you (accuracy about ' + Math.round(p.coords.accuracy) + ' m). Now draw the shape.';
            },
            () => { msg.style.color = '#B3261E'; msg.textContent = 'Could not get location. Allow access, or use search.'; },
            { enableHighAccuracy: true, timeout: 15000 }
        );
    });

    // Search by address (OpenStreetMap Nominatim)
    async function search() {
        const q = document.getElementById('search').value.trim();
        if (!q) return;
        msg.style.color = '#666'; msg.textContent = 'Searching...';
        try {
            const res  = await fetch('https://nominatim.openstreetmap.org/search?format=json&limit=1&q=' + encodeURIComponent(q));
            const list = await res.json();
            if (!list.length) { msg.style.color = '#B3261E'; msg.textContent = 'Nothing found. Try another name.'; return; }
            map.setView([parseFloat(list[0].lat), parseFloat(list[0].lon)], 19);
            msg.style.color = '#1a6b35'; msg.textContent = 'Found: ' + list[0].display_name + '. Now draw the shop area.';
        } catch (e) {
            msg.style.color = '#B3261E'; msg.textContent = 'Search failed.';
        }
    }
    document.getElementById('searchBtn').addEventListener('click', search);
    document.getElementById('search').addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); search(); } });
})();
</script>
@endsection