@extends('admin.layouts.default')

@section('style')
    <style>
        .flash {
            position: absolute !important;
            top: 0;
            width: 90%;
        }

        #loader {
            border: 8px solid #f6ded3;
            /* Light grey */
            border-top: 8px solid #0e6b8a;
            /* Blue */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <div class="content-i">
        <div class="content-box">
            <div class="element-wrapper">
                <div class="element-box">
                    <div class="pull-right">
                        <a href="{{ route('admin.users.export') }}" class="btn btn-primary">Exporter</a>
                    </div>
                    <h5 class="form-header">
                        Liste des clients
                    </h5>

                    <div class="table-responsive">
                        <table id="dataTableUsers" class="table table-striped table-lightfont">
                            <thead>
                                <tr>
                                    <th class="nosort">Image</th>
                                    <th class="nosort">Prénom Nom</th>
                                    <th width="120">Identifiant du client</th>
                                    <th>Email</th>
                                    <th>Téléphone</th>
                                    <th>Ville</th>
                                    <th>Code de parrainage</th>
                                    <th>Dernière connexion</th>
                                    <th>Source</th>
                                    <th>Newsletter</th>
                                    <th width="50" class="nosort">Actions</th>
                                </tr>
                            </thead>

                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#dataTableUsers').DataTable({
                "order": [
                    [2, "desc"]
                ],
                'aoColumnDefs': [{
                    'bSortable': false,
                    'aTargets': ['nosort']
                }],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "headers": {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    "url": "{{ route('admin.users.paginate') }}",
                    "type": "POST"
                },
                columns: [{
                        data: 'photo'
                    },
                    {
                        data: 'nom'
                    },
                    {
                        data: 'id'
                    },
                    {
                        data: 'email'
                    },
                    {
                        data: 'telephone'
                    },
                    {
                        data: 'ville'
                    },
                    {
                        data: 'code_parrainage'
                    },
                    {
                        data: 'last_connected_at'
                    },
                    {
                        data: 'question'
                    },
                    {
                        data: 'newsletter'
                    },
                    {
                        data: 'action'
                    },
                ],
                language: {
                    "sProcessing": "<div id='loader'></div>",
                    "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"
                    },
                    "oAria": {
                        "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                        "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                    },
                    "select": {
                        "rows": {
                            _: "%d lignes séléctionnées",
                            0: "Aucune ligne séléctionnée",
                            1: "1 ligne séléctionnée"
                        }
                    }
                }
            });
        });
    </script>
@endsection