@push('styles')
    <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet">
    <style>
        #peg-map { min-height: 420px; border-radius: 1.5rem; }
    </style>
@endpush
<div class="panel-card rounded-5 p-4">
    <form method="POST" action="{{ $peg->exists ? route('admin.water-pegs.update', [$water, $peg]) : route('admin.water-pegs.store', $water) }}" class="row g-3">
        @csrf
        @if($peg->exists) @method('PUT') @endif
        <div class="col-md-6"><label class="form-label">Peg No / Peg Name</label><input name="identifier" value="{{ old('identifier', $peg->identifier) }}" class="form-control rounded-4" required></div>
        <div class="col-md-3"><label class="form-label">Sort Order</label><input type="number" min="0" name="sort_order" value="{{ old('sort_order', $peg->sort_order ?? 0) }}" class="form-control rounded-4"></div>
        <div class="col-md-3 d-flex align-items-end"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="is_open" value="1" id="peg_is_open" @checked(old('is_open', $peg->exists ? $peg->is_open : true))><label class="form-check-label" for="peg_is_open">Open Peg</label></div></div>
        <div class="col-12"><label class="form-label">Description</label><textarea name="description" rows="5" class="form-control rounded-4">{{ old('description', $peg->description) }}</textarea></div>
        <div class="col-md-6"><label class="form-label">Wraps</label><input type="number" min="0" step="0.01" name="wraps" value="{{ old('wraps', $peg->wraps) }}" class="form-control rounded-4"><div class="form-text">1 wrap = 12ft.</div></div>
        <div class="col-md-6"><label class="form-label">Latitude</label><input id="peg_latitude" name="latitude" value="{{ old('latitude', $peg->latitude) }}" class="form-control rounded-4" placeholder="Selected from map"></div>
        <div class="col-md-6"><label class="form-label">Longitude</label><input id="peg_longitude" name="longitude" value="{{ old('longitude', $peg->longitude) }}" class="form-control rounded-4" placeholder="Selected from map"></div>
        <div class="col-12">
            <label class="form-label">Peg Location</label>
            <div id="peg-map"></div>
            <div class="form-text mt-2">Admin only. Click the map to place the peg pin, or drag the existing pin to update it. The map starts from the fishery contact location when no peg pin has been saved yet.</div>
        </div>
        <div class="col-12" id="peg-closure-reason-wrap" style="{{ old('is_open', $peg->exists ? $peg->is_open : true) ? 'display:none;' : '' }}">
            <label class="form-label">Closure Reason</label>
            <textarea name="closure_reason" rows="4" class="form-control rounded-4">{{ old('closure_reason', $peg->closure_reason) }}</textarea>
        </div>
        <div class="col-12 d-flex gap-2">
            <button class="btn btn-primary rounded-pill">{{ $peg->exists ? 'Save Peg' : 'Create Peg' }}</button>
            <a href="{{ route('admin.water-pegs.index', $water) }}" class="btn btn-outline-secondary rounded-pill">Back</a>
            @if($peg->exists)
                <button type="submit" form="delete-peg-form" class="btn btn-outline-danger rounded-pill" onclick="return confirm('Delete this peg?')">Delete</button>
            @endif
        </div>
    </form>
    @if($peg->exists)
        <form id="delete-peg-form" method="POST" action="{{ route('admin.water-pegs.destroy', [$water, $peg]) }}">@csrf @method('DELETE')</form>
    @endif
</div>
@push('scripts')
    <script>
        (() => {
            const toggle = document.getElementById('peg_is_open');
            const reasonWrap = document.getElementById('peg-closure-reason-wrap');
            if (!toggle || !reasonWrap) return;
            const sync = () => { reasonWrap.style.display = toggle.checked ? 'none' : ''; };
            toggle.addEventListener('change', sync);
            sync();
        })();
    </script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        (() => {
            const mapElement = document.getElementById('peg-map');
            const latInput = document.getElementById('peg_latitude');
            const lngInput = document.getElementById('peg_longitude');

            if (!mapElement || !latInput || !lngInput || typeof L === 'undefined') {
                return;
            }

            const savedLat = Number.parseFloat(latInput.value);
            const savedLng = Number.parseFloat(lngInput.value);
            const hasSavedPin = Number.isFinite(savedLat) && Number.isFinite(savedLng);
            const fisheryMapQuery = @json($fisheryMapQuery ?? '');

            const map = L.map(mapElement, {
                center: hasSavedPin ? [savedLat, savedLng] : [52.6309, 1.2974],
                zoom: hasSavedPin ? 18 : 14,
            });

            const streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors',
                maxZoom: 20,
            });

            const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles &copy; Esri',
                maxZoom: 20,
            });

            streetLayer.addTo(map);

            L.control.layers(
                {
                    'Map View': streetLayer,
                    'Satellite View': satelliteLayer,
                },
                {},
                { collapsed: false }
            ).addTo(map);

            let marker = null;

            const setMarker = (lat, lng, fit = true) => {
                latInput.value = Number(lat).toFixed(7);
                lngInput.value = Number(lng).toFixed(7);

                if (!marker) {
                    marker = L.marker([lat, lng], { draggable: true }).addTo(map);
                    marker.on('dragend', (event) => {
                        const point = event.target.getLatLng();
                        setMarker(point.lat, point.lng, false);
                    });
                } else {
                    marker.setLatLng([lat, lng]);
                }

                if (fit) {
                    map.setView([lat, lng], Math.max(map.getZoom(), 18));
                }
            };

            map.on('click', (event) => {
                setMarker(event.latlng.lat, event.latlng.lng);
            });

            if (hasSavedPin) {
                setMarker(savedLat, savedLng);
                return;
            }

            if (!fisheryMapQuery) {
                return;
            }

            fetch(`https://nominatim.openstreetmap.org/search?format=jsonv2&limit=1&q=${encodeURIComponent(fisheryMapQuery)}`, {
                headers: {
                    Accept: 'application/json',
                },
            })
                .then((response) => response.ok ? response.json() : [])
                .then((results) => {
                    if (!Array.isArray(results) || results.length === 0) {
                        return;
                    }

                    const first = results[0];
                    const lat = Number.parseFloat(first.lat);
                    const lng = Number.parseFloat(first.lon);

                    if (Number.isFinite(lat) && Number.isFinite(lng)) {
                        map.setView([lat, lng], 16);
                    }
                })
                .catch(() => {
                });
        })();
    </script>
@endpush