@extends('fo.layout')

@section('title', __($staticPageModel->seo_title))
@section('description', __($staticPageModel->seo_description))
@section('breadcrumb', request()->route()->getName())

@section('main-bg-class', 'has-banner commitments')

@section('banner')
    <div class="container-fluid">
        <div class="row position-relative bulle-banner">
            <div class="col-12 g-0">
                <img class="img-fluid banner-picture object-fit-cover w-100 h-100 z-n1 position-relative"
                    src="{{ Vite::asset('resources/assets/images/commitments/bg-header.jpg') }}"
                    alt="{{ __('Bannière de la page nos engagements') }}">
            </div>

            {{-- Nos Engagements header (mobile hide) --}}
            <div class="col-12 d-none d-xl-block position-absolute translate-middle-y col-6 g-0 top-50 start-0">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-7 col-xx-6 div-bulle px-5 py-3">
                            <div class="p-5">
                                <div class="text-center">
                                    <h1 class="fs-1 f-intro-head-h-base text-primary text-center">{{ $staticPageModel->title }}</h1>
                                    <img class="img-fluid flex-shrink-1 mb-3 flex-grow-0"
                                        src="{{ Vite::asset('resources/assets/images/global/underline-yellow.svg') }}"
                                        alt="{{ __('Trait souligné') }}">
                                </div>
                                <div class="ck-content">{!! clean($staticPageModel->content) !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section('content')
    <div class="bg-light-top-tear container-fluid position-relative mt-0 pb-1">
        <div class="seagull-column d-none d-xxl-block ms-4">
            <img class="img-fluid position-relative" id="seagulls-scroll" data-offset="16"
                src="{{ Vite::asset('resources/assets/images/commitments/seagull.svg') }}" alt="{{ __('Ombre de mouettes') }}">
        </div>
        <div class="container">
            {{-- HEADER (lg hide) --}}
            <div class="row d-xl-none mb-3">
                <div class="text-center">
                    <h1 class="fs-1 text-primary text-center">{{ $staticPageModel->title }}</h1>
                    <img class="img-fluid flex-shrink-1 mb-3 flex-grow-0"
                        src="{{ Vite::asset('resources/assets/images/global/underline-yellow.svg') }}" alt="{{ __('Trait souligné') }}">
                </div>
                <div>{!! clean($staticPageModel->content) !!}</div>
            </div>

            @if ($localCommitmentList->count())
                {{-- LOCAL --}}
                <div class="row mb-3">
                    <div class="col">
                        <h2 class="f-intro-head-h-base text-primary">{{ __('Nos engagements locaux') }}</h2>
                        <img class="img-fluid flex-shrink-1 mb-3 flex-grow-0"
                            src="{{ Vite::asset('resources/assets/images/global/underline-yellow.svg') }}" alt="{{ __('Trait souligné') }}">
                    </div>
                </div>

                @foreach ($localCommitmentList as $index => $commitment)
                    <div class="row text-primary @if ($index % 2 !== 0) flex-row-reverse @endif justify-content-center mb-3">
                        <div class="col-12 col-md-6 col-lg-5 mb-3">
                            <div class="carousel slide" id="carousel-commitment-{{ $index }}" data-bs-pause="false"
                                data-bs-touch="true">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img class="d-block w-100" src="{{ asset($commitment->picture1) }}"
                                            title="{{ $commitment->picture1_title }}" alt="{{ $commitment->picture1_alt }}">
                                    </div>
                                    @if ($commitment->picture2)
                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="{{ asset($commitment->picture2) }}"
                                                title="{{ $commitment->picture2_title }}" alt="{{ $commitment->picture2_alt }}">
                                        </div>
                                    @endif
                                    @if ($commitment->picture3)
                                        <div class="carousel-item">
                                            <img class="d-block w-100" src="{{ asset($commitment->picture3) }}"
                                                title="{{ $commitment->picture3_title }}" alt="{{ $commitment->picture3_alt }}">
                                        </div>
                                    @endif
                                </div>
                                @if ($commitment->picture2 or $commitment->picture3)
                                    <button
                                        class="btn btn-secondary carousel-play-btn position-absolute z-2 bottom-0 start-0 m-1 border-0 text-white"
                                        id="carousel-play-btn-{{ $index }}"
                                        title="{{ __('Mise en fonctionnement ou arrêt de l\'animation du carousel') }}">
                                        <i class="fa-solid fa-play d-none"></i>
                                        <i class="fa-solid fa-pause"></i>
                                    </button>
                                    <button class="carousel-control-prev" data-bs-target="#carousel-commitment-{{ $index }}"
                                        data-bs-slide="prev" type="button">
                                        <i class="fa-solid fa-chevron-left fa-2xl text-primary"></i>
                                        <span class="visually-hidden">{{ __('Précédent') }}</span>
                                    </button>
                                    <button class="carousel-control-next" data-bs-target="#carousel-commitment-{{ $index }}"
                                        data-bs-slide="next" type="button">
                                        <i class="fa-solid fa-chevron-right fa-2xl text-primary"></i>
                                        <span class="visually-hidden">{{ __('Suivant') }}</span>
                                    </button>
                                @endif
                            </div>
                        </div>
                        <div class="col f-intro-head-b-base mb-3">
                            <h3>{{ $commitment->title }}</h3>
                            <div class="ck-content">{!! $commitment->text !!}</div>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>

    {{-- QUALITE --}}
    <div class="container-fluid bg-light-top-tear text-bg-light quality-row z-0 p-0">
        <div class="row position-relative bg-quality g-0">
            <div class="col-12">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col col-md-11 col-lg-10 col-xl-8 col-xxl-7 div-bulle">
                            <div class="p-md-5">
                                <div class="text-center">
                                    <h1 class="fs-1 f-intro-head-h-base text-primary text-center">{{ $commitmentPageModel->quality_title }}
                                    </h1>
                                    <img class="img-fluid flex-shrink-1 mb-3 flex-grow-0"
                                        src="{{ Vite::asset('resources/assets/images/global/underline-yellow.svg') }}"
                                        alt="{{ __('Trait souligné') }}">
                                </div>
                                <div class="ck-content">
                                    {!! clean($commitmentPageModel->quality_text) !!}
                                </div>
                                <div class="d-flex justify-content-center">
                                    {{-- Pictogram 1 --}}
                                    @if ($commitmentPageModel->pictos->get(0))
                                        <img class="img-fluid mx-2" src="{{ asset($commitmentPageModel->pictos->get(0)->picture) }}"
                                            title="{{ $commitmentPageModel->pictos->get(0)->picture_title }}"
                                            alt="{{ $commitmentPageModel->pictos->get(0)->picture_alt }}">
                                    @endif
                                    {{-- Pictogram 2 --}}
                                    @if ($commitmentPageModel->pictos->get(1))
                                        <img class="img-fluid mx-2" src="{{ asset($commitmentPageModel->pictos->get(1)->picture) }}"
                                            title="{{ $commitmentPageModel->pictos->get(1)->picture_title }}"
                                            alt="{{ $commitmentPageModel->pictos->get(1)->picture_alt }}">
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- PRODUITS --}}
    <div class="container-fluid bg-primary-top-tear text-bg-primary">
        <div class="container p-0">
            {{-- TITLE --}}
            <div class="row mb-3">
                <div class="col">
                    <h2>{{ __('Nos engagements produits') }}</h2>
                    <img class="img-fluid flex-shrink-1 mb-3 flex-grow-0"
                        src="{{ Vite::asset('resources/assets/images/global/underline-yellow.svg') }}" alt="{{ __('Trait souligné') }}">
                </div>
            </div>
            <div class="row mb-3">
                {{-- Static Pictos --}}
                <div class="col-12 col-md-6 g-0">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-6 col-md-12 col-lg-6 text-center">
                                <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/commitments/poule.svg') }}"
                                    alt="{{ __('Un dessin d\'une poule couvant trois oeufs') }}">
                                <p class="f-intro-head-b-base text-white">{{ __('Oeufs de poules élevées en plein air') }}</p>
                            </div>
                            <div class="col-6 col-md-12 col-lg-6 text-center">
                                <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/commitments/lait.svg') }}"
                                    alt="{{ __('Un dessin d\'une carte de France avec une bouteille de lait') }}">
                                <p class="f-intro-head-b-base text-white">{{ __('Lait français') }}</p>
                            </div>
                            <div class="col-6 col-md-12 col-lg-6 text-center">
                                <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/commitments/cochon.svg') }}"
                                    alt="{{ __('Un dessin d\'un cochon de profil') }}">
                                <p class="f-intro-head-b-base text-white">{{ __('Viande de porc origine France') }}</p>
                            </div>
                            <div class="col-6 col-md-12 col-lg-6 text-center">
                                <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/commitments/farine.svg') }}"
                                    alt="{{ __('Un dessin d\'un sac de farine') }}">
                                <p class="f-intro-head-b-base text-white">{{ __('Farine moulue en Bretagne') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Product 1 --}}
                <div class="col">
                    <h3 class="text-tertiary">{{ $commitmentPageModel->product1_title }}</h3>
                    <div class="ck-content">{!! clean($commitmentPageModel->product1_text) !!}</div>
                </div>
            </div>
            <div class="row flex-md-row-reverse mb-5">
                {{-- Static Pictos --}}
                <div class="col-12 col-md-6 g-0">
                    <ul class="rounded-handmade list-unstyled d-flex flex-column justify-content-center align-items-center mx-auto p-5">
                        <li class="my-2">
                            <span
                                class="h5 f-intro-head-b-base">{{ __('Présence de bouillon de légumes et ferments qui génèrent des nitrites naturels, participant à la conservation des charcuteries') }}</span>
                        </li>
                        <li class="my-2">
                            <span class="h5 f-intro-head-b-base">{{ __('Sans arôme artificiel') }}</span>
                        </li>
                        <li class="my-2">
                            <span class="h5 f-intro-head-b-base">{{ __('Sans antioxydants') }}</span>
                        </li>
                    </ul>
                </div>
                {{-- Product 2 --}}
                <div class="col">
                    <h3 class="text-tertiary">{{ $commitmentPageModel->product2_title }}</h3>
                    <div class="ck-content">{!! clean($commitmentPageModel->product2_text) !!}</div>
                </div>
            </div>
            <div class="row">
                <div class="col text-center">
                    <a class="btn btn-tertiary btn-rotate-left fs-2 my-2 px-4" href="{{ route('fo.ranges.index') }}"
                        title="{{ __('Tous nos produits') }}">{{ __('Découvrir nos produits') }}</a>
                </div>
            </div>
        </div>
    </div>

    {{-- ENVIRONNEMENT --}}
    <div class="container-fluid bg-primary-top-tear text-bg-light quality-row z-0 p-0">
        <div class="row position-relative bg-environment z-n1 g-0">
            <div class="col-12">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col col-md-11 col-lg-10 col-xl-8 col-xxl-7 div-bulle">
                            <div class="p-md-5">
                                <div class="text-center">
                                    <h1 class="fs-1 f-intro-head-h-base text-primary text-center">
                                        {{ $commitmentPageModel->environment_title }}
                                    </h1>
                                    <img class="img-fluid flex-shrink-1 mb-3 flex-grow-0"
                                        src="{{ Vite::asset('resources/assets/images/global/underline-yellow.svg') }}"
                                        alt="{{ __('Trait souligné') }}">
                                </div>
                                <div class="ck-content">{!! clean($commitmentPageModel->environment_text) !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection