@extends('frontendLayout')

@section('frontend_layout')
    @push('frontend_css')
        <style>
            .food-store-page {
                background:
                    radial-gradient(circle at top left, rgba(255, 214, 153, .45), transparent 32%),
                    radial-gradient(circle at top right, rgba(21, 45, 108, .12), transparent 28%),
                    linear-gradient(145deg, #f5f7f8 0%, #f1ede8 100%);
                min-height: 100vh;
                padding: 42px 0 70px;
            }

            .store-top {
                background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 249, 242, .94));
                border: 1px solid rgba(0, 0, 0, .08);
                border-radius: 24px;
                padding: 26px;
                box-shadow: 0 18px 42px rgba(0, 0, 0, .07);
                margin-bottom: 18px;
                overflow: hidden;
                position: relative;
            }

            .store-top::after {
                content: '';
                position: absolute;
                inset: auto -60px -90px auto;
                width: 220px;
                height: 220px;
                border-radius: 999px;
                background: radial-gradient(circle, rgba(21, 45, 108, .08), transparent 70%);
                pointer-events: none;
            }

            .store-head {
                display: flex;
                gap: 18px;
                align-items: center;
                margin-bottom: 18px;
                position: relative;
                z-index: 1;
            }

            .store-logo {
                width: 82px;
                height: 82px;
                object-fit: cover;
                border-radius: 22px;
                border: 1px solid rgba(0, 0, 0, .1);
                box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
            }

            .store-title {
                font-family: 'DM Serif Display', serif;
                font-size: clamp(1.8rem, 4vw, 2.5rem);
                margin: 0;
                color: #171a22;
            }

            .store-desc {
                color: #565d69;
                margin: 8px 0 0;
                font-size: .94rem;
                max-width: 720px;
            }

            .store-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin: 14px 0 0;
            }

            .store-meta-chip {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                border-radius: 999px;
                padding: 8px 12px;
                background: rgba(255, 255, 255, .82);
                border: 1px solid rgba(0, 0, 0, .08);
                color: #21242d;
                font-size: .78rem;
                font-weight: 700;
                box-shadow: 0 6px 14px rgba(0, 0, 0, .04);
            }

            .delivery-row {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                margin-top: 18px;
                position: relative;
                z-index: 1;
            }

            .delivery-chip {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                border: 1px solid rgba(0, 0, 0, .08);
                border-radius: 999px;
                padding: 10px 16px;
                font-size: .84rem;
                font-weight: 700;
                text-decoration: none;
                color: #21242d;
                background: #fff;
                transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
                box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
            }

            .delivery-chip:hover {
                transform: translateY(-2px);
                box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
                color: #21242d;
            }

            .delivery-chip.foodpanda {
                border-color: rgba(226, 27, 112, .25);
            }

            .delivery-chip.pathao {
                border-color: rgba(225, 36, 84, .22);
            }

            .delivery-chip.foodi {
                border-color: rgba(21, 45, 108, .18);
            }

            .delivery-empty {
                margin-top: 18px;
                border: 1px dashed rgba(0, 0, 0, .16);
                border-radius: 16px;
                padding: 14px 16px;
                background: rgba(255, 255, 255, .62);
                color: #5b6370;
                font-size: .84rem;
                position: relative;
                z-index: 1;
            }

            .search-wrap {
                position: relative;
                margin: 22px 0 14px;
                position: relative;
                z-index: 1;
            }

            .search-input {
                width: 100%;
                border: 1px solid rgba(0, 0, 0, .12);
                border-radius: 14px;
                padding: 14px 46px 14px 16px;
                font-size: .92rem;
                outline: none;
                background: rgba(255, 255, 255, .9);
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, .02);
            }

            .search-input:focus {
                border-color: rgba(21, 45, 108, .28);
                box-shadow: 0 0 0 4px rgba(21, 45, 108, .08);
            }

            .search-wrap i {
                position: absolute;
                right: 14px;
                top: 50%;
                transform: translateY(-50%);
                color: #77808c;
            }

            .menu-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 16px;
            }

            .menu-card {
                background: #fff;
                border: 1px solid rgba(0, 0, 0, .08);
                border-radius: 14px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                box-shadow: 0 10px 20px rgba(0, 0, 0, .04);
                height: 100%;
            }

            .menu-img {
                width: 100%;
                height: 150px;
                object-fit: cover;
                background: #eef0f2;
            }

            .menu-body {
                padding: 12px;
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .menu-title {
                font-weight: 700;
                font-size: .92rem;
                margin-bottom: 6px;
                color: #1f232d;
            }

            .menu-desc {
                color: #666f7d;
                font-size: .82rem;
                line-height: 1.45;
                margin-bottom: 10px;
                min-height: 34px;
            }

            .menu-price {
                margin-top: auto;
                font-size: 1.05rem;
                font-weight: 800;
                color: #152D6C;
            }

            .tag-list {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 8px;
            }

            .tag-item {
                font-size: .67rem;
                background: #eef2ff;
                color: #152D6C;
                border-radius: 999px;
                padding: 3px 8px;
            }

            .result-meta {
                font-size: .82rem;
                color: #596170;
                margin-bottom: 14px;
                position: relative;
                z-index: 1;
            }

            .empty-results {
                text-align: center;
                background: #fff;
                border: 1px dashed rgba(0, 0, 0, .2);
                border-radius: 14px;
                padding: 30px;
                color: #646d7a;
            }

            @media (max-width: 767px) {
                .store-top {
                    padding: 20px;
                    border-radius: 20px;
                }

                .store-head {
                    align-items: flex-start;
                }

                .store-logo {
                    width: 72px;
                    height: 72px;
                    border-radius: 18px;
                }
            }
        </style>
    @endpush

    @php
        $delivery = (array) ($foodCart->delivery_links ?? []);
        $deliveryButtons = array_filter(
            [
                [
                    'key' => 'foodpanda',
                    'label' => 'FoodPanda',
                    'icon' => 'bi-bag-check',
                    'url' => trim((string) data_get($delivery, 'foodpanda', '')),
                ],
                [
                    'key' => 'pathao',
                    'label' => 'Pathao',
                    'icon' => 'bi-bicycle',
                    'url' => trim((string) data_get($delivery, 'pathao', '')),
                ],
                [
                    'key' => 'foodi',
                    'label' => 'Foodi',
                    'icon' => 'bi-phone',
                    'url' => trim((string) data_get($delivery, 'foodi', '')),
                ],
            ],
            fn($platform) => $platform['url'] !== '',
        );
        $initialItems = $items->map(function ($item) {
            return [
                'title' => $item->title,
                'description' => $item->description,
                'price' => number_format((float) $item->price, 2),
                'image' => $item->image ? asset('storage/' . ltrim($item->image, '/')) : null,
                'tags' => (array) ($item->search_tags ?? []),
            ];
        });
    @endphp

    <section class="food-store-page">
        <div class="container">
            <div class="store-top">
                <div class="store-head">
                    @if ($foodCart->logo)
                        <img class="store-logo" src="{{ asset('storage/' . $foodCart->logo) }}"
                            alt="{{ $foodCart->name }} logo">
                    @else
                        <div class="store-logo d-flex align-items-center justify-content-center bg-light">
                            <i class="bi bi-shop fs-3"></i>
                        </div>
                    @endif
                    <div>
                        <h1 class="store-title">{{ $foodCart->name }}</h1>
                        <p class="store-desc">
                            {{ $foodCart->description ?: 'Search any item and order from your preferred delivery platform.' }}
                        </p>
                        <div class="store-meta">
                            <span class="store-meta-chip">
                                <i class="bi bi-grid-3x3-gap"></i>
                                {{ $items->count() }} items available
                            </span>
                            <span class="store-meta-chip">
                                <i class="bi bi-link-45deg"></i>
                                {{ count($deliveryButtons) }} delivery
                                platform{{ count($deliveryButtons) === 1 ? '' : 's' }}
                            </span>
                        </div>
                    </div>
                </div>

                @if ($deliveryButtons !== [])
                    <div class="delivery-row">
                        @foreach ($deliveryButtons as $platform)
                            <a class="delivery-chip {{ $platform['key'] }}" href="{{ $platform['url'] }}" target="_blank"
                                rel="noopener noreferrer">
                                <i class="bi {{ $platform['icon'] }}"></i>
                                Order on {{ $platform['label'] }}
                            </a>
                        @endforeach
                    </div>
                @else
                    <div class="delivery-empty">
                        <i class="bi bi-info-circle me-1"></i>
                        Delivery platform links are not available for this food cart yet.
                    </div>
                @endif

                <div class="search-wrap">
                    <input type="search" id="itemSearchInput" class="search-input"
                        placeholder="Search item (e.g. chicken burger, fries, drinks)...">
                    <i class="bi bi-search"></i>
                </div>

                <div id="resultMeta" class="result-meta">Showing {{ $items->count() }} items</div>
                <div id="menuGrid" class="menu-grid"></div>
            </div>
        </div>
    </section>

    @push('frontend_js')
        <script>
            const initialItems = @json($initialItems);

            const searchEndpoint = @json(route('storefront.food-carts.search-items', $foodCart));
            const menuGrid = document.getElementById('menuGrid');
            const resultMeta = document.getElementById('resultMeta');
            const input = document.getElementById('itemSearchInput');

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/\"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function renderItems(items) {
                if (!items.length) {
                    menuGrid.innerHTML = '<div class="empty-results">No menu items matched your search.</div>';
                    return;
                }

                menuGrid.innerHTML = items.map(item => {
                    const imageHtml = item.image ?
                        `<img class="menu-img" src="${escapeHtml(item.image)}" alt="${escapeHtml(item.title)}">` :
                        '<div class="menu-img d-flex align-items-center justify-content-center"><i class="bi bi-image text-muted"></i></div>';

                    const tagsHtml = Array.isArray(item.tags) && item.tags.length ?
                        `<div class="tag-list">${item.tags.map(tag => `<span class="tag-item">${escapeHtml(tag)}</span>`).join('')}</div>` :
                        '';

                    return `
                        <article class="menu-card">
                            ${imageHtml}
                            <div class="menu-body">
                                <h3 class="menu-title">${escapeHtml(item.title)}</h3>
                                <p class="menu-desc">${escapeHtml(item.description || 'Freshly prepared item from this store.')}</p>
                                ${tagsHtml}
                                <div class="menu-price">$${escapeHtml(item.price)}</div>
                            </div>
                        </article>
                    `;
                }).join('');
            }

            let timer;

            input.addEventListener('input', () => {
                const query = input.value.trim();
                clearTimeout(timer);

                timer = setTimeout(async () => {
                    const url = new URL(searchEndpoint, window.location.origin);
                    if (query) {
                        url.searchParams.set('q', query);
                    }

                    const response = await fetch(url.toString(), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    });

                    if (!response.ok) {
                        return;
                    }

                    const data = await response.json();
                    renderItems(data.items || []);
                    resultMeta.textContent =
                        `Showing ${data.count || 0} items${query ? ` for "${query}"` : ''}`;
                }, 250);
            });

            renderItems(initialItems);
        </script>
    @endpush
@endsection