@extends('admin.layouts.default')
@section('style')
<style>
     #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-box">
        <div class="element-wrapper">
            <div class="element-box">
                <h5 class="form-header">
                    Liste des projets
                </h5>
                <div class="table-responsive">
                    <table id="dataTableProjects" class="table table-striped table-lightfont">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nom du projet</th>
                                <th class="nosort">Client</th>
                                <th class="nosort">Designer</th>
                                <th>Forfait</th>
                                <th >Date de lancement</th>
                                <th>Piece</th>
                                <th>Statut</th>
                                <th>Source</th>
                            </tr>
                        </thead>
                        <tbody style="font-size: 12px;">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#dataTableProjects').DataTable({
                "order": [[ 0, "desc" ]],
                'aoColumnDefs': [{
                    'bSortable': false,
                    'aTargets': ['nosort']
                }],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "headers": {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    "url": "{{route('admin.projets.paginate')}}",
                    "type": "POST"
                },
                columns: [
                    { data: 'id' },
                    { data: 'nom' },
                    { data: 'client' },
                    { data: 'designers' },
                    { data: 'forfait' },
                    { data: 'created_at' },
                    { data: 'espace' },
                    { data: 'status' },
                    { data: 'src' },
                ],
                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