@extends('layouts.pages')
@section('page')
  <div class="candidature">
    <div class="container-fluid">
      <div class="bloc bloc-introduction mb-3" style="background-image: url('/img/candidature.jpeg');">
        <div class="text text-center">
          <h2>{{ config('texts.candidature') }}</h2>
          <p>{{ config('texts.candidature_description') }}</p>
        </div>
      </div>

      <div class="informations">
        <div class="row">
          <div class="col-md-6 mb-3">
            <div class="bloc bloc-text">
              <h3 class="mb-4">{{ config('texts.candidature_informations') }}</h3>
              {!! config('texts.candidature_informations') !!}
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="bloc" style="background-image: url('/img/logistique.jpeg');"></div>
          </div>
        </div>
      </div>

      <div class="form">
        <form action="/candidature/store" method="post" enctype="multipart/form-data">
          @csrf
          <div class="bloc">
            <h3>{{ config('texts.candidature_form') }}</h3>

            @if (session('success'))
              <div class="alert alert-success mb-5">
                  {{ session('success') }}
              </div>
            @endif
            
            @if (session('error'))
              <div class="alert alert-danger mb-5">
                  {{ 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

            <p>Vos informations de contact</p>
            <div class="row mb-4">
              <div class="col-12 col-lg-6">
                <label>Prénom</label>
                <input type="text" class="form-control mt-2" name="firstname" value="" placeholder="" required>
              </div>
              <div class="col-12 col-lg-6 mt-4 mt-lg-0">
                <label>Nom</label>
                <input type="text" class="form-control mt-2" name="lastname" value="" placeholder="" required>
              </div>
            </div>
            <div class="row mb-4">
              <div class="col-12">
                <label>Rue</label>
                <input type="text" class="form-control mt-2" name="street" value="" placeholder="" required>
              </div>
            </div>
            <div class="row mb-4">
              <div class="col-12 col-lg-6">
                <label>Code postal</label>
                <input type="number" class="form-control mt-2" name="postal" value="" placeholder="" required>
              </div>
              <div class="col-12 col-lg-6 mt-4 mt-lg-0">
                <label>Ville</label>
                <input type="text" class="form-control mt-2" name="city" value="" placeholder="" required>
              </div>
            </div>
            <div class="row mb-4">
              <div class="col-12 col-lg-6">
                <label>Adresse e-mail</label>
                <input type="email" class="form-control mt-2" name="email" value="" placeholder="" required>
              </div>
              <div class="col-12 col-lg-6 mt-4 mt-lg-0">
                <label>Téléphone</label>
                <input type="phone" class="form-control mt-2" name="phone" value="" placeholder="" required>
              </div>
            </div>
          </div>

          <div class="bloc">
            <p>Selectionnez le poste souhaité</p>
            <div class="row">
              <div class="col col-6 col-sm-6 col-lg-3">
                <input type="radio" name="job" id="job-commercial" value="commercial" class="check-input">
                <label for="job-commercial" class="check-label">
                  <i class="fas fa-suitcase"></i>
                  <h3>Représentant de commerce (VRP)</h3>
                </label>
              </div>
              <div class="col col-6 col-sm-6 col-lg-3">
                <input type="radio" name="job" id="job-livreur" value="livreur" class="check-input">
                <label for="job-livreur" class="check-label">
                  <i class="fas fa-truck"></i>
                  <h3>Chauffeur / Livreur</h3>
                </label>
              </div>
              <div class="col col-6 col-sm-6 col-lg-3 mt-4 mt-lg-0">
                <input type="radio" name="job" id="job-preparateur" value="preparateur" class="check-input">
                <label for="job-preparateur" class="check-label">
                  <i class="fas fa-box"></i>
                  <h3>Préparateur de commandes</h3>
                </label>
              </div>
              <div class="col col-6 col-sm-6 col-lg-3 mt-4 mt-lg-0">
                <input type="radio" name="job" id="job-autres" value="autres" class="check-input">
                <label for="job-autres" class="check-label">
                  <i class="fas fa-question"></i>
                  <h3>Autres postes</h3>
                </label>
              </div>
            </div>
          </div>

          <div class="bloc">
            <p>Décrivez au mieux vos motivations</p>
            <textarea class="form-control mb-4" name="comment" rows="20" required></textarea>
            <div class="form-group">
              <label class="mb-2">Votre CV au format .PDF</label>
              <br/><input type="file" name="file" required>
            </div>

            <input type="hidden" name="recaptcha" id="recaptcha">

            <p>En validant le formulaire, vous acceptez nos conditions générales d'utilisation et vous consentez à notre <a href="/politique-de-confidentialite">politique de confidentialité</a>.</p>
            <input type="submit" class="btn btn-primary" value="Envoyer la demande">
            <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>
        </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>
@endsection