{{-- Recherche d'un client par nom, prenom ou raison sociale.

     Partagee par la creation d'une commande et celle d'un chantier : le meme
     bouton loupe, la meme modale, la meme liste. Ce qui change d'un ecran a
     l'autre, c'est le champ a remplir — d'ou le parametre `cible`, un
     selecteur css que le js relit sur la modale.

     Posee hors du <form> a dessein : un champ de recherche a l'interieur
     soumettrait le formulaire a la premiere touche Entree. L'inclure au meme
     niveau que la <section>, pas dedans.

     Le bouton qui l'ouvre reste chez l'appelant, a cote de son champ :
     <button type="button" class="btn btn-outline-secondary"
             data-bs-toggle="modal" data-bs-target="#modaleClient"> --}}

@php
    $cible = $cible ?? '#client_id';
@endphp

@once
    <style>
        /* Les quatre colonnes se touchaient : un identifiant colle a une raison
           sociale collee a un nom se lisait comme une seule chaine. */
        .table-clients th,
        .table-clients td {
            padding: .65rem 1rem;
            vertical-align: middle;
        }

        /* L'identifiant ne se coupe jamais. Pas de couleur a lui : il prenait
           --bs-secondary-color, que texte.css tient a noir, et disparaissait
           en mode sombre. */
        .table-clients th:first-child,
        .table-clients td:first-child {
            white-space: nowrap;
            width: 1%;
        }

        .table-clients tbody tr {
            cursor: pointer;
        }
    </style>
@endonce

<div class="modal fade" id="modaleClient" tabindex="-1" aria-hidden="true" data-cible="{{ $cible }}">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Rechercher un client') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Fermer') }}"></button>
            </div>

            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" id="recherche_client" class="form-control"
                        placeholder="{{ __('Nom, prénom ou raison sociale') }}" autocomplete="off">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                </div>

                <p id="recherche_client_etat" class="text-muted small"></p>

                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 table-clients">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">{{ __('Raison sociale') }}</th>
                                <th scope="col">{{ __('Nom + Prénom') }}</th>
                                {{-- « Adresse » et non « Adresse 1 » : la colonne
                                     concatene l'adresse, le code postal et la ville. --}}
                                <th scope="col">{{ __('Adresse') }}</th>
                            </tr>
                        </thead>
                        <tbody id="recherche_client_resultats"></tbody>
                    </table>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Retour') }}</button>
            </div>
        </div>
    </div>
</div>

@once
    <script>
        // Libelles du module de recherche, cote js. Serialises en une fois :
        // les traduire a la main dans le script obligerait a penser aux
        // apostrophes et aux accents a chaque chaine.
        window.AC_CLIENT_LANG = {!! json_encode([
            'recherche' => __('Recherche en cours...'),
            'aucun' => __('Aucun client trouvé.'),
            'erreur' => __('Le service clients est momentanément indisponible.'),
            'minimum' => __('Tapez au moins trois caractères.'),
            'derniers' => __('Les derniers clients créés dans Gestan.'),
            'gestan' => __('Recherche des clients créés aujourd’hui dans Gestan…'),
            'ajoutes' => __(':n client(s) créé(s) récemment, ajouté(s) en tête depuis Gestan.'),
            'gestanMuet' => __('Gestan ne répond pas : les clients créés aujourd’hui n’apparaissent pas.'),
        ], JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!};
    </script>
    <script src="@assetV('js/clients/recherche.js')"></script>
@endonce