@extends('models')
@section('titre-page', 'Paramétrage serveur 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">
                <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">Paramétrage serveur réplication</li> 
                        </ol>
                    </nav>
                </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-2 mx-0 px-0 me-1 d-flex justify-content-end">
                            <button class="btn btn-danger btn-wave " id="btn-supp-serveur">
                                <i class='bx bx-trash'></i> Supprimer
                            </button>

                        </div>
                        <div class="col-1 mx-0 px-0">
                            <button class="btn btn-primary btn-wave " id="btn-add-serveur">
                                <i class='bx bx-plus'></i> Ajouter
                            </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="tableListServeur">
                                <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="id" data-class="text-center" class="text-center colTable">
                                            ID
                                        </th>
                                        <th data-column="nom_serveur_replica" data-class="text-start"
                                            class="text-center colTable">
                                            Nom serveur
                                        </th>
                                        <th data-column="url_serveur_replica" class="text-center colTable">
                                            Url API
                                        </th>
                                        <th data-column="Generate" data-class="text-center" class="text-center colTable">
                                            Gén. OFF
                                        </th>
                                        <th data-column="Generate_date" data-class="text-center"
                                            class="text-center colTable">
                                            Gén. OFF date
                                        </th>
                                        <th data-column="synchro" data-class="text-center" class="text-center colTable">
                                            Synchro. OFF
                                        </th>
                                        <th data-column="synchro_date" data-class="text-center"
                                            class="text-center colTable">
                                            Synchro. OFF date
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row justify-content-between">
                        <div class="col-5 align-items-center d-flex">
                            Nom du serveur :&nbsp; <span class="fw-bold" id="nomServeur"> </span>
                        </div>
                        <div class="col-4">
                            <div class="row justify-content-end">
                                <div class="col-6 mx-0 px-0 me-1 d-flex justify-content-end">
                                    <button class="btn btn-danger btn-wave " id="btn-supp-table">
                                        <i class='bx bx-trash'></i> Supprimer
                                    </button>

                                </div>
                                <div class="col-3 mx-0 px-0">
                                    <button class="btn btn-primary btn-wave w-100" id="btn-add-table">
                                        <i class='bx bx-plus'></i> Ajouter
                                    </button>

                                </div>
                            </div>
                        </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="tableListTable">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th data-orderable="false" data-column="action">
                                            <input class="form-check-input me-4" type="checkbox" id="checkAllListTable">
                                            Actions
                                        </th>
                                        <th data-column="nom_table_replica" data-class="text-start"
                                            class="text-center colTable">
                                            Tables
                                        </th>
                                        <th data-column="nom_pk_table_replica" data-class="text-start"
                                            class="text-center colTable">
                                            ID Table
                                        </th>

                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <div class="modal fade" id="modalFicheServeur" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalFicheClient">Enregistrement serveur</h6>
                    <div id="notation_statut" class="notation_st"></div>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formServeur">
                        @csrf
                        <div class="row">
                            <div class="col-xl-12 col-md-4 mb-0">
                                <p class="mb-0 text-muted">Nom du serveur</p>
                                <input type="text" class="form-control" autocomplete="off" name="nom_serveur"
                                    id="nom_serveur">
                            </div>
                            <div class="col-xl-12 col-md-4 mb-0">
                                <p class="mb-0 text-muted">Url API</p>
                                <input type="text" class="form-control" autocomplete="off" name="url_api"
                                    id="url_api">
                            </div>
                            <div class="col-xl-12 col-md-4 mb-0">
                                <p class="mb-0 text-muted">API key</p>
                                <input type="text" class="form-control" autocomplete="off" name="api_key"
                                    id="api_key">
                            </div>
                            <div class="col-xl-6 col-md-3 mb-0 pt-2">
                                <div class="border rounded w-100 mt-1 d-flex pt-2 ps-2" style="height: 40px;">
                                    <input class="form-check-input me-2" type="checkbox" name="checkGen" id="checkGen">
                                    <label class="form-check-label ellipsis" title="Selon Échéance règlement"
                                        style="cursor: pointer;" for="checkGen">
                                        Gén. OFF
                                    </label>
                                </div>
                            </div>
                            <div class="col-xl-6 col-md-3 mb-0 pt-2">
                                <div class="border rounded w-100 mt-1 d-flex pt-2 ps-2" style="height: 40px;">
                                    <input class="form-check-input me-2" type="checkbox" name="checkSynchro"
                                        id="checkSynchro">
                                    <label class="form-check-label ellipsis" title="Selon Échéance règlement"
                                        style="cursor: pointer;" for="checkSynchro">
                                        Synchro. OFF
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                        <i class='bx bxs-x-circle'></i>
                        Fermer
                    </button>
                    <button type="button" class="btn btn-success" id="btnNewServeur">
                        <i class='bx bxs-plus-circle'></i>
                        Ajouter
                    </button>
                    <button type="button" class="btn btn-warning d-none" id="btnEditServeur">
                        <i class="bx bx-edit fs-6 me-1"></i>
                        Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalListeTable" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalFicheClient">Enregistrement serveur</h6>
                    <div id="notation_statut" class="notation_st"></div>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formServeur">
                        @csrf
                        <div class="table-responsive">
                            <table class="tablehover table table-striped text-nowrap overflow-auto tablehover w-100"
                                id="tableListTableAdd">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th data-orderable="false" data-column="action" data-class="text-center">
                                            <input class="form-check-input" type="checkbox" id="checkAllTable">
                                        </th>
                                        <th data-column="nom_table" data-class="text-start" class="text-center colTable">
                                            Tables
                                        </th>
                                        <th data-column="nom_pk" data-class="text-start" class="text-center colTable">
                                            ID Table
                                        </th>

                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                        <i class='bx bxs-x-circle'></i>
                        Fermer
                    </button>
                    <button type="button" class="btn btn-success" id="btnAddTableServeur">
                        <i class='bx bxs-plus-circle'></i>
                        Ajouter
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        $(document).ready(function() {
            var tableListServeur = ""
            var idServeur = ""
            var idServeur_modif = ""
            $("#btn-add-serveur").click(function(e) {
                e.preventDefault();
                $("#modalFicheServeur").modal("show")
            });

            $("#btn-add-table").click(function(e) {
                e.preventDefault();
                if (idServeur == "") {
                    alertSwal("Veuiller choisir un serveur svp !")
                    return false
                }
                $("#modalListeTable").modal("show")
            });

            // Ajout de table au serveur
            $("#btnAddTableServeur").click(function(e) {
                e.preventDefault();

                let checkedIds = [];
                $('#tableListTableAdd tbody input.form-check-input:checked').each(function() {
                    checkedIds.push({
                        nom: $(this).data("nom_table"),
                        id: $(this).data("nom_pk")
                    });
                });

                if (checkedIds.lenght == 0) {
                    alertSwal("Aucune ligne n'a été sélectionnée !!")
                    return false
                }

                $.ajax({
                    type: "post",
                    url: "{{ route('parametre_replication.addListeTable') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        data: checkedIds,
                        id: idServeur
                    },
                    dataType: "json",
                    beforSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {
                            getListeAllTable()
                            getDataTable(idServeur)
                            completeHandler()
                            notifSuccess(response.messages)
                            return false
                        }
                        completeHandler()
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        completeHandler()
                        notifDanger(response.responseJSON.messages)
                    }
                });

            });

            $("#modalListeTable").on("shown.bs.modal", function() {
                getListeAllTable()
            })

            function getListeAllTable() { 
                $.ajax({
                    type: "get",
                    url: "{{ route('parametre_replication.listeTable') }}",
                    data: {
                        id: idServeur
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            tableListServeur = remplissageDataTable({
                                IdentifiantDuTableau: '#tableListTableAdd',
                                obj: response.data,
                                scrollY: '350px',
                                bFilter: true,
                            })
                        }
                    }
                });
             }

            $("#modalFicheServeur").on("hide.bs.modal", function() {
                $("#nom_serveur").val("")
                $("#url_api").val("")
                $("#api_key").val("")
                $("#checkGen").prop("checked", false)
                $("#checkSynchro").prop("checked", false)
                $("#btnNewServeur").removeClass("d-none")
                $("#btnEditServeur").addClass("d-none")
            })

            $("#btnNewServeur").click(function(e) {
                e.preventDefault();
                sendDataServer()
            });

            $("#btnEditServeur").click(function(e) {
                e.preventDefault();
                sendDataServer(idServeur_modif)
            });

            function sendDataServer(idserveur = null) {
                let formData = new FormData(_("formServeur"))
                if (idserveur != null) {
                    formData.append("id", idserveur)
                }
                $.ajax({
                    type: "post",
                    url: "{{ route('parametre_replication.setListeServer') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    beforSend: progressHandler(),
                    success: function(response) {
                        $("#modalFicheServeur").modal("hide")
                        getDataServer()
                        completeHandler()
                        notifSuccess(response.messages)
                        return false
                    },
                    error: function(response) {
                        completeHandler()
                        notifDanger(response.responseJSON.messages)
                    },
                });
            }

            $(document).on('dblclick', '#tableListServeur tbody tr', function() {
                var data = $('#tableListServeur').DataTable().row(this).data();
                idServeur = data.id;
                $("#nomServeur").text(data.nom_serveur_replica)
                getDataTable(idServeur)
            });

            $(document).on('click', '#deleteTableServeur', function() {
                deleteListeTable($(this).data("id"))
            });

            $(document).on('click', '#duplicateInfoServeur', function() {
                confirmAction(() =>{
                    $.ajax({
                        type: "post",
                        url: "{{route("parametre_replication.duplicateServeur")}}",
                        data: {
                            data : $(this).data("id"),
                            _token : "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        beforSend : progressHandler(),
                        success: function (response) {
                            if(response.error == false){
                                completeHandler()
                                getDataServer()
                                notifSuccess(response.messages)
                                return false
                            }
                            completeHandler()
                            notifWarning(response.messages)
                        },
                        error: function (response) {
                            completeHandler()
                            notifDanger(response.responseJSON.messages)
                        }
                    });
                }, "Voulez vous dupliquer ce serveur ?", "les tables associés au serveur seront aussi dupliquées !")
            });

            $(document).on('click', '#btn-supp-serveur', function() {
                let checkedIds = [];
                $('#tableListServeur tbody input#checkServTable:checked').each(function() {
                    checkedIds.push($(this).data("id"));
                });

                if (checkedIds.length == 0) {
                    alertSwal("Aucune ligne sélectionnée !")
                    return false
                }

                supprimerServeur(checkedIds)
            });

            $(document).on('click', '#btn-supp-table', function() {
                let checkedIds = [];
                $('#tableListTable tbody input#checkListTable:checked').each(function() {
                    checkedIds.push($(this).data("id"));
                });

                if (checkedIds.length == 0) {
                    alertSwal("Aucune ligne sélectionnée !")
                    return false
                }

                deleteListeTable(checkedIds)
            });

            _('checkAllServTable').addEventListener('click', function() {
                let value = this.checked
                let lignes = $('#tableListServeur').DataTable().rows().nodes()
                $(lignes).find('#checkServTable').prop('checked', value)
            })

            _('checkAllListTable').addEventListener('click', function() {
                let value = this.checked
                let lignes = $('#tableListTable').DataTable().rows().nodes()
                $(lignes).find('#checkListTable').prop('checked', value)
            })

            _('checkAllTable').addEventListener('click', function() {
                let value = this.checked
                let lignes = $('#tableListTableAdd').DataTable().rows().nodes()
                $(lignes).find('#checkTable').prop('checked', value)
            })

            $(document).on('click', '#checkServTable', function() {
                if (_('checkAllServTable').checked == true) {
                    _('checkAllServTable').checked = false
                }
            })

            $(document).on('click', '#checkListTable', function() {
                if (_('checkAllListTable').checked == true) {
                    _('checkAllListTable').checked = false
                }
            })
            $(document).on('click', '#checkTable', function() {
                if (_('checkAllTable').checked == true) {
                    _('checkAllTable').checked = false
                }
            })

            function deleteListeTable(id) {
                confirmAction(() => {
                        $.ajax({
                            type: "delete",
                            url: "{{ route('parametre_replication.deleteListeTable') }}",
                            data: {
                                id: id,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            beforSend: progressHandler(),
                            success: function(response) {
                                if (response.error == false) {
                                    getDataTable(idServeur)
                                    completeHandler()
                                    return false
                                }
                                completeHandler()
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                completeHandler()
                                notifDanger(response.responseJSON.messages)
                            }
                        });
                    },
                    "Voulez-vous supprimer la/les ligne(s) ?",
                    "")
            }

            $(document).on('click', '#deleteinfoServeur', function() {
                supprimerServeur($(this).data("id"))
            });

            function supprimerServeur(id) {
                confirmAction(() => {
                        $.ajax({
                            type: "delete",
                            url: "{{ route('parametre_replication.deleteListeServer') }}",
                            data: {
                                id: id,
                                _token: "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            beforSend: progressHandler(),
                            success: function(response) {
                                if (response.error == false) {
                                    getDataServer()
                                    getDataTable(idServeur)
                                    completeHandler()
                                    return false
                                }
                                completeHandler()
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                notifDanger(response.responseJSON.messages)
                            }
                        });
                    },
                    "Voulez-vous supprimer la/les ligne(s) ?",
                    "tous les fichiers ratachés au serveur seront suprrimés !")
            }

            $(document).on('click', '#editinfoServeur', function() {
                idServeur_modif = $(this).data("id")
                $.ajax({
                    type: "get",
                    url: "{{ route('parametre_replication.getListeServerById') }}",
                    data: {
                        id: idServeur_modif,
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $("#nom_serveur").val(response.data.nom_serveur_replica)
                            $("#url_api").val(response.data.url_serveur_replica)
                            $("#api_key").val(response.data.api_key_replica)
                            $("#checkGen").prop("checked", response.data
                                .generation_jnl_suspendue)
                            $("#checkSynchro").prop("checked", response.data.replica_suspendue)
                            $("#btnNewServeur").addClass("d-none")
                            $("#btnEditServeur").removeClass("d-none")
                            $("#modalFicheServeur").modal("show")
                            return false
                        }
                        completeHandler()
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        notifDanger(response.responseJSON.messages)
                    }
                });

            });

            getDataServer()

            function getDataServer() {
                $.ajax({
                    type: "get",
                    url: "{{ route('parametre_replication.getListeServer') }}",
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            tableListServeur = remplissageDataTable({
                                IdentifiantDuTableau: '#tableListServeur',
                                obj: response.data,
                                // scrollY: '250px',
                                // bFilter: false,
                            })
                        }

                    }
                });
            }

            $(document).on("click", "#showTable", function(e) {
                e.preventDefault();
                getDataTable($(this).data("id"))
            });

            function getDataTable(id) {
                $.ajax({
                    type: "get",
                    data: {
                        id: id
                    },
                    url: "{{ route('parametre_replication.getlisteTable') }}",
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);

                        if (response.error == false) {
                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableListTable',
                                obj: response.data,
                                // scrollY: '250px',
                                bFilter: true,
                            })
                        }

                    }
                });
            }
        });
    </script>
@endsection