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

<script src="{{ asset('assets/libs/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

<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">Notes</h4>
                    </div>
                    <div class="col-3">
                        <div class="text-center">
                            <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addNoteModal">
                                Créer une note de service
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
          
    
        <div id="tab-content-note">
            <div id="note-full-container" class="note-has-grid row">

                {% for note in notes %}
                    <div class="col-md-4 single-note-item all-category" style="">
                        <div class="card card-body">
                            <span class="side-stick"></span>
                            <h6 class="note-title text-truncate w-75 mb-0">
                                {{note.note.titre}}
                            </h6>
                            <p class="note-date fs-2">{{note.note.createdAt | date('d/m/Y')}}</p>
                            <div class="progress mt-4">
                                <div class="progress-bar text-bg-success" style="width: {{note.pourcentage}}%; height: 6px" role="progressbar"></div>
                            </div>
                            <div class="d-flex align-items-center">
                                <a href="javascript:void(0)" class="editNote me-1" onclick="previewNote('{{note.note.document}}')" data-id="{{note.note.idtoken}}">
                                    <i class="ti ti-eye fs-4 favourite-note"></i>
                                </a>
                                <a href="{{asset('hotels/hotel-' ~ societe.id ~ '-' ~ societe.token ~ '/notes-de-service/' ~ note.note.document)}}" target="_blank" class="ms-2">
                                    <i class="ti ti-download fs-4 remove-note"></i>
                                </a>
                                <a class="ms-2 text-success" data-bs-toggle="collapse" href="#collapseExample{{note.note.idtoken}}" role="button" aria-expanded="false" aria-controls="collapseExample">
                                    <i class="ti ti-checklist fs-4 favourite-note"></i>
                                </a>
                                <a href="javascript:void(0)" class="delete link text-danger ms-2" data-id="{{note.note.idtoken}}" data-type="note">
                                    <i class="ti ti-trash fs-4 remove-note"></i>
                                </a>
                            </div>

                            <div class="collapse mt-4" id="collapseExample{{note.note.idtoken}}">
                                <div class="card">
                                    {% if note.lecture | length > 0 %}
                                    <table class="table text-nowrap mb-0 align-middle">
                                        <tbody>
                                            {% for lecture in note.lecture %}

                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="ms-3">
                                                                <h6 class="fs-4 fw-semibold mb-0">{{lecture.user.prenom}} {{lecture.user.nom}}</h6>
                                                                <span class="fw-normal">{{lecture.user.role.nom}}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        {% if lecture.dateLecture is not null %}
                                                            {{lecture.dateLecture | date ('d/m/Y H:i:s')}}
                                                        {% else %}
                                                            <strong> Non lu </strong>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    {% else %}
                                        <div class="card-body">
                                            Pas de lecture
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                        </div>

                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Initialisation pour les éléments déjà dans le DOM
        $('.select2').select2();

        $('.modal').on('shown.bs.modal', function () {
            $(this).find('.select2').select2({
                dropdownParent: $(this) // Utilise la modale courante comme parent
            });
        });

    });    

    function previewNote(path) {
        const previewContent = document.getElementById('previewContent');
        const dossier = 'hotel-'+'{{societe.id}}'+'-'+'{{societe.token}}';
        previewContent.innerHTML = ''; // Clear previous content

        // Génère le contenu en fonction du type de fichier
        previewContent.innerHTML = `
            <embed src="{{asset('hotels/${dossier}/notes-de-service/${path}')}}" type="application/pdf" width="100%" height="500px" />
        `;

        // Ouvre l'offcanvas
        const offcanvas = new bootstrap.Offcanvas(document.getElementById('viewNoteOffcanvas'));
        offcanvas.show();
    }

    function reloadNote(){
        loadContent("{{path('noteservice_get')}}", 0, 'tab-content-note');
    }

</script>

{% include '@RH/noteservice/offcanvas/view_note_offcanvas.html.twig' %}
{% include '@RH/noteservice/modal/new_note.html.twig' %}
{% include 'partials/modal/delete_modal.html.twig' %}

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