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


    <link rel="stylesheet" href="{{ asset('assets/libs/datatables.net/css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('assets/libs/dropzone/dist/min/dropzone.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>
    <script src="{{ asset('assets/libs/bootstrap-tree/dist/bootstrap-treeview.min.js') }}"></script>
    <script src="{{ asset('assets/libs/dropzone/dist/min/dropzone.min.js') }}"></script>
    <script src="{{ asset('assets/js/file.js') }}"></script>

{% import '@Fichier/files/macros/macro_files_optionform.html.twig' as macros2 %}

<div class="row">
    <!-- Right Sidebar -->
    <div class="col-12" style="margin-top:100px;">
        <div class="card">
            <div class="card-body" style="display:flex;">
                <!-- Left sidebar -->

                <div class="page-aside-left col-3">
                    <div class="btn-group d-block mb-2">
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addFolderModal"><i class="ti ti-folder fs-5"></i> Nouveau dossier</button>
                    </div>
                    <div class="mt-3 p-1" id="content-treeview">
                        
                    </div>

                </div>
                <!-- End Left sidebar -->

                <div class="page-aside-right col-9">
                    <div class="text-end">
                        <button id="deleteFolderBtn" type="button" data-type="folder" class="delete btn btn-success-inline" style="display:none;"><i class="ti ti-trash fs-5"></i> Supprimer ce dossier</button>
                    </div>
                    <div class="datatables">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table
                                        id="list_fichiers"
                                        class="table border table-striped table-bordered display w-100"
                                    >
                                        <thead>
                                            <tr>
                                                <th>Fichier</th>
                                                <th>Posté le</th>
                                                <th>Utilisateur</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                    <tbody>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>Fichier</th>
                                            <th>Posté le</th>
                                            <th>Utilisateur</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body" id="uploadFile" style="display:none;">
                  <h6 class="card-subtitle mb-3">
                    Ajouter des fichers dans ce dossier
                  </h6>
                  <form action="#" class="dropzone" id="my-dropzone">
                    <input type="hidden" id="parentFolderId" name="parentFolderId" value="0"></form>
                </div>
                </div>
                <!-- end inbox-rightbar-->
            </div>
            <!-- end card-body -->
            <div class="clearfix"></div>
        </div> <!-- end card-box -->

    </div> <!-- end Col -->
</div><!-- End row -->

<!-- Modal pour ajouter un dossier -->
<div class="modal fade" id="addFolderModal" tabindex="-1" aria-labelledby="addFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFolderModalLabel">Ajouter un dossier</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="add-folder-form">
                    <div class="mb-3">
                        <label for="folder-nom" class="form-label">Nom du dossier</label>
                        <input type="text" class="form-control" id="folder-nom" required>
                    </div>
                    <div class="mb-3">
                        <label for="parent-folder" class="form-label">Dossier parent</label>
                        <select class="form-control" id="folder-parent-folder">
                            <option value="">Aucun</option>

                            {% for file in societe.files %}
                                {% if file.isDirectory and file.parent == null and file.deleted == false %}
                                    <option value="{{ file.id }}">{{ file.nom }}</option>
                                        
                                        
                           

                                {% endif %}
                            {% endfor %}
                            
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Ajouter</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter un fichier -->
<div class="modal fade" id="addFileModal" tabindex="-1" aria-labelledby="addFileModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFileModalLabel">Ajouter un fichier</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="add-file-form" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="file-nom" class="form-label">Nom du fichier</label>
                        <input type="text" class="form-control" id="file-nom" required>
                    </div>
                    <div class="mb-3">
                        <label for="file-upload" class="form-label">Fichier</label>
                        <input type="file" class="form-control" id="file-upload" required>
                    </div>
                    <div class="mb-3">
                        <label for="parent-folder" class="form-label">Dossier</label>
                        <select class="form-control" id="parent-folder">
                            <option value="">Aucun</option>

                            {% for file in societe.files %}
                                {% if file.isDirectory and file.parent == null %}
                                    <option value="{{ file.id }}">{{ file.nom }}</option>
                                        
                                    {{ macros2.recursive_folder_list_option(societe.files, file.id, 1) }}
                           

                                {% endif %}
                            {% endfor %}

                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Ajouter</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Êtes-vous sûr de vouloir supprimer ce fichier ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression de dossier -->
<div class="modal fade" id="confirmDeleteFolderModal" tabindex="-1" aria-labelledby="confirmDeleteFolderModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteFolderModalLabel">Confirmer la suppression du dossier</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <lord-icon src="https://cdn.lordicon.com/tdrtiskw.json" trigger="loop" colors="primary:#f7b84b,secondary:#405189" style="width:130px;height:130px"></lord-icon>
                Êtes-vous sûr de vouloir supprimer ce dossier et tout son contenu ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="confirmDeleteFolderBtn">Supprimer</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal d'erreur -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="errorModalLabel">Erreur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="errorModalBody">
                <!-- Message d'erreur sera inséré ici -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="previewOffcanvas" aria-labelledby="previewOffcanvasLabel" style="width: 50%; max-width: 50%;">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="previewOffcanvasLabel">Aperçu du fichier</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div id="previewContent">
            <!-- Contenu du fichier sera chargé ici -->
        </div>
    </div>
</div>

<script>

let myDropzone = new Dropzone("#my-dropzone", { 
    url: "{{ path('file_add') }}",
    paramName: "file",
    maxFilesize: 5, // Taille max en MB
    acceptedFiles: ".jpg,.jpeg,.png,.pdf,.doc,.docx, .xls, .xlsx",
    addRemoveLinks: false,
    dictDefaultMessage: "Glissez un fichier ici ou cliquez pour uploader",

    init: function () {
        this.on("success", function (file, response) {
            console.log("Upload réussi ! Nom du fichier :", file.name);
            const parent = document.getElementById("parentFolderId").value;
            tableFichier.ajax.url(loadDatatableRoute.replace('PLACEHOLDER', parent)).load();
        });
    }
});
myDropzone.on("addedfile", file => {
  console.log("A file has been added");
  
});


const tableFichier = $('#list_fichiers').DataTable({
        "paging": false,          // Activer la pagination
        "searching": true,       // Activer la recherche
        "ordering": false,        // Activer le tri des colonnes
        "info": false,            // 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
        displayLength: 25,
        processing: true, // Affiche un indicateur de chargement
          serverSide: true, // Active le mode server-side
          ajax: {
                url: '{{ path('ajax_list_files', {'id': 0}) }}', // URL du backend
                type: 'GET',
                cache: false,
          },
          columns: [
              { data: 'nom' },
              { data: 'date' },
              { data: 'user' },
              { data: 'action' },     
          ],
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ fichiers",
            "infoEmpty":      "Voir 0 à 0 de 0 fichier",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrées de _MAX_ fichiers au total)',
            "zeroRecords": "Aucun fichier correspondant trouvé",
            "emptyTable": "Aucune donnée disponible dans le tableau",

        }        
    });

    document.addEventListener('DOMContentLoaded', function() {
        let currentFolderId = null;
        let fileToDeleteId = null;
        let folderToDeleteId = null;

        document.getElementById('add-folder-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const nom = document.getElementById('folder-nom').value;
            const parentId = document.getElementById('folder-parent-folder').value;
            fetch('{{ path('admin_folder_add') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token('admin_files_add') }}'
                },
                body: JSON.stringify({ nom: nom, isDirectory: true, parentId: parentId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    $('#addFolderModal').modal('hide');
                    showErrorModal('Erreur lors de l\'ajout du dossier');
                }
            });
        });

        document.getElementById('add-file-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData();
            const fileInput = document.getElementById('file-upload');
            const fileName = fileInput.value;
            const fileExtension = fileName.split('.').pop().toLowerCase();
            const allowedExtensions = ['png', 'jpg', 'doc', 'docx', 'xls', 'xlsx', 'pdf'];

            if (!allowedExtensions.includes(fileExtension)) {
                $('#addFileModal').modal('hide');
                showErrorModal('Extension de fichier non autorisée. Extensions autorisées : png, jpg, doc, docx, xls, xlsx, pdf.');
                return;
            }

            if(document.getElementById('parent-folder').value==''){
                $parent=0;
            }else{
                $parent=document.getElementById('parent-folder').value;
            }

            formData.append('nom', document.getElementById('file-nom').value);
            formData.append('file', document.getElementById('file-upload').files[0]);
            formData.append('parentId', $parent);
            formData.append('isDirectory', false);

            fetch('{{ path('admin_files_add') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token('admin_files_add') }}'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    $('#addFileModal').modal('hide');
                    fetch(`{{ path('admin_files_get_files', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', data.folderId))
                    .then(response => response.json())
                    .then(data => {
                        const fileList = document.getElementById('file-list');
                        fileList.innerHTML = ''; // Clear previous files
                        data.forEach(file => {
                            const listItem = document.createElement('tr');
                            listItem.innerHTML = `
                                <td>
                                    <span class="ms-2 fw-semibold"><i class="far fa-file-${file.type}"></i> ${file.name}</span>
                                </td>
                                <td>
                                    <p class="mb-0">${file.createdAt|date('d/m/Y H:i:s')}</p>
                                </td>
                                <td>
                                    ${file.user.prenom} ${file.user.nom}
                                </td>
                                <td class="text-end">
                                <a href=".{{asset('hotels/${file.path}')}}" class="btn btn-sm btn-info" target="_blank"><i class="far fa-eye"></i></a>
                                    <a href="{{asset('hotels/${file.path}')}}" class="btn btn-sm btn-primary" download><i class="fas fa-download"></i></a>
                                    <button class="btn btn-sm btn-danger" onclick="confirmDeleteFile(${file.id},${folderId})"><i class="fas fa-trash"></i></button>
                                </td>
                            `;
                            fileList.appendChild(listItem);
                        });
                        $('#addFileModal').modal('hide');
                    });
                } else {
                    showErrorModal('Erreur lors de l\'ajout du fichier');
                }
            });
        });

        document.querySelectorAll('.folder-item').forEach(function(folderItem) {
            folderItem.addEventListener('click', function() {
               document.querySelectorAll('.folder-item').forEach(function(item) {
                    item.classList.remove('selected');
                });
                this.classList.add('selected');

                currentFolderId = this.getAttribute('data-id');
                const folderId = this.getAttribute('data-id');
                const parent  = this.getAttribute('data-parent');
                const folderName = this.textContent;
                document.getElementById('selected-folder-name').textContent = ' / '+parent+folderName;
                fetch(`{{ path('admin_files_get_files', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', currentFolderId))
                .then(response => response.json())
                .then(data => {
                    const fileList = document.getElementById('file-list');
                    fileList.innerHTML = ''; // Clear previous files
                    data.forEach(file => {
                        const listItem = document.createElement('tr');
                        listItem.innerHTML = `
                            <td>
                                <span class="ms-2 fw-semibold"><i class="far fa-file-${file.type}"></i> ${file.name}</span>
                            </td>
                            <td>
                                <p class="mb-0">${file.createdAt}</p>
                            </td>
                            <td>
                                ${file.prenom} ${file.nom}
                            </td>
                            <td class="text-end">
                            <button class="btn btn-sm btn-info" onclick="previewFile('{{asset('hotels/${file.path}')}}', '${file.type}')"><i class="far fa-eye"></i></button>
                                <a href="{{asset('hotels/${file.path}')}}" class="btn btn-sm btn-primary" download><i class="fas fa-download"></i></a>
                                <button class="btn btn-sm btn-danger" onclick="confirmDeleteFile(${file.id},${folderId})"><i class="fas fa-trash"></i></button>
                            </td>
                        `;
                        fileList.appendChild(listItem);
                    });
                });
            });
        });
    });

    function loadFiles (folderId, parent, nom) {
        document.getElementById('selected-folder-name').textContent = ' / '+nom;
        fetch(`{{ path('admin_files_get_files', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', folderId))
        .then(response => response.json())
        .then(data => {
            const fileList = document.getElementById('file-list');
            fileList.innerHTML = ''; // Clear previous files
            data.forEach(file => {
                const listItem = document.createElement('tr');
                listItem.innerHTML = `
                    <td>
                        <span class="ms-2 fw-semibold"><i class="far fa-file-${file.type}"></i> ${file.name}</span>
                    </td>
                    <td>
                        <p class="mb-0">${file.createdAt}</p>
                    </td>
                    <td>
                        ${file.prenom} ${file.nom}
                    </td>
                    <td class="text-end">
                    <button class="btn btn-sm btn-info" onclick="previewFile('{{asset('hotels/${file.path}')}}', '${file.type}')"><i class="far fa-eye"></i></button>
                        <a href="{{asset('hotels/${file.path}')}}" class="btn btn-sm btn-primary" download><i class="fas fa-download"></i></a>
                        <button class="btn btn-sm btn-danger" onclick="confirmDeleteFile(${file.id},${folderId})"><i class="fas fa-trash"></i></button>
                    </td>
                `;
                fileList.appendChild(listItem);
            });
        });
    }

    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        deleteFile(fileToDeleteId,currentFolderId);
    });

    document.getElementById('confirmDeleteFolderBtn').addEventListener('click', function() {
            deleteFolder(folderToDeleteId);
    });

    window.confirmDeleteFolder = function(folderId) {
        folderToDeleteId = folderId;
        $('#confirmDeleteFolderModal').modal('show');
    };

    window.confirmDeleteFile = function(fileId,folderId) {
        fileToDeleteId = fileId;
        currentFolderId = folderId;
        $('#confirmDeleteModal').modal('show');
    };

    function deleteFile(fileId,folderId) {
        fetch(`{{ path('admin_files_delete', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', fileId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token('admin_files_delete') }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                $('#confirmDeleteModal').modal('hide');
                fetch(`{{ path('admin_files_get_files', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', folderId))
                .then(response => response.json())
                .then(data => {
                    const fileList = document.getElementById('file-list');
                    fileList.innerHTML = ''; // Clear previous files
                    data.forEach(file => {
                        const listItem = document.createElement('tr');
                        listItem.innerHTML = `
                            <td>
                                <span class="ms-2 fw-semibold"><i class="far fa-file-${file.type}"></i> ${file.name}</span>
                            </td>
                            <td>
                                <p class="mb-0">${file.createdAt|date('d/m/Y H:i:s')}</p>
                            </td>
                            <td>
                                ${file.user.prenom} ${file.user.nom}
                            </td>
                            <td class="text-end">
                            <a href="{{asset('hotels/${file.path}')}}" class="btn btn-sm btn-info" target="_blank"><i class="far fa-eye"></i></a>
                                <a href="{{asset('hotels/${file.path}')}}" class="btn btn-sm btn-primary" download><i class="fas fa-download"></i></a>
                                <button class="btn btn-sm btn-danger" onclick="confirmDeleteFile(${file.id},${folderId})"><i class="fas fa-trash"></i></button>
                            </td>
                        `;
                        fileList.appendChild(listItem);
                    });
                });
            } else {
                showErrorModal('Erreur lors de la suppression du fichier');
            }
        });
    }
    function deleteFolder(folderId) {
        fetch(`{{ path('admin_files_delete_folder', {'id': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', folderId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token('admin_files_delete_folder') }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                $('#confirmDeleteFolderModal').modal('hide');
                location.reload();
            } else {
                showErrorModal('Erreur lors de la suppression du dossier');
            }
        });
    }

    function showErrorModal(message) {
        document.getElementById('errorModalBody').textContent = message;
        $('#errorModal').modal('show');
    }

    function previewFile(path, type) {
    const previewContent = document.getElementById('previewContent');
    previewContent.innerHTML = ''; // Clear previous content

    // Génère le contenu en fonction du type de fichier
    if (type === 'image') {
        previewContent.innerHTML = `<img src="{{asset('hotels/${path}')}}" alt="Preview Image" class="img-fluid">`;
    } else if (type === 'pdf') {
        previewContent.innerHTML = `
            <embed src="{{asset('hotels/${path}')}}" type="application/pdf" width="100%" height="500px" />
        `;
    } else {
        previewContent.innerHTML = `<p>Type de fichier non supporté pour l'aperçu.</p>`;
    }

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

    const addFileRoute = "{{ path('file_add') }}";
    const treeviewRoute = "{{ path('file_treeview') }}";
    const loadDatatableRoute = "{{ path('ajax_list_files', {'id': 'PLACEHOLDER'}) }}";
    const deleteFileRoute = "{{ path('file_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
    const folderDeleteRoute = "{{ path('folder_delete', { 'id': 'ID_PLACEHOLDER' }) }}";

    const folderid = 0;
    loadTreeview();

    console.log(typeof jQuery); // Doit afficher 'function'
console.log($.fn.modal); // Doit afficher 'function'
console.log(jQuery.fn.jquery);

</script>

{% include 'partials/modal/delete_modal.html.twig' %}    

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