@extends('base')

@section('content')


<style>
    .entete_fiche { display: flex; align-items: stretch; gap: 10px; margin-bottom: 10px; }
    .entete_fiche .alert { flex: 1; margin: 0; }

    .aide_fiche { margin-bottom: 10px; border: 1px solid #b8daff; border-radius: 4px; background: #f1f8ff; font-size: 14px; }
    .aide_fiche .titre_aide { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-weight: bold; color: #004085; cursor: pointer; }
    .aide_fiche ol { margin: 0; padding: 0 12px 8px 32px; }
    .aide_fiche li { margin-bottom: 2px; }

    .zone_upload { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #c3e6cb; border-radius: 4px; background: #f6fbf7; }
    .zone_upload .destination { font-size: 15px; margin-bottom: 8px; }
    .zone_upload .destination b { color: #218838; }
    .zone_upload.racine { border-color: #ffeeba; background: #fffbea; }
    .zone_upload.racine .destination { color: #856404; }

    #form_ajout_fichier .zone_choix_fichier {
        display: inline-flex; align-items: center; margin-right: 10px; margin-bottom: 0;
        border: 1px solid #ced4da; border-radius: 4px; background: #fff; overflow: hidden;
    }
    #form_ajout_fichier .btn_parcourir {
        margin: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
        background-color: #6c757d; border-color: #6c757d; color: #fff;
    }
    #form_ajout_fichier .btn_parcourir:hover { background-color: #5a6268; }
    #form_ajout_fichier .nom_fichiers {
        padding: 0 12px; min-width: 250px; max-width: 450px; color: #6c757d;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #form_ajout_fichier .nom_fichiers.choisi { color: #212529; }
    #form_ajout_fichier.desactive .zone_choix_fichier { opacity: .5; }
    #form_ajout_fichier.desactive .btn_parcourir { cursor: not-allowed; }

    .barre_navigation {
        display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
        margin: 10px 0; padding: 6px 8px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;
    }
    .barre_navigation .breadcrumb { margin: 0; padding: 4px 10px; background: transparent; flex: 1; font-size: 18px; }
    .barre_navigation .breadcrumb a { color: #218838; font-weight: bold; }
    .barre_navigation .breadcrumb-item.active { color: #212529; font-weight: bold; }

    #table_fichier tbody td { font-size: 15px; }
    #table_fichier tbody td.nom_element { font-size: 17px; }
    #table_fichier tbody tr.ligne_dossier { cursor: pointer; }
    #table_fichier tbody tr.ligne_dossier:hover td { background-color: #e2f3e6; }
    #table_fichier .fa-folder, #table_fichier .fa-level-up-alt { color: #e0a800; }
    #table_fichier .fa-file { color: #6c757d; }

    .zone_suppression { display: flex; justify-content: flex-end; margin-top: 30px; padding-top: 15px; border-top: 1px dashed #dc3545; }
</style>

<div class="entete_fiche">
    <div class="alert alert-success text-center">GESTION DES FICHIERS</div>
    <button type="button" class="btn btn-success" id="rafraichir" title="Recharger la liste depuis le serveur"><i class="fas fa-sync-alt"></i> Rafraichir</button>
</div>

<div class="aide_fiche">
    <div class="titre_aide" id="titre_aide">
        <span><i class="fas fa-info-circle"></i> Comment utiliser cette fiche ?</span>
        <span class="small" id="texte_bascule_aide">Masquer</span>
    </div>
    <ol id="etapes_aide">
        <li><b>Ouvrez un dossier</b> (bl, facture, formule, commande, devis ou autres) en cliquant sur sa ligne dans le tableau. Pour remonter, utilisez <b>Retour</b>, la ligne <b>..</b> ou le chemin au-dessus du tableau.</li>
        @if($peut_modifier)
        <li><b>Choisissez vos fichiers</b> avec le bouton <b>Parcourir...</b> (vous pouvez en sélectionner plusieurs).</li>
        <li><b>Cliquez sur Upload (Téléverser)</b> : les fichiers sont envoyés dans le dossier ouvert. Le téléversement n'est pas possible à la racine, il faut être dans un dossier.</li>
        @endif
        <li><b>Pour récupérer un fichier</b>, cliquez sur le bouton vert <i class="fas fa-download"></i> de sa ligne.</li>
        @if($peut_modifier)
        <li><b>Pour supprimer</b>, cochez les fichiers puis cliquez sur <b>Supprimer la sélection</b> en bas de la page. La suppression est définitive.</li>
        @endif
    </ol>
</div>

@if($peut_modifier)
<div class="zone_upload" id="zone_upload">
    <div class="destination" id="destination_upload"></div>
    <form id="form_ajout_fichier" class="form-inline" enctype="multipart/form-data">
        <input type="file" name="fichiers[]" id="fichiers" multiple hidden>
        <div class="zone_choix_fichier">
            <label for="fichiers" class="btn btn_parcourir"><i class="fas fa-folder-open"></i> Parcourir...</label>
            <span class="nom_fichiers">Aucun fichier sélectionné</span>
        </div>
        <button type="submit" class="btn btn-success" id="ajouter_fichier"><i class="fas fa-upload"></i> Upload (Téléverser)</button>
    </form>
</div>
@endif

<div class="barre_navigation">
    <button type="button" class="btn btn-outline-secondary" id="btn_retour" title="Revenir au dossier parent (touche Retour arrière)"><i class="fas fa-arrow-left"></i> Retour</button>
    <button type="button" class="btn btn-outline-secondary" id="btn_accueil" title="Revenir à la racine"><i class="fas fa-home"></i></button>
    <nav aria-label="Dossier courant" style="flex:1;"><ol class="breadcrumb" id="fil_ariane"></ol></nav>
    <span>Élément(s) : <span class="badge" id="nb_elements" style="background : #dff0d8; color: #000; font-size: 14px;">0</span></span>
</div>

<div class="table-responsive">
    <table class="table table-striped table-hover table-bordered table-sm" id="table_fichier" style="width:100% !important; ">
        <thead style="background-color:#28a745; color:white">
            <tr style="height:50px">
                <th data-orderable="false" data-searchable="false" style="width:40px"><input type="checkbox" id="select_all" class="form-control"></th>
                <th scope="col" class="text-center">NOM</th>
                <th scope="col" class="text-center">TAILLE</th>
                <th scope="col" class="text-center">DATE MODIFICATION</th>
                <th scope="col" class="text-center" data-orderable="false">TÉLÉCHARGER</th>
                <th>RANG</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

@if($peut_modifier)
<div class="zone_suppression">
    <button type="button" class="btn btn-danger" id="supprimer_fichier" disabled><i class="fas fa-trash-alt"></i> Supprimer la sélection (<span id="nb_selection">0</span>)</button>
</div>
@endif

<script>
$(function() { // Dom ready
    $('title').text("GESTION DES FICHIERS - SMART CENTRAL");

    // Arborescence complète de telechargement_client (chaque élément connaît son dossier parent).
    // Elle est chargée avec la page puis rechargée seulement après un ajout, une suppression ou « Rafraichir » :
    // changer de dossier est donc instantané.
    var arborescence = @json($arborescence);
    var dossier_courant = '';

    function echapper(texte) {
        return $('<div>').text(texte).html();
    }

    function taille_lisible(octets) {
        if (octets === null) return '';
        var unites = ['o', 'Ko', 'Mo', 'Go'];
        var i = 0;
        while (octets >= 1024 && i < unites.length - 1) { octets /= 1024; i++; }
        return (i === 0 ? octets : octets.toFixed(1)) + ' ' + unites[i];
    }

    function afficher_message(message, erreur) {
        var bloc = erreur ? $('#message_base_erreur') : $('#message');
        bloc.html(message).show();
        setTimeout(function() { bloc.hide(); }, 4000);
    }

    function parent_de(chemin) {
        var i = chemin.lastIndexOf('/');
        return i < 0 ? '' : chemin.substring(0, i);
    }

    function dossier_existe(chemin) {
        return chemin === '' || arborescence.some(function(e) { return e.type === 'dossier' && e.chemin === chemin; });
    }

    function nb_enfants(chemin) {
        return arborescence.filter(function(e) { return e.parent === chemin; }).length;
    }

    // Le dossier courant est gardé dans l'adresse (#bl/...) : les boutons Précédent / Suivant du navigateur
    // et l'actualisation de la page (F5) restent dans le même dossier.
    function dossier_depuis_adresse() {
        try {
            return decodeURIComponent(window.location.hash.replace(/^#/, ''));
        } catch (e) {
            return '';
        }
    }

    function aller(chemin) {
        if (chemin === dossier_courant) return;
        window.location.hash = chemin === '' ? '' : encodeURI(chemin);
    }

    // Fil d'ariane : telechargement_client / sous-dossier / ... (on ne peut pas remonter au-dessus)
    function maj_fil_ariane() {
        var parties = dossier_courant === '' ? [] : dossier_courant.split('/');
        var html = '';
        var cumul = '';

        if (parties.length === 0) {
            html += '<li class="breadcrumb-item active"><i class="fas fa-home"></i> telechargement_client</li>';
        } else {
            html += '<li class="breadcrumb-item"><a href="#" class="lien_dossier" data-chemin=""><i class="fas fa-home"></i> telechargement_client</a></li>';
        }
        parties.forEach(function(partie, index) {
            cumul = cumul === '' ? partie : cumul + '/' + partie;
            if (index === parties.length - 1) {
                html += '<li class="breadcrumb-item active">' + echapper(partie) + '</li>';
            } else {
                html += '<li class="breadcrumb-item"><a href="#" class="lien_dossier" data-chemin="' + echapper(cumul) + '">' + echapper(partie) + '</a></li>';
            }
        });
        $('#fil_ariane').html(html);
        $('#btn_retour, #btn_accueil').prop('disabled', dossier_courant === '');
    }

    var table_fichier = $('#table_fichier').DataTable({
        autoWidth: true,
        paging: true,
        searching: true,
        iDisplayLength: '50',
        data: [],
        columns: [
            {
                data: null,
                render: function(row) {
                    if (row.type !== 'fichier') return '';
                    return '<input type="checkbox" class="form-control fichier_a_selecter" value="' + echapper(row.chemin) + '">';
                }
            },
            {
                data: 'nom',
                render: function(nom, type, row) {
                    if (type !== 'display') return nom;
                    if (row.type === 'parent') {
                        return '<i class="fas fa-level-up-alt"></i> <b>..</b> <small class="text-muted">(dossier parent)</small>';
                    }
                    if (row.type === 'dossier') {
                        return '<i class="fas fa-folder"></i> <b>' + echapper(nom) + '</b>';
                    }
                    return '<i class="fas fa-file"></i> ' + echapper(nom);
                }
            },
            {
                data: 'taille',
                render: function(taille, type, row) {
                    if (type !== 'display') return taille === null ? -1 : taille;
                    if (row.type === 'dossier') {
                        var n = nb_enfants(row.chemin);
                        return '<span class="text-muted">' + (n === 0 ? 'vide' : n + ' élément(s)') + '</span>';
                    }
                    return taille_lisible(taille);
                }
            },
            { data: 'date', defaultContent: '' },
            {
                data: null,
                render: function(row) {
                    if (row.type !== 'fichier') return '';
                    return '<a class="btn btn-sm btn-success" href="{{url('telechargement/telecharger')}}?fichier=' + encodeURIComponent(row.chemin) + '" title="Télécharger"><i class="fas fa-download"></i></a>';
                }
            },
            {
                // Rang fixe : dossier parent, puis dossiers, puis fichiers (quel que soit le tri choisi)
                data: null,
                visible: false,
                searchable: false,
                render: function(row) {
                    return row.type === 'parent' ? 0 : (row.type === 'dossier' ? 1 : 2);
                }
            },
        ],
        columnDefs: [
            { "className": "text-center align-middle", "targets": [0, 2, 3, 4] },
            { "className": "align-middle nom_element", "targets": [1] },
        ],
        orderFixed: { pre: [5, 'asc'] },
        order: [[1, 'asc']],
        language: { emptyTable: 'Ce dossier est vide' },
        createdRow: function(tr, row) {
            if (row.type !== 'fichier') {
                $(tr).addClass('ligne_dossier').attr('title', row.type === 'parent' ? 'Revenir au dossier parent' : 'Ouvrir le dossier');
            }
        },
    });

    // Affiche le contenu du dossier courant à partir de l'arborescence déjà chargée (aucun appel serveur)
    function afficher() {
        dossier_courant = dossier_depuis_adresse();
        if (!dossier_existe(dossier_courant)) {
            // Dossier supprimé ou adresse invalide : on remonte jusqu'au premier dossier existant
            while (dossier_courant !== '' && !dossier_existe(dossier_courant)) {
                dossier_courant = parent_de(dossier_courant);
            }
            history.replaceState(null, '', dossier_courant === ''
                ? window.location.pathname + window.location.search
                : '#' + encodeURI(dossier_courant));
        }

        var lignes = arborescence.filter(function(e) { return e.parent === dossier_courant; });
        $('#nb_elements').text(lignes.length);
        if (dossier_courant !== '') {
            lignes.unshift({ type: 'parent', nom: '..', chemin: parent_de(dossier_courant), taille: null, date: '' });
        }

        $('#select_all').prop('checked', false);
        table_fichier.search('').clear().rows.add(lignes).draw();
        maj_fil_ariane();
        maj_zone_upload();
        maj_selection();
    }

    // Le téléversement n'est possible que dans un dossier, jamais à la racine telechargement_client
    function maj_zone_upload() {
        var racine = dossier_courant === '';
        $('#zone_upload').toggleClass('racine', racine);
        $('#form_ajout_fichier').toggleClass('desactive', racine);
        $('#fichiers, #ajouter_fichier').prop('disabled', racine);
        $('#destination_upload').html(racine
            ? '<i class="fas fa-exclamation-triangle"></i> Pour téléverser, ouvrez d\'abord un dossier dans le tableau ci-dessous (bl, facture, formule, commande, devis ou autres).'
            : '<i class="fas fa-upload"></i> Les fichiers seront téléversés dans : <b><i class="fas fa-folder"></i> ' + echapper(dossier_courant) + '</b>');
    }

    // Nombre de fichiers cochés, affiché sur le bouton Supprimer (désactivé s'il n'y en a aucun)
    function maj_selection() {
        var nb = $('.fichier_a_selecter:checked', table_fichier.rows().nodes()).length;
        $('#nb_selection').text(nb);
        $('#supprimer_fichier').prop('disabled', nb === 0);
    }

    // Recharge l'arborescence depuis le serveur (après un ajout, une suppression ou sur « Rafraichir »)
    function recharger() {
        var icone = $('#rafraichir i').addClass('fa-spin');
        $('#rafraichir').prop('disabled', true);

        return $.getJSON('{{url('telechargement/liste')}}')
            .done(function(json) {
                arborescence = json.data;
                var page = table_fichier.page();
                afficher();
                table_fichier.page(Math.min(page, Math.max(table_fichier.page.info().pages - 1, 0))).draw(false);
            })
            .fail(function() {
                afficher_message('Impossible de recharger la liste des fichiers.', true);
            })
            .always(function() {
                icone.removeClass('fa-spin');
                $('#rafraichir').prop('disabled', false);
            });
    }

    $(window).on('hashchange', afficher);
    afficher();

    // Navigation : clic sur une ligne de dossier, fil d'ariane, boutons Retour / Accueil, touche Retour arrière
    $('#table_fichier tbody').on('click', 'tr.ligne_dossier', function(e) {
        var row = table_fichier.row(this).data();
        if (row) aller(row.chemin);
    });

    $(document).on('click', '.lien_dossier', function(e) {
        e.preventDefault();
        aller($(this).data('chemin').toString());
    });

    $('#btn_retour').click(function() {
        aller(parent_de(dossier_courant));
    });

    $('#btn_accueil').click(function() {
        aller('');
    });

    $(document).on('keydown', function(e) {
        if (e.key === 'Backspace' && !$(e.target).is('input, textarea, select, [contenteditable]') && dossier_courant !== '') {
            e.preventDefault();
            aller(parent_de(dossier_courant));
        }
    });

    $('#rafraichir').click(recharger);

    $('#select_all').on('click', function() {
        var rows = table_fichier.rows({ 'search': 'applied' }).nodes();
        $('input.fichier_a_selecter', rows).prop('checked', this.checked);
        maj_selection();
    });

    $('#table_fichier tbody').on('change', 'input.fichier_a_selecter', maj_selection);

    // Aide repliable ; le choix est mémorisé dans le navigateur
    function afficher_aide(visible) {
        $('#etapes_aide').toggle(visible);
        $('#texte_bascule_aide').text(visible ? 'Masquer' : 'Afficher');
    }
    var aide_visible = true;
    try { aide_visible = localStorage.getItem('telechargement_aide_masquee') !== '1'; } catch (e) {}
    afficher_aide(aide_visible);
    $('#titre_aide').click(function() {
        aide_visible = !aide_visible;
        afficher_aide(aide_visible);
        try { localStorage.setItem('telechargement_aide_masquee', aide_visible ? '0' : '1'); } catch (e) {}
    });

    // Affiche le nom du (ou des) fichier(s) choisi(s) à côté du bouton Parcourir
    function maj_nom_fichiers() {
        var fichiers = $('#fichiers')[0] ? $('#fichiers')[0].files : [];
        var texte = 'Aucun fichier sélectionné';
        if (fichiers.length === 1) {
            texte = fichiers[0].name;
        } else if (fichiers.length > 1) {
            texte = fichiers.length + ' fichiers sélectionnés';
        }
        $('.nom_fichiers').text(texte).attr('title', $.map(fichiers, function(f) { return f.name; }).join('\n')).toggleClass('choisi', fichiers.length > 0);
    }

    $('#fichiers').on('change', maj_nom_fichiers);

    $('#form_ajout_fichier').submit(function(e) {
        e.preventDefault();

        if (dossier_courant === '') {
            alert('Ouvrez d\'abord un dossier pour y téléverser vos fichiers');
            return;
        }
        if ($('#fichiers')[0].files.length === 0) {
            alert('Choisir au minimum un fichier');
            return;
        }

        var donnees = new FormData(this);
        donnees.append('dossier', dossier_courant);
        donnees.append('_token', '{{ csrf_token() }}');

        $('.ring').show();
        $('#filtre_loading').show();

        $.ajax({
            url: '{{url('telechargement/ajouter')}}',
            type: 'POST',
            data: donnees,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(retour) {
                afficher_message(retour.message, !retour.success);
                $('#fichiers').val('');
                maj_nom_fichiers();
                recharger();
            },
            error: function(jqxhr) {
                var message = 'Erreur lors de l\'ajout du fichier.';
                if (jqxhr.status === 413) {
                    message = 'Fichier trop volumineux pour le serveur.';
                } else if (jqxhr.responseJSON && jqxhr.responseJSON.message) {
                    message = echapper(jqxhr.responseJSON.message);
                }
                afficher_message(message, true);
            },
            complete: function() {
                $('.ring').hide();
                $('#filtre_loading').hide();
            }
        });
    });

    $('#supprimer_fichier').click(function(e) {
        e.preventDefault();

        var fichiers = [];
        $('.fichier_a_selecter:checked', table_fichier.rows().nodes()).each(function() {
            fichiers.push($(this).val());
        });

        if (fichiers.length === 0) {
            alert('Choisir au minimum un fichier');
            return;
        }
        if (!confirm('Supprimer définitivement ' + fichiers.length + ' fichier(s) ?')) {
            return;
        }

        function supprimer(confirme) {
            $.post('{{url('telechargement/supprimer')}}', { fichiers: fichiers, confirme: confirme ? 1 : 0, _token: '{{ csrf_token() }}' }, function(retour) {
                // Fichiers utilisés comme pièces jointes (devis...) : le serveur demande une seconde confirmation
                if (retour.confirmation) {
                    if (confirm(retour.message)) {
                        supprimer(true);
                    }
                    return;
                }
                afficher_message(retour.message, !retour.success);
                recharger();
            }, 'json');
        }

        supprimer(false);
    });
});

</script>
@endsection