@extends('public.layout')

@section('content')
    {{-- Sifariş uğurlu mesajı --}}
    @if(request()->has('sifaris') && request()->get('sifaris') === 'ok')
        <div id="orderSuccess" class="libro-order-success" style="position:fixed;top:0;left:0;right:0;z-index:9999;background:#22c55e;color:#fff;padding:20px;text-align:center;font-size:16px;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,0.15);display:flex;align-items:center;justify-content:center;gap:8px;">
            <x-icon name="circle-check" class="w-5 h-5" /> Sifarişiniz qəbul edildi! Tezliklə sizinlə əlaqə saxlanılacaq.
        </div>
        <script>
            setTimeout(function(){ let el = document.getElementById('orderSuccess'); if(el) el.style.display = 'none'; }, 5000);
            if (history.replaceState) { history.replaceState({}, '', window.location.pathname); }
        </script>
    @endif

    {{-- HTML-шаблон --}}
    @if($page->html_content)
        {!! $page->html_content !!}
    @else
        <div style="text-align:center;padding:64px 16px;color:#94a3b8;">Səhifə boşdur</div>
    @endif

    {{-- Рендер карт: section[data-editable="map"] → read-only Leaflet --}}
    <script>
    (function () {
        var maps = document.querySelectorAll('section[data-editable="map"], [data-editable="map"]');
        if (!maps.length) return;

        var JAWG_ACCESS_TOKEN = @json(config('services.jawg.access_token') ?: '');

        function loadCss(href) {
            var l = document.createElement('link');
            l.rel = 'stylesheet';
            l.href = href;
            document.head.appendChild(l);
        }
        function loadScript(src, cb) {
            var s = document.createElement('script');
            s.src = src;
            s.onload = cb;
            s.onerror = cb;
            document.head.appendChild(s);
        }
        function esc(s) {
            return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
            });
        }
        function pinIcon(number) {
            var n = number || 1;
            var color = '#6366f1';
            return L.divIcon({
                className: 'libro-map-pin',
                html: '<svg width="40" height="40" viewBox="0 0 24 24" fill="' + color + '" stroke="#ffffff" stroke-width="1.3" style="filter:drop-shadow(0 3px 6px rgba(0,0,0,0.35));">'
                    + '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>'
                    + '<circle cx="12" cy="10" r="3.2" fill="#ffffff" stroke="none"/>'
                    + '<text x="12" y="10.5" text-anchor="middle" font-size="10.5" font-weight="700" fill="' + color + '" stroke="none" style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;">' + n + '</text>'
                    + '</svg>',
                iconSize: [40, 40],
                iconAnchor: [20, 38],
                popupAnchor: [0, -36]
            });
        }
        function renderMaps() {
            for (var i = 0; i < maps.length; i++) {
                (function (sec) {
                    var points = [];
                    var raw = sec.getAttribute('data-points');
                    if (raw) {
                        try { points = JSON.parse(raw) || []; } catch (e) { points = []; }
                    }
                    if (!points.length) {
                        var lat = parseFloat(sec.getAttribute('data-lat'));
                        var lng = parseFloat(sec.getAttribute('data-lng'));
                        if (lat && lng) {
                            points = [{ lat: lat, lng: lng, name: '', address: sec.getAttribute('data-address') || '' }];
                        }
                    }
                    points = points.filter(function (p) {
                        return p && isFinite(parseFloat(p.lat)) && isFinite(parseFloat(p.lng));
                    });
                    if (!points.length) return;

                    sec.innerHTML = '';
                    sec.style.display = 'block';
                    sec.style.width = '100%';
                    sec.style.minHeight = '280px';

                    var zoom = parseInt(sec.getAttribute('data-zoom'), 10) || 13;
                    var map = L.map(sec, { scrollWheelZoom: false, touchZoom: true });
                    if (JAWG_ACCESS_TOKEN) {
                        L.tileLayer('https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=' + JAWG_ACCESS_TOKEN, {
                            maxZoom: 20,
                            subdomains: 'abcd',
                            detectRetina: true,
                            attribution: '&copy; <a href="https://www.jawg.io/" target="_blank">Jawg</a> &copy; OpenStreetMap contributors'
                        }).addTo(map);
                    } else {
                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            maxZoom: 19,
                            attribution: '&copy; OpenStreetMap contributors'
                        }).addTo(map);
                    }

                    var latLngs = [];
                    for (var k = 0; k < points.length; k++) {
                        var pt = points[k];
                        var ll = [parseFloat(pt.lat), parseFloat(pt.lng)];
                        latLngs.push(ll);
                        var popup = '';
                        if (pt.name || pt.address) {
                            popup = '<div style="font-size:13px;line-height:1.45;max-width:220px;">'
                                + (pt.name ? '<div style="font-weight:600;margin-bottom:2px;">' + esc(pt.name) + '</div>' : '')
                                + (pt.address ? '<div style="color:#64748b;">' + esc(pt.address) + '</div>' : '')
                                + '</div>';
                        }
                        var marker = L.marker(ll, { icon: pinIcon(k + 1) }).addTo(map);
                        if (popup) marker.bindPopup(popup);
                    }

                    if (latLngs.length === 1) {
                        map.setView(latLngs[0], zoom);
                    } else {
                        map.fitBounds(L.latLngBounds(latLngs), { padding: [40, 40] });
                    }
                })(maps[i]);
            }
        }

        loadCss('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
        loadScript('https://unpkg.com/leaflet@1.9.4/dist/leaflet.js', function () {
            if (window.L) renderMaps();
        });
    })();
    </script>

    {{-- AJAX-отправка форм <libro-form> без перезагрузки страницы --}}
    <script>
    (function () {
        function toast(msg, ok) {
            var old = document.getElementById('libroOrderToast');
            if (old) old.remove();
            var div = document.createElement('div');
            div.id = 'libroOrderToast';
            div.textContent = msg;
            div.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:9999;padding:16px 20px;text-align:center;font-size:15px;font-weight:600;line-height:1.4;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.18);' + (ok ? 'background:#22c55e;' : 'background:#ef4444;');
            document.body.appendChild(div);
            setTimeout(function () { if (div.parentNode) div.remove(); }, 5000);
        }

        function bindForms() {
            document.querySelectorAll('form.libro-order-form').forEach(function (form) {
                if (form.getAttribute('data-libro-bound')) return;
                form.setAttribute('data-libro-bound', '1');

                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    var btn = form.querySelector('button[type="submit"], input[type="submit"]');
                    if (btn) btn.disabled = true;

                    fetch(form.getAttribute('action'), {
                        method: 'POST',
                        body: new FormData(form),
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                    }).then(function (r) {
                        return r.json().then(function (j) { return { ok: r.ok, json: j }; })
                            .catch(function () { return { ok: r.ok, json: null }; });
                    }).then(function (res) {
                        if (btn) btn.disabled = false;
                        if (res.ok) {
                            var msg = (res.json && res.json.message) || 'Sifarişiniz qəbul edildi!';
                            toast(msg, true);
                            form.reset();
                        } else {
                            var err = 'Xəta baş verdi. Zəhmət olmasa yenidən cəhd edin.';
                            if (res.json && res.json.errors) {
                                for (var k in res.json.errors) {
                                    var arr = res.json.errors[k];
                                    if (arr && arr.length) { err = arr[0]; break; }
                                }
                            } else if (res.json && res.json.message) {
                                err = res.json.message;
                            }
                            toast(err, false);
                        }
                    }).catch(function () {
                        if (btn) btn.disabled = false;
                        toast('Xəta baş verdi. Zəhmət olmasa yenidən cəhd edin.', false);
                    });
                });
            });
        }

        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bindForms);
        else bindForms();
    })();
    </script>
@endsection