@extends('templates.header')
@section('content')

<div class="clearfix"></div>
<div class="header_medium two">
  <div class="container">
    <h3 class="bigtext"> Contact</h3>
  </div>
</div>
<!--end header medium-->

<div class="section_holder18">
  <div class="container">
    <div class="pagetitle">
      <h3>Contact</h3>
    </div>
    <div class="pagenation">&nbsp;<a href="{{ route('accueil')}}">Accueil</a> <i>/</i> Contact</div>
  </div>
</div>
<!--end pagenation-->
<div class="clearfix"></div>

<div class="section_holder30">
  <div class="container">	
  
    
<div class="one_half">
    
      <p>Veuillez patienter en attendant la réponse. (Assistance 24h/24 et 7j/7 !) <strong>Renseignements généraux par téléphone : {{ $contact->telephone }}</strong></p>      <br><br>
      
      <form action="{{ route('sendcontact') }}" method="POST" class="sky-form">
        @csrf
        <style>
            .custom-alert {
                padding: 15px;
                border-radius: 6px;
                margin-bottom: 20px;
                font-family: sans-serif;
                font-size: 15px;
            }
        
            .custom-alert-danger {
                background-color: #f8d7da;
                border: 1px solid #f5c2c7;
                color: #842029;
            }
        
            .custom-alert-success {
                background-color: #d1e7dd;
                border: 1px solid #badbcc;
                color: #0f5132;
            }
        
            .custom-alert ul {
                margin: 0;
                padding-left: 20px;
            }
        
            .custom-alert h5 {
                margin-top: 0;
                font-weight: bold;
            }
        </style>
        
        {{-- Erreurs de validation --}}
        @if ($errors->any())
            <div class="custom-alert custom-alert-danger">
                <h5>Veuillez corriger les erreurs suivantes :</h5>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        {{-- Message de succès --}}
        @if (Session::has('message'))
            <div id="errormessage" class="custom-alert custom-alert-success">
                {{ Session::get('message') }}
            </div>
        
            {{-- Disparition après 1 minute --}}
            <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
            <script>
                $(document).ready(function () {
                    setTimeout(function () {
                        $('#errormessage').fadeOut('slow');
                    }, 60000); // 1 minute
                });
            </script>
        @endif
        

        <h2 class="uppercase"><strong>envoyez-nous un message</strong></h2>
        <fieldset>
          <div class="row">
            <section class="col col-6">
              <label class="label">Nom & Prénom</label>
              <label class="input"> <i class="icon-append fa-user"></i>
                <input type="text" name="name" id="name" required>
              </label>
            </section>
            <section class="col col-6">
              <label class="label">E-mail</label>
              <label class="input"> <i class="icon-append icon-envelope-alt"></i>
                <input type="email" name="email" id="email" required>
              </label>
            </section>
          </div>
          <div class="form-group" style="display: none;">
            <label>Website</label>
            <input type="text" class="form-control" name="website">
        </div>
        <section>
            <label class="label">Téléphone</label>
            <label class="input"> <i class="icon-append fa-phone"></i>
                <input type="tel"
                class="form-control"
                id="tel"
                name="tel"
                placeholder="+212612345678"
                pattern="^\+?\d{10,15}$"
                title="Entrez uniquement des chiffres. Exemple : +212612345678"
                required
                oninput="this.value = this.value.replace(/[^0-9+]/g, '');">            </label>
          </section>
          <section>
            <label class="label">Sujet</label>
            <label class="input"> <i class="icon-append icon-tag"></i>
              <input type="text" name="sujet" id="subject" required>
            </label>
          </section>
          <section>
            <label class="label">Message</label>
            <label class="textarea"> <i class="icon-append icon-comment"></i>
              <textarea rows="4" name="message" id="message" required></textarea>
            </label>
          </section>
          <section class="mb-3">
            <div class="g-recaptcha" data-sitekey="6LeguzYrAAAAAMmGmiwqTm6CuZzwVi7A9hp7reh9"></div>
          </section>
          
        </fieldset>
        <footer>
          <button type="submit" class="button" id="submitButton" >Envoyer</button>
        </footer>
    
      </form>
    </div>  
    
<div class="one_half last">
    
      <div class="address_info">
      
        <h3>Adresse</h3>
        <ul>
            {{ $contact->adresse }}
          <br>
            Telephone: {{ $contact->telephone }}<br>
            FAX: {{ $contact->fix }}<br><br>
            E-mail: <a href="mailto:{{ $contact->email }}">{{ $contact->email }}</a><br>
        </ul>
      </div>
      {{-- <h3>Trouver l'adresse</h3>
      <iframe class="google-map" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=WA,+United+States&aq=0&oq=WA&sll=47.605288,-122.329296&sspn=0.008999,0.016544&ie=UTF8&hq=&hnear=Washington,+District+of+Columbia&t=m&z=7&iwloc=A&output=embed"></iframe>
      <div class="bottom_strip"></div><div class="bottom_shape"></div>
      <br>
      <small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=WA,+United+States&aq=0&oq=WA&sll=47.605288,-122.329296&sspn=0.008999,0.016544&ie=UTF8&hq=&hnear=Washington,+District+of+Columbia&t=m&z=7&iwloc=A">View Larger Map</a></small> 
       --}}
      </div>  

</div>

</div>
<script>
    function onSubmit(token) {
        document.getElementById('submitButton').removeAttribute('disabled');
    }
</script>
<script>
    document.querySelector('form').addEventListener('submit', function (e) {
        var response = grecaptcha.getResponse();
        if (response.length === 0) {
            e.preventDefault();
            alert('Veuillez confirmer que vous n’êtes pas un robot.');
        }
    });
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection