@extends('layouts.base2')

@section('title', "Recherche d'audience")

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
@endpush

@section('content')
    @section('titlePage')
        <h3 class="m-0" style="color:  #18528d;"><i class="fa-solid fa-file-arrow-up"></i> Liste des audiences</h3>
    @stop

    <div class="container" style="padding-bottom: 2em; padding-top: 1em">
        @include('layouts.flash-message')

        <section class="content">
            <div class="container py-4">
                <div class="row justify-content-center">
                    <div class="col-lg-10 col-sm-12">
                        <form method="GET" action="{{ route('rechercher.audience') }}" id="form-ajout-audience" autocomplete="on" class="card shadow-lg border-0 rounded-4">
                            @csrf

                            <div class="card-header text-white border-0 text-center" style="background-color: #18528d;">
                                <h5 class="mb-0">
                                    <i class="fa-solid fa-file-magnifying-glass me-2"></i>
                                    Recherche d’un confrère pour une audience
                                </h5>
                            </div>

                            <div class="card-body p-4">
                                <div class="row g-3">
                                    {{-- Ville --}}
                                    <div class="col-md-6">
                                        <label for="ville_id" class="form-label fw-bold">Ville de la Juridiction <span class="text-danger">*</span></label>
                                        <select name="ville_id" id="ville_id" class="form-control" onchange="changerTPI()">
                                            <option value="">Sélectionner une ville</option>
                                            @foreach($villes as $item)
                                                <option value="{{ $item->id }}" {{ request('ville_id') == $item->id ? 'selected' : '' }}>
                                                    {{ $item->nom_ville }}
                                                </option>
                                            @endforeach
                                        </select>
                                        {{-- <select name="ville_id" id="ville_id" class="form-control select2" onchange="changerTPI()"> --}}
                                        @error('ville_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Juridiction --}}
                                    <div class="col-md-6">
                                        <label for="tribunal_id" class="form-label fw-bold">Juridiction <span class="text-danger">*</span></label>
                                        <select name="tribunal_id" id="tribunal_id" class="form-control">
                                            <option value="">Sélectionner une juridiction</option>
                                            @foreach($tribunaux as $tribunal)
                                                <option value="{{ $tribunal->id }}" {{ request('tribunal_id') == $tribunal->id ? 'selected' : '' }}>
                                                    {{ $tribunal->nom_tribunal }}
                                                </option>
                                            @endforeach
                                        </select>
                                        {{-- <select name="tribunal_id" id="tribunal_id" class="form-control select2"> --}}
                                        @error('tribunal_id')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Date d’audience --}}
                                    <div class="col-md-6">
                                        <label for="date_conseil" class="form-label fw-bold">Date d’audience</label>
                                        <select name="date_conseil" id="date_conseil" class="form-control">
                                            <option value="">Sélectionner une date</option>
                                            @foreach($audiences as $item)
                                                <option value="{{ $item->date_conseil }}">
                                                    {{ \Carbon\Carbon::parse($item->date_conseil)->format('d/m/Y') }}
                                                </option>
                                            @endforeach
                                        </select>
                                        {{-- <select name="date_conseil" id="date_conseil" class="form-control select2"> --}}
                                        @error('date_conseil')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Plage horaire --}}
                                    <div class="col-md-6">
                                        <label for="plage_horaire" class="form-label fw-bold">Plage horaire</label>
                                        <select name="plage_horaire" id="plage_horaire" class="form-control">
                                            <option value="">Choisir une plage horaire</option>
                                            @foreach($audiences as $item)
                                                <option value="{{ \Carbon\Carbon::parse($item->heure_debut)->format('H:i') }}-{{ \Carbon\Carbon::parse($item->heure_fin)->format('H:i') }}">
                                                    {{ \Carbon\Carbon::parse($item->heure_debut)->format('H:i') }}H - {{ \Carbon\Carbon::parse($item->heure_fin)->format('H:i') }}H
                                                </option>
                                            @endforeach
                                        </select>
                                        {{-- <select name="plage_horaire" id="plage_horaire" class="form-control select2"> --}}
                                        @error('plage_horaire')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer bg-transparent border-0 px-4 pb-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        <a href="{{ route('vue.liste.audience') }}" class="btn btn-danger w-100">
                                            <i class="fa fa-arrow-left"></i> Retour
                                        </a>
                                    </div>
                                    <div class="col-md-6">
                                        <button type="submit" class="btn btn-success w-100">
                                            <i class="fa-solid fa-magnifying-glass"></i> Rechercher
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

        </section>

    </div>
@stop

@section('footer')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%',
                placeholder: "Sélectionner une option",
                allowClear: true
            });
        });

        //Traitement de retours des juridictions ou tribunaux
        function changerTPI() {
            var ville_id = document.getElementById("ville_id").value;
            var tribunalSelect = document.getElementById("tribunal_id");

            if (ville_id) {
                fetch(`/charger-juridiction/${ville_id}`)
                    .then(response => response.json())
                    .then(data => {
                        tribunalSelect.innerHTML = '<option value="">Sélectionner une juridiction</option>';
                        if (data.length > 0) {
                            let tribunaux = data[0].tribunaux.split(', ');
                            tribunaux.forEach((tribunal) => {
                                let [id, nom] = tribunal.split(':');
                                var option = document.createElement("option");
                                option.value = id.trim();
                                option.text = nom.trim();

                                // Vérifier si cette option est celle sélectionnée
                                if (option.value == "{{ request('tribunal_id') }}") {
                                    option.selected = true;
                                }
                                tribunalSelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => console.error('Erreur:', error));
            } else {
                tribunalSelect.innerHTML = '<option value="">Sélectionner une juridiction</option>';
            }
        }

    </script>
@stop