{% extends 'Backoffice/base.html.twig' %}

{% block activeLiLoi %}class="active"{% endblock %}
{% block activeLoi %}class="active"{% endblock %}
{% block body %}
<link rel="stylesheet" href="{{ asset("assets/Backoffice/js/datatables/datatables.css") }}" type="text/css"/>
<style>
.folder-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.folder-item {
    width: 180px; min-height: 120px; background: #f5f5f5; border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px #0001; position: relative; cursor: pointer;
    transition: box-shadow 0.2s;
}
.folder-item:hover { box-shadow: 0 4px 12px #0002; background: #e9f7fe; }
.folder-icon { font-size: 40px; color: #2196f3; margin-bottom: 10px; }
.folder-actions {
    position: absolute; top: 8px; right: 8px; display: flex; gap: 4px;
}
.folder-actions button { padding: 2px 6px; font-size: 12px; }
.file-list { margin-top: 20px; }
.file-item { padding: 8px 12px; border-bottom: 1px solid #eee; display: flex; align-items: center; }
.file-icon { font-size: 18px; margin-right: 8px; color: #888; }
.breadcrumb-custom { margin-bottom: 20px; }
</style>
<section class="vbox">
    <section class="scrollable padder">
        <ul class="breadcrumb breadcrumb-custom no-border no-radius b-b b-light pull-in" id="folderBreadcrumb">
            <li><a href="#" onclick="loadFolder(0);return false;"><i class="fa fa-home"></i> Racine</a></li>
        </ul>
        <div class="m-b-md">
            <h3 class="m-b-none">Gestion des dossiers & fichiers</h3>
        </div>
        <div class="row">
            <div class="col-lg-8">
                <!-- Breadcrumb and navigation handled above -->
            </div>
            <div class="col-lg-4 text-right">
                <div id="addFileBtnDiv" style="display:none;">
                    <button class="btn btn-info btn-rounded btn-fw" id="addFolderRootBtn">Nouveau fichier</button>
                </div>
            </div>
        </div>
        <div id="response" style="margin-top: 10px;"></div>
        <!-- Retour button -->
        <div id="returnParentDiv" style="margin-bottom: 10px; display: none;">
            <button class="btn btn-default" id="returnParentBtn"><i class="fa fa-arrow-left"></i> Retour</button>
        </div>
        <section class="panel panel-default">
            <header class="panel-heading">
                <span id="currentFolderTitle">Dossiers</span>
            </header>
            <div class="panel-body">
                <div id="folderContent">
                    <!-- Folders and files will be loaded here -->
                </div>
            </div>
        </section>
    </section>
</section>

<!-- Modal for add/update folder -->
<div id="folderModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="folderModalLabel">
    <div class="modal-dialog" style="width: 400px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="folderModalTitle">Nouveau dossier</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div id="modalResponse" style="margin-top: 10px;"></div>
            <div class="modal-body">
                <input type="hidden" id="folderModalId" value="0">
                <input type="hidden" id="folderModalParentId" value="0">
                <div class="form-group">
                    <label>Titre</label>
                    <input type="text" class="form-control" placeholder="Titre" id="folderModalTitreFr">
                </div>
                <div class="form-group" style="direction: rtl;">
                    <label>عنوان</label>
                    <input type="text" class="form-control" placeholder="عنوان" id="folderModalTitreAr">
                </div>
                <button type="button" class="btn btn-success" id="saveFolderBtn">Enregistrer</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{{ asset("assets/Backoffice/js/datatables/jquery.dataTables.min.js") }}"></script>
<script>
let currentFolderId = 0;
let folderStack = [{id: 0, nom: 'Racine', nomAr: 'الجذر'}];

function renderBreadcrumb() {
    let html = '';
    folderStack.forEach((f, idx) => {
        if (idx === folderStack.length - 1) {
            html += `<li class="active">${f.nom}</li>`;
        } else {
            html += `<li><a href="#" onclick="breadcrumbNav(${idx});return false;">${f.nom}</a></li>`;
        }
    });
    $('#folderBreadcrumb').html(html);
}

function breadcrumbNav(idx) {
    // Go to folder at stack index
    folderStack = folderStack.slice(0, idx + 1);
    loadFolder(folderStack[idx].id, false);
}

function loadFolder(folderId, pushStack = true) {
    $.ajax({
        url: '/getFolderContent',
        type: 'GET',
        data: { id: folderId },
        success: function(data) {
            // data: {folders: [...], files: [...], current: {id, nom, nomAr, parentId}}
            currentFolderId = data.current.id;
            if (pushStack) {
                folderStack.push({id: data.current.id, nom: data.current.nom, nomAr: data.current.nomAr, parentId: data.current.parentId});
            }
            renderBreadcrumb();
            $('#currentFolderTitle').text('Dossiers: ' + data.current.nom);

            // Show/hide Retour button
            if (data.current.parentId !== null && typeof data.current.parentId !== 'undefined') {
                $('#returnParentDiv').show();
                $('#addFileBtnDiv').show(); // Show button only if not root
                $('#returnParentBtn').off('click').on('click', function() {
                    // Remove current folder from stack and go to parent
                    if (folderStack.length > 1) {
                        folderStack.pop();
                        let parent = folderStack[folderStack.length - 1];
                        loadFolder(parent.id, false);
                    }
                });
            } else {
                $('#returnParentDiv').hide();
                $('#addFileBtnDiv').hide(); // Hide button at root
            }

            let html = '<div class="folder-grid">';
            data.folders.forEach(f => {
                html += `
                <div class="folder-item" ondblclick="loadFolder(${f.id})" title="Ouvrir">
                    <div class="folder-icon"><i class="fa fa-folder"></i></div>
                    <div>${f.nom}</div>
                    <div class="folder-actions">
                        <button class="btn btn-xs btn-info" onclick="openEditFolder(${f.id},'${f.nomAr.replace(/'/g,"\\'")}','${f.nom.replace(/'/g,"\\'")}',${currentFolderId});event.stopPropagation();"><i class="fa fa-edit"></i></button>
                        <button class="btn btn-xs btn-danger" onclick="deleteFolder(${f.id});event.stopPropagation();"><i class="fa fa-trash"></i></button>
                    </div>
                </div>`;
            });
            html += `<div class="folder-item" style="background:#e3f2fd;cursor:pointer;" onclick="openAddFolder(${currentFolderId});">
                        <div class="folder-icon"><i class="fa fa-plus"></i></div>
                        <div>Ajouter dossier</div>
                    </div>`;
            html += '</div>';
            if (data.files.length > 0) {
                html += '<div class="file-list"><h5>Fichiers</h5>';
                html += '<div class="row">';
                data.files.forEach(file => {
                    html += `
                    <div class="col-md-6">
                        <div class="file-item" style="display: flex; align-items: center; justify-content: space-between;">
                            <div>
                                <span class="file-icon"><i class="fa fa-file"></i></span> ${file.nom}
                            </div>
                            <div>
                                ${file.fichierFr && file.fichierFr !== "" ? `<a href="${file.fichierFr}" target="_blank" class="btn btn-xs btn-primary" style="margin-right:4px;">Fichier FR</a>` : ''}
                                ${file.fichierAr && file.fichierAr !== "" ? `<a href="${file.fichierAr}" target="_blank" class="btn btn-xs btn-primary" style="margin-right:4px;">Fichier AR</a>` : ''}
                                <a href="/updateLois/${file.id}" class="btn btn-xs btn-info">Modifier</a>
                                <button type="button" class="btn btn-xs btn-danger" onclick="deleteArticle(${file.id})">Supprimer</button>
                            </div>
                        </div>
                    </div>
                    `;
                });
                html += '</div></div>';
            }
            $('#folderContent').html(html);
        },
        error: function() {
            $('#folderContent').html('<div class="alert alert-danger">Erreur de chargement</div>');
        }
    });
}

function openAddFolder(parentId) {
    // Now opens file upload modal instead of folder modal
    $('#folderModalTitle').text('Nouveau fichier');
    $('#folderModalId').val(0);
    $('#folderModalParentId').val(parentId);
    $('#dossierIdInput').val(parentId);
    $('#fileInput').val('');
    $('#modalResponse').html('');
    $('#folderModal').modal('show');
}

function openEditFolder(id, nomAr, nomFr, parentId) {
    $('#folderModalTitle').text('Modifier dossier');
    $('#folderModalId').val(id);
    $('#folderModalParentId').val(parentId);
    $('#folderModalTitreFr').val(nomFr);
    $('#folderModalTitreAr').val(nomAr);
    $('#modalResponse').html('');
    $('#folderModal').modal('show');
}

function deleteFolder(id) {
    noty({
        text: "Attention : Si ce dossier contient des fichiers ou des sous-dossiers, ils seront également supprimés.<br><br>Êtes-vous sûr de vouloir supprimer ce dossier ?",
        type: 'warning',
        theme: 'relax',
        layout: 'center',
        animation: {
            open: 'animated bounceInDown',
            close: 'animated bounceOutUp',
            easing: 'swing',
            speed: 200
        },
        buttons: [
            {
                addClass: 'btn btn-primary',
                text: 'Oui',
                onClick: function ($noty) {
                    var url = '/deleteDossier?id=' + id;
                    $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                    $.ajax({
                        type: 'get',
                        url: url,
                        success: function(data) {
                            if (data === "OK" || (data.status && data.status === "OK")) {
                                loadFolder(currentFolderId, false);
                            } else {
                                errorMsg("Erreur lors de la suppression");
                                $('.fadeMe').animate({opacity: 0.0}, 900, setInvisible);
                            }
                        },
                        error: function() {
                            errorMsg("Erreur serveur");
                        }
                    });
                    $noty.close();
                }
            },
            {
                addClass: 'btn btn-danger',
                text: 'Non',
                onClick: function ($noty) {
                    $noty.close();
                }
            }
        ]
    });
}

$('#addFolderRootBtn').on('click', function() {
    // Open addLois form in a new window or modal, sending currentFolderId as idDossier param
    window.location.href = '/addLois?dossier=' + currentFolderId;
});

$('#saveFolderBtn').on('click', function() {
    let id = $('#folderModalId').val();
    let parentId = $('#folderModalParentId').val();
    let titreFr = $('#folderModalTitreFr').val();
    let titreAr = $('#folderModalTitreAr').val();
    if (!titreFr || !titreAr) {
        $('#modalResponse').html('<div class="alert alert-danger">Tous les champs sont obligatoires !</div>');
        return;
    }
    let url = id == 0 ? '/addFolder' : '/updateFolder';
    let data = { titreFr: titreFr, titreAr: titreAr, parentId: parentId };
    if (id != 0) data.id = id;
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function(resp) {
            if ((resp.status && resp.status === 'OK') || resp === 'OK') {
                $('#folderModal').modal('hide');
                loadFolder(currentFolderId, false);
            } else {
                $('#modalResponse').html('<div class="alert alert-danger">' + (resp.message || 'Erreur') + '</div>');
            }
        },
        error: function() {
            $('#modalResponse').html('<div class="alert alert-danger">Erreur serveur</div>');
        }
    });
});

$('#uploadFileForm').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        url: '/addFile',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(resp) {
            if ((resp.status && resp.status === 'OK') || resp === 'OK') {
                $('#folderModal').modal('hide');
                loadFolder(currentFolderId, false);
            } else {
                $('#modalResponse').html('<div class="alert alert-danger">' + (resp.message || 'Erreur') + '</div>');
            }
        },
        error: function() {
            $('#modalResponse').html('<div class="alert alert-danger">Erreur serveur</div>');
        }
    });
});

// Initial load
$(function() {
    loadFolder(0, false);
});

function deleteArticle(id){
    noty({
        text: "Etes vous sûr de vouloir supprimer la publication ?",
        type: 'confirm',
        theme: 'relax',
        layout: 'center',
        animation: {
            open: 'animated bounceInDown',
            close: 'animated bounceOutUp',
            easing: 'swing',
            speed: 200
        },
        buttons: [
            {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                var url = '/deleteLois/?id=' + id;
                $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                $.ajax({
                    type: 'get',
                    url: url,
                    success: function(data){
                        if(data=="OK"){
                            window.location.reload();
                        }
                        else{
                            errorMsg("une erreur s'est produite");
                            $('.fadeMe').animate({opacity: 0.0}, 900,setInvisible);
                        }
                    }
                });
                $noty.close();
            }},
            {addClass: 'btn btn-danger', text: 'Non', onClick: function ($noty) {
                $noty.close();
            }}
        ]
    });
}
</script>
{% endblock %}