ldc-agis/resources/views/fo/pages/contact.blade.php

@extends('fo.layout')

@section('title', $contactModel->seo_title ?? __('Contact'))
@section('description', $contactModel->seo_description ?? __('Contactez-nous !'))
@section('breadcrumb', request()->route()->getName())

@section('content')
    <section class="contact">
        <div class="container">
            <div class="contact-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">{{ $contactModel->title }}</h1>
                    <span class="divide d-block w-100 mt-xl-3 my-2"></span>
                </div>
                <div class="col-12">
                    <p class="text-capitalize m-0 text-center">{{ __('siège social agis') }}</p>
                    <p class="text-capitalize m-0 text-center">{{ __('802 rue sainte-geneviève') }}</p>
                    <p class="text-capitalize m-0 text-center">{{ __('84000 avignon') }}</p>
                    <p class="text-capitalize m-0 text-center">{{ __('T. +33 (0)4 90 80 99 99') }}</p>
                </div>
            </div>
            <div class="border-3 border-dark fw-bold rounded-4 cn-cookie-activate d-flex flex-column flex-md-row align-items-center mb-3 mt-4 border bg-white p-3"
                data-cookie-name="recaptcha">
                <span class="d-flex flex-column w-md-75 w-100">
                    <strong class="text-underline text-bold text-dark fs-6 mb-2">
                        {{ __('cookie-notice.custom.recaptcha.warning') }}
                    </strong>
                    <small class="text-dark fw-normal fs-6">
                        {{ __('Acceptez ce cookie pour utiliser les formulaires') }}
                    </small>
                </span>
                <button class="btn btn-secondary w-lg-25 h-50 fs-6 rounded-4 mt-md-0 mt-3 border-0"
                    id="recaptcha-accept">{{ __('AUTORISER') }}</button>
            </div>
        </div>
        <form id="contact-form" method="POST" action="{{ route('fo.contact.store') }}" enctype="multipart/form-data" inert>
            @method('POST')
            @csrf
            <div class="bg-agis-yellow mb-md-5 m-0 pb-5">
                <div class="container">
                    <div class="position-relative px-md-0 mt-5 px-2 pt-5">
                        <p
                            class="position-absolute start-50 translate-middle f-readex-pro highlight black w-100 w-xl-fit top-0 m-0 px-5 text-center text-white">
                            {{ __('Formulaire de contact') }}</p>
                        <div class="row w-100 mx-auto">
                            <div class="col-12 col-md-6 p-0">
                                <div class="h-100 me-md-5 position-relative">
                                    <fieldset class="select-form d-flex flex-column justify-content-end align-items-start h-100">
                                        <select class="form-control text-capitalize" name="civility" role="button">
                                            <option class="text-capitalize" disabled selected>{{ __('validation.custom.civility') }}</option>
                                            @foreach (\App\Enums\Contact\CivilityEnum::toArray() as $key => $enumObject)
                                                <option class="text-capitalize" value="{{ $enumObject->value }}"
                                                    @if (intval(old('civility')) === $enumObject->value) selected @endif>
                                                    {{ $enumObject->label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.attributes.last_name'))->ucFirst() }}&nbsp;:</label>
                                    <input class="form-control" name="last_name" value="{{ old('last_name') }}">
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.attributes.first_name'))->ucFirst() }}&nbsp;:</label>
                                    <input class="form-control" name="first_name" value="{{ old('first_name') }}">
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.custom.society'))->ucFirst() }}&nbsp;:</label>
                                    <input class="form-control" name="society" value="{{ old('society') }}">
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.attributes.email'))->ucFirst() }}*&nbsp;:</label>
                                    <input class="form-control" name="email" value="{{ old('email') }}" required>
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.attributes.phone'))->ucFirst() }}&nbsp;:</label>
                                    <input class="form-control" name="phone" type="number" value="{{ old('phone') }}">
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.attributes.address'))->ucFirst() }}*&nbsp;:</label>
                                    <input class="form-control" name="address" value="{{ old('address') }}" required>
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.attributes.postal_code'))->ucFirst() }}*&nbsp;:</label>
                                    <input class="form-control" name="postal_code" type="number" value="{{ old('postal_code') }}" required>
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
                                    <label class="mt-1">{{ Str::of(__('validation.attributes.city'))->ucFirst()->value() }}*&nbsp;:</label>
                                    <input class="form-control" name="city" value="{{ old('city') }}" required>
                                </fieldset>
                            </div>
                            <div class="col-12 col-md-6 p-0">
                                <div class="ms-md-5 position-relative pt-md-0 h-100 pt-4">
                                    <fieldset class="select-form d-flex flex-column justify-content-end align-items-start h-100">
                                        <select class="form-control text-capitalize" name="object" role="button" required>
                                            <option class="text-capitalize" disabled selected>{{ __('validation.custom.object') }}</option>
                                            @foreach (\App\Enums\Contact\ObjectEnum::toArray() as $key => $enumObject)
                                                <option class="text-capitalize" value="{{ $enumObject->value }}"
                                                    @if (intval(old('object')) === $enumObject->value) selected @endif>
                                                    {{ $enumObject->label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="contact-products-input row d-none mx-auto p-0">
                                <p class="highlight black w-100 w-xl-fit m-0 mx-auto my-5 px-5 text-center text-white">
                                    {{ Str::of(__('pour pouvoir vous répondre nous avons besoin de quelques informations :'))->ucFirst()->value() }}
                                </p>
                                <div class="col-12 col-md-6 p-0">
                                    <fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
                                        <label class="mt-1" for="product_name">
                                            {{ Str::of(__('validation.custom.product_name'))->ucFirst()->value() }}*&nbsp;:
                                        </label>
                                        <input class="form-control" id="product_name" name="product_name"
                                            value="{{ old('product_name') }}">
                                    </fieldset>
                                </div>
                                <div class="col-12 col-md-6 p-0">
                                    <fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
                                        <label class="mt-1" for="product_date_limit">
                                            {{ Str::of(__('validation.custom.product_date_limit'))->ucFirst()->value() }}*&nbsp;:
                                            <span class="text-body-secondary">{{ __('Ex : 25/08/2028') }}</span>
                                        </label>
                                        <input class="form-control" id="product_date_limit" name="product_date_limit" type="date"
                                            value="{{ old('product_date_limit') }}">
                                    </fieldset>
                                </div>
                                <div class="col-12 col-md-6 p-0">
                                    <fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
                                        <label class="mt-1" for="product_barcode">
                                            {{ Str::of(__('validation.custom.product_barcode'))->ucFirst()->value() }}*
                                            {{ __('validation.custom.product_barcode_detail') }}&nbsp;:
                                        </label>
                                        <input class="form-control" id="product_barcode" name="product_barcode" type="number"
                                            value="{{ old('product_barcode') }}">
                                    </fieldset>
                                </div>
                                <div class="col-12 col-md-6 p-0">
                                    <fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
                                        <label class="mt-1" for="product_lot">
                                            {{ Str::of(__('validation.custom.product_lot'))->ucFirst()->value() }}*&nbsp;:
                                        </label>
                                        <input class="form-control" id="product_lot" name="product_lot" type="number"
                                            value="{{ old('product_lot') }}">
                                    </fieldset>
                                </div>
                                <div class="col-12 col-md-6 p-0">
                                    <fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
                                        <label class="mt-1" for="product_date_consumption">
                                            {{ Str::of(__('validation.custom.product_date_consumption'))->ucFirst()->value() }}*&nbsp;:
                                            <span class="text-body-secondary">{{ __('Ex : 25/08/2028') }}</span>
                                        </label>
                                        <input class="form-control" id="product_date_consumption" name="product_date_consumption"
                                            type="date" value="{{ old('product_date_consumption') }}">
                                    </fieldset>
                                </div>
                                <div class="col-12 col-md-6 p-0">
                                    <fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
                                        <label class="mt-1" for="product_location">
                                            {{ Str::of(__('validation.custom.product_location'))->ucFirst()->value() }}*&nbsp;:
                                        </label>
                                        <input class="form-control" id="product_location" name="product_location"
                                            value="{{ old('product_location') }}">
                                    </fieldset>
                                </div>
                                <div class="col-12 my-3 p-0">
                                    <fieldset class="row">
                                        <div class="col-12 col-md-6 pe-md-5 m-xl-0 mb-2">
                                            <p class="mb-0 mt-1">
                                                {{ Str::of(__('souhaitez-vous joindre une photo ?'))->ucFirst()->value() }}
                                            </p>
                                            <span class="text-body-secondary">
                                                {{ Str::of(__('formats acceptés : jpg, png, pdf'))->ucFirst()->value() }}
                                            </span>
                                        </div>
                                        <div class="col-12 col-md-6 ps-md-5">
                                            <label class="btn btn-primary w-100" for="file">
                                                {{ Str::of(__('ajouter un fichier'))->ucFirst()->value() }}
                                            </label>
                                            <input class="d-none" id ="file" name="file" type="file" value="{{ old('file') }}"
                                                role="button" accept="image/*,application/pdf">
                                            <p class="m-0" id="input-file-name"></p>
                                        </div>
                                    </fieldset>
                                </div>
                                <p class="highlight white w-100 w-xl-fit m-0 mx-auto my-5 px-5 text-center">
                                    {{ __('Laissez nous votre message, le service consommateurs vous répondra dans les plus brefs délais.') }}
                                </p>
                            </div>
                            <div class="col-12 mb-3 p-0">
                                <fieldset class="d-flex flex-column justify-content-center align-items-start">
                                    <label class="mt-1" for="message">
                                        {{ Str::of(__('message'))->ucFirst()->value() }} {{ __('(entre 3 et 500 caractères)') }}*&nbsp;:
                                    </label>
                                    <textarea class="form-control" id="message" name="message" rows="6" required>{{ old('message') }}</textarea>
                                </fieldset>
                            </div>
                            <div class="col text-center">
                                <span>{!! clean(
                                    __(
                                        'Les informations recueillies à partir de ce formulaire sont traitées par le Responsable de Traitement pour donner suite à votre demande de contact. Pour connaître vos droits, vous pouvez consulter la :startA Charte de confidentialité:endA. !',
                                        [
                                            'startA' => '<a href="' . route('fo.policies.show') . '">',
                                            'endA' => '</a>',
                                        ],
                                    ),
                                ) !!}</span>
                            </div>
                            <div class="d-flex flex-column justify-content-center align-items-center">
                                <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>{{ __('*Champ obligatoire') }}</p>
                            </div>
                        </div>
                    </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>
        </form>
    </section>
@endsection

@push('scripts')
    <script nonce="{{ $nonce }}">
        document.addEventListener('DOMContentLoaded', function() {
            const initFormCaptcha = () => {
                const newDiv = document.createElement("div");
                newDiv.classList.add('g-recaptcha');
                document.getElementById('r_captcha').appendChild(newDiv);
                document.getElementById('contact-form').inert = true;
            };
            window.__CN_Recaptcha = function() {
                initFormCaptcha();
                (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_Reset = function() {
                document.querySelector('#r_captcha > div')?.remove();
            };
            window.__CN_Recaptcha_Loaded = function() {
                document.getElementById('contact-form').inert = false;
                grecaptcha.render(document.querySelector('#r_captcha > div'), {
                    'sitekey': '{{ config('services.google.recaptcha.public') }}'
                });
            };
            document.getElementById("recaptcha-accept").addEventListener('click', function(e) {
                e.preventDefault();
                window.WebCookieNotice.acceptCookie('recaptcha');
            });
        });
    </script>
@endpush