@extends('models')
@section('titre-page', 'Journal des modifications')
@section('content-body')

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <div class="col-xl-12 col-12">
            <div class="row mb-3 justify-content-between">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Administration système</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Journal des modifications</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-8 mx-0">
                    <label type="button" class="btn btn-secondary-light btn-wave d-flex w-100 justify-content-center">
                        Nbre ligne : &nbsp; <span id="nbreLigne">0</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row justify-content-end w-100">
                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Période &nbsp;:</p>
                            <input type="text" class="form-control text-center dateperiode" name="filtrePeriode"
                                id="filtrePeriode" />
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Table (fichier) :</p>
                            <select class="form-select" name="tableJmod" id="tableJmod">
                                <option value="">TOUTES</option>
                            </select>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Utilisateur :</p>
                            <select class="form-select" name="utilisateurJmod" id="utilisateurJmod">
                                <option value="">TOUS</option>
                            </select>
                        </div>
                        <div class="col-xl-2 col-lg-2 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Opération :</p>
                            <select class="form-select" name="operationJmod" id="operationJmod">
                                <option value="">TOUTES</option>
                                <option value="I">AJOUT</option>
                                <option value="U">MODIFICATION</option>
                                <option value="D">SUPPRESSION</option>
                            </select>
                        </div>
                        <div class="col-xl-1 col-md-1 mt-3 mx-0">
                            <button class="btn btn-primary btn-wave w-100" id="btn-search">
                                <i class='bx bx-search-alt'></i> filtre
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <small class="text-muted" id="infoTronque"></small>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100" id="tableJournalModif">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="dateFormat" data-class="text-center" class="text-center colTable">Date</th>
                                    <th data-column="operation" data-class="text-center" class="text-center colTable">Opération</th>
                                    <th data-column="NomTable" data-class="text-start" class="text-center colTable">Table (fichier)</th>
                                    <th data-column="identifiant" data-class="text-start" class="text-center colTable">Identifiant</th>
                                    <th data-column="utilisateur" data-class="text-start" class="text-center colTable">Utilisateur</th>
                                    <th data-column="Ip" data-class="text-center" class="text-center colTable">IP</th>
                                    <th data-column="nbChamps" data-class="text-center" class="text-center colTable">Champs modifiés</th>
                                    <th data-column="action" data-orderable="false" data-class="text-center" class="text-center colTable">Détail</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Ligne dépliée (accordéon) */
        tr.diff-ouvert > td { background: #eef4ff !important; }
        .btn-toggle-diff i { transition: transform .15s ease; }
        tr.diff-ouvert .btn-toggle-diff i { transform: rotate(180deg); }

        /* Panneau de détail (avant / après) */
        .diff-child { padding: .8rem; background: #fbfcfe; border: 1px solid #e6e9f0; border-radius: .6rem; }
        .diff-child .diff-meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; font-size: .8rem; margin-bottom: .7rem; }
        .diff-child .diff-meta .chip { background: #eef1f6; color: #3a4a63; border-radius: 1rem; padding: .18rem .7rem; }
        .diff-child .diff-meta .chip b { font-weight: 600; color: #1f2a44; }
        .diff-child .diff-inchanges { font-size: .8rem; margin-bottom: .55rem; }

        .diff-child table.tableDiff { width: 100%; margin-bottom: 0; background: transparent; }
        .diff-child table.tableDiff thead th { background: #eef1f6; color: #33415c; font-weight: 600; border-color: #e6e9f0; }
        .diff-child table.tableDiff td, .diff-child table.tableDiff th { white-space: normal; word-break: break-word; vertical-align: top; border-color: #eceff4; padding: .4rem .6rem; }
        .diff-child table.tableDiff tr.ligne-modifiee td { background: #f3f8ff; }
        .diff-child table.tableDiff tr.ligne-modifiee td:first-child { box-shadow: inset 3px 0 0 #4c8dff; }
        .diff-child .col-champ { font-weight: 600; color: #33415c; }
        .diff-child .val-avant { color: #8a94a6; text-decoration: line-through; text-decoration-color: #cfd5e2; }
        .diff-child .val-apres { color: #127a3e; font-weight: 500; }
        .diff-child .champ-inchange { display: none; }
        .diff-child .champ-inchange .val-avant { color: #6c757d; text-decoration: none; }
        .diff-child .champ-inchange .val-apres { color: #495057; font-weight: 400; }
        .diff-child.montrer-inchanges .champ-inchange { display: table-row; }
    </style>

@endsection
@section('script')
    <script>
        $(document).ready(function() {

            var tableJournalModif;
            var detailCache = {};

            dateRangeInput('#filtrePeriode', true, "DD/MM/YYYY HH:mm")

            chargerTables();
            chargerUtilisateurs();
            getJournal();

            $("#btn-search").click(function(e) {
                e.preventDefault();
                detailCache = {};
                getJournal();
            });

            function getJournal() {
                $.ajax({
                    type: "get",
                    url: "{{ route('journal_modification.getData') }}",
                    data: {
                        filtrePeriode: $("#filtrePeriode").val(),
                        table:         $("#tableJmod").val(),
                        utilisateur:   $("#utilisateurJmod").val(),
                        operation:     $("#operationJmod").val(),
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {
                            tableJournalModif = remplissageDataTable({
                                IdentifiantDuTableau: '#tableJournalModif',
                                obj: response.data,
                                pageLength: 100,
                                order: []
                            })
                            $("#nbreLigne").text(formatNumberPerf(response.data.length))
                            _('infoTronque').innerHTML = response.tronque
                                ? '⚠️ Affichage limité aux ' + formatNumberPerf(response.max) + ' opérations les plus récentes de la période. Affinez les filtres.'
                                : ''
                            completeHandler()
                        } else {
                            completeHandler()
                            notifError(response.messages)
                        }
                    },
                    error: function(response) {
                        completeHandler()
                        notifError("Erreur lors du chargement du journal")
                    },
                });
            }

            // ----- Accordéon : dépliage/repliage animé du détail sous la ligne -----
            const DUREE = 200;

            function ouvrirDetail(row, tr, rep) {
                row.child(construireDiff(rep)).show()
                tr.addClass('diff-ouvert')
                // Le child row est inséré instantanément par DataTables : on anime son contenu.
                $(row.child()).find('.diff-child').hide().stop(true, true).slideDown(DUREE)
            }

            $(document).on('click', '#tableJournalModif .btn-toggle-diff', function() {
                let btn = $(this)
                let id  = btn.attr('data-id')
                let tr  = btn.closest('tr')
                let row = tableJournalModif.row(tr)

                // Repli animé
                if (row.child.isShown()) {
                    $(row.child()).find('.diff-child').stop(true, true).slideUp(DUREE, function() {
                        row.child.hide()
                        tr.removeClass('diff-ouvert')   // fond + chevron reviennent en fin d'animation
                    })
                    return
                }

                // Dépli animé (depuis le cache si dispo)
                if (detailCache[id]) { ouvrirDetail(row, tr, detailCache[id]); return }

                $.ajax({
                    type: "get",
                    url: "{{ route('journal_modification.getDetail') }}",
                    data: { id: id },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        completeHandler()
                        if (response.error == true) { notifError(response.messages); return }
                        detailCache[id] = response
                        ouvrirDetail(row, tr, response)
                    },
                    error: function() { completeHandler(); notifError("Erreur lors du chargement du détail") }
                })
            });

            // Afficher / masquer les champs inchangés (par ligne dépliée)
            $(document).on('change', '#tableJournalModif .chk-inchanges', function() {
                $(this).closest('.diff-child').toggleClass('montrer-inchanges', $(this).is(':checked'))
            });

            function construireDiff(rep) {
                let m = rep.meta
                let meta = '<div class="diff-meta">'
                    + m.operationBadge
                    + '<span class="chip"><span class="text-muted">Table :</span> <b>' + echapper(m.table) + '</b></span>'
                    + '<span class="chip"><span class="text-muted">Enreg. :</span> <b>' + echapper(m.identifiant) + '</b></span>'
                    + '<span class="chip"><span class="text-muted">Date :</span> <b>' + echapper(m.date) + '</b></span>'
                    + '<span class="chip"><span class="text-muted">Par :</span> <b>' + echapper(m.utilisateur) + '</b>'
                    + (m.utilisateurBD ? ' <span class="text-muted">(BD: ' + echapper(m.utilisateurBD) + ')</span>' : '') + '</span>'
                    + (m.ip ? '<span class="chip"><span class="text-muted">IP :</span> ' + echapper(m.ip) + '</span>' : '')
                    + '</div>'

                let nbInchanges = rep.lignes.filter(l => !l.modifie).length
                let toggle = (rep.type === 'U' && nbInchanges > 0)
                    ? '<div class="form-check form-switch diff-inchanges"><input class="form-check-input chk-inchanges" type="checkbox">'
                      + '<label class="form-check-label">Afficher les ' + nbInchanges + ' champ(s) inchangé(s)</label></div>'
                    : ''

                let corps = ''
                $.each(rep.lignes, function(i, l) {
                    let cls = l.modifie ? 'ligne-modifiee' : 'champ-inchange'
                    corps += '<tr class="' + cls + '">'
                        + '<td class="col-champ">' + echapper(l.colonne) + '</td>'
                        + '<td class="val-avant">' + echapper(l.avant) + '</td>'
                        + '<td class="val-apres">' + echapper(l.apres) + '</td>'
                        + '</tr>'
                })
                if (corps === '') corps = '<tr><td colspan="3" class="text-center text-muted">Aucun champ</td></tr>'

                return '<div class="diff-child">' + meta + toggle
                    + '<table class="table table-bordered table-sm text-nowrap tableDiff">'
                    + '<thead><tr><th class="text-start" style="width:26%">Champ</th><th class="text-start" style="width:37%">Avant</th><th class="text-start" style="width:37%">Après</th></tr></thead>'
                    + '<tbody>' + corps + '</tbody></table></div>'
            }

            function chargerTables() {
                $.ajax({
                    type: "get",
                    url: "{{ route('journal_modification.getListeTables') }}",
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $("#tableJmod").html("<option value=''>TOUTES</option>")
                            $.each(response.data, function(i, t) {
                                $("#tableJmod").append("<option value='" + t + "'>" + t + "</option>")
                            })
                            $("#tableJmod").select2()
                        }
                    }
                });
            }

            function chargerUtilisateurs() {
                $.ajax({
                    type: "get",
                    url: "{{ route('journal_modification.getListeUtilisateurs') }}",
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $("#utilisateurJmod").html("<option value=''>TOUS</option>")
                            $.each(response.data, function(i, u) {
                                $("#utilisateurJmod").append("<option value='" + u.id + "'>" + u.nom + "</option>")
                            })
                            $("#utilisateurJmod").select2()
                        }
                    }
                });
            }

            function echapper(v) {
                if (v === null || v === undefined) return ''
                return $('<div>').text(v).html()
            }
        });
    </script>
@endsection