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

  <div class="contact">
    <div class="container-fluid">
      <h2>{{ config('texts.contact') }}</h2>
      <div class="row">
        <div class="col-12 col-lg-8 order-lg-2">
          <div class="bloc bloc-form">
            <div class="container">
              <h3>{!! config('texts.contact_title') !!}</h3>

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

              @if ($errors->any())
                <div class="alert alert-danger mb-5">
                  {!! config('texts.contact_error') !!}<br><br>
                  <ul>
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                </div>
              @endif

              <form action="/contact/store" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                  <div class="col-6">
                    <div class="form-group">
                      <input type="text" class="form-control" name="id_customer" value="{{ Auth::check() ? Auth::user()->id_customer : null }}" placeholder="Code client" @if(Auth::check()) readonly @endif>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group">
                      <input type="text" class="form-control" name="name" value="{{ Auth::check() ? Auth::user()->name : null }}" placeholder="Nom et prénom*" required @if(Auth::check()) readonly @endif>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <input type="email" class="form-control" name="email" value="{{ Auth::check() ? Auth::user()->email : null }}" placeholder="Votre adresse e-mail*" required @if(Auth::check()) readonly @endif>
                </div>

                <div class="form-group">
                  <input class="form-control-file mb-2" type="file" name="file">
                  <br/><small>{{ config('texts.contact_formats') }}</small>
                </div>

                <div class="form-group">
                  <textarea class="form-control" name="message" rows="6" placeholder="Parlez-nous brièvement de votre demande de contact. Comment pouvons-nous vous aider?" required></textarea>
                </div>

                <input type="hidden" name="recaptcha" id="recaptcha">
                <input type="submit" class="btn btn-block btn-black" value="Envoyer 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>
              </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: 'contact'}).then(function(token) {
                     if(token) {
                       document.getElementById('recaptcha').value = token;
                     }
                    });
                  });
                </script>
              @endpush
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 order-lg-1 mt-3 mt-lg-0">
          <ul class="informations">
            <li class="bloc"><i class="fas fa-phone-square"></i> {{ config('website.phone') }}</li>
            {{-- <li class="bloc"><i class="fas fa-fax"></i> {{ config('website.fax') }}</li> --}}
            <li class="bloc"><i class="fas fa-envelope-square"></i> {{ config('website.email') }}</li>
            <li class="bloc">
              <i class="fas fa-map-marker-alt"></i>
              {{ config('website.name') }}
              {{ config('website.street') }},
              {{ config('website.postal') }} {{ config('website.city') }}
            </li>
            @if(!Auth::check())
              <li class="bloc ps-4">
                {!! config('texts.contact_client') !!}
                <a class="btn btn-primary" href="/rejoindre">{{ config('texts.contact_client_btn') }}</a>
              </li>
            @endif
          </ul>
        </div>
      </div>
    </div>
  </div>
@endsection