@extends('layouts.app')

@section('title', match(current_locale()) {
    'en' => 'Stores',
    'ru' => 'Магазины',
    default => 'Satış nöqtələri',
})

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
    .stores-page {
        background: #342c29;
        color: #fff;
    }

    .stores-map {
        min-height: min(64vh, 640px);
        border-radius: 24px;
        overflow: hidden;
        background: #201b18;
    }

    .stores-card {
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 18px;
        background: rgba(31,26,23,.72);
        transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .stores-card:hover {
        border-color: rgba(199,125,74,.42);
        background: rgba(31,26,23,.92);
        transform: translateY(-1px);
    }

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
        background: #201b18;
        color: #fff;
    }

    @media (max-width: 1023px) {
        .stores-map {
            min-height: 420px;
            border-radius: 18px;
        }
    }
</style>
@endpush

@section('content')
<section class="stores-page py-16 md:py-24">
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-10">
            <p class="text-[#c77d4a] uppercase tracking-[0.18em] text-xs mb-4">BERNESSO</p>
            <h1 class="text-3xl md:text-5xl font-light">
                @switch(current_locale())
                    @case('en') Stores @break
                    @case('ru') Магазины @break
                    @default Satış nöqtələri
                @endswitch
            </h1>
            <p class="text-white/58 mt-4 max-w-2xl">
                @switch(current_locale())
                    @case('en') Find BERNESSO stores and partner sales points on the live map. @break
                    @case('ru') Найдите магазины и точки продаж BERNESSO на интерактивной карте. @break
                    @default BERNESSO mağazalarını və satış nöqtələrini canlı xəritədə tapın.
                @endswitch
            </p>
        </div>

        @if($stores->isEmpty())
            <div class="rounded-2xl bg-[#231e1b] p-8 text-white/65">
                Satış nöqtəsi hələ əlavə olunmayıb.
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-[420px_1fr] gap-6">
                <div class="space-y-4 lg:max-h-[640px] lg:overflow-auto lg:pr-2">
                    @foreach($stores as $store)
                        <div
                            role="button"
                            tabindex="0"
                            class="stores-card w-full text-left p-5"
                            data-store-focus="{{ $store->id }}"
                        >
                            <span class="block text-lg text-white font-medium">{{ $store->name }}</span>
                            @if($store->city)
                                <span class="block text-[#c77d4a] text-sm mt-1">{{ $store->city }}</span>
                            @endif
                            <span class="block text-white/62 text-sm mt-3 leading-relaxed">{{ $store->address }}</span>
                            @if($store->phone)
                                <span class="block text-white/78 text-sm mt-3">{{ $store->phone }}</span>
                            @endif
                            @if($store->work_hours)
                                <span class="block text-white/45 text-xs mt-2">{{ $store->work_hours }}</span>
                            @endif
                            @if($store->map_url)
                                <a href="{{ $store->map_url }}" target="_blank" rel="noopener" class="inline-flex mt-4 text-sm text-[#c77d4a] hover:text-white transition" onclick="event.stopPropagation()">
                                    Xəritədə aç
                                </a>
                            @endif
                        </div>
                    @endforeach
                </div>

                <div id="stores-map" class="stores-map"></div>
            </div>
        @endif
    </div>
</section>

@if($stores->isNotEmpty())
@php
    $storesForMap = $stores->map(function ($store) {
        return [
            'id' => $store->id,
            'name' => $store->name,
            'city' => $store->city,
            'address' => $store->address,
            'phone' => $store->phone,
            'work_hours' => $store->work_hours,
            'map_url' => $store->map_url,
            'lat' => (float) $store->latitude,
            'lng' => (float) $store->longitude,
        ];
    })->values();
@endphp
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var stores = @json($storesForMap);

        if (!window.L || !stores.length) return;

        var map = L.map('stores-map', {
            scrollWheelZoom: false
        });

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap'
        }).addTo(map);

        var markers = {};
        var bounds = [];

        stores.forEach(function (store) {
            var marker = L.marker([store.lat, store.lng]).addTo(map);
            var popup = '<strong>' + store.name + '</strong><br>' + store.address;

            if (store.phone) {
                popup += '<br>' + store.phone;
            }

            if (store.map_url) {
                popup += '<br><a href="' + store.map_url + '" target="_blank" rel="noopener" style="color:#c77d4a">Xəritədə aç</a>';
            }

            marker.bindPopup(popup);
            markers[store.id] = marker;
            bounds.push([store.lat, store.lng]);
        });

        if (bounds.length === 1) {
            map.setView(bounds[0], 15);
        } else {
            map.fitBounds(bounds, { padding: [36, 36] });
        }

        document.querySelectorAll('[data-store-focus]').forEach(function (button) {
            button.addEventListener('click', function () {
                var marker = markers[button.dataset.storeFocus];
                if (!marker) return;
                map.setView(marker.getLatLng(), 16);
                marker.openPopup();
            });
        });
    });
</script>
@endif
@endsection