@extends('layout.front.master')

@section('title', config('site.modules.menu.page_header.title', __('Menu')))
@section('description', config('site.modules.menu.page_header.subtitle', config('site.seo.description', 'Nuestro menú completo con todas nuestras especialidades')))
@section('keywords', config('site.seo.keywords') . ', menú, carta, platos')

{{-- Open Graph Meta Tags --}}
@section('og_title', __('Menu') . ' | ' . config('site.name'))
@section('og_description', config('site.modules.menu.page_header.subtitle', config('site.seo.description', 'Nuestro menú completo con todas nuestras especialidades')))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', __('Menu') . ' | ' . config('site.name'))
@section('twitter_description', config('site.modules.menu.page_header.subtitle', config('site.seo.description', 'Nuestro menú completo con todas nuestras especialidades')))
@section('twitter_image', brand_twitter_image())

@section('css')
<link rel="stylesheet" href="{{ asset('modules/menu/menu.css') }}">
@endsection

@section('content')

{{-- Dynamic Page Header --}}
@include('modules.menu.frontend.partials.dynamic-header')

{{-- Menu Section (layout Porto: una imagen + card por menú) --}}
<div id="menu" class="container py-4 my-5">
    @php
        $menuImagesFallback = config('site.modules.menu.images', [
            'cd-project/img/demos/restaurant/menu/menu-1.jpg',
            'cd-project/img/demos/restaurant/menu/menu-2.jpg',
            'cd-project/img/demos/restaurant/menu/menu-3.jpg',
            'cd-project/img/demos/restaurant/menu/menu-4.jpg',
        ]);
        $imageDelays = [850, 550, 550, 550];
        $cardDelays = [500, 200, 200, 200];
    @endphp

    @if($menuSections->isEmpty())
        <div class="alert alert-info d-flex align-items-start gap-3" role="status" aria-live="polite">
            <i class="ki-outline ki-information-5 fs-2x text-info flex-shrink-0 mt-1" aria-hidden="true"></i>
            <div>
                <h5 class="alert-heading mb-2">No menus available</h5>
                <p class="mb-0">Set up categories, menus and products in the admin panel to display them here.</p>
            </div>
        </div>
    @endif

    @foreach($menuSections as $index => $section)
        @php
            $menu = $section->menu;
            // Patrón Porto: índice par = imagen izquierda / card derecha; índice impar = imagen derecha / card izquierda
            $imageOnRight = ($index % 2 == 1);
            $cardOnRight = ($index % 2 == 0);
            $imageDelay = $imageDelays[$index] ?? ($index == 0 ? 850 : 550);
            $cardDelay = $cardDelays[$index] ?? ($index == 0 ? 500 : 200);
            $imageUrl = $menu->image_url ?? null;
            if (!$imageUrl) {
                $imageIndex = $index % count($menuImagesFallback);
                $imagePath = $menuImagesFallback[$imageIndex] ?? $menuImagesFallback[0];
                $imageUrl = filter_var($imagePath, FILTER_VALIDATE_URL) ? $imagePath : asset($imagePath);
            }
        @endphp

        {{-- Imagen de portada del menú (min-height evita colapso y solapamiento cuando falta imagen) --}}
        <div class="row justify-content-center justify-content-lg-start {{ $index > 0 ? 'pt-4 mt-5' : '' }}">
            <div class="col-md-10 col-lg-6 {{ $imageOnRight ? 'ms-lg-auto' : '' }} menu-section-image-col appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="{{ $imageDelay }}">
                <img src="{{ $imageUrl }}" class="img-fluid box-shadow-4" alt="{{ $menu->name }} - {{ __('Menu') }}" loading="lazy" />
            </div>
        </div>

        {{-- Card del menú (título + solo productos de este menú). pb-4 mb-5 en todas para evitar solapamiento con la siguiente sección --}}
        <div class="row justify-content-center justify-content-lg-start custom-negative-margin-top-1 pb-4 mb-5">
            <div class="col-md-10 col-lg-7 {{ $cardOnRight ? 'ms-lg-auto' : '' }} appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="{{ $cardDelay }}">
                <div class="card box-shadow-4 border-0 rounded-0">
                    <div class="card-body p-5">
                        <h4 class="text-color-dark font-weight-bold positive-ls-3 mb-3">{{ strtoupper($menu->name) }}</h4>
                        @if($menu->description)
                            <p class="text-2-5 line-height-4 text-color-grey mb-3">{{ $menu->description }}</p>
                        @endif
                        <hr class="custom-divider-size-1 bg-color-grey-200 mt-2 mb-4">

                        @php
                            $orderUrl = (get_active_demo() === 'demo-restaurant' && config('site.header.cta_button.active', false))
                                ? config('site.header.cta_button.url', '#')
                                : null;
                        @endphp
                        @foreach($menu->products as $product)
                            @if($orderUrl)
                                <a href="{{ $orderUrl }}" target="{{ config('site.header.cta_button.target', '_blank') }}" rel="noopener noreferrer" class="custom-menu-item text-decoration-none d-block text-color-dark text-color-hover-primary">
                            @else
                                <div class="custom-menu-item">
                            @endif
                                <div class="custom-menu-item-details">
                                    <div class="custom-menu-item-title">
                                        <h5 class="custom-secondary-font text-transform-none font-weight-semibold text-4 mb-0">{{ $product->name }}</h5>
                                    </div>
                                    <div class="custom-menu-item-line opacity-4"></div>
                                    <div class="custom-menu-item-price">
                                        <strong class="custom-font-secondary text-color-dark text-4 positive-ls-3">
                                            @if((float) $product->price > 0)
                                                <span class="text-2-5">$</span>{{ number_format($product->price, 2) }}
                                            @else
                                                <span class="text-2-5 opacity-7">Ask</span>
                                            @endif
                                        </strong>
                                    </div>
                                </div>
                                @if($product->description)
                                    <div class="custom-menu-item-desc">
                                        <p class="text-2-5 line-height-4">{{ $product->description }}</p>
                                    </div>
                                @endif
                            @if($orderUrl)
                                </a>
                            @else
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    {{-- Wholesale and Events Section --}}
    <div class="row justify-content-center pt-5 mt-5">
        <div class="col-lg-10 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
            <div class="card box-shadow-4 border-0 rounded-0 bg-color-primary">
                <div class="card-body p-5 text-center">
                    <h3 class="text-color-light font-weight-bold positive-ls-3 mb-3">Wholesale and Events</h3>
                    <hr class="custom-divider-size-1 bg-color-light opacity-3 mt-2 mb-4">
                    <p class="text-color-light text-3-5 line-height-7 mb-4">
                        Need large quantities for your business or organizing a special event?<br>
                        Contact us directly and we'll help you with your order.
                    </p>
                    <div class="d-flex flex-column flex-sm-row justify-content-center align-items-center gap-3">
                        @if(config('site.contact.phone'))
                        <a href="tel:{{ config('site.contact.phone') }}" class="btn btn-light btn-outline text-2-5 text-color-light border-color-light-2 font-weight-medium positive-ls-2 px-5 btn-py-3">
                            <i class="icon icon-phone me-2"></i>
                            {{ config('site.contact.phone') }}
                        </a>
                        @endif
                        @if(config('site.contact.email'))
                        <a href="mailto:{{ config('site.contact.email') }}" class="btn btn-light btn-outline text-2-5 text-color-light border-color-light-2 font-weight-medium positive-ls-2 px-5 btn-py-3">
                            <i class="icon icon-envelope me-2"></i>
                            {{ config('site.contact.email') }}
                        </a>
                        @endif
                        <a href="{{ url('/contact#contact') }}" class="btn btn-light btn-outline text-2-5 text-color-light border-color-light-2 font-weight-medium positive-ls-2 px-5 btn-py-3">
                            <i class="icon icon-arrow-right me-2"></i>
                            View Contact Form
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection