@extends('layouts.master')
@section('content')
    <div class="page-container mt-5">



        <div class="modal fade" id="ActivateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ActivateModal">Activer cet auditeur</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('auditeur.activate') }}" method="POST">

                            @csrf
                            <input type="hidden" name="activate_auditeur_id" id="activate_auditeur_id">


                            <p class="m-0">Vous etes sur le point d'activer cet auditeur. Si c'est le cas,
                                confirmer
                            </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Oui, activer</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->
        <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Supprimer cet auditeur</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('auditeur.delete') }}" method="POST">

                            @csrf
                            <input type="hidden" name="auditeur_id" id="auditeur_id">


                            <p class="m-0">Vous etes sur le point de supprimer cet auditeur. Si c'est le cas,
                                confirmer
                            </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Oui, supprimer</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->


        <div class="modal fade" id="DesactivateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Désactiver cet auditeur</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('auditeur.desactivate') }}" method="POST">

                            @csrf
                            <input type="hidden" name="desactivate_auditeur_id" id="desactivate_auditeur_id">


                            <p class="m-0">Vous etes sur le point de désactiver cet auditeur. Si c'est le cas,
                                confirmer
                            </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Oui, désactiver</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->
        <div class="modal fade" id="DetailsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Détails de l'auditeur</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->

                    <div class="modal-body">
                        <!-- Contenu remplacé par les tabs -->
                        <div class="col-xl-12">


                            <div class="card-body">


                                <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
                                    <li class="nav-item">
                                        <a href="#home1" data-bs-toggle="tab" aria-expanded="false"
                                            class="nav-link rounded-0 active">
                                            Informations
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#profile1" data-bs-toggle="tab" aria-expanded="true"
                                            class="nav-link rounded-0 ">
                                            KYC
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#settings1" data-bs-toggle="tab" aria-expanded="false"
                                            class="nav-link rounded-0">
                                            Activité
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content">
                                    <div class="tab-pane show active" id="home1">
                                        <div class="row mb-2">
                                            <div class="col-md-6">
                                                <strong>Nom complet :</strong> <span id="modal-nom"></span> <span
                                                    id="modal-prenoms"></span>
                                            </div>
                                            <div class="col-md-6">
                                                <strong>Email :</strong> <span id="modal-email"></span>
                                            </div>
                                        </div>

                                        <div class="row mb-2">

                                            <div class="col-md-6">
                                                <strong>Téléphone :</strong> <span id="modal-telephone"></span>
                                            </div>
                                            <div class="col-md-6">
                                                <strong>Date de naissance :</strong> <span id="modal-date"></span>
                                            </div>
                                        </div>

                                        <div class="row mb-2">

                                            <div class="col-md-6">
                                                <strong>Localisation :</strong> <span id="modal-localisation"></span>
                                            </div>

                                            <div class="col-md-6">
                                                <strong>Profession :</strong> <span id="modal-profession"></span>
                                            </div>
                                        </div>

                                        <div class="row mb-2">

                                            <div class="col-md-6">
                                                <strong>Pays :</strong> <span id="modal-pays"></span>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="tab-pane" id="profile1">
                                        <strong>Statut KYC :</strong>
                                        <span id="modal-kyc-status" class="badge"></span>
                                    </div>



                                    <div class="tab-pane" id="settings1">
                                        <div class="row mb-2">
                                            <div class="col-md-6">
                                                <strong>Temps d'écoute total :</strong>
                                                <span id="modal-total-ecoute"></span>
                                            </div>
                                            <div class="col-md-6">
                                                <strong>Radios favorites :</strong>
                                                <span id="modal-radios-favoris"></span>
                                            </div>
                                        </div>

                                        <div class="row mb-2">
                                            <div class="col-md-6">
                                                <strong>Dernier accès :</strong>
                                                <span id="modal-last-login"></span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div> <!-- end card-body -->

                        </div> <!-- end col -->

                    </div> <!-- end modal-body -->

                </div> <!-- end modal-content -->
            </div> <!-- end modal-dialog -->
        </div> <!-- end modal -->
        <div class="modal fade" id="ModifyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-md"> <!-- agrandi pour bien contenir les tabs -->
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Modifier l'auditeur</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->

                    <div class="modal-body">
                        <!-- Contenu remplacé par les tabs -->
                        <div class="col-xl-12">


                            <div class="card-body">
                                <form action="{{ route('auditeur.update') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="auth_key" id="auth_key">
                                    <div class="row">

                                        <div class="col-lg-6">
                                            <label for="prenom">Prénom</label>
                                            <input type="text" class="form-control" required name="prenoms"
                                                id="prenom">
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="nom">Nom</label>
                                            <input type="text" class="form-control" required name="nom"
                                                id="nom">
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-lg-12">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control" required name="email"
                                                id="email">
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-lg-6">
                                            <label for="telephone">Contact 1</label>
                                            <input type="text" class="form-control" required name="contact1"
                                                id="contact1">
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="telephone">Contact 2</label>
                                            <input type="text" class="form-control" required name="contact2"
                                                id="contact2">
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-lg-6">
                                            <label for="pays">Pays</label>

                                            <select name="pays" id="pays" required class="form-control">
                                                @foreach ($pays as $pay)
                                                    <option value="{{ $pay->id }}">{{ $pay->nom_fr_fr }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="ville">Ville</label>
                                            <select name="ville" id="ville" required class="form-control">
                                                @foreach ($villes as $ville)
                                                    <option value="{{ $ville->id }}">{{ $ville->nom }}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-lg-12">
                                            <label for="profession">Profession</label>
                                            <input type="text" class="form-control" name="profession"
                                                id="profession">
                                        </div>
                                    </div>

                            </div> <!-- end card-body -->

                        </div> <!-- end col -->

                    </div> <!-- end modal-body -->

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" style="background-color: #EC5A00; border-color:#EC5A00"
                            class="btn btn-success">Mettre à jour</button>

                    </div> <!-- end modal footer -->


                    </form>
                </div>

            </div> <!-- end modal-content -->
        </div> <!-- end modal-dialog -->
    </div>


    <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
        <div class="col">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">auditeur total</h5>
                    <div class="d-flex align-items-center gap-2 my-2 py-1">
                        <div class="user-img fs-42 flex-shrink-0">
                            <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important"
                                class="avatar-title text-bg-primary rounded-circle fs-22">
                                <iconify-icon icon="solar:user-check-bold"></iconify-icon>
                            </span>
                        </div>
                        <h3 class="mb-0 fw-bold">{{ $total_auditeur }}</h3>
                        <iconify-icon icon="solar:user-check-bold"
                            class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                    </div>

                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Actifs</h5>
                    <div class="d-flex align-items-center gap-2 my-2 py-1">
                        <div class="user-img fs-42 flex-shrink-0">
                            <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important"
                                class="avatar-title text-bg-primary rounded-circle fs-22">
                                <iconify-icon icon="solar:check-circle-broken"></iconify-icon>
                            </span>
                        </div>
                        <h3 class="mb-0 fw-bold">{{ $auditeur_actif }}</h3>
                        <iconify-icon icon="solar:check-circle-broken"
                            class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                    </div>

                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">KYC en attente
                    </h5>
                    <div class="d-flex align-items-center gap-2 my-2 py-1">
                        <div class="user-img fs-42 flex-shrink-0">
                            <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important"
                                class="avatar-title text-bg-primary rounded-circle fs-22">
                                <iconify-icon icon="solar:shield-check-line-duotone"></iconify-icon>
                            </span>
                        </div>
                        <h3 class="mb-0 fw-bold">
                            {{ $kyc_attente }}
                            {{-- {{ number_format((int) $solde, 0, ',', ' ') }} --}}

                        </h3>

                        <iconify-icon icon="solar:shield-check-line-duotone"
                            class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                    </div>

                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Temps d'écoute total
                    </h5>
                    <div class="d-flex align-items-center gap-2 my-2 py-1">
                        <div class="user-img fs-42 flex-shrink-0">
                            <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important"
                                class="avatar-title text-bg-primary rounded-circle fs-22">
                                <iconify-icon icon="solar:music-note-line-duotone"></iconify-icon>
                            </span>
                            {{-- <svg style="width: 20px !important" class="avatar-title text-bg-primary rounded-circle " xmlns="http://www.w3.org/2000/svg" width="4" height="4"
                                    viewBox="0 0 24 24">
                                    <g fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path d="M7 8a5 5 0 0 1 10 0v3a5 5 0 0 1-10 0z" />
                                        <path stroke-linecap="round"
                                            d="M13 8h4m-4 3h4m3-1v1a8 8 0 0 1-8 8m-8-9v1a8 8 0 0 0 8 8m0 0v3"
                                            opacity="0.5" />
                                    </g>
                                </svg> --}}

                        </div>
                        <h3 class="mb-0 fw-bold">{{ floor($total_time / 60) }}h
                            {{ $total_time % 60 }}min</h3>
                        <iconify-icon icon="solar:music-note-line-duotone"
                            class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                    </div>

                </div>
            </div>
        </div><!-- end col -->
    </div><!-- end row -->

    @if (Session::get('success'))
        <div class="alert alert-success alert-dismissible d-flex align-items-center border-2 border border-success"
            role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <iconify-icon icon="solar:check-read-line-duotone" class="fs-20 me-1"></iconify-icon>
            <div class="lh-1"><strong>Success - </strong>{{ Session::get('success') }} </div>
        </div>
    @endif

    @if (Session::get('error'))
        <div class="alert alert-danger alert-dismissible d-flex align-items-center border-2 border border-danger"
            role="alert">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <iconify-icon icon="solar:danger-triangle-bold-duotone" class="fs-20 me-1"></iconify-icon>
            <div class="lh-1"><strong>Error - </strong> {{ Session::get('error') }}</div>
        </div>
    @endif
    <div class="row">
        <div class="col-12">
            <div class="card">




                <div class="card-body">
                    <div class="d-flex justify-content-end">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0 py-2">
                                <li class="breadcrumb-item"><a href="{{ route('dash.index') }}">Tableau de bord</a>
                                </li>
                                {{-- <li class="breadcrumb-item"><a href="#">Liste des administrateurs</a></li> --}}
                                <li class="breadcrumb-item active" aria-current="page">Liste des auditeurs</li>
                            </ol>
                        </nav>
                    </div>
                    <h4 class="header-title">Liste des auditeurs</h4>

                    <div class="text-end mb-3">

                        <button style="background-color: #EC5A00; border-color:#EC5A00" type="button"
                            class="btn btn-success">Exporter via excel</button>
                    </div>


                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="keywords1" class="form-label">Rechercher par nom, email, téléphone</label>
                                <input type="text" name="keywords" id="keywords" class="form-control"
                                    onkeyup="fetchList()">
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="keywords2" class="form-label">Pays</label>

                                <select name="pays_id" id="pays_id" class="form-control select2" data-toggle="select2"
                                    onchange="fetchList()">
                                    <option value="">Tous les pays</option>

                                    @foreach ($pays as $pay)
                                        <option value="{{ $pay->id }}">{{ $pay->nom_fr_fr }}</option>
                                    @endforeach

                                </select>

                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="keywords2" class="form-label">Villes</label>

                                <select name="ville_id" id="ville_id" class="form-control select2"
                                    data-toggle="select2" onchange="fetchList()">
                                    <option value="">Toutes les villes</option>

                                    @foreach ($villes as $ville)
                                        <option value="{{ $ville->id }}">{{ $ville->nom }}</option>
                                    @endforeach

                                </select>

                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="keywords2" class="form-label">Etat KYC</label>

                                <select name="kyc_id" id="kyc_id" class="form-control select2" data-toggle="select2"
                                    onchange="fetchList()">
                                    <option value="">Tous les KYC</option>

                                    <option value="10">Vérifié</option>
                                    <option value="6">En attente</option>
                                    <option value="8">Rejetté</option>


                                </select>

                            </div>
                        </div>

                        {{-- <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="keywords2" class="form-label">Filtrer par quantité</label>

                                        <select name="categorie_id" id="searchh" class="form-control"
                                            onchange="fetchList()" style="padding: 5px; margin-right: 10px;">
                                            <option value="">Filtrer par...</option>

                                            <option value="low_quantity">Produits en stock faible</option>

                                        </select>

                                    </div>
                                </div> --}}
                    </div>


                    {{-- <button type="button" id="sweetalert-confirm-button" class="btn btn-secondary">Click Me</button> --}}

                    {{-- <button type="button" id="sweetalert-info" class="btn btn-info">Info Alert</button> --}}




                    @if ($auditeur->isEmpty())
                        <div class="alert alert-warning text-center mt-3">Désolé, votre liste est vide !</div>
                    @else
                        <table id="" class="table dt-responsive nowrap w-100 data">

                        </table>
                    @endif
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div> <!-- end row-->
    </div> <!-- end row-->


    <script>
        $(document).on('click', '.delete_profile', function(e) {
            e.preventDefault();
            var auditeur_id = $(this).data('id');


            $('#auditeur_id').val(auditeur_id);
        });

        $(document).on('click', '.desactivate_profile', function(e) {
            e.preventDefault();
            var desactivate_auditeur_id = $(this).data('id');
            $('#desactivate_auditeur_id').val(desactivate_auditeur_id);
        });
        $(document).on('click', '.activate_profile', function(e) {
            e.preventDefault();
            var activate_auditeur_id = $(this).data('id');
            $('#activate_auditeur_id').val(activate_auditeur_id);
        });


        $('#deleteprofileForm').on('submit', function(e) {
            console.log("📤 Formulaire soumis !");
        });
    </script>


    <script>
        function fetchList() {
            var query = $('#keywords').val();
            var pays_id = $('#pays_id').val();
            var kyc_id = $('#kyc_id').val();
            var ville_id = $('#ville_id').val();
            var stock = $('#stock_filter').val(); // Utiliser le champ caché
            var filter = $('#searchh').val();

            fetchProduits(query, pays_id, kyc_id, ville_id, stock, filter, 1);
        }

        // Fonction pour récupérer les produits avec pagination
        function fetchProduits(query, pays_id, kyc_id, ville_id, stock, filter, page) {
            var image = `
        <tr>
            <td colspan="100%">
                <div class="d-flex justify-content-center align-items-center" style="height: 150px;">
                    <img src="{{ asset('gif2.gif') }}" alt="Spinner" style="width: 200px;">
                </div>
            </td>
        </tr>
    `;
            $('.data').html(image);
            $('#paginations').html('');

            $('#paginations').addClass('disabled');

            // Inclure stock uniquement si le filtre est actif
            var data = {
                search_string: query,
                pays_id: pays_id,
                ville_id: ville_id,
                kyc_id: kyc_id,
                filter: filter,
                page: page,
                _token: $('meta[name="csrf-token"]').attr('content')
            };


            $.ajax({
                type: "POST",
                url: "{{ route('search.auditeur') }}",
                data: data,
                success: function(res) {
                    console.log('Response:', res);
                    if (res.status === 200) {
                        $('.data').html(res.tableBody);
                        $('#produitsTotal').html(res.produitsTotal);
                        updatePagination(res.pagination);
                    } else {
                        $('.data').html(`
                    <tr>
                        <td colspan="7" class="text-center text-danger">${res.message}</td>
                    </tr>
                `);
                        $('#produitsTotal').text(0);
                        $('#paginations').html('');
                    }
                },
                error: function(err) {
                    if (err.responseJSON && err.responseJSON.message) {
                        console.log(err.responseJSON.message);
                    } else {
                        alert('Erreur inconnue.');
                    }
                    console.error("Erreur AJAX :", err);
                    $('.data').html(`
                <tr>
                    <td colspan="7" class="text-center text-danger">Erreur lors du chargement des données</td>
                </tr>
            `);
                },
                complete: function() {
                    $('#paginations').removeClass('disabled');
                }
            });
        }

        // Fonction pour mettre à jour la pagination (version originale)
        function updatePagination(pagination) {
            var paginationHtml = '';

            // Bouton précédent
            if (pagination.current_page > 1) {
                paginationHtml += `<li class="page-item" data-page="${pagination.current_page - 1}">
                        <a class="page-link" href="#">«</a>
                    </li>`;
            } else {
                paginationHtml += `<li class="page-item disabled"><a class="page-link" href="#">«</a></li>`;
            }

            // Pages numérotées
            for (var i = 1; i <= pagination.last_page; i++) {
                paginationHtml += `<li class="page-item ${pagination.current_page === i ? 'active' : ''}" data-page="${i}">
                        <a class="page-link" href="#">${i}</a>
                    </li>`;
            }

            // Bouton suivant
            if (pagination.current_page < pagination.last_page) {
                paginationHtml += `<li class="page-item" data-page="${pagination.current_page + 1}">
                        <a class="page-link" href="#">»</a>
                    </li>`;
            } else {
                paginationHtml += `<li class="page-item disabled"><a class="page-link" href="#">»</a></li>`;
            }

            // Injecter dans le DOM
            $('#paginations').html(paginationHtml);
        }

        // Gérer les clics sur les liens de pagination
        $(document).on('click', '#paginations .page-item', function(e) {
            e.preventDefault();
            if ($(this).hasClass('disabled') || $(this).hasClass('active')) return;

            var page = $(this).data('page');
            console.log('Clicked page:', page);
            var query = $('#keywords').val();
            var cate_id = $('#cat').val();
            var date = $('#date').val();
            var stock = $('#stock_filter').val(); // Utiliser le champ caché
            var filter = $('#searchh').val();

            fetchProduits(query, cate_id, date, stock, filter, page);
        });

        // Initialiser au chargement
        window.onload = function() {
            fetchList();
        };
    </script>

    <script>
        $(document).on('click', '[data-bs-target="#DetailsModal"]', function() {
            var auditeur = $(this).data('auditeur');

            // Infos
            $('#modal-nom').text(auditeur.nom);
            $('#modal-prenoms').text(auditeur.prenoms);
            $('#modal-email').text(auditeur.user.email);
            $('#modal-telephone').text(auditeur.user.contact1);

            let dateNaissance = new Date(auditeur.date_naissance);
            let options = {
                day: '2-digit',
                month: 'long',
                year: 'numeric'
            };
            $('#modal-date').text(dateNaissance.toLocaleDateString('fr-FR', options));

            $('#modal-localisation').text(auditeur.user.ville.nom);
            $('#modal-profession').text(auditeur.profession);
            $('#modal-pays').text(auditeur.user.pay.nom_fr_fr);

            // KYC
            // let kycStatus = 'En attente';
            // if (auditeur.user.status == 10) kycStatus = 'Vérifié';
            // else if (auditeur.user.status == 8) kycStatus = 'Rejeté';

            // $('#modal-kyc-status').text(kycStatus);


            // Statut KYC
            let kycStatus = auditeur.user.status; // exemple : 6 = en attente, 8 = rejeté, 10 = vérifié

            let badge = $('#modal-kyc-status');

            // Réinitialiser classes existantes
            badge.removeClass('bg-success bg-warning bg-danger');

            if (kycStatus == 10) {
                badge.addClass('bg-success').text('Vérifié');
            } else if (kycStatus == 6) {
                badge.addClass('bg-warning').text('En attente');
            } else if (kycStatus == 8) {
                badge.addClass('bg-danger').text('Rejeté');
            } else {
                badge.addClass('bg-secondary').text('Inconnu');
            }


            // Activité
            // Total écoutes en minutes
            let totalMinutes = auditeur.user.total_ecoute ?? 0;

            // Convertir en heures et minutes
            let hours = Math.floor(totalMinutes / 60);
            let minutes = totalMinutes % 60;

            // Afficher dans le modal
            $('#modal-total-ecoute').text(`${hours}h ${minutes}min`);

            $('#modal-radios-favoris').text(auditeur.radios_favoris_count);

            if (auditeur.user.last_login_at) {
                let lastLogin = new Date(auditeur.user.last_login_at);
                $('#modal-last-login').text(
                    lastLogin.toLocaleDateString('fr-FR', options)
                );
            } else {
                $('#modal-last-login').text('—');
            }
        });



        $(document).on('click', '[data-bs-target="#ModifyModal"]', function() {
            var auditeur = $(this).data('auditeur');

            // Champs texte
            $('#prenom').val(auditeur.prenoms);
            $('#nom').val(auditeur.nom);
            $('#auth_key').val(auditeur.user.auth_key);
            $('#email').val(auditeur.user.email);
            $('#contact1').val(auditeur.user.contact1);
            $('#contact2').val(auditeur.user.contact2);
            $('#profession').val(auditeur.profession);

            // Champs select
            $('#pays').val(auditeur.user.pays_id); // <-- valeur de l'option correspondant au pays
            $('#ville').val(auditeur.user.ville_id); // <-- valeur de l'option correspondant à la ville
        });
    </script>






    <script src="{{ asset('assets/js/components/extended-sweetalerts.js') }}"></script>
@endsection