@extends('layouts.app')

@section('title', __('contact.title'))

@section('content')
<main class="page-wrapper">
  <!-- Links + Contact form -->
  <section class="position-relative bg-secondary pt-5">

    <div class="container position-relative zindex-2 pt-5 mt-5">
      <div class="row">
        <!-- Contact links -->
        <div class="col-xl-4 col-lg-5 pb-4 pb-sm-5 mb-2 mb-sm-0">
          <div class="pe-lg-4 pe-xl-0">
            <h1 class="pb-3 pb-md-4 mb-lg-5">{{ __('contact.contact') }}</h1>

            <div class="d-flex align-items-start pb-3 mb-sm-1 mb-md-3">
              <div class="bg-light text-primary rounded-circle flex-shrink-0 fs-3 lh-1 p-3">
                <i class="bx bx-envelope"></i>
              </div>
              <div class="ps-3 ps-sm-4">
                <h2 class="h4 pb-1 mb-2">{{ __('contact.boat_repair') }}</h2>
                <p class="mb-2">{{ __('contact.repair_appointment') }}</p>
                <a href="{{ route('repair') }}" class="btn btn-link btn-lg px-0">
                  {{ __('contact.send_message') }}
                  <i class="bx bx-right-arrow-alt lead ms-2"></i>
                </a>
              </div>
            </div>
            <div class="d-flex align-items-start pb-3 mb-sm-1 mb-md-3">
              <div class="bg-light text-primary rounded-circle flex-shrink-0 fs-3 lh-1 p-3">
                <i class="bx bx-envelope"></i>
              </div>
              <div class="ps-3 ps-sm-4">
                <h2 class="h4 pb-1 mb-2">{{ __('contact.boat_rental') }}</h2>
                <p class="mb-2">{{ __('contact.rental_request') }}</p>
                <a href="{{ route('location') }}" class="btn btn-link btn-lg px-0">
                  {{ __('contact.send_message') }}
                  <i class="bx bx-right-arrow-alt lead ms-2"></i>
                </a>
              </div>
            </div>

          </div>
        </div>

        <!-- Contact form -->
        <div class="col-xl-6 col-lg-7 offset-xl-2">
          <div class="card border-light shadow-lg py-3 p-sm-4 p-md-5">
            <div class="bg-dark position-absolute top-0 start-0 w-100 h-100 rounded-3 d-none d-dark-mode-block"></div>
            <div class="card-body position-relative zindex-2">
              <h2 class="card-title pb-3 mb-4">{{ __('contact.contact_us') }}</h2>
              <form class="row g-4 needs-validation" action="{{ route('contact.store') }}" method="POST" id="form-contact">
                @csrf
                <input type="hidden" name="g-recaptcha-response">
                <div class="col-12">
                  <label for="fn" class="form-label fs-base">{{ __('contact.name') }}</label>
                  <input type="text" name="name" class="form-control form-control-lg" id="fn" required="">
                  <div class="invalid-feedback">{{ __('contact.enter_name') }}</div>
                </div>
                <div class="col-12">
                  <label for="fn" class="form-label fs-base">{{ __('contact.phone') }}</label>
                  <input type="phone" name="phone" class="form-control form-control-lg" id="fn" required="">
                  <div class="invalid-feedback">{{ __('contact.enter_phone') }}</div>
                </div>
                <div class="col-12">
                  <label for="email" class="form-label fs-base">{{ __('contact.email') }}</label>
                  <input type="email" name="email" class="form-control form-control-lg" id="email" required="">
                  <div class="invalid-feedback">{{ __('contact.enter_email') }}</div>
                </div>
                <input type="hidden" name="type" value="Demande de contact">
                <div class="col-12">
                  <label for="message" class="form-label fs-base">{{ __('contact.message') }}</label>
                  <textarea name="message" class="form-control form-control-lg" id="message" required=""></textarea>
                </div>
                <div class="col-12 pt-2 pt-sm-3">
                  <button class="g-recaptcha btn btn-lg btn-primary w-100 w-sm-auto"
                    data-sitekey="{{ config('services.recaptcha.site_key') }}"
                    data-callback="onSubmit"
                    data-action="send_mail">
                    {{ __('contact.send_message') }}
                  </button>

                  <script>
                    function onSubmit(token) {
                      document.getElementById("form-contact").submit();
                    }
                  </script>

                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="position-absolute bottom-0 start-0 w-100 bg-light" style="height: 8rem;"></div>
  </section>

  <!-- Branches -->
  <section class="container py-2 py-lg-4 py-xl-5 mb-2 mb-md-3">
    <div class="row py-5">
      <div class="col-lg-6 mb-5 mb-lg-0">
        <div class="d-flex flex-column h-100 shadow-sm rounded-3 overflow-hidden">
          <iframe class="d-block h-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2824.6920334653278!2d-0.606263!3d44.929598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54d5fbdfe678e7%3A0xaf62d540e959e0d8!2s1%20Rue%20Jean%20Fran%C3%A7ois%20la%20Perouse%2C%2033290%20Blanquefort!5e0!3m2!1sfr!2sfr!4v1716802431953!5m2!1sfr!2sfr" style="border: 0; min-height: 300px;" allowfullscreen="" loading="lazy" title="{{ __('contact.map') }}"></iframe>
        </div>
      </div>
      <div class="col-lg-5 offset-lg-1">
        <h2 class="h4 mb-4">{{ __('contact.our_address') }}</h2>
        <ul class="list-unstyled pb-2 pb-lg-0 mb-4 mb-lg-5">
          <li class="d-flex pb-1 mb-2">
            <i class="bx bx-map text-primary fs-xl me-2" style="margin-top: .125rem;"></i>
            {{ __('contact.blanquefort_address') }}
          </li>
          <li class="d-flex pb-1 mb-2">
            <i class="bx bx-phone-call text-primary fs-xl me-2" style="margin-top: .125rem;"></i>
            (406) 555-0120
          </li>
          <li class="d-flex">
            <i class="bx bx-time-five text-primary fs-xl me-2" style="margin-top: .125rem;"></i>
            <div>
              <strong class="text-nav">{{ __('contact.weekdays') }}</strong> : 9:00 - 22:00
              <br>
              <strong class="text-nav">{{ __('contact.weekends') }}</strong> : 9:00 - 20:00
            </div>
          </li>
        </ul>

        <div class="d-flex pt-1 pt-md-3 pt-xl-4">
          <a href="https://www.facebook.com/falconracingeurope/?locale=fr_FR" class="btn btn-icon btn-secondary btn-facebook me-3" aria-label="Facebook" target="_blank">
            <i class="bx bxl-facebook"></i>
          </a>
          <a href="https://www.instagram.com/falconracingeurope/" class="btn btn-icon btn-secondary btn-instagram me-3" aria-label="Instagram" target="_blank">
            <i class="bx bxl-instagram"></i>
          </a> <!-- Fermeture de la balise a ici -->
        </div>
      </div>
  </section>
</main>

@endsection