@extends('models')
@section('titre-page', 'Autres paramètres')
@section('content-body')
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb ">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-2">
                <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);">Adminstration</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Autres paramètres</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-5 col-md-8">

                    {{-- <button class="btn btn-primary" id="verifycode">check</button> --}}
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="owl-carousel owl-theme owl-drag">
                <div>
                    <div class="d-flex flex-column align-items-center justify-content-center" id="btnObjectifagence">
                        <div class="lh-1">
                            <span class="avatar avatar-md avatar-rounded bg-warning shadow-sm">
                                <i class="bi bi-grid-3x3-gap"></i>
                            </span>
                        </div>
                        <div class="flex-fill">
                            <p class="text-muted text-center mb-0">Objectif agence</p>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="d-flex flex-column align-items-center justify-content-center" id="btnParamVm">
                        <div class="lh-1">
                            <span class="avatar avatar-md avatar-rounded bg-warning shadow-sm">
                                <i class="bi bi-grid-3x3-gap"></i>
                            </span>
                        </div>
                        <div class="flex-fill">
                            <p class="text-muted text-center mb-0">Param.VM,seuils</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    {{-- MODAL OBJECTIF AGENCE --}}
    <div class="modal fade modalObjectifAgence" data-bs-focus="false" id="modalObjectifAgence" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Objectifs annuels par agence</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row g-2">
                        <div class="col-xl-3">
                            <p class="mb-0 text-muted">Agence :</p>
                            <select class="Pselect2Modal form-select AgenceListSelect" id="AgenceListSelect"></select>
                        </div>
                        <div class="col-xl-3">
                            <p class="mb-0 text-muted">Année :</p>
                            <input type="text" id="annee" class="form-control text-center" />
                        </div>
                        <div class="col-xl-4">
                            <p class="mb-0 text-muted">Montant :</p>
                            <input type="text" id="montant" class="form-control text-center" />
                            <input type="hidden" id="hiddenID" value="0" class="form-control" />

                        </div>
                        <div class="col-xl-2">

                            <div class="d-flex">
                                <button class="btn btn-primary mt-3" id="btnAjoutObjectifAgence">Valider</button>
                                {{-- <button class="btn btn-primary"></button> --}}
                            </div>

                        </div>
                    </div>


                    <div class="table-responsive mt-5">

                        <table class="tablehover table table-striped w-100" id="tableObjectifAgence">
                            <thead class="table-header-primary">

                                <tr>
                                    <th>Action</th>
                                    <th>Agence</th>
                                    <th>Année</th>
                                    <th>Montant</th>
                                </tr>

                            </thead>
                            <tbody>


                            </tbody>
                        </table>

                    </div>

                </div>
            </div>
        </div>
    </div>


     {{-- MODAL OBJECTIF AGENCE --}}
    <div class="modal fade modalParamVm" data-bs-focus="false" id="modalParamVm" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Paramètre du calcul des VM et des seuils</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                        <div class="card">

                            <div class="card-body">
                                <div class="row g-2">
                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Etablissement :</p>
                                            <input type="text" id="Etablissement" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Catégorie A :</p>
                                            <input type="text" id="CategorieA" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Catégorie B :</p>
                                            <input type="text" id="CategorieB" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Catégorie C :</p>
                                            <input type="text" id="CategorieC" class="form-control text-center" />
                                        </div>


                                </div>
                                   
                            </div>
                        </div>

                        <div class="card">

                            <div class="card-body">
                                <div class="row g-2">
                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Coef Vmm :</p>
                                            <input type="text" id="CoefficientVmm" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Coef Vm-1 :</p>
                                            <input type="text" id="CoefficientVm1" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Coef Vm-3 :</p>
                                            <input type="text" id="CoefficientVm3" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Coef Vm-6 :</p>
                                            <input type="text" id="CoefficientVm6" class="form-control text-center" />
                                        </div>


                                </div>
                                 <div class="row g-2">
                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Coef Vm-12 :</p>
                                            <input type="text" id="CoefficientVm12" class="form-control text-center"/>
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Coef Total :</p>
                                            <input type="text" id="CoefficientTotal" disabled class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Nb jr mini vmm :</p>
                                            <input type="text" id="nbjrMini" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-3">
                                            <p class="mb-0 text-muted">Nb jr mois :</p>
                                            <input type="text" id="nbjrMois" class="form-control text-center" />
                                        </div>
                                </div>
                                   
                            </div>
                        </div>

                         <div class="card">

                            <div class="card-body">
                                <div class="row g-2">
                                        <div class="col-xl-4">
                                            <p class="mb-0 text-muted">Nb VM Catégorie A :</p>
                                            <input type="text" id="nbVMCategorieA" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-4">
                                            <p class="mb-0 text-muted">Nb VM Catégorie B :</p>
                                            <input type="text" id="nbVMCategorieB" class="form-control text-center" />
                                        </div>

                                        <div class="col-xl-4">
                                            <p class="mb-0 text-muted">Nb VM Catégorie C :</p>
                                            <input type="text" id="nbVMCategorieC" class="form-control text-center" />
                                        </div>

                                </div>
                                   
                            </div>
                        </div>

                        <div >
                            <p class="mb-0 text-muted">Délai ANS :</p>
                                <div class="d-flex">
                                    <input type="text" id="DelaiANS" style="border-right:none" class="form-control" />
                                    <div style="border: 1px solid rgb(233,237,246);height:40px;padding:10px;border-left:none;margin-left:-20px">
                                    JOUR(S)
                                    </div>
                                </div>
                            
                        </div>


                        <div class="mt-3 d-flex justify-content-end">
                            <button class="btn btn-success" id="BtnModifierParamVm">Valider</button>
                        </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $(".owl-carousel").owlCarousel({
                // loop:true,
                // nav:true,
                margin: 10,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 3
                    },
                    600: {
                        items: 5
                    },
                    960: {
                        items: 6
                    },
                    1200: {
                        items: 8
                    }
                }
            });
            listeAgence()
            GetObjectifAgence()
            getParamVm()

                InputMaxValue('#Etablissement',6,3)
                InputMaxValue('#CategorieA',6,3)
                InputMaxValue('#CategorieB',6,3)
                InputMaxValue('#CategorieC',6,3)
                InputMaxValue('#CoefficientVmm',6,3)
                InputMaxValue('#CoefficientVm1',6,3)
                InputMaxValue('#CoefficientVm3',6,3)
                InputMaxValue('#CoefficientVm6',6,3)
                InputMaxValue('#CoefficientVm12',6,3)
                InputMaxValue('#nbjrMini',6,3)
                InputMaxValue('#nbjrMois',6,3)
                InputMaxValue('#nbVMCategorieA',6,3)
                InputMaxValue('#nbVMCategorieB',6,3)
                InputMaxValue('#nbVMCategorieC',6,3)
                InputMaxValue('#DelaiANS',6,1)
           
            $('#btnObjectifagence').on('click', function() {
                $('#montant').val('')
                $('#annee').val('')
                $('#modalObjectifAgence').modal('show')
            })

            $('#btnParamVm').on('click', function() {
             
                $('#modalParamVm').modal('show')
            })

            $(document).on('click', '#btnAjoutObjectifAgence', function() {

                if ($.trim($('#AgenceListSelect').val()) == 1) {

                    notifWarning('Imposible d\'utiliser CENTRALE')
                    return false;
                }

                if ($.trim($('#montant').val()).length == 0 || $.trim($('#annee').val()).length == 0) {

                    notifWarning('Veuillez remplir tous les champs svp !')
                    return false;
                }
                var postData = {
                    idAgence: $('#AgenceListSelect').val(),
                    Montant: $('#montant').val(),
                    Annee: $('#annee').val(),
                    idObjectifAgence: $('#hiddenID').val()
                };
                var postDataJSOn = JSON.stringify(postData);
                MarequetesAjax("{{ route('objectifAnnuelAgence.add') }}", "POST", postDataJSOn,
                    'application/json', false, "JSON",
                    function(resp) {
                        if (resp.error) {
                            notifError(resp.msg)
                            return false
                        }
                        if (resp.succes) {
                            notifSuccess(resp.msg)
                            GetObjectifAgence()
                            $('#montant').val('')
                            $('#annee').val('')
                        }

                    })
            })

            // ::::::::::::: MODIFICATION :::::::::::::::::::::::
            $(document).on('click', '#ModifierObjectifAgence', function() {

                $('#hiddenID').val($(this).data('id'))
                MarequetesAjax("{{ route('objectifAnnuelAgence.get') }}", "GET", {
                    idObjectifAgence: $('#hiddenID').val()
                }, null, true, "JSON", function(resp) {

                    if (resp.error) {
                        notifError(resp.msg)
                        return false
                    }
                    $('#AgenceListSelect').val(resp.data[0].IDAGENCE).trigger('change'),
                        $('#montant').val(parseInt(resp.data[0].MontantObjectif)),
                        $('#annee').val(resp.data[0].AnneeObjectif)
                })

            })

            // ::::::::::::: SUPPRESSION :::::::::::::::::::::::
            $(document).on('click', '#SupprimerObjectifAgence', function() {
                var ObjectifAgenceId = $(this).data('id')
                confirmMdp('{{ csrf_token() }}', () => {

                        MarequetesAjax("{{ route('objectifAnnuelAgence.delete') }}", "GET", {
                            idObjectifAgence: ObjectifAgenceId
                        }, null, true, "JSON", function(resp) {
                            if (resp.error) {
                                notifError(resp.msg)
                                return false
                            }
                            if (resp.succes) {
                                notifSuccess(resp.msg)
                                GetObjectifAgence()
                            }
                        })
                    }

                );



            })


            // ::::::::::::::::::::::::::: PARAMETRE VM :::::::::::::::::::::

            $(document).on('click', '#BtnModifierParamVm', function() {

               
                var postData = {
                    
                            Etablissement      : $('#Etablissement').val(),
                            CategorieA         : $('#CategorieA').val(),
                            CategorieB         : $('#CategorieB').val(),
                            CategorieC         : $('#CategorieC').val(),

                            CoefficientVmm     : $('#CoefficientVmm').val(),
                            CoefficientVm1     : $('#CoefficientVm1').val(),
                            CoefficientVm3     : $('#CoefficientVm3').val(),
                            CoefficientVm6     : $('#CoefficientVm6').val(),
                            CoefficientVm12    : $('#CoefficientVm12').val(),

                            CoefficientTotal   : $('#CoefficientTotal').val(),
                            nbjrMini           : $('#nbjrMini').val(),
                            nbjrMois           : $('#nbjrMois').val(),

                            nbVMCategorieA     : $('#nbVMCategorieA').val(),
                            nbVMCategorieB     : $('#nbVMCategorieB').val(),
                            nbVMCategorieC     : $('#nbVMCategorieC').val(),

                            DelaiANS           : $('#DelaiANS').val()
                };
                var postDataJSOn = JSON.stringify(postData);
                MarequetesAjax("{{ route('paramVm.update') }}", "PUT", postDataJSOn,
                    'application/json', false, "JSON",
                    function(resp) {
                        if (resp.error) {
                            notifError(resp.msg)
                            return false
                        }
                        if (resp.succes) {
                            notifSuccess(resp.msg)
                        }

                    })
            })
 

                $('#CoefficientVmm').on('change',function(){

                        var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                        if(value.length == 0){
                            
                            $(this).val('0,000')
                        }
                    
                    $('#CoefficientTotal').val(

                        parseFloat(e.replace(',','.')) +
                        parseFloat($('#CoefficientVm1').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm3').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm6').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm12').val().replace(',','.'))
                    )

                    if(isDecimal($('#CoefficientTotal').val()) == true){
                        $('#CoefficientTotal').val().replace(',','.')
                    }
                })

                $('#CoefficientVm1').on('change',function(){

                        var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                        if(value.length == 0){
                            
                            $(this).val('0,000')
                        }

                    $('#CoefficientTotal').val(

                        parseFloat(e.replace(',','.')) +
                        parseFloat($('#CoefficientVmm').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm3').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm6').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm12').val().replace(',','.'))
                    )

                    if(isDecimal($('#CoefficientTotal').val()) == true){
                        $('#CoefficientTotal').val().replace(',','.')
                    }
                })

                $('#CoefficientVm3').on('change',function(){

                    var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                        if(value.length == 0){
                            
                            $(this).val('0,000')
                        }
                    
                    $('#CoefficientTotal').val(

                        parseFloat(e.replace(',','.')) +
                        parseFloat($('#CoefficientVmm').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm1').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm6').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm12').val().replace(',','.'))
                    )

                    if(isDecimal($('#CoefficientTotal').val()) == true){
                        $('#CoefficientTotal').val($('#CoefficientTotal').val().replace('.',','))
                    }
                })

                $('#CoefficientVm6').on('change',function(){

                    var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                        if(value.length == 0){
                            
                            $(this).val('0,000')
                        }
                    
                    $('#CoefficientTotal').val(

                        parseFloat(e.replace(',','.')) +
                        parseFloat($('#CoefficientVmm').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm1').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm3').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm12').val().replace(',','.'))
                    )

                    if(isDecimal($('#CoefficientTotal').val()) == true){
                        $('#CoefficientTotal').val().replace('.',',')
                    }
                })

                $('#CoefficientVm12').on('change',function(){

                        var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                        if(value.length == 0){
                            $(this).val('0,000')
                        }
                    $('#CoefficientTotal').val(

                        parseFloat(e.replace(',','.')) +
                        parseFloat($('#CoefficientVmm').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm1').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm3').val().replace(',','.'))+
                        parseFloat($('#CoefficientVm6').val().replace(',','.'))
                    )

                    if(isDecimal($('#CoefficientTotal').val()) == true){
                        $('#CoefficientTotal').val().replace('.',',')
                    }

                })

                $('#DelaiANS').on('change',function(){

                    var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                        if(value.length == 0){ 
                            $(this).val('0,0')
                        }

                })

                $('#CategorieA').on('change',function(){

                      var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                          if(value.length == 0){
                            
                            $(this).val('0,000')
                        }
                })

                $('#CategorieB').on('change',function(){

                      var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                          if(value.length == 0){
                            
                            $(this).val('0,000')
                        }
                })

                $('#CategorieC').on('change',function(){

                      var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                          if(value.length == 0){
                            
                            $(this).val('0,000')
                        }
                })

                $('#Etablissement').on('change',function(){

                      var value = $(this).val()
                        var e = 0;
                        if(value.includes(',')){
                            e = value  
                        }else{
                            e = value+',000'
                        }

                        $(this).val(e)

                          if(value.length == 0){
                            
                            $(this).val('0,000')
                        }
                })
                                        

        })

        function GetObjectifAgence() {

            MarequetesAjax("{{ route('objectifAnnuelAgence.get') }}", "GET", null, null, true, "JSON", function(resp) {

                table = $('#tableObjectifAgence').DataTable();
                table.clear().draw();
                if (resp.error) {
                    notifError(resp.msg)
                    return false
                }
                if (resp.succes) {

                    $.each(resp.data, function(key, value) {

                        var agence = '';
                        if (value.IDAGENCE == 2) {
                            agence = "VRIDI"
                        } else if (value.IDAGENCE == 3) {
                            agence = "GAGNOA"
                        } else {
                            agence = "BOUAKE"
                        }
                        table.row.add([
                            '<a class="btn btn-sm btn-icon btn-outline-warning" data-id="' + value
                            .IDObjectifAgence +
                            '"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Modifier" id="ModifierObjectifAgence">\
                                            <i class="bx bxs-edit" style="font-size : 17px;cursor : pointer;"></i>\
                                        </a>\
                                        <a class="btn btn-sm btn-icon btn-outline-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Supprimer"  data-id="' +
                            value.IDObjectifAgence + '" id="SupprimerObjectifAgence">\
                                                        <i class="bx bxs-trash"style="font-size : 14px;cursor : pointer;"></i>\
                                                    </a>',
                            agence,
                            value.AnneeObjectif,
                            formatNumber(value.MontantObjectif)
                        ]);
                    })

                    table.draw();
                }

            })
        }

        function getParamVm(){
            MarequetesAjax("{{ route('paramVm.get') }}", "GET", null, null, true, "JSON", function(resp) {

              
                if (resp.error) {
                    notifError(resp.msg)
                    return false
                }
                if (resp.succes) {

                        if(resp.data.length > 0){

                            $('#Etablissement').val(resp.data[0].CoteAlerteEtablissement+',000')
                            $('#CategorieA').val(resp.data[0].CoteAlerteA+',000')
                            $('#CategorieB').val(resp.data[0].CoteAlerteB+',000')
                            $('#CategorieC').val(resp.data[0].CoteAlerteC+',000')

                            $('#CoefficientVmm').val(resp.data[0].Vm_Coefficient_Vm0+',000')
                            $('#CoefficientVm1').val(resp.data[0].Vm_Coefficient_Vm1+',000')
                            $('#CoefficientVm3').val(resp.data[0].Vm_Coefficient_Vm3+',000')
                            $('#CoefficientVm6').val(resp.data[0].Vm_Coefficient_Vm6+',000')
                            $('#CoefficientVm12').val(resp.data[0].Vm_Coefficient_Vm12+',000')

                            $('#CoefficientTotal').val(resp.data[0].Vm_Coefficient_Total+',000')
                            $('#nbjrMini').val(resp.data[0].Vm_NbreJourMini_Vmm+',000')
                            $('#nbjrMois').val(resp.data[0].Vm_NbreJourMois+',000')

                            $('#nbVMCategorieA').val(resp.data[0].SeuilMaxi_NbreVmA+',000')
                            $('#nbVMCategorieB').val(resp.data[0].SeuilMaxi_NbreVmB+',000')
                            $('#nbVMCategorieC').val(resp.data[0].SeuilMaxi_NbreVmC+',000')

                            $('#DelaiANS').val(resp.data[0].DelaiTraitementANS+',0')
                        }

                    
                   
                }

            })
        }

        function isDecimal(num) {
            return !Number.isInteger(num);
        }

      
    </script>
@endsection