@extends('layouts.app')

@section('title', __('Organisez votre évènement'))

@section('content')

<!-- Body -->

<!-- Page wrapper -->
<main class="page-wrapper">


    <section class="overflow-hidden">
        <!-- slider -->
        <div class="container pt-5 pb-sm-3 mt-5 ">
            <!-- Page title -->
            <h1 class="text-center">{{ __('Organisez votre évènement') }}</h1>

        </div>
    </section>

    <section class="position-relative py-5">
        <div class="binded-content position-absolute top-0 start-0 w-100">
            <div class="binded-item position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center active"
                id="bg-1"
                style="background: linear-gradient(270deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%), url({{asset('/assets/image/events/slider/seminaires.jpg')}});">
            </div>
            <div class="binded-item position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center" id="bg-2"
                style="background-image: linear-gradient(90deg, rgba(0,0,0,0.5) -0.47%, rgba(0,0,0,0) 100%), url({{asset('/assets/image/events/slider/diners.jpg')}});">
            </div>
            <div class="binded-item position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center" id="bg-3"
                style="background-image: linear-gradient(90deg, rgba(0,0,0,0.5) -0.47%, rgba(0,0,0,0) 100%), url({{asset('/assets/image/events/slider/building.jpg')}});">
            </div>
            <div class="binded-item position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center" id="bg-4"
                style="background-image: linear-gradient(90deg, rgba(0,0,0,0.5) -0.47%, rgba(0,0,0,0) 100%), url({{asset('/assets/image/events/slider/reception.jpg')}});">
            </div>
        </div>
        <div class="container py-2 py-sm-4 py-lg-5 my-md-3 my-lg-0 my-xl-3 my-xxl-4">
            <div class="row align-items-center my-xxl-2">
                <div class="col-md-6 position-relative z-2 mb-5 mb-md-0">
                    <div style="max-width: 580px;">

                        <!-- Swiper controls (Prev/next buttons) -->
                        <div class="d-flex pb-2 mb-3 mb-md-4 mb-xl-5">
                            <button class="btn btn-icon btn-sm btn-outline-light rounded-circle me-3" type="button"
                                id="prev-collection" aria-label="Prev">
                                <i class="ai-arrow-left"></i>
                            </button>
                            <button class="btn btn-icon btn-sm btn-outline-light rounded-circle" type="button" id="next-collection"
                                aria-label="Next">
                                <i class="ai-arrow-right"></i>
                            </button>
                        </div>

                        <!-- Swiper slider -->
                        <div class="swiper" data-swiper-options='{
                  "spaceBetween": 40,
                  "loop": true,
                  "bindedContent": true,
                  "controlledSlider": "#cards",
                  "navigation": {
                    "prevEl": "#prev-collection",
                    "nextEl": "#next-collection"
                  }
                }'>
                            <div class="swiper-wrapper">
                                <!-- seminaire -->
                                <div class="swiper-slide" data-swiper-binded="#bg-1">
                                    <h2 class="display-5 text-white text-uppercase pb-2 mb-md-4 mb-xl-5">{{ __('Séminaires d’exception au cœur des vignes') }}</h2>

                                    <a class="btn btn-outline-light" href="{{route('contact')}}">{{ __('Demande de devis') }}</a>
                                </div>
                                <!-- diners -->
                                <div class="swiper-slide" data-swiper-binded="#bg-2">
                                    <h2 class="display-5 text-white text-uppercase pb-2 mb-md-4 mb-xl-5">{{ __('Dîners et soirées d’entreprises dans un cadre prestigieux') }}</h2>
                                    <a class="btn btn-outline-light" href="{{route('contact')}}">{{ __('Demande de devis') }}</a>
                                </div>
                                <!-- team build -->
                                <div class="swiper-slide" data-swiper-binded="#bg-3">
                                    <h2 class="display-5 text-white text-uppercase pb-2 mb-md-4 mb-xl-5">{{ __('Team building et animations étonnantes autour du vin, mais pas que !') }}</h2>
                                    <a class="btn btn-outline-light" href="{{route('contact')}}">{{ __('Demande de devis') }}</a>
                                </div>
                                <!-- receptions -->
                                <div class="swiper-slide" data-swiper-binded="#bg-4">
                                    <h2 class="display-5 text-white text-uppercase pb-2 mb-md-4 mb-xl-5">{{ __('Un lieu unique pour des réceptions inoubliables') }}</h2>
                                    <a class="btn btn-outline-light" href="{{route('contact')}}">{{ __('Demande de devis') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-5 col-xl-4 offset-lg-1 offset-xl-2">
                    <div class="ps-md-4 ps-lg-0">
                        <div class="card border-0 rounded-1" style="max-width: 450px;">
                            <div class="card-body">

                                <!-- Controlled swiper slider -->
                                <div class="swiper" id="cards" data-swiper-options='{
                      "allowTouchMove": false,
                      "spaceBetween": 40,
                      "loop": true
                    }'>
                                    <div class="swiper-wrapper">
                                        <!-- seminaires -->
                                        <div class="swiper-slide">
                                            <a class="d-block pb-3 mb-2 mb-lg-3" href="shop-single.html">
                                                <img src="{{asset('/assets/image/events/slider/seminaire_illustr.jpg')}}" alt="Collection">
                                            </a>
                                            <div class="d-flex mb-1">
                                                <p>{{ __('Pour vos séminaires, nous proposons les prestations d’accueil petit-déjeuner, déjeuner assis ou cocktail déjeunatoire, pause café avec espace de réunion modulable. Avec à disposition : un grand écran plat, paperboard et WIFI.') }}</p>
                                            </div>
                                        </div>

                                        <!-- diners -->
                                        <div class="swiper-slide">
                                            <a class="d-block pb-3 mb-2 mb-lg-3" href="shop-single.html">
                                                <img src="{{asset('/assets/image/events/slider/diners_illustr.jpg')}}" alt="Collection">
                                            </a>
                                            <div class="d-flex mb-1">
                                                <p>{{ __('Envie d’une soirée d’entreprise originale ? Choisissez votre style : Soirée casino, DJ set, dîner face au coucher de soleil ...') }}</p>
                                            </div>
                                        </div>

                                        <!-- team build -->
                                        <div class="swiper-slide">
                                            <a class="d-block pb-3 mb-2 mb-lg-3" href="shop-single.html">
                                                <img src="{{asset('/assets/image/events/slider/team_building_illustr.jpg')}}" alt="Collection">
                                            </a>
                                            <div class="d-flex mb-1">
                                                <p>{{ __('Pour votre journée d’entreprise, nous proposons diverses animations en collaboration avec nos partenaires sélectionnés.') }}</p>
                                            </div>
                                        </div>

                                        <!-- recep -->
                                        <div class="swiper-slide">
                                            <a class="d-block pb-3 mb-2 mb-lg-3" href="shop-single.html">
                                                <img src="{{asset('/assets/image/events/slider/recep_illustr.jpg')}}" alt="Collection">
                                            </a>
                                            <div class="d-flex mb-1">
                                                <p>{{ __('Découvrez notre salle de 200 m², parfaite pour 130 invités avec piste de danse, et une terrasse de 250 m² idéale pour un vin d’honneur, cérémonie ou dîner. Un cadre d’exception pour des moments inoubliables !') }}</p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- galerie -->

    <section class="container py-5 my-lg-3 my-xl-4 my-xxl-5">
        <div class="text-center pb-3 pt-sm-3 pt-md-4 mx-auto mt-xxl-1 mb-3 mb-lg-4" style="max-width: 525px;">
            <h2 class="h1">{{ __('Offrez à votre événement un lieu exceptionnel') }}</h2>
            <p class="mb-0">
                {{ __('Offrez à votre événement un cadre exceptionnel avec quatre espaces uniques : le Cuvier, la Salle, la Terrasse, et la Vue panoramique.') }}
            </p>
        </div>

        <!-- Navs -->
        <!-- Navs -->
        <ul class="nav nav-tabs flex-nowrap overflow-auto text-nowrap w-100 mx-auto pb-3 mb-3 mb-lg-4" role="tablist">

            <li class="nav-item mb-0">
                <a class="nav-link active" id="salle-tab" data-bs-toggle="tab" href="#salle" role="tab" aria-controls="salle" aria-selected="false">{{ __('Salle') }}</a>
            </li>
            <li class="nav-item mb-0">
                <a class="nav-link" id="terr-tab" data-bs-toggle="tab" href="#terr" role="tab" aria-controls="terr" aria-selected="false">{{ __('Terrasse') }}</a>
            </li>
            <li class="nav-item mb-0">
                <a class="nav-link" id="vue-tab" data-bs-toggle="tab" href="#vue" role="tab" aria-controls="vue" aria-selected="false">{{ __('Vue') }}</a>
            </li>
            <li class="nav-item mb-0">
                <a class="nav-link" id="cuvier-tab" data-bs-toggle="tab" href="#cuvier" role="tab" aria-controls="cuvier" aria-selected="false">{{ __('Cuvier') }}</a>
            </li>
        </ul>


        <div class="tab-content">
            @php
            $themes = [

            'salle' => ['salle1.jpg', 'salle2.jpg', 'salle3.jpg', 'salle4.jpg', 'salle5.jpg', 'salle6.jpg'],
            'terr' => ['terr1.jpg', 'terr2.jpg', 'terr3.jpg', 'terr4.jpg', 'terr5.jpg', 'terr6.jpg'],
            'vue' => ['vue1.jpg', 'vue2.jpg', 'vue3.jpg', 'vue4.jpg', 'vue5.jpg', 'vue6.jpg'],
            'cuvier' => ['cuvier1.jpg', 'cuvier2.webp', 'cuvier3.jpg', 'cuvier4.jpg', 'cuvier5.png', 'cuvier6.jpg']
            ];
            @endphp

            @foreach ($themes as $theme => $images)
            <div class="tab-pane fade {{ $theme == 'salle' ? 'show active' : '' }}" id="{{ $theme }}" role="tabpanel" aria-labelledby="{{ $theme }}-tab">
                <div class="gallery row g-4 g-sm-3 g-lg-4 pb-2 pb-sm-4 pb-xl-5 mb-lg-2 mb-xl-0 mb-xxl-2">
                    @foreach ($images as $image)
                    @php
                    $path = public_path("assets/image/events/gallery/{$image}");
                    if (file_exists($path)) {
                    [$width, $height] = getimagesize($path);
                    } else {
                    $width = 800; // Valeur par défaut si l'image n'existe pas
                    $height = 600;
                    }
                    @endphp

                    <div class="col-sm-4">
                        <a class="d-block gallery-item card-hover zoom-effect"
                            href="{{ asset('assets/image/events/gallery/' . $image) }}"
                            data-pswp-src="{{ asset('assets/image/events/gallery/' . $image) }}"
                            data-pswp-width="{{ $width }}"
                            data-pswp-height="{{ $height }}">
                            <div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-5 overflow-hidden z-2 opacity-0">
                                <i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
                                <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
                            </div>
                            <div class="zoom-effect-wrapper rounded-5">
                                <img class="zoom-effect-img" src="{{ asset('assets/image/events/gallery/' . $image) }}" alt="{{ ucfirst($theme) }}">
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>


    </section>
    <!-- Page content -->
    <!-- Page title -->

    <!-- About -->
    <section class=" mb-lg-3 mb-xl-4 mb-xxl-5">
        <div class="container pb-sm-2 pb-md-3 pb-lg-5 mb-md-3 mb-lg-0">
            <!-- Content -->
            <div class="row">
                <div class="col-md-6 col-xxl-5 offset-xxl-1 mb-4 mb-md-0">
                    <div class="text-center text-md-start pe-md-4 pe-xl-5 pe-xxl-0">
                        <h2 class="h1 mb-sm-4">{{ __('La synergie du raffinement') }}</h2>
                        <p class="fs-lg mb-2 mb-sm-3 mb-xl-4 mx-auto mx-md-0" style="max-width: 475px;"> {{ __('Ensemble avec nos partenaires, nous unissons savoir-faire et excellence pour sublimer vos événements dans les moindres détails.') }}</p>

                    </div>
                </div>
                <div class="col-md-6 mt-n3">
                    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-2 row-cols-lg-3 gy-md-2 gx-3">
                        <div class="col">
                            <div class="ratio ratio-21x9 position-relative mx-auto" style="Width: 180px; Height:90px">
                                <div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 px-3">
                                    <a href="https://www.mariages.net/salle-mariage/chateau-reaut--e204459" target="_blank">
                                        <img class="d-block" src="{{asset('assets/image/events/mariagenet.jpg')}}" width="120" alt="Klinos">
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="ratio ratio-21x9 position-relative mx-auto" style="Width: 180px; Height:90px">
                                <div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 px-3">
                                    <a href="https://le-chariot.fr/" target="_blank">
                                        <img class="d-block" src="{{asset('assets/image/events/le_chariot.png')}}" width="70" alt="Klinos">
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="ratio ratio-21x9 position-relative mx-auto" style="Width: 180px; Height:90px">
                                <div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 px-3">
                                    <a href="https://www.traiteuraubergeandre.com/" target="_blank">
                                        <img class="d-block" src="{{asset('assets/image/events/auberge_andré.jpeg')}}" width="120" height="1000" alt="Klinos">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="ratio ratio-21x9 position-relative mx-auto" style="Width: 180px; Height:90px">
                                <div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 px-3">
                                    <a href="https://www.oenanim.fr/" target="_blank">
                                        <img class="d-block" src="{{asset('assets/image/events/oenanim.webp')}}" width="120" alt="Klinos">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="ratio ratio-21x9 position-relative mx-auto" style="Width: 180px; Height:90px">
                                <div class="d-flex align-items-center justify-content-center position-absolute top-0 start-0 w-100 h-100 px-3">
                                    <a href="https://www.belevent.fr/" target="_blank">
                                        <img class="d-block" src="{{asset('assets/image/events/bel_event.webp')}}" width="120" alt="Klinos">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>



    <!-- visite  -->

    <section>
        <script src="https://www.mariages.net/js/wp-tours.js?symfnw-FR48-1-20241125-014_www_m_"></script>
        <div id="wp-widget-tours-204459-8681"><a href="https://www.mariages.net/salle-mariage/chateau-reaut--e204459/tours/8681" target="_blank">
                <div class="weddingwireWidgetVideo3dTour"><video id="vid-204459-8681" autoplay="false" loop="" muted="">
                        <source src="https://cdn0.mariages.net/tours/videos/8/6/8/1/8681.mp4" type="video/mp4">
                    </video></div> {{ __('Découvrez notre Visite Virtuelle') }}
            </a></div>
        <script>
            wpShowTour(8681, 'wp-widget-tours-204459-8681');
        </script>

    </section>
</main>


@endsection