@extends('welcome')
@section('title', __('index.seo_home_title', ['company' => config('app.name')]))
@section('meta_description', __('index.default_meta_description'))
@section('content')

    <!--==============================
            Hero Area
        ==============================-->
    <div class="th-hero-wrapper hero-1" id="hero" data-bg-src="assets/img/hero/hero_bg_1_2.jpg">
        <div class="swiper th-slider" id="heroSlide1" data-slider-options='{"effect":"fade"}'>
            <div class="swiper-wrapper">
                @if($heroBanners->count())
                    @foreach($heroBanners as $banner)
                        @php
                            $fullTitle = $banner->text(1); // Ex: Natural Fruits
                            $titleParts = explode(' ', $fullTitle, 2);
                            $titleFirst = $titleParts[0] ?? '';
                            $titleSecond = $titleParts[1] ?? '';

                            $buttonLink = $banner->ban_link 
                                ? (Str::startsWith($banner->ban_link, ['http://','https://']) 
                                    ? $banner->ban_link 
                                    : route($banner->ban_link))
                                : '#';
                        @endphp

                        <div class="swiper-slide">
                            <div class="hero-inner">
                                <div class="container">
                                    <div class="hero-style1">

                                        <span class="sub-title"
                                              data-ani="slideinup"
                                              data-ani-delay="0.2s">
                                            <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="shape">
                                            {{ $banner->text(2) }}
                                        </span>

                                        <h1 class="hero-title">
                                            <span class="title1"
                                                  data-ani="slideinup"
                                                  data-ani-delay="0.4s">
                                                <img class="title-img"
                                                     src="{{ asset('assets/img/hero/hero_title_shape.svg') }}"
                                                     alt="icon">

                                                {{ $titleFirst }}

                                                @if($titleSecond)
                                                    <span class="text-theme">
                                                        {{ $titleSecond }}
                                                    </span>
                                                @endif
                                            </span>

                                            @if($banner->text(4))
                                                <span class="title2"
                                                      data-ani="slideinup"
                                                      data-ani-delay="0.5s">
                                                    {{ $banner->text(4) }}
                                                </span>
                                            @endif
                                        </h1>

                                        @if($banner->text(3))
                                            <a href="{{ $buttonLink }}"
                                               class="th-btn"
                                               data-ani="slideinup"
                                               data-ani-delay="0.7s"

                                               {{-- Tracking estruturado --}}
                                               data-track-click="Hero - Botão"
                                               data-track-type="cta"
                                               data-track-meta="Slide: {{ $banner->ban_id }} | Texto: {{ $banner->text(3) }}">

                                                {{ $banner->text(3) }}
                                                <i class="fas fa-chevrons-right ms-2"></i>
                                            </a>
                                        @endif

                                    </div>
                                </div>

                                <div class="hero-img"
                                     data-ani="slideinright"
                                     data-ani-delay="0.5s">
                                    <img src="{{ $banner->image_url }}" alt="Hero Image">
                                </div>

                                <div class="hero-shape1"
                                     data-ani="slideinup"
                                     data-ani-delay="0.5s">
                                    <img src="{{ asset('assets/img/hero/hero_shape_1_1.png') }}" alt="shape">
                                </div>

                                <div class="hero-shape2"
                                     data-ani="slideindown"
                                     data-ani-delay="0.6s">
                                    <img src="{{ asset('assets/img/hero/hero_shape_1_2.png') }}" alt="shape">
                                </div>

                                <div class="hero-shape3"
                                     data-ani="slideinleft"
                                     data-ani-delay="0.7s">
                                    <img src="{{ asset('assets/img/hero/hero_shape_1_3.png') }}" alt="shape">
                                </div>

                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
        <div class="hero-shape4">
            <img class="svg-img" src="assets/img/hero/hero_shape_1_4.svg" alt="shape">
        </div>
    </div>
    
    <!--======== / Hero Section ========-->
    <!--==============================
            Category Area  
        ==============================-->
    <section class="space-top" style="margin-bottom: 0; padding-bottom: 0; overflow: hidden;">
        <div class="container" style="overflow: hidden;">
            <div class="title-area text-center">
                <span class="sub-title"><img src="assets/img/theme-img/title_icon.svg" alt="Icon">{{ __('index.meal_types_title') }}</span>
                <h2 class="sec-title">{{ __('index.meal_types_subtitle') }}</h2>
            </div>
            <div class="swiper th-slider" data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"400":{"slidesPerView":"2"},"768":{"slidesPerView":"3"},"992":{"slidesPerView":"4"},"1200":{"slidesPerView":"5"}}}'>
                <div class="swiper-wrapper">
                    @foreach($typeMeals as $typeMeal)

                        @php
                            $count = (int) ($typeMeal->products_count ?? 0);
                            $countPadded = str_pad((string) $count, 2, '0', STR_PAD_LEFT);
                            $labelCount = __('index.productsLabel', ['count' => $countPadded]);
                        @endphp

                        <div class="swiper-slide">
                            <div class="category-card">
                                <div class="box-shape" data-bg-src="{{ asset('assets/img/bg/category_card_bg.png') }}"></div>

                                <div class="box-icon" data-mask-src="{{ asset('assets/img/bg/category_card_icon_bg.png') }}">
                                    <img src="{{ $typeMeal->image_url }}" alt="Image">
                                </div>

                                <p class="box-subtitle">{{ $labelCount }}</p>

                                <h3 class="box-title">
                                    <a href="{{ route('shop.typemeal', $typeMeal->typ_slug) }}"
                                       data-track-click="Tipo de Refeição"
                                       data-track-type="navegação"
                                       data-track-meta="Tipo: {{ $typeMeal->description }} | Slug: {{ $typeMeal->typ_slug }} | Produtos: {{ $typeMeal->products_count ?? 0 }}">
                                        {{ $typeMeal->description }}
                                    </a>
                                </h3>
                            </div>
                        </div>

                    @endforeach
                </div>
            </div>
        </div>
    </section>
    
    <!--==============================
            Feature Area  
        ==============================-->
    <div class="counter-secMenu">
        <div class="container">
            <div class="title-area text-center">
                <span class="sub-title"><img src="assets/img/theme-img/title_icon.svg" alt="Icon">{{ __('index.menu') }}</span>
                <h2 class="sec-title">{{ $latestMenu->title() }}</h2>
            </div>
        </div>
    </div>

    <!-- MENU FIT -->
    <div class="overflow-hidden " style="margin-top: 0; margin-bottom: 0 !important;">
        <div class="container">
            <div class="row">
                <!-- Coluna Esquerda - Imagem Fit -->
                <div class="col-xl-6 d-none d-xl-block">
                    <div class="choose-feature-area" style="background: transparent; padding: 0; min-height: 500px;">
                        <div class="img-box2-wrap" style="position: relative; bottom: auto; right: auto; margin-left: 0;">
                            <div class="img-box2">
                                <div class="img1">
                                    @if($fitBanner)
                                        <img src="{{ $fitBanner->image_url }}"
                                             alt="{{ $fitBanner->text(1) }}"
                                             style="border-radius: 20px; width: 100%;">
                                    @endif
                                </div>
                                <div class="img2">
                                    <img src="assets/img/normal/why_1_2.png" alt="Why">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Coluna Direita - Título Fit + Pratos -->
                <div class="col-xl-6 text-center text-xl-start">
                    <div class="title-area">
                        <span class="sub-title"><img src="assets/img/theme-img/title_icon.svg" alt="shape">{{ __('index.menu_fit') }}</span>
                    </div>

                    <div class="dishes-container" style="margin-top: 20px;">
                        @if($latestMenu)
                            @php $index = 1; @endphp
                            @foreach($latestMenu->dishes->where('dsh_type', 0) as $dish)
                                <div class="choose-feature dish-item fit-item"
                                     data-track-click="Prato da Ementa"
                                     data-track-type="visualização"
                                     data-track-meta="Menu: {{ $latestMenu->title() }} | Tipo: Fit | Prato: {{ $dish->title }}">

                                    <div class="box-icon fit-icon">
                                        <img src="{{ asset('images/dish/f'.$index.'.png') }}" alt="F{{ $index }}">
                                    </div>

                                    <h3 class="box-title" style="margin-bottom: 2px;">{{ $dish->title }}</h3>

                                    <p class="box-text" style="margin-top: 10px !important; margin-bottom: 0;">
                                        @if($dish->hasInformation())
                                            <a href="#"
                                               class="dishInformation"
                                               data-url="{{ $dish->information_file_url }}"
                                               data-bs-toggle="modal"
                                               data-bs-target="#dishInfoModal"
                                               data-track-click="Informação do Prato"
                                               data-track-type="modal"
                                               data-track-meta="Prato: {{ $dish->title }}">
                                                <img src="{{ asset('images/dish/dishInformation.jpg') }}"
                                                     alt="Information"
                                                     style="width: 25px; vertical-align: middle;">
                                                <span style="font-size: 13px; color: #666; margin-left: 5px;">Informação nutricional</span>
                                            </a>
                                        @endif
                                    </p>
                                </div>
                                @php $index++; @endphp
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MENU VEGETARIANO -->
    <div class="overflow-hidden space" style="margin-top: 0;">
        <div class="container">
            <div class="row">
                <!-- Coluna Esquerda - Título Veg + Pratos -->
                <div class="col-xl-6 text-center text-xl-start">
                    <div class="title-area">
                        <span class="sub-title"><img src="assets/img/theme-img/title_icon.svg" alt="shape">{{ __('index.menu_vegetarian') }}</span>
                    </div>

                    <div class="dishes-container" style="margin-top: 20px;">
                        @if($latestMenu)
                            @php $index = 1; @endphp
                            @foreach($latestMenu->dishes->where('dsh_type', 1) as $dish)
                                <div class="choose-feature dish-item veg-item"
                                     data-track-click="Prato da Ementa"
                                     data-track-type="visualização"
                                     data-track-meta="Menu: {{ $latestMenu->title() }} | Tipo: Vegetariano | Prato: {{ $dish->title }}">

                                    <div class="box-icon veg-icon">
                                        <img src="{{ asset('images/dish/v'.$index.'.png') }}" alt="V{{ $index }}">
                                    </div>

                                    <h3 class="box-title" style="margin-bottom: 2px;">{{ $dish->title }}</h3>

                                    <p class="box-text" style="margin-top: 10px !important; margin-bottom: 0;">
                                        @if($dish->hasInformation())
                                            <a href="#"
                                               class="dishInformation"
                                               data-url="{{ $dish->information_file_url }}"
                                               data-bs-toggle="modal"
                                               data-bs-target="#dishInfoModal"
                                               data-track-click="Informação do Prato"
                                               data-track-type="modal"
                                               data-track-meta="Prato: {{ $dish->title }}">
                                                <img src="{{ asset('images/dish/dishInformation.jpg') }}"
                                                     alt="Information"
                                                     style="width: 25px; vertical-align: middle;">
                                                <span style="font-size: 13px; color: #666; margin-left: 5px;">Informação nutricional</span>
                                            </a>
                                        @endif
                                    </p>
                                </div>
                                @php $index++; @endphp
                            @endforeach
                        @endif
                    </div>
                </div>

                <!-- Coluna Direita - Imagem Veg -->
                <div class="col-xl-6 d-none d-xl-block">
                    <div class="choose-feature-area" style="background: transparent; padding: 0; min-height: 500px;">
                        <div class="img-box2-wrap" style="position: relative; bottom: auto; right: auto; margin-left: 0;">
                            <div class="img-box2">
                                <div class="img1">
                                    @if($vegBanner)
                                        <img src="{{ $vegBanner->image_url }}"
                                             alt="{{ $vegBanner->text(1) }}"
                                             style="border-radius: 20px; width: 100%;">
                                    @endif
                                </div>
                                <div class="img2">
                                    <img src="assets/img/normal/why_1_2.png" alt="Why" >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!--==============================
            Counter Area  
        ==============================-->
    <div class="counter-sec1" data-bg-src="assets/img/bg/counter_bg_1.png">
        <div class="container">
            <div class="counter-card-wrap">
                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_1.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">{{ $numberOfPacks }}</span>
                        </h2>
                        <p class="box-text">{{ __('index.healthy_packs') }}</p>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_2.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">14</span>+
                        </h2>
                        <p class="box-text">{{ __('index.dedicated_team') }}</p>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_3.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">{{ $ordersDelivered }}</span>+
                        </h2>
                        <p class="box-text">{{ __('index.orders_delivered') }}</p>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_4.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">100</span>%
                        </h2>
                        <p class="box-text">{{ __('index.fresh_products') }}</p>
                    </div>
                </div>
                <div class="divider"></div>
            </div>
        </div>
    </div>
    
    <!--==============================
            Testimonial Area  
        ==============================-->
    @if($testimonials->count())
    <section class="overflow-hidden bg-smoke2" id="testi-sec" style="max-height: 609px;">

        <div class="shape-mockup testi-shape1" data-top="0" data-left="0">
            <img src="{{ $secBanner->image_url }}"
                alt="{{ $secBanner->text(1) }}">
        </div>

        <div class="shape-mockup" data-bottom="0" data-right="0">
            <img src="{{ asset('assets/img/shape/vector_shape_5.png') }}" alt="shape">
        </div>

        <div class="container">
            <div class="testi-card-area">

                <div class="title-area">
                    <span class="sub-title">
                        <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="Icon">
                        {{ __('index.testimonials') }}
                    </span>

                    <h2 class="sec-title">
                        {{ __('index.customer_feedback') }}
                    </h2>
                </div>

                <div class="testi-card-slide">
                    <div class="swiper th-slider" id="testiSlide1" data-slider-options='{"effect":"slide"}'>
                        <div class="swiper-wrapper">

                            @foreach($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="testi-card"
                                         data-track-click="Testemunho"
                                         data-track-type="visualização"
                                         data-track-meta="Autor: {{ $testimonial->tes_author }} | Estrelas: {{ $testimonial->stars }}">

                                        <p class="testi-card_text">
                                            {!! $testimonial->text !!}
                                        </p>

                                        <div class="testi-card_profile">

                                            <div class="testi-card_avater">
                                                <img src="{{ asset('images/account/user-ava-md.jpg') }}" alt="Avatar">
                                            </div>

                                            <div class="testi-card_content">

                                                <h3 class="testi-card_name">
                                                    {{ $testimonial->tes_author }}
                                                </h3>

                                                <span class="testi-card_desig">
                                                    {{ __('index.customer_label') }}
                                                </span>

                                                {{-- Stars --}}
                                                <div class="mt-1">
                                                    @for($i = 1; $i <= 5; $i++)
                                                        <i class="fas fa-star {{ $i <= $testimonial->stars ? 'text-warning' : 'text-muted' }}"></i>
                                                    @endfor
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>

                    <div class="icon-box">
                        <button data-slider-prev="#testiSlide1" class="slider-arrow default">
                            <i class="far fa-arrow-left"></i>
                        </button>
                        <button data-slider-next="#testiSlide1" class="slider-arrow default">
                            <i class="far fa-arrow-right"></i>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </section>
    @endif

    <!--==============================
            Blog Area  
        ==============================-->
    <section class="" id="blog-sec">
        <div class="container">
            <div class="title-area text-center">
                <span class="sub-title"><img src="assets/img/theme-img/title_icon.svg" alt="shape">{{ __('index.choose_your_pack') }}</span>
                <h2 class="sec-title">{{ __('index.discover_perfect_pack') }}</h2>
            </div>
            <div class="slider-area">
                <div class="swiper th-slider has-shadow" id="blogSlider1" data-slider-options='{"breakpoints":{"0":{"slidesPerView":1},"576":{"slidesPerView":"1"},"768":{"slidesPerView":"2"},"992":{"slidesPerView":"2"},"1200":{"slidesPerView":"3"}}}'>
                    <div class="swiper-wrapper">
                        @foreach($packs as $pack)
                            <div class="swiper-slide">
                                <div class="blog-card"
                                     data-track-click="Pack Homepage"
                                     data-track-type="visualização"
                                     data-track-meta="Pack: {{ $pack->title }}">

                                    <div class="blog-img">
                                        <img src="{{ asset('images/product/' . $pack->pro_img) }}"
                                             alt="{{ $pack->title }}">
                                    </div>

                                    <div class="blog-content">

                                        {{-- Aqui substituímos autor/data pelos tipos de refeição --}}
                                        <div class="blog-meta">

                                            @foreach($pack->typeMeals as $typeMeal)
                                                <a href="#"
                                                   data-track-click="Tipo de Refeição Pack"
                                                   data-track-type="tag"
                                                   data-track-meta="Pack: {{ $pack->title }} | Tipo: {{ $typeMeal->description }}">
                                                   
                                                    <i class="far fa-leaf"></i>
                                                    {{ $typeMeal->description }}
                                                </a>
                                                @if($loop->iteration % 2 === 0 && !$loop->last)
                                                    <br>
                                                @endif
                                            @endforeach

                                        </div>

                                        <h3 class="box-title">
                                            <a href="#">{{ $pack->title }}</a>
                                        </h3>

                                        <a href="{{ route('packs.show', $pack->category->cat_slug) }}"
                                           class="th-btn btn-sm style4"
                                           data-track-click="Ver Pack"
                                           data-track-type="cta"
                                           data-track-meta="Pack: {{ $pack->title }}">
                                            {{ __('index.view_pack') }}
                                            <i class="fas fa-chevrons-right ms-2"></i>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
                <button data-slider-prev="#blogSlider1" class="slider-arrow slider-prev"><i class="far fa-arrow-left"></i></button>
                <button data-slider-next="#blogSlider1" class="slider-arrow slider-next"><i class="far fa-arrow-right"></i></button>
            </div>
        </div>
    </section>
@endsection

@include('welcome.partials.dish-info-modal')

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('dishInfoModal');
    const iframe = document.getElementById('dishInfoIframe');
    
    // ✅ Inicializar a instância Bootstrap
    const modal = new bootstrap.Modal(modalEl);

    document.querySelectorAll('.dishInformation').forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            const url = this.getAttribute('data-url');
            iframe.src = url;
            // ✅ Abrir via instância
            modal.show();
        });
    });

    // ✅ Agora este evento funciona
    modalEl.addEventListener('hidden.bs.modal', function () {
        iframe.src = '';
    });
});
</script>
@endpush