@extends('layouts.base')

@section('title', 'Utilisateurs internes - ' . (Auth::check() ? Auth::user()->t_structure->libelle : 'Invité'))

@section('breadcrumb')
    <div class="subheader-block d-lg-flex align-items-center">
        <ol class="breadcrumb page-breadcrumb m-0 mr-4">
            <li class="breadcrumb-item"><a href="{{ route('accueil') }}">Tableau de bord</a></li>
            <li class="breadcrumb-item">@yield('title')</li>
            <li class="breadcrumb-item">Internes</li>
        </ol>
    </div>
@endsection


@section('content')
    <main id="js-page-content" role="main" class="page-content">
        <!-- Détails profil -->
        {{-- <div class="page-heading d-flex justify-content-between align-items-center">
            <h1 class="h3 mb-0 font-weight-bold"><i class="fa-solid fa-users"></i></h1>
        </div> --}}

        <div class="card border-0 mb-3">
            <div class="card-body pt-0">
                <div class="row pl-3 pr-3 mt-3">
                    <h3 class="d-flex flex-row mr-auto align-items-center"><i
                            class="fal fa-users intervention t-ico fa-2x color-primary-200 mr-2"></i>Utilisateurs internes</h3>
                </div>
                <div class="row" id="cd-user-interne" style="display: none; margin-bottom: 5px;">
                </div>
                <div class="row mr-2 ml-2 mt-3">
                    <div class="col-md-12">
                        <!-- datatable start -->
                        <table id="dt-user-interne" class="table table-bordered table-hover table-striped ">
                            <thead class="bg-primary-100">
                                <tr>
                                    <th>Nom</th>
                                    <th>Prénom</th>
                                    <th>Email</th>
                                    <th>Téléphone</th>
                                    <th>Métier</th>
                                    <th>Structure</th>
                                    <th>Groupe</th>
                                    <th>Status</th>
                                    <th style="width: 160px !important;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Les données sont chargées par DataTables --}}
                            </tbody>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('script')
    <script src="{{ asset('/assets/js/peity/peity.bundle.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#dt-user-interne').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/admin/users/data/{{ $structureId }}',
                    type: 'GET',
                    error: function (xhr, error, code) {
                        console.log("AJAX error:", error);
                        alert('Erreur lors du chargement des données. Vérifiez la console pour plus de détails.');
                    }
                },
                columns: [
                    { data: 'nom', name: 'nom' },
                    { data: 'prenom', name: 'prenom' },
                    { data: 'email', name: 'email' },
                    { data: 'telephone', name: 'telephone' },
                    { data: 'metier', name: 'metier' },
                    { data: 'structure_nom', name: 'structure_nom' },
                    { data: 'groupes', name: 'groupes', render: function(data) { return data.map(g => g.nom).join(', '); } }, // Afficher les groupes
                    { data: 'enabled', name: 'enabled', render: function(data) { return data == 0 ? '<span class="badge badge-primary">inactif</span>' : '<span class="badge badge-success">actif</span>'; } }, // Afficher le statut
                    { data: 'action', name: 'action', orderable: false, searchable: false } // Actions
                ],
                dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'lB>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                buttons: [
                    {
                        extend: 'csvHtml5',
                        text: 'Exporter CSV',
                        titleAttr: 'Télécharger en CSV',
                        className: 'btn btn-outline-primary btn-sm'
                    },
                    {
                        extend: 'print',
                        text: 'Imprimer',
                        titleAttr: 'Imprimer le tableau',
                        className: 'btn btn-outline-info btn-sm'
                    }
                ],
                language: {
                    processing: "Traitement en cours...",
                    searchPlaceholder: 'Rechercher',
                    lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                    info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucune donnée disponible dans le tableau",
                    paginate: {
                        first: "Premier",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: "Dernier"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                },
            });
        });
    </script>
@endpush