@extends('layouts.pages')
@section('page')
  @include('layouts._partials.liens')

  <div class="rejoindre">
    <div class="container-fluid">
      <div class="introduction">
        <div class="row">
          <div class="col-md-6 mb-3 mb-md-0">
            <div class="bloc text">
              <h2>{{ config('texts.rejoindre_introduction') }}</h2>
              <h2>{!! config('texts.rejoindre_introduction_textes') !!}</h2>
              <a class="btn btn-white" href="#form">Accéder au formulaire</a>
            </div>
          </div>
          <div class="col-md-6">
            <div class="bloc image" style="background-image: url('/img/rejoindre.jpg')"></div>
          </div>
        </div>
      </div>
      <div class="keys">
        <div class="row">
          <div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
            <div class="bloc">
              <img src="/img/rejoindre_produits.png" alt="Produits"/>
              <h3>{{ config('texts.rejoindre_produits') }}</h3>
              <p>{{ config('texts.rejoindre_produits_texte') }}</p>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 mb-3 mb-lg-0">
            <div class="bloc">
              <img src="/img/rejoindre_disponibilite.png" alt="Disponibilité"/>
              <h3>{{ config('texts.rejoindre_dispo') }}</h3>
              <p>{{ config('texts.rejoindre_dispo_texte') }}</p>
            </div>
          </div>
          <div class="col-sm-6 mb-3 mb-sm-0 col-lg-3">
            <div class="bloc">
              <img src="/img/rejoindre_securises.png" alt="Sécurisés"/>
              <h3>{{ config('texts.rejoindre_paiement') }}</h3>
              <p>{{ config('texts.rejoindre_paiement_texte') }}</p>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3">
            <div class="bloc">
              <img src="/img/rejoindre_factures.png" alt="Factures"/>
              <h3>{{ config('texts.rejoindre_facturation') }}</h3>
              <p>{{ config('texts.rejoindre_facturation_texte') }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="form" id="form">
        <div class="bloc">
          <form action="/rejoindre/store" method="post">
            @csrf

            @if (session('success'))
              <div class="alert alert-success mb-4">
                  {{ session('success') }}
              </div>
            @endif
            @if (session('error'))
              <div class="alert alert-danger mb-4">
                  {{ session('error') }}
              </div>
            @endif

            @if ($errors->any())
              <div class="alert alert-danger mb-5">
                <strong>Oups!</strong> Nous n'avons pas pu valider le formulaire pour la ou les raison(s) suivante :<br><br>
                <ul>
                  @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                  @endforeach
                </ul>
              </div>
            @endif

            <div class="row">
              <div class="col-lg-8">
                  <h3 class="mb-4">Informations de contact</h3>
                  <div class="row mb-3">
                    <div class="col-sm-6">
                      <label class="mb-2">Prénom</label>
                      <input type="text" class="form-control" name="firstname" required>
                    </div>

                    <div class="col-sm-6">
                      <label class="mb-2">Nom de famille</label>
                      <input type="text" class="form-control" name="lastname" required>
                    </div>
                  </div>

                  <div class="row mb-5">
                    <div class="col-sm-6">
                      <label class="mb-2">Adresse e-mail</label>
                      <input type="email" class="form-control" name="email" required>
                    </div>

                    <div class="col-sm-6">
                      <label class="mb-2">Téléphone</label>
                      <input type="phone" class="form-control" name="phone" required>
                    </div>
                  </div>

                  <h3 class="mb-4">Informations de l'entreprise</h3>
                  <div class="mb-3">
                    <label class="mb-2">Nom de l'entreprise</label>
                    <input type="text" class="form-control" name="name" required>
                  </div>

                  <div class="mb-3">
                    <label class="mb-2">Rue</label>
                    <input type="text" class="form-control" name="street" required>
                  </div>

                  <div class="row mb-3">
                    <div class="col-sm-6">
                      <label class="mb-2">Code postal</label>
                      <input type="text" class="form-control" name="postal" required>
                    </div>

                    <div class="col-sm-6">
                      <label class="mb-2">Ville</label>
                      <input type="text" class="form-control" name="city" required>
                    </div>
                  </div>

                  <div class="mb-3">
                    <label class="mb-2">Commentaire <small>(facultatif)</small></label>
                    <textarea class="form-control" name="comment"></textarea>
                  </div>

                  <input type="hidden" name="recaptcha" id="recaptcha">
              </div>
              <div class="col-lg-4 mt-4 mt-lg-0 ps-lg-5">
                <h3 class="mb-4">{{ config('texts.rejoindre_avertissement') }}</h3>
                <p>{{ config('texts.rejoindre_avertissement_texte_description') }}</p>
                <div class="mb-5">
                  <input type="submit" class="btn btn-primary" value="Valider le formulaire"/>
                  <div class="mt-3">
                    <small>
                      Ce site est protégé par reCAPTCHA et Google
                      <a href="https://policies.google.com/privacy">Politique de confidentialité</a> et
                      <a href="https://policies.google.com/terms">Conditions d'utilisation</a>.
                    </small>
                  </div>
                </div>
                <small>{{ config('texts.rejoindre_avertissement_texte_departements') }}</small>
              </div>
            </div>
          </form>

          @push('scripts')
            <script src="https://www.google.com/recaptcha/api.js?render={{ config('website.recaptcha_public') }}"></script>
            <script>
              grecaptcha.ready(function() {
                grecaptcha.execute('{{ config('website.recaptcha_public') }}', {action: 'rejoindre'}).then(function(token) {
                 if(token) {
                   document.getElementById('recaptcha').value = token;
                 }
                });
              });
            </script>
          @endpush
        </div>
      </div>
    </div>
  </div>
@endsection