@extends('models')
@section('titre-page', 'Journal réplication')
@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 réplication</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-8 mx-0">
                    <div class="row">
                        <div class="col-12 ">
                            <label type="button" class="btn btn-secondary-light btn-wave d-flex" >
                                Nbre ligne : &nbsp; <span id="nbreLigne"></span>
                            </label>
                        </div>
                    </div>
                </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">
                        <div class="col-xl-3">
                            <p class="mb-0 text-muted">Type de période</p>
                            <select class="form-select text-uppercase" name="type_periode_replication"
                                id="type_periode_replication">
                                <option class="text-uppercase" value="1">Date Opération</option>
                                <option class="text-uppercase" value="2">Date Réplication</option>
                            </select>
                        </div>
                        <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">
                            <p class="mb-0 text-muted">Serveur</p>
                            <select class="form-select" name="serveur_replication" id="serveur_replication">
                            </select>
                        </div>
                        <div class="col-xl-3">
                            <p class="mb-0 text-muted">Fichier</p>
                            <select class="form-select" name="fichier_replication" id="fichier_replication">
                            </select>
                        </div>
                        <div class="col-xl-2">
                            <p class="mb-0 text-muted">Opération</p>
                            <select class="form-select" name="operation_replication" id="operation_replication">

                                <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-2">
                            <p class="mb-0 text-muted">Statut</p>
                            <select class="form-select" name="statut_replication" id="statut_replication">

                                <option value="">TOUS</option>
                                <option value="false">ATTENTE</option>
                                <option value="true">REPLIQUE</option>
                            </select>
                        </div>
                        <div class="col-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>
                <div class="card-body">
                    <div class="row">

                        <div class="table-responsive">
                            <table class="tablehover table table-striped text-nowrap overflow-auto tablehover w-100"
                                id="tableJournal">
                                <thead class="table-header-primary">
                                    <tr>
                                        {{-- <th data-orderable="false" data-column="action">
                                            <input class="form-check-input ms-1 me-3" type="checkbox"
                                                id="checkAllServTable">
                                            Actions
                                        </th> --}}
                                        <th data-column="date_operation_replica_format" data-class="text-center"
                                            class="text-center colTable">
                                            Date opération
                                        </th>
                                        <th data-column="nom_serveur_replica" data-class="text-start"
                                            class="text-center colTable">
                                            Serveur
                                        </th>
                                        <th data-column="operation" class="text-center colTable" data-class="text-center">
                                            Opération
                                        </th>
                                        <th data-column="nom_table_replica" data-class="text-start"
                                            class="text-center colTable">
                                            Fichier
                                        </th>
                                        <th data-column="valeur_pk_replica" data-class="text-start"
                                            class="text-center colTable">
                                            Identifiant
                                        </th>
                                        <th data-column="date_replica_format" data-class="text-center"
                                            class="text-center colTable">
                                            Date réplication
                                        </th>
                                        <th data-column="statut" data-class="text-center" class="text-center colTable">
                                            Statut
                                        </th>
                                        <th data-column="commentaire_replica" data-class="text-start"
                                            class="text-center colTable">
                                            Commentaire
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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


            $("#btn-search").click(function(e) {
                e.preventDefault();

                getJournal(
                    $("#type_periode_replication").val(),
                    $("#filtrePeriode").val(),
                    $("#operation_replication").val(),
                    $("#statut_replication").val(),
                    $("#serveur_replication").val(),
                    $("#fichier_replication").val(),
                )
            });

            await getDataServer()
            await getListeTable()

            getJournal(
                $("#type_periode_replication").val(),
                $("#filtrePeriode").val(),
                $("#operation_replication").val(),
                $("#statut_replication").val(),
                $("#serveur_replication").val(),
                $("#fichier_replication").val(),
            )

            function getJournal(periode, filtrePeriode, operation, statut, serveur, fichier) {
                $.ajax({
                    type: "get",
                    url: "{{ route('journal_replication.getData') }}",
                    data: {
                        periode: periode,
                        filtrePeriode: filtrePeriode,
                        operation: operation,
                        statut: statut,
                        serveur: serveur,
                        fichier: fichier,
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {
                            tableListServeur = remplissageDataTable({
                                IdentifiantDuTableau: '#tableJournal',
                                obj: response.data,
                                pageLength : 100
                                // scrollY: '250px',
                                // bFilter: false,
                            })

                            tableListServeur.on('draw.dt', function() {
                                initPopovers();
                            });

                            $("#nbreLigne").text(formatNumberPerf(response.data.length))

                            completeHandler()
                        }

                    },
                    error: function(response) {
                        completeHandler()
                    },
                });
            }

            // Fonction d’initialisation Bootstrap 5
            function initPopovers() {
                const popoverTriggerList = [].slice.call(document.querySelectorAll(
                    '[data-bs-toggle="popover"]'));
                popoverTriggerList.map(function(el) {
                    return new bootstrap.Popover(el);
                });
           
                // Supprime les anciens popovers (évite doublons)
                $('[data-bs-toggle="popover"]').popover('dispose');

                // Réactive les popovers avec le déclenchement au survol
                $('[data-bs-toggle="popover"]').popover({
                    trigger: 'hover',
                    placement: 'top', // ou 'bottom', 'left', 'right'
                    html: true // si ton contenu contient du HTML
                });
            }

            function getDataServer() {
                $.ajax({
                    type: "get",
                    url: "{{ route('parametre_replication.getListeServer') }}",
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {

                            $("#serveur_replication").html("")
                            $("#serveur_replication").append("<option value=''>TOUS</option>")
                            $.each(response.data, function(index, value) {
                                $("#serveur_replication").append("<option value='" + value
                                    .idreplication_serveur + "'>" + value
                                    .nom_serveur_replica + "</option>")
                            });
                            $("#serveur_replication").select2()

                        }

                    }
                });
            }

            function getListeTable() {
                $.ajax({
                    type: "get",
                    url: "{{ route('parametre_replication.listeTable') }}",
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $("#fichier_replication").html("")
                            $("#fichier_replication").append("<option value=''>TOUS</option>")
                            $.each(response.data, function(index, value) {

                                $("#fichier_replication").append("<option value='" + value
                                    .nom_table + "'>" + value.nom_table + "</option>")
                            });
                            $("#fichier_replication").select2()
                        }
                    }
                });
            }

        });
    </script>
@endsection