{{-- Store Locator Modal — shows all own warehouses with details --}}
@php
    $warehouses = \ViartasShop\Warehouses\Models\Warehouse::where('is_own', true)
        ->orderBy('city')
        ->get();
@endphp

<div class="modal location-modal fade theme-modal" id="locationModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            {{-- Header --}}
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{ __('warehouses.our_shops') }}</h5>
                <p class="mt-1 text-content">{{ __('warehouses.choose_location') }}</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <div class="modal-body">
                {{-- List view --}}
                <div class="location-list" id="storeListView">
                    <div class="search-input">
                        <input type="search" class="form-control" id="storeSearch"
                               placeholder="{{ __('warehouses.search_store') }}">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </div>

                    <div class="disabled-box">
                        <h6>{{ __('warehouses.select_store') }}</h6>
                    </div>

                    <ul class="location-select custom-height" id="storeList">
                        @forelse($warehouses as $warehouse)
                            <li class="store-item"
                                data-search="{{ mb_strtolower($warehouse->getLocalizedTitle() . ' ' . $warehouse->city . ' ' . $warehouse->address) }}">
                                <a href="javascript:void(0)" class="store-select-btn"
                                   data-id="{{ $warehouse->id }}"
                                   data-title="{{ $warehouse->getLocalizedTitle() }}"
                                   data-address="{{ $warehouse->full_address }}"
                                   data-street="{{ $warehouse->address }}"
                                   data-city="{{ $warehouse->city }}"
                                   data-phone="{{ $warehouse->phone }}"
                                   data-email="{{ $warehouse->email }}"
                                   data-map-q="{{ urlencode($warehouse->address . ', ' . $warehouse->city) }}">
                                    <h6>{{ $warehouse->getLocalizedTitle() }}</h6>
                                    <span>{{ $warehouse->address }}@if($warehouse->city), {{ $warehouse->city }}@endif</span>
                                </a>
                            </li>
                        @empty
                            <li>
                                <a href="javascript:void(0)">
                                    <h6>{{ __('warehouses.no_stores') }}</h6>
                                </a>
                            </li>
                        @endforelse
                    </ul>
                </div>

                {{-- Detail view (hidden by default) --}}
                <div class="store-detail-view" id="storeDetailView" style="display:none;">
                    <button type="button" class="btn btn-sm btn-outline-secondary mb-3" id="storeBackBtn">
                        <i class="fa-solid fa-arrow-left me-1"></i> {{ __('warehouses.all_stores') }}
                    </button>

                    <div class="store-detail-card">
                        {{-- Map --}}
                        <div class="store-map" id="storeMap">
                            <iframe id="storeMapFrame" width="100%" height="200" style="border:0; border-radius:8px;"
                                    loading="lazy" referrerpolicy="no-referrer-when-downgrade"
                                    allowfullscreen src=""></iframe>
                        </div>

                        {{-- Info --}}
                        <div class="store-detail-info mt-3">
                            <h5 id="storeDetailTitle" class="fw-semibold mb-3"></h5>

                            <div class="store-detail-row mb-2">
                                <i class="fa-solid fa-location-dot text-content"></i>
                                <span id="storeDetailAddress"></span>
                            </div>

                            <div class="store-detail-row mb-2" id="storeDetailPhoneRow" style="display:none;">
                                <i class="fa-solid fa-phone text-content"></i>
                                <a href="#" id="storeDetailPhone"></a>
                            </div>

                            <div class="store-detail-row mb-2" id="storeDetailEmailRow" style="display:none;">
                                <i class="fa-solid fa-envelope text-content"></i>
                                <a href="#" id="storeDetailEmail"></a>
                            </div>
                        </div>

                        {{-- Directions button --}}
                        <a href="#" id="storeDirectionsLink" class="btn btn-animation w-100 mt-3" target="_blank">
                            <i class="fa-solid fa-diamond-turn-right me-2"></i>
                            {{ __('warehouses.get_directions') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.store-detail-card { padding: 0; }
.store-detail-row { display:flex; align-items:flex-start; gap:10px; font-size:14px; }
.store-detail-row i { margin-top:3px; width:16px; text-align:center; flex-shrink:0; }
.store-detail-row a { color:#1e293b; text-decoration:none; }
.store-detail-row a:hover { color:var(--theme-color, #3b82f6); }
#storeBackBtn { border-color:#e2e8f0; color:#64748b; }
#storeBackBtn:hover { background:#f8fafc; color:#1e293b; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var search = document.getElementById('storeSearch');
    var list = document.getElementById('storeList');
    var listView = document.getElementById('storeListView');
    var detailView = document.getElementById('storeDetailView');
    var backBtn = document.getElementById('storeBackBtn');

    if (!list) return;

    // Search filter
    if (search) {
        search.addEventListener('input', function () {
            var q = this.value.trim().toLowerCase();
            list.querySelectorAll('.store-item').forEach(function (item) {
                item.style.display = (q.length > 0 && (item.dataset.search || '').indexOf(q) === -1) ? 'none' : '';
            });
        });
    }

    // Store select → show detail
    list.querySelectorAll('.store-select-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var d = this.dataset;

            document.getElementById('storeDetailTitle').textContent = d.title;
            document.getElementById('storeDetailAddress').textContent = d.address;

            var phoneRow = document.getElementById('storeDetailPhoneRow');
            var phoneEl = document.getElementById('storeDetailPhone');
            if (d.phone) {
                phoneRow.style.display = 'flex';
                phoneEl.textContent = d.phone;
                phoneEl.href = 'tel:' + d.phone;
            } else {
                phoneRow.style.display = 'none';
            }

            var emailRow = document.getElementById('storeDetailEmailRow');
            var emailEl = document.getElementById('storeDetailEmail');
            if (d.email) {
                emailRow.style.display = 'flex';
                emailEl.textContent = d.email;
                emailEl.href = 'mailto:' + d.email;
            } else {
                emailRow.style.display = 'none';
            }

            // Google Maps embed
            var mapFrame = document.getElementById('storeMapFrame');
            mapFrame.src = 'https://maps.google.com/maps?q=' + d.mapQ + '&output=embed&z=15';

            // Directions link
            document.getElementById('storeDirectionsLink').href =
                'https://www.google.com/maps/dir/?api=1&destination=' + d.mapQ;

            listView.style.display = 'none';
            detailView.style.display = 'block';
        });
    });

    // Back button
    if (backBtn) {
        backBtn.addEventListener('click', function () {
            detailView.style.display = 'none';
            listView.style.display = 'block';
            document.getElementById('storeMapFrame').src = '';
        });
    }

    // Reset on modal close
    var modal = document.getElementById('locationModal');
    if (modal) {
        modal.addEventListener('hidden.bs.modal', function () {
            detailView.style.display = 'none';
            listView.style.display = 'block';
            document.getElementById('storeMapFrame').src = '';
            if (search) search.value = '';
            list.querySelectorAll('.store-item').forEach(function (item) {
                item.style.display = '';
            });
        });
    }
});
</script>
