@extends('layouts.base2')
@section('title', 'Interface de gestion des clients')
@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')
        @adminbarreau
            <h1 class="m-0" style="color: #18528d">Liste des contacts</h1>
        @endadminbarreau
        @avocatuser
            <h1 class="m-0" style="color: #18528d"><i class="fa-solid fa-magnifying-glass"></i> Recherche un confrère</h1>
        @endavocatuser

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

        @adminbarreau
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="card card-primary card-tabs">
                                <div class="card-header p-0 pt-1">
                                    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home"
                                            role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Liste des contacts</a>
                                        </li>
                                        <!-- @avocatuser
                                        <li class="nav-item">
                                            <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile"
                                            role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Mes Favoris</a>
                                        </li>
                                        @endavocatuser -->
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <div class="tab-content" id="custom-tabs-one-tabContent">
                                        <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">

                                                @livewire('back.contact.contact-list')

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endadminbarreau

        @if($contacts)
            @avocatuser
                <div class="container py-4">
                    <div class="row justify-content-center">
                        <div class="col-lg-8 col-sm-10">
                            <form method="GET" action="{{ route('rechercher.contact') }}" autocomplete="off" class="card shadow-lg border-0 rounded-4">
                                @csrf
                                <div class="card-header text-white text-center" style="background-color: #18528d;">
                                    <h5 class="mb-0">
                                        <i class="fa-solid fa-search me-2"></i>
                                        Rechercher un avocat par nom et prénom
                                    </h5>
                                </div>

                                <div class="card-body p-4">

                                    {{-- Champ Nom --}}
                                    <div class="mb-3">
                                        <label for="name" class="form-label fw-bold">Nom</label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            placeholder="Ex : Dupont"
                                            value="{{ old('name', request()->name) }}">
                                        <span class="text-danger">@error('name'){{ $message }}@enderror</span>
                                    </div>

                                    {{-- Champ Prénom --}}
                                    <div class="mb-3">
                                        <label for="prenom" class="form-label fw-bold">Prénom</label>
                                        <input type="text" name="prenom" id="prenom" class="form-control"
                                            placeholder="Ex : Jean"
                                            value="{{ old('prenom', request()->prenom) }}">
                                        <span class="text-danger">@error('prenom'){{ $message }}@enderror</span>
                                    </div>

                                </div>

                                <div class="row mb-4 px-3">
                                    <div class="col-md-12">
                                        {{-- <a href="{{ url()->previous() }}" 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>
                            </form>
                        </div>
                    </div>
                </div>
            @endavocatuser
        @endif
        @if(optional($contacts)->count())
            <div class="card mt-4shadow-sm">
                <div class="card-header mb-3 text-white fw-bold"  style="background-color: #18528d;">
                    <i class="fa-solid fa-address-book me-2"></i> @if(!$contacts) Résultats de la recherche @else contact(s) trouvé @endif
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th><i class="fas fa-user color-ico-barreau"></i> <span class="color-ico-barreau">NOM COMPLET</span></th>
                                    <th><i class="fas fa-id-badge color-ico-barreau"></i> <span class="color-ico-barreau">N° TOGE</span></th>
                                    <th><i class="fas fa-phone color-ico-barreau"></i> <span class="color-ico-barreau">TÉLÉPHONE</span></th>
                                    <th><i class="fas fa-envelope color-ico-barreau"></i> <span class="color-ico-barreau">EMAIL</span></th>
                                    @adminbarreau
                                        <th><i class="fas fa-calendar-plus color-ico-barreau"></i> <span class="color-ico-barreau">DATE D'AJOUT</span></th>
                                    @endadminbarreau
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($contacts as $contact)
                                    <tr>
                                        <td>{{ $contact->name }} {{ $contact->prenom }}</td>
                                        <td>{{ $contact->num_toge ?? '—' }}</td>
                                        <td>{{ $contact->telephone ?? '—' }}</td>
                                        <td>{{ $contact->email ?? '—' }}</td>
                                        @adminbarreau
                                            <td>{{ \Carbon\Carbon::parse($contact->created_at)->locale('fr')->translatedFormat('d F Y') }}</td>
                                        @endadminbarreau
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @elseif(isset($contacts) && isset($estTrouver) && $estTrouver==false)
            <div class="alert alert-warning mt-4" role="alert">
                Aucun contact trouvé avec ces critères.
            </div>
        @endif


    </div>
@stop
@section('footer')
    <script>
        var input = document.querySelector("#phone");
        var iti = window.intlTelInput(input, {
            separateDialCode: true,
            initialCountry: "ci", // Pays par défaut
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"
        });

        iti.promise.then(function() {
            var countryCodeInput = document.querySelector("#country-code");
            input.addEventListener("countrychange", function() {
                countryCodeInput.value = iti.getSelectedCountryData().dialCode;
            });
        });
        $(document).ready(function(){

            if ($.fn.DataTable.isDataTable('#liste_contact')) {
                $('#liste_contact').DataTable().destroy();
            }

            // if ($.fn.DataTable.isDataTable('#liste_contact_favoris')) {
            //     $('#liste_contact_favoris').DataTable().destroy();
            // }

            var oTable = $('#liste_contact').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.contact') !!}",
                columns: [
                    { data: 'numero', name: 'numero' },
                    { data: 'nom', name: 'nom', searchable: true },
                    { data: 'num_toge', name: 'num_toge'},
                    { data: 'tel', name: 'tel'},
                    { data: 'email', name: 'email'},
                    // { data: 'action', name: 'action', searchable: false }
                ]
            });

        });

        /**
         * Pour le chargement des actions de mise à jour et suppression
         */

         //GESTION DES ERREURS
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 5000
            });

            $('.swalDefaultWarning').ready(function() {
                @if (session('warning'))
                    Toast.fire({
                        icon: 'warning',
                        title: '{{ session('warning') }}',
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('status'))
                    Toast.fire({
                        icon: 'success',
                        title: '{{ session('status') }}'
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('error'))
                    Toast.fire({
                        icon: 'error',
                        title: "{{ session('error') }}",
                        timer: 10000
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('info'))
                    Toast.fire({
                        icon: 'info',
                        title: "{{ session('info') }}",
                        timer: 10000
                    })
                @endif
            });
            //Fin gestion des Erreur

    </script>

@stop