@extends('layouts.layout')
@section('title', 'Contact')

@section('banner')
   <!-- banner -->
   <section>
    <div class="header-img banner-size">

    </div>
    @include('partials.telecharger')
  </section>

@endsection



@section('main')
   <!-- Main -->
   <section>
    <div class="container-fluid text-center my-5">
        <div class="row">
          <div class="col-md-12">
            <h2 class="titre text-uppercase">Contact
            </h2>
          
          </div>
          
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 contact-form p-5">
                <h2 class="titre text-uppercase -yellow mb-3">Nous Contacter</h2>
                <form class="row g-3 text-start needs-validation" method="POST" action="{{route('staticpage.message')}}" enctype="multipart/form-data">
                    @csrf
                    <div class="col-md-8 mt-4">
                      <label for="select" class="form-label">Qui souhaitez-vous contacter :<span class='gfield_required'> *</span></label>
                     <select name="contact" class="form-label contact-select"  id="test">
                      <option value="contact"@if (old('contact') == 'contact')
                      selected
                      @elseif($slug == 'contact')
                      selected
                      @endif>Contact</option>
                      <option value="service_client" @if (old('contact') == 'service_client')
                      selected
                      @elseif($slug == 'service_client')
                      selected
                      @endif>Service Client</option>
                      <option value="rh" @if (old('contact') == 'rh')
                      selected
                       @elseif($slug == 'recrutment')
                      selected
                      @endif>RH</option>
                     </select>
                      
                    
                  </div>
                    <div class="col-md-6 mt-4">
                        <label for="inputfirstName" class="form-label">Nom</label>
                        <input type="text" class="form-control" id="inputfirstName" name="nom" value="{{ old('nom') }}" >
                        
                      @error('nom')
                      <div class="error">
                        {{ $message }}
                      </div>
                      @enderror
                        
                    </div>
                    <div class="col-md-6 mt-4">
                        <label for="inputlastName" class="form-label">PRÉNOM </label>
                        <input type="text" class="form-control" id="inputlastName" name="prenom" value="{{ old('prenom') }}" >
                        @error('prenom')
                        <div class="error">
                          {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="col-md-6 mt-4">
                      <label for="inputEmail" class="form-label">ADRESSE E-MAIL </label>
                      <input type="email" class="form-control" id="inputEmail" name="email"  value="{{ old('email') }}" >
                      @error('emai')
                      <div class="error">
                        {{ $message }}
                      </div>
                      @enderror
                    </div>
                
                    <div class="col-md-6 mt-4">
                      <label for="inputPhone" class="form-label">TÉLÉPHONE </label>
                      <input type="tel" class="form-control" id="inputPhone" name="telephone"  value="{{ old('telephone') }}">
                      @error('telephone')
                      <div class="error">
                        {{ $message }}
                      </div>
                      @enderror
                    </div>
                    <div class="col-md-12 mt-4">
                        <label for="inputObjet" class="form-label">Objet </label>
                        <input type="text" class="form-control" id="inputObjet" name="objet" value="{{ old('objet') }}" >
                        @error('objet')
                        <div class="error">
                          {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="col-md-12 mt-4">
                        <label for="inputMessage" class="form-label">Message </label>
                        <textarea id="inputMessage" name="message" rows="5" cols="33" >{{ old('message') }}</textarea>

                    </div>
                    <div class="col-md-12" id="hidden_div" @if (old('contact') == 'rh')
                    style="display: block"
                    @elseif($slug == 'recrutment')
                    style="display: block"
                    @endif>
                      <label for="formFile" class="form-label">joindre CV</label>
                      <input class="form-control" type="file" id="formFile" name="file"  >
                      @error('file')
                        <div class="error">
                          {{ $message }}
                        </div>
                        @enderror
                    </div>
                    
                    <div class="col-md-12 text-end">
                      <button type="submit" class="btn btn-warning btn-envoyer">ENVOYER</button>
                    </div>
                  </form>
            </div>
            <div class="col-md-6 align-self-md-center p-5">
                    <h1>NOTRE SIÈGE</h1>
                    <div class="siege-contact">
                      <p class="p-0 m-0">MARINA CENTER</p>
                      <p class="py-1 my-1">Angle boulevard de la corniche et Boulevard Zerktouni</p>
                      <p class="p-0 m-0">Email : contact@pommedepain.ma</p>
                    </div>

                    <iframe class="mt-4" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d75238.42027860231!2d-7.742329092916791!3d33.55078262940563!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7d4a25e78bee3%3A0xd5f69cd2ba840774!2sPomme%20de%20Pain%20Morocco%20Mall!5e0!3m2!1sfr!2sma!4v1661517155938!5m2!1sfr!2sma" 
                width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>
  </section>
@endsection

@section('first-block')
  @include('partials.first-block')
@endsection


@push('scripts')
    <script>
    
        document.getElementById('test').addEventListener('change', function () {
    var style = this.value == 'rh' ? 'block' : 'none';
    document.getElementById('hidden_div').style.display = style;
        });
    </script>
@endpush