@extends('layouts.frontend')
@section('title', __('Nous contacter'))
@section('description', __('Découvrez DOUX, des produits de volailles françaises.'))

@section('content')

    <section class="jumbotron">
        <p class="maintitle ttu animate__animated fadeIn animate__slow">{{ __('Nous contacter') }}</p>
        <img class="img-zoom" src="{{ asset('assets/images/contact.jpg') }}" alt="Nous contacter">
        <div class="banner">
            <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
                <defs>
                    <style>
                        .cls-1 {
                            fill: #ffffff;
                        }

                        .cls-2 {
                            fill: transparent;
                        }
                    </style>
                </defs>
                <path class="cls-1"
                    d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
                <path class="cls-2"
                    d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
            </svg>
        </div>
    </section>

    <div class="contact-page has-bckg--grey is-flex horizontal-center container">
        <svg class="p-abs" id="picto-localisation" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171 236">
            <defs>
                <style>
                    .cls-1 {
                        fill-rule: evenodd;
                    }
                </style>
            </defs>
            <path class="cls-1"
                d="M85,236C60,197,0,131,0,85A84.93,84.93,0,0,1,85,0c48,0,86,38,86,85C171,131,111,197,85,236ZM85,43c24,0,43,19,43,42a42.68,42.68,0,0,1-43,43c-23,0-42-19-42-43A42.25,42.25,0,0,1,85,43Z" />
        </svg>
        <p>
            <strong>{{ __('Adresse') }}</strong><br /><br />
            DOUX FARMOR<br />
            450 Route de Rosporden<br />
            Le Grand Guelen<br />
            29000 QUIMPER, France
        </p>
    </div>

    <div class="container">
        <div class="wrapper">
            <div class="breadcrumb is-flex">
                <a class="link" href="{{ route($routeprefixer . 'home') }}">{{ __('Accueil') }}</a>
            </div>
            <div class="header-title sectiontitle align-center p-rel">
                <h2 class="punchline-module__title align-center animate__animated fadeInUp animate__slow">{!! __('Une question ? Une idée ? Un conseil ?<br>Des informations sur nos produits ?') !!}</h2>
            </div>
            <p class="align-center">{!! __(
                'N’hésitez-pas à nous contacter en renseignant le formulaire ci-dessous.<br>Nous traiterons votre demande avec la plus grande attention dans les meilleurs délais.',
            ) !!}</p>
            @if (session()->has('status'))
                <div class="form-result form-result_confirm">
                    <div class="form-result__title title title_small">{{ __('Votre message a bien été envoyé !') }}</div>
                    <div class="form-result__text">{{ __('Nos services mettent tout en oeuvre pour y répondre au plus vite.') }}</div>
                </div>
            @endif
            <form class="form contact__form" id="form-submit" id="contact-form" action="{{ route($routeprefixer . 'contact.submit') }}"
                method="post" enctype="multipart/form-data">
                @csrf
                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div class="form-result_error">{{ $error }}</div>
                    @endforeach
                @endif
                <div>
                    @include('front.partials.inline-cookie', [
                        'class' => ['d-flex-column'],
                        'cookie_name' => 'recaptcha',
                        'text_line_1' => __('Vous devez accepter les cookies reCaptcha pour utiliser les formulaires.'),
                        'text_line_2' => __('Acceptez ce cookie pour utiliser les formulaires'),
                    ])
                </div>
                <fieldset class="inert">
                    <legend>{{ __('Vos coordonnées') }} :</legend>

                    <label class="radio-label">{{ __('Monsieur') }}
                        <input name="civilite" type="radio" value="monsieur" checked="checked"
                            @if (old('civilite') === 'monsieur') checked @endif>
                        <span class="checkmark"></span>
                    </label>
                    <label class="radio-label">{{ __('Madame') }}
                        <input name="civilite" type="radio" value="madame" @if (old('civilite') === 'madame') checked @endif>
                        <span class="checkmark"></span>
                    </label>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">{{ __('Nom') }}* : </label>
                            <input id="name" name="name" type="text" value="{{ old('name') }}" minlength="2" required>
                        </div>
                        <div class="form-group">
                            <label for="lastname">{{ __('Prénom') }}* : </label>
                            <input id="lastname" name="lastname" type="text" value="{{ old('lastname') }}" minlength="2" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="address">{{ __('Adresse') }}* : </label>
                            <input id="address" name="address" type="text" value="{{ old('address') }}" maxlength="255"
                                autocomplete="street-address" required>
                        </div>
                        <div class="form-group">
                            <label for="postcode">{{ __('Code postal') }}* : </label>
                            <input id="postcode" name="postcode" type="text" value="{{ old('postcode') }}" minlength="1" maxlength="99000"
                                autocomplete="postal-code" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="city">{{ __('Ville') }}* : </label>
                            <input id="city" name="city" type="text" value="{{ old('city') }}" maxlength="255"
                                autocomplete="address-level2" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">{{ __('Téléphone') }}* : </label>
                            <input id="phone" name="phone" type="number" value="{{ old('phone') }}" min="1" max="9999999999"
                                autocomplete="tel" required>
                        </div>
                        <div class="form-group">
                            <label for="email">{{ __('Email') }}* : </label>
                            <input id="email" name="email" type="mail" value="{{ old('email') }}"
                                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" autocomplete="email" required>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="country">
                            <select class="changeLength" id="country" name="country" maxlength="255" required>
                                <option value="" @if (!old('country')) selected @endif>{{ __('Sélectionnez un pays') }} *
                                </option>
                                @foreach ($listCountries as $country)
                                    <option value="{{ $country->value }}" @if (old('country') == $country->value) selected @endif>
                                        {{ __($country->label) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="drom">
                            <select class="changeLength" id="departement" name="departement" maxlength="255">
                                <option value="" @if (!old('departement')) selected @endif>
                                    {{ __('Sélectionnez un département') }} *</option>
                                @foreach ($listDeps as $departement)
                                    <option value="{{ $departement->value }}" @if (old('departement') === $departement->value) selected @endif>
                                        {{ __($departement->label) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="inert">
                    <legend>{{ __('Préciser votre demande') }} :</legend>
                    <div class="ck-button">
                        <label>
                            <input class="consoRecla" name="topic" type="radio" value="Réclamation"
                                @if (old('topic') == 'Réclamation') checked @endif><span>{{ __('Réclamation produit') }}</span>
                        </label>
                        <label>
                            <input class="otherRecla" name="topic" type="radio" value="La marque"
                                @if (old('topic') == 'La marque') checked @endif><span>{{ __('La marque') }}</span>
                        </label>
                        <label>
                            <input class="otherRecla" name="topic" type="radio" value="Contact Commercial"
                                @if (old('topic') == 'Contact Commercial') checked @endif><span>{{ __('Contact commercial') }}</span>
                        </label>
                        <label>
                            <input class="otherRecla" name="topic" type="radio" value="Autre"
                                @if (old('topic') == 'Autre') checked @endif><span>{{ __('Autre demande') }}</span>
                        </label>
                    </div>
                    <div class="form-row recla_field">
                        <div class="form-group">
                            <label for="address">{{ __('Nom du produit') }}* : </label>
                            <input id="product_name" name="product_name" type="text" value="{{ old('product_name') }}">
                        </div>
                        <div class="form-group">
                            <label for="barcode">{{ __('Code barre') }}* : </label>
                            <input id="barcode" name="barcode" type="number" value="{{ old('barcode') }}">
                        </div>
                    </div>
                    <div class="form-row recla_field">
                        <div class="form-group">
                            <label for="shop">{{ __("Lieu d'achat") }}* : </label>
                            <input id="shop" name="shop" type="text" value="{{ old('shop') }}">
                        </div>
                        <div class="form-group">
                            <label for="lot">{{ __('Numéro de lot') }}* : </label>
                            <input id="lot" name="lot" type="number" value="{{ old('lot') }}">
                        </div>
                    </div>
                    <div class="form-row recla_field">
                        <div class="form-group">
                            <label for="limit_date">{{ __('Date Limite de Consommation') }}* : </label>
                            <input id="limit_date" name="limit_date" type="date" value="{{ old('limit_date') }}">
                        </div>
                        <div class="form-group">
                            <label for="consumption_date">{{ __('Date de consommation') }}* : </label>
                            <input id="consumption_date" name="consumption_date" type="date" value="{{ old('consumption_date') }}">
                        </div>
                    </div>
                    <div>
                        <label for="message">{{ __('Message') }}* : </label>
                        <textarea id="message" name="message" cols="30" rows="10">{{ old('message') }}</textarea>
                    </div>
                    <div>
                        <input id="file" name="file" type="file" @if ('topic' == 'Réclamation') required @endif>
                        <label id="lblFile" for="file"></label>
                    </div>
                </fieldset>
                <p class="is-small">{!! __('rgpd.contact.disclaimer', ['PRIVROUTE' => route($routeprefixer . 'policy')]) !!}</P>

                <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 class="align-center inert">
                    <input type="submit" value="{{ __('Envoyer') }}">
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
    <script nonce="{{ $nonce }}">
        function showReclaFields() {
            var collection = document.getElementsByClassName('recla_field');
            for (let elem of collection) {
                elem.style.display = 'flex';
            }
            document.getElementById('lblFile').innerHTML = '{{ __('Photo de l’emballage') }}*';
            document.getElementById('file').required = true;
        }

        function hideReclaFields() {
            var collection = document.getElementsByClassName('recla_field');
            for (let elem of collection) {
                elem.style.display = 'none';
            }
            document.getElementById('lblFile').innerHTML = '{{ __('Insérer une pièce jointe') }}';
            document.getElementById('file').required = false;
        }

        function showDromField() {
            const countryList = document.getElementById('country');
            const departmentList = document.getElementById('departement');
            if (countryList.value == '{{ \App\Enums\Country::france()->value }}') {
                departmentList.style.display = 'initial';
                departmentList.required = true;
            } else {
                departmentList.style.display = 'none';
                departmentList.required = false;
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            hideReclaFields();
            showDromField();
            @if (old('topic') == 'Réclamation')
                showReclaFields();
            @endif
            document.getElementById('country').addEventListener('change', showDromField)
        });
    </script>

    <script nonce="{{ $nonce }}">
        const initFormCaptcha = () => {
            const newDiv = document.createElement("div");
            newDiv.classList.add('g-recaptcha');
            document.getElementById('r_captcha').appendChild(newDiv);
            [...document.querySelectorAll('#form-submit .inert')].forEach(el => {
                el.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();
            [...document.querySelectorAll('#form-submit .inert')].forEach(el => {
                el.inert = true;
            });
        };
        window.__CN_Recaptcha_Loaded = function() {
            [...document.querySelectorAll('#form-submit .inert')].forEach(el => {
                el.inert = false;
            });
            grecaptcha.render(document.querySelector('#r_captcha > div'), {
                'sitekey': "{{ config('services.google.recaptcha.public') }}"
            });
        };
    </script>
@endpush