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

<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="row justify-content-center">
            <div class="card">
                <section class="datatables">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive mb-4  rounded-1">
                                    
                                        <table id="list_document" class="table text-nowrap mb-0 align-middle w-100" >
                                            <thead>
                                            <tr>
                                                <th>Document</th>
                                                <th></th>
                                                <th>Lecture</th>
                                                <th>Date de lecture</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            
                                                {% for document in documents %}
                                                    <tr>
                                                        <td>{{document.document.type.nom}}</td>
                                                        <td>
                                                            {% if document.dateLecture is null %}
                                                                <a onclick="markAsRead({{document.document.id}},this)" class="btn btn-success">Je confirme la lecture du document et accède au document</a>
                                                                <a id="viewDoc" style="display:none;" href="{{ asset('uploads/documents/' ~ document.document.slug) }}" class="btn btn-primary" target="_blank">Voir le document</a>
                                                            {% else %}
                                                                <a href="{{ asset('uploads/documents/' ~ document.document.slug) }}" class="btn btn-primary" target="_blank">Voir le document</a>
                                                            {% endif %}</td>
                                                        <td>
                                                            {% if document.dateLecture is null %}
                                                                <span class="mb-1 badge text-bg-light">En attente de lecture</span>
                                                            {% else %}
                                                                <span class="mb-1 badge text-bg-success">Lecture confirmée</span>
                                                            {% endif %}
                                                        </td>
                                                        <td>
                                                            {% if document.dateLecture is not null %}
                                                                {{document.dateLecture | date('d/m/Y H:i')}}
                                                            {% endif %}
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            

                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <th>Document</th>
                                                <th></th>
                                                <th>Lecture</th>
                                                <th>Date de lecture</th>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

        </div>   
    </div>
</div>

<script>
    $(document).ready(function() {
        $('#list_document').DataTable({
            // Options personnalisées (facultatif)
            "paging": true,          // Activer la pagination
            "searching": true,       // 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
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ documents",
            "infoEmpty":      "Voir 0 à 0 de 0 document",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
        }
    });

            
    });

    function markAsRead(documentId, button){

        buttonView = document.getElementById('viewDoc');
        // Envoyer la mise à jour au serveur avec fetch et AJAX
        fetch('{{ path('user_read_document') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("user_read_document") }}'
            },
            body: JSON.stringify({
                documentId: documentId
            })
        })
        .then(response => response.json())
        .then(data => {
            // Afficher une notification toast lorsque la mise à jour est réussie
            if (data.success) {
                showToast('Lecture du document confirmé !');
                button.style.display = 'none';
                buttonView.style.display = 'block';
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(error => {
            showToast('Erreur lors de la mise à jour.', 'error');
        });
    }

</script>


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