@extends('layouts.app')

@section('css')
  <style>
    .select2-container--default .select2-selection--single {
      border: 1px solid black !important;
    }
  </style>
@endsection

@section('content')

  <main class="main-content h-100">
    @php

    @endphp

    <section class="bg-color2 p-md-5 p-1 h-100">
      <div class="p-4 fw-normal container-xxl rounded-4 shadow-sm" style="background: #dae1e8b0;">
        <div class="row justify-content-evenly g-4">

          <div class="col-lg-8 bg-white order-1 order-md-1 rounded-4">

            <div class="bg-white p-4 rounded-4 shadow-sm">
              <h4 class="fw-bold mb-4">Formulaire de demande de demande d'audience</h4>

              <form action="{{ route('appointments.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
              @if ($errors->any())
                  <div class="alert alert-danger">
                      <strong>Veuillez corriger les erreurs suivantes :</strong>
                      <ul class="mt-2 mb-0">
                          @foreach ($errors->all() as $error)
                              <li>{{ $error }}</li>
                          @endforeach
                      </ul>
                  </div>
              @endif
                <div class="row">
                  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
                  <div class="col-md-6 mb-3">
                    <label for="lastname" class="form-label">Nom <span class="text-danger">*</span></label>
                    <input type="text" class="form-control border-1 border-black" id="last_name" name="last_name" required
                      value="{{old('last_name')}}">
                    @error('lastname')
                      <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>

                  <div class="col-md-6 mb-3">
                    <label for="firstname" class="form-label">Prénom <span class="text-danger">*</span></label>
                    <input type="text" class="form-control border-1 border-black" id="first_name" name="first_name" required
                      value="{{old('first_name')}}">
                    @error('firstname')
                      <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                    <input type="email" class="form-control border-1 border-black" id="email" name="email" required
                      value="{{old('email')}}">
                    @error('email')
                      <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                  </div>

                  <div class="mb-3  col-md-6 in-tel" id="phone-group2">
                    <label class="form-label tel-phone" for="phone">Contact <span class="text-danger">*</span></label>
                    <div class="input-group mb-3 flex-nowrap">
                      {{-- select pays, largeur fixe --}}
                      <select id="country_code2" name="country_code" class="form-select select2 flex-shrink-0"
                        style="width:21%;">
                        @php
                          $countries = DB::table('all_countries')->get();
                        @endphp
                        @foreach ($countries as $country)
                          <option value="{{ $country->phonecode }}" @if ($country->phonecode == 229) selected @endif>
                            {{ $country->phonecode }} ({{ $country->nicename }})
                          </option>
                        @endforeach
                      </select>

                      {{-- champ téléphone, prend le reste de la largeur --}}
                      <input type="tel" pattern="[0-9]+" inputmode="numeric" id="phone2" name="phone"
                        class="form-control border-1 border-black flex-fill @error('phone1') is-invalid @enderror"
                        placeholder="XXXXXXXX" />
                    </div>

                    @error('phone2p')
                      <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror

                  </div>
                </div>

                <!-- Exemple de champ Objectif -->
                <div class="row">
                  <div class="mb-3">
                    <label for="subject" class="form-label">Objet de la demande d'audience</label>
                    <input type="text" name="subject" id="subject" class="form-control border-1 border-black" required  value="{{old('subject')}}" />
                  </div>

                </div>

                <!-- Les autres champs ici -->
                <div class="mb-3">
                  <label for="description" class="form-label">Description de votre proposition <span
                      class="text-danger">*</span></label>
                  <textarea class="form-control border-1 border-black" id="description" name="description" rows="4"
                    >{{old('description')}}</textarea>
                  @error('description')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                  @enderror
                </div>
                <div class="mb-3">
                  <label for="uploads" class="form-label">Fichiers joints (PDF, DOC, ZIP - max 10MB)
                    *</label>
                  <input type="file" class="form-control border-1 border-black" id="uploads" name="uploads[]" multiple
                    >
                  <small class="text-muted">Vous pouvez sélectionner plusieurs fichiers</small>
                  @error('uploads')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                  @enderror
                </div>
                <div class="mb-3">
                  <label for="requested_at" class="form-label">Date et heure de demande d'audience souhaités</label>
                  <input type="datetime-local" class="form-control" name="requested_at" id="requested_at"
                    value="{{ old('requested_at') }}">
                </div>



                <!-- Champ caché pour la radio associée -->
                    <div class="mb-3 in-tel" id="phone-group1">
                        <label class="form-label tel-phone" for="phone">Numéro de téléphone <span
                                class="text-danger">*</span></label>
                        <div class="input-group mb-3 flex-nowrap">
                            {{-- select pays, largeur fixe --}}
                            <select id="country_code1" name="country_code"
                                class="form-select select2 border-gradient flex-shrink-0"
                                style="width:21%; height:55px;">
                                @php
                                    $countries = DB::table('all_countries')->get();
                                @endphp
                                @foreach ($countries as $country)
                                    <option value="{{ $country->phonecode }}" @if ($country->phonecode == 229) selected
                                    @endif>
                                        {{ $country->phonecode }} ({{ $country->nicename }})
                                    </option>
                                @endforeach
                            </select>

                            {{-- champ téléphone, prend le reste de la largeur --}}
                            <input type="tel" pattern="[0-9]+" inputmode="numeric" id="phone1" name="phone"
                                class="form-control border-gradient flex-fill @error('phone') is-invalid @enderror"
                                placeholder="XXXXXXXX" style="height:55px;" />
                        </div>

                        @error('phone')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror

                    </div>
                    <div class="mb-3">
                        <input type="hidden" name="mobile" id="mobile1">
                        @error('mobile')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                <div class="d-flex justify-content-end">
                  <button type="submit" class="btn gradient-btn text-white">Soumettre
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
@endsection

@section('script-select2')
  <script>
    $(document).ready(function () {
      $('.select2').each(function () {
        $('.select2').select2({
          placeholder: 'Choisir un pays',
          width: '30%',
        });
      });
    });

  </script>
@endsection

@section('scripts')
@endsection