@extends('frontendLayout')

@section('frontend_layout')
    @push('frontend_css')
        <style>
            .food-cart-page {
                background: radial-gradient(circle at 20% 10%, rgba(21, 45, 108, .06), transparent 40%),
                    radial-gradient(circle at 80% 80%, rgba(21, 45, 108, .08), transparent 45%),
                    #f6f5f1;
                min-height: 100vh;
                padding: 48px 0 70px;
            }

            .fc-heading {
                font-family: 'DM Serif Display', serif;
                font-size: clamp(2rem, 4.8vw, 3rem);
                margin-bottom: 10px;
                color: #1b1f2a;
            }

            .fc-sub {
                color: #5b606a;
                font-size: .95rem;
                max-width: 680px;
                margin-bottom: 32px;
            }

            .fc-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 20px;
            }

            .fc-card {
                background: rgba(255, 255, 255, .82);
                border: 1px solid rgba(13, 17, 23, .08);
                border-radius: 18px;
                overflow: hidden;
                box-shadow: 0 12px 30px rgba(9, 12, 18, .06);
                transition: transform .25s ease, box-shadow .25s ease;
                height: 100%;
            }

            .fc-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 20px 45px rgba(9, 12, 18, .12);
            }

            .fc-card-top {
                padding: 20px;
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .fc-logo {
                width: 58px;
                height: 58px;
                border-radius: 14px;
                object-fit: cover;
                border: 1px solid rgba(0, 0, 0, .08);
                background: #ffffff;
            }

            .fc-logo-placeholder {
                width: 58px;
                height: 58px;
                border-radius: 14px;
                display: grid;
                place-items: center;
                background: #eef2ff;
                color: #152D6C;
                font-size: 1.2rem;
            }

            .fc-title {
                font-weight: 700;
                margin-bottom: 4px;
                color: #151920;
            }

            .fc-count {
                font-size: .78rem;
                color: #5b606a;
            }

            .fc-card-body {
                padding: 0 20px 20px;
            }

            .fc-desc {
                color: #5b606a;
                font-size: .86rem;
                margin-bottom: 14px;
                min-height: 42px;
            }

            .fc-btn {
                width: 100%;
                border: none;
                border-radius: 10px;
                padding: 10px;
                font-size: .84rem;
                font-weight: 700;
                letter-spacing: .04em;
                text-transform: uppercase;
                background: #152D6C;
                color: #fff;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }

            .fc-empty {
                text-align: center;
                background: #fff;
                border: 1px dashed rgba(0, 0, 0, .2);
                border-radius: 16px;
                padding: 38px;
                color: #4d535f;
            }
        </style>
    @endpush

    <section class="food-cart-page">
        <div class="container">
            <h1 class="fc-heading">Food Carts Near You</h1>
            <p class="fc-sub">Browse every food cart, open its menu, and search by specific food item to order faster.
            </p>

            <div class="fc-grid">
                @forelse ($foodCarts as $foodCart)
                    <article class="fc-card">
                        <div class="fc-card-top">
                            @if ($foodCart->logo)
                                <img src="{{ asset('storage/' . $foodCart->logo) }}" alt="{{ $foodCart->name }} logo"
                                    class="fc-logo">
                            @else
                                <div class="fc-logo-placeholder"><i class="bi bi-shop"></i></div>
                            @endif
                            <div>
                                <h2 class="fc-title">{{ $foodCart->name }}</h2>
                                <div class="fc-count">{{ $foodCart->available_items_count }} menu items</div>
                            </div>
                        </div>
                        <div class="fc-card-body">
                            <p class="fc-desc">
                                {{ \Illuminate\Support\Str::limit($foodCart->description ?: 'Tap to explore this food cart menu.', 95) }}
                            </p>
                            <a class="fc-btn" href="{{ route('storefront.food-carts.show', $foodCart) }}">
                                Open Store <i class="bi bi-arrow-up-right"></i>
                            </a>
                        </div>
                    </article>
                @empty
                    <div class="fc-empty">
                        No active food carts are available right now.
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection