@extends('layout.front.master')

@section('title', config('site.modules.menu.page_title', __('Menu')))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

@section('content')

{{-- Page Header with Parallax --}}
<section class="section section-with-shape-divider section-height-3 overlay overlay-show border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%', 'fadeIn': true}" data-image-src="{{ site_asset_url('menu_header_background') ?: site_asset_url('page_header_background', 'cd-project/img/demos/restaurant/backgrounds/background-3.jpg') }}">
    <div class="container pt-3 pb-5 mb-5">
        <div class="row mb-3">
            <div class="col">
                <ul class="breadcrumb d-block text-center custom-font-secondary text-6 font-weight-medium positive-ls-3">
                    <li><a href="{{ url('/') }}" class="text-decoration-none opacity-hover-8">{{ __('Home') }}</a></li>
                    <li class="active text-color-primary">{{ config('site.modules.menu.page_title', __('Menu')) }}</li>
                </ul>
                <h1 class="d-block text-color-light font-weight-bold text-center text-12 positive-ls-1 line-height-2 mb-0">{{ config('site.modules.menu.page_title', __('Menu')) }}</h1>
            </div>
        </div>
    </div>
    <a href="#menu" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary text-5-5 position-absolute transform3dx-n50 left-50pct bottom-5 mb-4 z-index-2">
        <i class="icons icon-arrow-down font-weight-bold"></i>
    </a>
    <div class="shape-divider shape-divider-bottom shape-divider-reverse-y" style="height: 116px;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
            <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
            <rect y="90" fill="#FFF" width="1920" height="26"/>
        </svg>
    </div>
</section>

{{-- Menu Section --}}
<div id="menu" class="container py-4 my-5">
    @php
        $allMenuSections = collect();
        if (is_module_active('menu')) {
            $menuCats = \App\Modules\Menu\Models\MenuCategory::ordered()
                ->with(['menus' => function ($q) {
                    $q->active()->ordered()->with(['products' => function ($q2) {
                        $q2->where('menu_products.is_active', true)
                           ->orderBy('menu_menu_product.order', 'asc');
                    }]);
                }])->get();
            foreach ($menuCats as $cat) {
                foreach ($cat->menus as $menu) {
                    if ($menu->products->count() > 0) {
                        $allMenuSections->push($menu);
                    }
                }
            }
        }
    @endphp

    @forelse($allMenuSections as $index => $menu)
        @php
            // Alternate layout: even sections image left + card right, odd sections image right + card left
            $isEven = $index % 2 === 0;
            $menuImg = $menu->image_url
                ?? asset('cd-project/img/demos/restaurant/menu/menu-' . (($index % 3) + 1) . '.jpg');
        @endphp

        {{-- Image row --}}
        <div class="row justify-content-center justify-content-lg-start {{ $index > 0 ? 'pt-4 mt-5' : '' }}">
            <div class="col-md-10 col-lg-6 {{ $isEven ? '' : 'ms-lg-auto' }} appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="550">
                <img src="{{ $menuImg }}" class="img-fluid box-shadow-4" alt="{{ $menu->name }}" />
            </div>
        </div>

        {{-- Card row --}}
        <div class="row justify-content-center justify-content-lg-start custom-negative-margin-top-1 {{ $loop->last ? '' : 'pb-4 mb-5' }}">
            <div class="col-md-10 col-lg-7 {{ $isEven ? 'ms-lg-auto' : '' }} appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="200">
                <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-2">{{ $menu->description }}</p>
                        @endif
                        <hr class="custom-divider-size-1 bg-color-grey-200 mt-2 mb-4">

                        @foreach($menu->products as $product)
                        <div class="custom-menu-item">
                            <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
                                            {{ __('Ask') }}
                                        @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
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="row justify-content-center py-5">
            <div class="col-md-8 text-center">
                <p class="text-3-5 text-color-grey">{{ __('Menu coming soon.') }}</p>
            </div>
        </div>
    @endforelse

    {{-- Wholesale & Events CTA --}}
    <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-4 p-md-5 text-center">
                    <h3 class="text-color-light font-weight-bold positive-ls-3 text-5 text-md-7 mb-2">{{ config('site.welcome.wholesale_heading', config('site.contact.cta_title', __('Wholesale & Events'))) }}</h3>
                    <hr class="custom-divider-size-1 bg-color-light opacity-3 mt-2 mb-3">
                    <p class="text-color-light text-3 text-md-3-5 line-height-7 mb-3 px-2 px-md-4">
                        {{ config('site.welcome.wholesale_text', __('Need large quantities for your business or planning a special event? Contact us directly and we will help you with your order.')) }}
                    </p>
                    <div class="d-flex flex-column flex-md-row justify-content-center align-items-stretch align-items-md-center gap-2 gap-md-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-4 btn-py-2 btn-py-md-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-4 btn-py-2 btn-py-md-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-4 btn-py-2 btn-py-md-3">
                            <i class="icon icon-arrow-right me-2"></i>
                            {{ config('site.contact.cta_label', __('Contact Form')) }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Final Section with Shape Divider --}}
<section class="section section-with-shape-divider bg-dark border-0 m-0">
    <a href="#header" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary position-absolute transform3dx-n50 left-50pct bottom-0 text-5 mb-5 z-index-2">
        <i class="icons icon-arrow-up font-weight-bold"></i>
    </a>
    <div class="shape-divider shape-divider-reverse-x" style="height: 116px;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
            <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
            <rect y="90" fill="#FFF" width="1920" height="26"/>
        </svg>
    </div>
</section>

@endsection