@extends('layouts.app')
@section('title', $projet->nom . ' - L\'unique Création')
@section('meta_description', $projet->meta_description)

@section('content')

    <!--Hero Section ======================-->
    <div class="hero-section hero-2 section-padding-xxl position-relative max-width ">
        <img src="{{ asset('assets/images/projets-realises/' . $projet->url . '/header-' . $projet->url . '.jpg') }}" class="img-fluid" alt="header {{ $projet->url }}">
    </div>
    <!--Hero Section ======================-->

    <!--Section ======================-->
    <section class="full-width-section position-relative">

        <div class="container">
            <div class="section-padding-xxl">
                <div class="position-relative">
                    <div class="row g-40">
                        <div class="col-lg-7 col-xxl-8">
                            <div class="section-title section-separator">
                                <h1 class="fw-extra-bold heading-title separator lh-1 display-3">{{ $projet->nom }}</h1>
                                <p class="fs-5 mb-0 subtitle">
                                    {{ $projet->description }}
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-5 col-xxl-4">
                            <div class="project-details-wrapper bg-primary text-secondary">
                                <h2 class="project-details-title fw-semibold fs-4">{{ $projet->nom }}</h2>
                                <ul class="project-details-list list-unstyled mb-0 d-flex flex-row flex-lg-column flex-wrap flex-lg-nowrap">
                                    <li class="d-flex flex-column gap-2 gap-xxl-10">
                                        <span class="fs-5 fw-bold">Client :</span>
                                        <span>{{ $projet->client }}</span>
                                    </li>
                                    <li class="d-flex flex-column gap-2 gap-xxl-10">
                                        <span class="fs-5 fw-bold">Localisation :</span>
                                        <span>{{ $projet->lieu }}, France</span>
                                    </li>
                                    <li class="architronix-button">
                                        <a href="{{ route('devis.form') }}" class="btn btn-outline-secondary gap-10 text-truncate">
                                            Obtenir un devis
                                            <span class="arrow-down">
                                            <svg width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.585815L34.4142 10.9999L24 21.4142L22.5858 20L30.5857 12L0 12L2.38419e-07 10L30.5858 10L22.5858 2.00003L24 0.585815Z"></path>
                                            </svg>
                                        </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- container -->

        <div class="image-contents d-flex flex-column flex-xl-row align-items-xl-center gap-4 section-padding-md position-relative px-10 px-lg-0">
            <img src="{{ asset('assets/images/projets-realises/' . $projet->url . '/img-1-' . $projet->url . '.jpg') }}" class="img-fluid wow fadeIn" data-wow-delay=".3s" alt="image 1 {{ $projet->url }}">
            <img src="{{ asset('assets/images/projets-realises/' . $projet->url . '/img-2-' . $projet->url . '.jpg') }}" class="img-fluid wow fadeIn" data-wow-delay=".4s" alt="image 2 {{ $projet->url }}">
        </div>

        <div class="section-padding-md">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <div class="section-title section-separator">
                            <p class="mb-0 subtitle py-2 py-lg-4">
                                {{ $projet->texte_1 }}
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="architronix-button d-grid">
                            <a href="/devis-gratuit" class="btn btn-primary gap-10 px-3 gap-3">
                                Devis gratuit
                                <svg class="arrow" width="25" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.585815L34.4142 10.9999L24 21.4142L22.5858 20L30.5857 12L0 12L2.38419e-07 10L30.5858 10L22.5858 2.00003L24 0.585815Z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container section-padding-lg">
            <div class="swiper gallerySwiper2">
                <div class="swiper-wrapper">
                    @foreach($slides as $slide)
                        <div class="swiper-slide">
                            <img src="{{ asset('assets/images/projets-realises/' . $projet->url . '/slide/XL/' . $slide->getFilename()) }}" class="img-fluid" alt="gallerie image {{ str_replace('-', ' ', $projet->url) }} - Slide XL {{ $loop->index + 1 }}">
                        </div>
                    @endforeach
                </div>
                <div class="project-gallery-button-next">
                    <svg width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.585815L34.4142 10.9999L24 21.4142L22.5858 20L30.5857 12L0 12L2.38419e-07 10L30.5858 10L22.5858 2.00003L24 0.585815Z"/>
                    </svg>
                </div>
                <div class="project-gallery-button-prev">
                    <svg class="arrow-reverse" width="35" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.585815L34.4142 10.9999L24 21.4142L22.5858 20L30.5857 12L0 12L2.38419e-07 10L30.5858 10L22.5858 2.00003L24 0.585815Z"/>
                    </svg>
                </div>
            </div>
            <div class="swiper gallerySwiper mt-4">
                <div class="swiper-wrapper">
                    @foreach($slides as $slide)
                        <div class="swiper-slide">
                            <img src="{{ asset('assets/images/projets-realises/' . $projet->url . '/slide/XS/' . $slide->getFilename()) }}" class="img-fluid" alt="gallerie image {{ str_replace('-', ' ', $projet->url) }} - Slide XS {{ $loop->index + 1 }}">
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="section-padding-xxl">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <div class="section-title section-separator">
                            <p class="mb-0 subtitle py-2 py-lg-4">
                                {{ $projet->texte_2 }}
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="architronix-button d-grid">
                            <a href="/devis-gratuit" class="btn btn-primary gap-10 px-3 gap-3">
                                Devis gratuit
                                <svg class="arrow" width="25" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.585815L34.4142 10.9999L24 21.4142L22.5858 20L30.5857 12L0 12L2.38419e-07 10L30.5858 10L22.5858 2.00003L24 0.585815Z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="credits">
            <!-- section-title-wrapper -->
            <div class="container">
                <div class="row">
                    @foreach($patchworks as $patchwork)
                        <div class="col-sm-4 mb-4">
                            <div class="credits-wrapper">
                                <div class="cridit-image">
                                    <img src="{{ asset('assets/images/projets-realises/' . $projet->url . '/patchwork/' . $patchwork->getFilename()) }}" class="img-fluid" alt="gallerie image {{ str_replace('-', ' ', $projet->url) }} - Patchwork {{ $loop->index + 1 }}">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    <!--Section ======================-->

    <div class="section-padding-xxl">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <div class="section-title section-separator">
                        <p class="mb-0 subtitle py-2 py-lg-4">
                            {!! $projet->texte_3 !!}
                        </p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="architronix-button d-grid">
                        <a href="/devis-gratuit" class="btn btn-primary gap-10 px-3 gap-3">
                            Devis gratuit
                            <svg class="arrow" width="25" height="22" viewBox="0 0 35 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.585815L34.4142 10.9999L24 21.4142L22.5858 20L30.5857 12L0 12L2.38419e-07 10L30.5858 10L22.5858 2.00003L24 0.585815Z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Portfolio-Section ======================-->
    @include('portfolio')
    <!--Portfolio-Section ======================-->

    <!--Avis Section ======================-->
    @include('avis')
    <!--Avis     Section ======================-->

    <!--Feedback Section ======================-->
    @include('feedback')
    <!--Feedback Section ======================-->

@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
    <script src="{{ asset('/assets/js/jquery-3.7.0.min.js') }}"></script>
    <script src="{{ asset('/assets/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('/assets/js/swiper-bundle.min.js') }}"></script>
    <script src="{{ asset('/assets/js/jquery.magnific-popup.min.js') }}"></script>
    <script src="{{ asset('/assets/js/wow.min.js') }}"></script>
    <script src="{{ asset('/assets/js/odometer.js') }}"></script>
    <script src="{{ asset('/assets/js/jquery.progressScroll.min.js') }}"></script>
    <script src="{{ asset('/assets/js/script.js') }}"></script>
@endsection