@extends('layouts.app',[
    'class' => '',
    'folderActive' => '',
    'elementActive' => 'users'
])

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit"></i>
                </div>
                <div>
                    Utilisateurs
                    <div class="page-title-subheading">
                        Gestion des comptes utilisateurs
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-2 ml-2">
        <div class="mb-2 mb-sm-0 col-12 col-md-3">
            <label for="exampleEmail22" class="mr-sm-2">Rechercher</label>
            <input type="text" class="form-control input active" id="search" value="">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-xl-12">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="table-responsive">
                        <div id="liste_users_wrapper" class="table-borderless">
                            <table id="liste_users"
                                   class="align-middle mb-0 table table-borderless table-striped table-hover datatable">
                                <thead>
                                <tr role="row">
                                    <th>
                                        Login
                                    </th>
                                    <th>
                                        Nom
                                    </th>
                                    <th>
                                        Fonction
                                    </th>
                                    <th>
                                        Client
                                    </th>
                                    <th></th>
                                    <th>
                                        Activation
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($users as $index => $user)
                                    <tr role="row">
                                        <td>{{ $user->user_title }}</td>
                                        <td>{{ $user->user_firstname .' '. $user->user_lastname }}</td>
                                        <td>{{ config('types.type_user.' . $user->user_type) }}</td>
                                        <td>{{ $user->client->client_title ?? '' }}</td>
                                        <td>
                                            <a class="btn btn-primary btn-sm"
                                               href="{{ route('users.show', $user->user_id) }}">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </td>
                                        <td>
                                            @if($user->user_activation === 1)
                                                <button class="btn btn-primary">Activé</button>
                                            @else
                                                <button class="btn btn-danger">Désactivé</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript"
            src="{{ asset('js/datatables.js') }}"></script>
    <script>

        document.addEventListener('DOMContentLoaded', function () {
            let table = $('#liste_users').DataTable({
                "language": {
                    "sProcessing": "Traitement en cours...",
                    "sSearch": "Rechercher&nbsp;:",
                    "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                    "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                    "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    "sInfoPostFix": "",
                    "sLoadingRecords": "Chargement en cours...",
                    "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Pr&eacute;c&eacute;dent",
                        "sNext": "Suivant",
                        "sLast": "Dernier"
                    }
                },

                "searching": true,
                "ordering": true,
                "sortable": true,
                "pageLength": -1,
                "bLengthChange": false,
                "bInfo": false,
                "bFilter": false,
                "dom": '<"top"i>rt<"bottom"p><"clear">',
            });

            document.querySelector('.input').addEventListener('keyup', function () {
                table.search(this.value).draw();
            })
        });
    </script>
@endsection