{% include 'partials/header.html.twig' %}
    <link rel="stylesheet" href="{{ asset('assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">

    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/vfs_fonts.js') }}"></script>
<div class="body-wrapper">

    <div class="container-fluid">

        <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body px-4 py-3">
                <div class="row align-items-center">
                    <div class="col-9">
                        <h4 class="fw-semibold mb-8">Documents obligatoires</h4>
                    </div>
                </div>
            </div>
        </div>

    

    <div class="card">
        <div class="card-body px-4 py-3">
            <p>Ajoutez ici les documents obligatoires et vérifiez qu'ils ont été lus par tout le monde.</p>
                            
                <div class="row">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-body p-4">
                                <h4 class="card-title mb-2">Types de document</h4>

                                <div class="table-responsive mb-4  rounded-1">

                                    <table id="list_type" class="table text-nowrap mb-0 align-middle w-100" >
                                        <thead>
                                            <tr>
                                                <th>Type</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>Type</th>
                                                <th></th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                
                                    <form id="addTypeForm" class="form-horizontal r-separator needs-validation" novalidate="">
                                    
                                    <div class="form-group mb-3 p-3">
                                        <div class="row">
                                            <label for="client" class="col-form-label">Nouveau type de document</label>
                                            <input type="text" class="form-control" data-field="nom" id="nom" required="">
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-primary" data-form="addTypeForm" data-btn="enregistrer" data-route="{{ path('societe_add_typedocument') }}">Enregistrer</button>
                                </form>
                                
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card border shadow-none p-3" id="documentContainer">
                            Sélectionnez un type de document                        
                        </div>
                    </div>
                                                          
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const listeType = $('#list_type').DataTable({
        "paging": true,          // Activer la pagination
        "searching": false,       // Activer la recherche
        "ordering": false,        // Activer le tri des colonnes
        "info": true,            // Afficher les informations sur le nombre de résultats
        "lengthChange": false,   // Permettre de changer le nombre de lignes affichées
        "pageLength": 20,        // Nombre de lignes par page par défaut
        processing: true, // Affiche un indicateur de chargement
        serverSide: true, // Active le mode server-side
        ajax: {
            url: '{{path('ajax_list_type_document')}}', // URL du backend
            type: 'GET',
            cache: false,
            
        },
        columns: [
            { data: 'nom' }, 
            { data: 'action' },     
        ],
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ types de document",
            "infoEmpty":      "Voir 0 à 0 de 0 type de document",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrées de _MAX_ types de document au total)',
            "zeroRecords": "Aucun type de document correspondante trouvé",
            "emptyTable": "Aucun type de document n'est enregistré",

        },
    });
</script>
<script src="{{ asset('assets/js/bundle/employe/document.js') }}"></script>
{% include 'partials/modal/delete_modal.html.twig' %}    

{% include 'partials/footer.html.twig' %}