314 lines
17 KiB
PHP
314 lines
17 KiB
PHP
@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
|