@extends('fo.layout')

@section('title', $staticPageModel->seo_title ?? __('Rejoignez-nous'))
@section('description', $staticPageModel->seo_description ?? __('Rejoignez-nous la description.'))
@section('breadcrumb', request()->route()->getName())

@section('content')
    <section class="joinus overflow-hidden">
        <div class="container">
            <div class="joinus-description row mx-auto">
                <div class="col-12">
                    <span class="divide d-block w-100 mt-xl-3 my-2"></span>
                    <h1 class="f-sheldon text-uppercase my-3 text-center">{{ $staticPageModel->title }}</h1>
                    <span class="divide d-block w-100 mt-xl-3 my-2"></span>
                </div>
                <div class="col-12 mb-xl-5">
                    <p class="lh-sm m-0 mb-3 text-center">
                        {{ Str::of(__('Après plus de 30 ans de croissance soutenue par l\'innovation, intégrée au groupe familial français LDC, leader de l\'agro-alimentaire, AGIS est désormais une société comptant plus de 800 collaborateurs passionnés répartis sur ses 3 ateliers de production et une plateforme logistique.'))->ucFirst()->value() }}
                    </p>
                    <div class="row justify-content-center">
                        <div class="col-12 col-xl-5 mb-3 text-center">
                            <a class="w-100 fw-bold btn btn-secondary" href="https://recrutement.ldc.fr/fr/annonces?brands=1401">
                                {{ __('> Découvrir les postes à pourvoir') }}
                            </a>
                        </div>
                        <div class="col-12 col-xl-5 mb-3 text-center">
                            <a class="btn btn-secondary w-100 fw-bold" href="#candidature-spontanee">{{ __('> Candidature spontanée') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="details bg-agis-grey position-relative pt-4">
            <div class="container">
                <h2 class="lh-1 fs-5 f-readex-pro text-uppercase fw-bold d-flex flex-column m-0 text-center">
                    {!! clean(__('les 5 bonnes raisons<br>de devenir<br>un explorateur agis')) !!}
                </h2>
                {{-- FIRST --}}
                <div class="part1-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
                    <div class="number">
                        <p class="fs-1 f-sheldon text-sext fw-bold w-100 m-0 text-start">{{ __('01') }}</p>
                    </div>
                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
                        <p class="lh-1 m-0">{{ Str::of(__('des hommes et des femmes'))->ucFirst()->value() }}</p>
                        <p class="lh-1 fs-6 text-sext text-uppercase fw-bold f-readex-pro m-0">{{ __('bienveillants') }}</p>
                        <p class="lh-1 m-0">{{ __('motivés et impliqués.') }}</p>
                    </div>
                </div>
                {{-- SECOND --}}
                <div class="part2-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
                        <p class="d-flex flex-column text-primary align-items-start justify-content-start fs-5 text-uppercase f-sheldon m-0">
                            <span>{{ __('innovation') }}</span>
                            <span>{{ __('qualité') }}</span>
                            <span>{{ __('performance') }}</span>
                        </p>
                        <p class="d-none d-md-block lh-1 m-0">{{ __('sont les meilleurs ingrédients') }}</p>
                        <p class="d-none d-md-block lh-1 m-0">{{ __('de notre entreprise.') }}</p>
                    </div>
                    <div class="number">
                        <p class="fs-1 f-sheldon text-primary fw-bold w-100 m-0 text-end">{{ __('02') }}</p>
                    </div>
                </div>
                {{-- THIRD --}}
                <div class="part3-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
                    <div class="number">
                        <p class="fs-1 f-sheldon fw-bold text-sept w-100 m-0 text-start">{{ __('03') }}</p>
                    </div>
                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
                        <p class="lh-1 fs-6 text-uppercase text-sept fw-bold f-readex-pro m-0">{{ __('vous aimez') }}</p>
                        <p class="lh-1 fs-6 text-uppercase text-sept fw-bold f-readex-pro m-0">{{ __('manger ?') }}</p>
                        <p class="lh-1 m-0">{{ Str::of(__('rejoignez notre équipe'))->ucFirst()->value() }}</p>
                        <p class="lh-1 m-0">{{ __('de Gastronomes') }}</p>
                    </div>
                </div>
                {{-- FOURTH --}}
                <div class="part4-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
                        <p class="lh-1 m-0">{{ Str::of(__('une entreprise'))->ucFirst()->value() }}</p>
                        <p class="lh-1 fs-6 text-secondary text-uppercase fw-bold f-readex-pro m-0">{{ __('humaine') }}</p>
                        <p class="lh-1 m-0">{{ __('& à l\'écoute de ses talents.') }}</p>
                    </div>
                    <div class="number">
                        <p class="fs-1 f-sheldon text-secondary fw-bold w-100 m-0 text-end">{{ __('04') }}</p>
                    </div>
                </div>
                {{-- FIFTH --}}
                <div class="part5-assets d-flex justify-content-center align-items-start align-items-md-center position-relative my-4 flex-row">
                    <div class="number">
                        <p class="fs-1 f-sheldon text-sext fw-bold w-100 m-0 text-start">{{ __('05') }}</p>
                    </div>
                    <div class="description d-flex flex-column justify-content-center align-items-start h-100">
                        <p class="lh-1 m-0">{{ Str::of(__('des formations'))->ucFirst()->value() }}</p>
                        <p class="lh-1 fs-6 text-sext text-uppercase fw-bold f-readex-pro m-0">{{ __('qualifiantes') }}</p>
                        <p class="lh-1 m-0">{{ __('pour gagner en compétences.') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mt-5">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="m-0">{{ __('Nous sommes tous animés par la passion de nos métiers !') }}</p>
                    <p>{{ __('Une équipe de talents à renforcer.') }}</p>
                    <div class="ratio ratio-16x9">
                        @if (\App\Rules\IsValidYoutubeId::validates($joinuspageModel->video_id))
                            <div class="cn-youtube" data-id="{{ $joinuspageModel->video_id }}"></div>
                        @endif
                        @if (\App\Rules\IsValidVimeoId::validates($joinuspageModel->video_id))
                            <div class="cn-vimeo" data-id="{{ $joinuspageModel->video_id }}"></div>
                        @endif
                    </div>
                    <p>
                        {{ __('Pour consulter l\'ensemble de nos vidéos métiers, rendez-vous sur notre chaîne') }}
                        <a href="https://www.youtube.com/@AGIS-EXPLORATEUR-ET-GASTRONOME" title="{{ __('Accéder à la chaîne Youtube Agis') }}"
                            target="_blank">{{ __('Youtube') }}</a>
                    </p>
                </div>
                <div class="col-12 mb-xl-0 mb-5">
                    <p class="highlight black mx-xl-auto my-5 px-5 text-center text-white">{{ __('Ils témoignent !') }}</p>
                    <div class="container-fluid position-relative d-block d-xl-none p-4">
                        <div class="swiper swiper-joinus overflow-hidden" id="swiper-joinus">
                            <div class="swiper-wrapper">
                                @foreach ($testimonialModels as $testimonialModel)
                                    <div class="swiper-slide">
                                        <div class="swiper-slide-content d-flex flex-column justify-content-center align-items-center mx-auto">
                                            <img src="{{ asset($testimonialModel->picture) }}" title="{{ $testimonialModel->picture_title }}"
                                                alt="{{ $testimonialModel->picture_alt }}">
                                            <div class="w-100">
                                                <p class="fw-bold m-0">{{ $testimonialModel->job }}</p>
                                                <p class="text-uppercase m-0">{{ $testimonialModel->statut }}</p>
                                                <p class="m-0">{{ $testimonialModel->description }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="navigation d-flex justify-content-evenly align-items-center mb-2 mt-3 flex-row p-0">
                                <div class="swiper-button-prev rounded-circle" role="button">
                                    <img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
                                        title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
                                </div>
                                <div class="swiper-button-next rounded-circle" role="button">
                                    <img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
                                        title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-none d-xl-flex row justify-content-center flex-wrap">
                        @foreach ($testimonialModels as $testimonialModel)
                            <div class="col-4 mb-5">
                                <div class="card mx-auto border-0">
                                    <img class="card-img-top rounded-0" src="{{ asset($testimonialModel->picture) }}"
                                        title="{{ $testimonialModel->picture_title }}" alt="{{ $testimonialModel->picture_alt }}">
                                    <div class="card-body px-0">
                                        <p class="fw-bold mb-1">{{ $testimonialModel->job }}</p>
                                        <p class="text-uppercase mb-1">{{ $testimonialModel->statut }}</p>
                                        <p class="mb-1">{{ $testimonialModel->description }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-12 position-relative mb-5 p-5 pt-0" id="candidature-spontanee">
                    <div class="black-frame position-absolute w-100 h-100 z-n1 start-0 top-0 px-2 py-0">
                        <div class="position-relative w-100 h-100"></div>
                    </div>
                    <div class="mx-auto w-fit bg-white px-4">
                        <p class="f-readex-pro fw-bold highlight black mb-0 w-fit px-4 text-white">
                            {{ __('Vos candidatures spontanées') }}
                        </p>
                    </div>
                    <form id="joinus-form" method="POST" action="{{ route('fo.joinus.store') }}" enctype="multipart/form-data">
                        @method('POST')
                        @csrf
                        <div class="row">
                            <div class="col-12 col-xl-6 pe-xl-5">
                                <fieldset class="mb-3">
                                    <label for="last_name">
                                        {{ Str::of(__('validation.attributes.last_name'))->ucFirst()->value() }}*&nbsp;:
                                    </label>
                                    <input class="form-control" id="last_name" name="last_name" value="{{ old('last_name') }}" required>
                                </fieldset>
                                <fieldset class="mb-3">
                                    <label for="first_name">
                                        {{ Str::of(__('validation.attributes.first_name'))->ucFirst()->value() }}*&nbsp;:
                                    </label>
                                    <input class="form-control" id="first_name" name="first_name" value="{{ old('first_name') }}" required>
                                </fieldset>
                                <fieldset class="mb-3">
                                    <label for="email">
                                        {{ Str::of(__('validation.attributes.email'))->ucFirst()->value() }}*&nbsp;:
                                    </label>
                                    <input class="form-control" id="email" name="email" value="{{ old('email') }}" required>
                                </fieldset>
                                <fieldset class="mb-3">
                                    <label for="phone">
                                        {{ Str::of(__('validation.attributes.phone'))->ucFirst()->value() }}*&nbsp;:
                                    </label>
                                    <input class="form-control" id="phone" name="phone" value="{{ old('phone') }}" required>
                                </fieldset>
                                <fieldset class="select-form position-relative mb-3">
                                    <label for="desired_location">
                                        {{ Str::of(__('validation.custom.desired_location'))->ucFirst()->value() }}*&nbsp;:
                                    </label>
                                    <select class="form-control" name="desired_location" role="button">
                                        <option disabled selected>{{ __('validation.custom.desired_location') }}</option>
                                        @foreach (\App\Enums\DesiredLocation::toArray() as $key => $enumObject)
                                            <option value="{{ $enumObject->value }}"
                                                @if (intval(old('desired_location')) === $enumObject->value) selected @endif>
                                                {{ $enumObject->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </fieldset>
                                <fieldset class="row mb-xl-0 mb-3">
                                    <div class="col-12 col-xl-5 d-flex align-items-center">
                                        <p class="m-0">{{ __('Pièce jointe') }}&nbsp;:</p>
                                    </div>
                                    <div class="col-12 col-xl-7">
                                        <label class="btn btn-light w-100 mt-1" for="file">
                                            {{ Str::of(__('parcourir'))->ucFirst()->value() }}
                                        </label>
                                        <input class="d-none" id ="file" name="file" type="file" value="{{ old('file') }}"
                                            role="button" accept="application/pdf">
                                    </div>
                                    <div class="col-12">
                                        <p class="m-0" id="input-file-name"></p>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-12 col-xl-6 ps-xl-5">
                                <fieldset class="mb-3">
                                    <label for="message">
                                        {{ Str::of(__('validation.attributes.message'))->ucFirst()->value() }}*&nbsp;:
                                    </label>
                                    <textarea class="form-control" id="message" name="message" rows="6" required>{{ old('message') }}</textarea>
                                </fieldset>
                                <a id="recaptcha-warning" rel="nofollow">
                                    <strong class="text-underline text-bold text-normal text-danger">
                                        {{ __('cookie-notice.custom.recaptcha.warning') }}
                                    </strong>
                                    <button class="btn btn-sm btn-primary"
                                        id="recaptcha-accept">{{ __('Accepter Recaptcha uniquement') }}</button>
                                </a>
                                <div class="d-flex flex-column justify-content-center align-items-center mt-2">
                                    <div id="r_captcha"></div>
                                    @if ($errors->has('g-recaptcha-response'))
                                        <div class="mb-6">
                                            <span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
                                        </div>
                                    @endif
                                    <p class="my-1">{{ __('*Champ obligatoire') }}</p>
                                </div>
                                <button class="g-recaptcha btn btn-primary w-100 text-capitalize"
                                    data-sitekey="{{ config('services.google.recaptcha.public') }}"
                                    type="submit">{{ Str::ucfirst(__('contact.send')) }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script nonce="{{ $nonce }}">
        document.addEventListener('DOMContentLoaded', function() {
            window.__CN_Recaptcha = function() {
                (function(d, t) {
                    let g = d.createElement(t),
                        s = d.getElementsByTagName(t)[0];
                    g.src = 'https://www.google.com/recaptcha/api.js?render=explicit&onload=__CN_Recaptcha_Loaded';
                    s.parentNode.insertBefore(g, s)
                }(document, 'script'));
            };
            window.__CN_Recaptcha_Loaded = function() {
                grecaptcha.render('r_captcha', {
                    'sitekey': '{{ config('services.google.recaptcha.public') }}'
                });
                document.getElementById('recaptcha-warning').remove();
                document.getElementById('joinus-form').inert = false;
            };
            document.getElementById("recaptcha-accept")?.addEventListener('click', function(e) {
                e.preventDefault();
                window.WebCookieNotice.acceptCookie('recaptcha');
            });
        });
    </script>
@endpush