@extends('models')
@section('titre-page', 'Historique des droits')
@php
  $listeTauxMonnaie = listeTauxMonnaie();
@endphp
@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-9 col-lg-7 col-md-6 mt-2">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Contrôles</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Suivi taux devise</li>
                    </ol>
                </nav>
            </div>

            <div class="col-xl-3 col-lg-5 col-md-6 col-sm-12 mx-0">
                <button type="button" class="btn btn-primary-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalMAJTaux">
                    <i class="ri-download-2-line me-1"></i>Mettre à jour taux 
                </button>
            </div>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header">

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

         <div class="col-xl-3 mb-2">
            <div>
                <p for="input-label" class="mb-0 text-muted">Période :</p></span>
               <input type="text" name="daterange" class="form-control text-center" style="padding :6px" id="periode-Search">
            </div>
        </div>

        <div class="col-xl-2 mb-2" style="display : none;">
            <div >
                <p  for="input-label" class="mb-0 text-muted">Devise départ :</p></span>
                <select class="Pselect2 form-select" name="" id="devise-source">

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

        <div class="col-xl-2 mb-3">
            <div >
                <p for="input-label" class="mb-0 text-muted">Devise destination :</p></span>
                <select class="Pselect2 form-select" name="" id="devise-destination">

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

        <div class="col-xl-1">
           <div class="d-flex justify-content-center mt-3">
              <div class="ms-2">
                <span role="button" id="FilterItemBtn" class="badge bg-primary d-flex justify-content-center align-items-center" style="height: 33px; width:60px;"><i class="ri ri-search-line" style="font-size:17px;"></i></span>
              </div>

              <div class="ms-2">
                <span role="button" id="ExporterTauxSuivi" class="badge bg-success d-flex justify-content-center align-items-center" style="height: 33px; width:60px;"><i class="ri ri-file-excel-2-line" style="font-size:17px;"></i></span>
              </div>

           </div>

        </div>

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


    </div>
    <div class="card-body">


        <div class="table-responsive">

            <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="SuivieTauxTable_change">
                <thead class="bg-thead">
                    <tr>

                        <th>date</th>
                        <th>Date</th>
                        <th>Agence</th>
                        <!-- <th>Devise départ</th> -->
                        <th>Libellé</th>
                        <th>Code</th>
                        <th>Ancien Taux</th>
                        <th>Nouveau taux</th>

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

    </div>
</div>

@endsection

<!-- Modal statut produit -->
<div class="modal fade" data-bs-focus="false" id="modalMAJTaux" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="staticBackdropLabel2">Mise à jours taux devise</h6>
                <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formMAJTaux">
                    <div class="row">
                        <div class="col-3">
                            <p class="mb-0 text-muted">Site<span class="text-danger">*</span> : </p>
                            <select class="form-select" name="IDAGENCE" id="selIDAGENCEModalMAJTaux">
                                <option value="0"></option>
                                @foreach(session('site') as $site)
                                    <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2">
                            <p class="mb-0 text-muted">Devise<span class=" text-danger">*</span> : </p>
                            <select class="form-select" name="IDMONNAIE" id="selIDMONNAIEModalMAJTaux">
                                <option value="0"></option>
                                @foreach ($listeTauxMonnaie as $Monnaie)
                                    <option value="{{ $Monnaie -> IDMONNAIE }}"> {{ $Monnaie -> SymboleMonnaie }} </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <p class="mb-0 text-muted">Taux actuel :</p>
                            <input type="text" class="numberInput form-control text-end pe-1" id="inpTauxActuelMAJTaux" disabled="" value="0">
                        </div>
                        <div class="col-3">
                            <p class="mb-0 text-muted">Nouveau taux :</p>
                            <input type="text" class="numberInput form-control text-end pe-1" name="TauxMonnaieInverse" id="inpTauxMonnaieInverseMAJTaux" value="0">
                        </div>
                        <div class="col-1 pt-2">
                            <button type="button" class="mt-1 btn btn-success btn-wave d-flex w-100 justify-content-center align-items-center" id="btnMAJTaux">
                                <i class="bx bx-check-circle fs-22"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section('script')

<script>
    $(document).ready(function(){


        remplirSelect2("{{route('devise_destination.get')}}",null, "#devise-destination", "IDMONNAIE","SymboleMonnaie", null, "TOUS");

        $(document).on('click','#FilterItemBtn',function(){
            var periodeSuivi = dissocierDate($('#periode-Search').val())
            var dateDebut = periodeSuivi[0];
            var dateFin = periodeSuivi[1];
            // var deviseSource = $('#devise-source').val()
            var IDMONNAIE = $('#devise-destination').val()
            get_suivi_taux(dateDebut,dateFin,IDMONNAIE)
        })

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

                var data = getTableWithRupturesDynamique('SuivieTauxTable_change')
                const filename = file_name("SUIVI-TAUX-RECLAMATION");
                download_excel_file('{{route("export_global_excel.export")}}', data, filename);
        })

        var periodeSuivi = dissocierDate($('#periode-Search').val())
        var dateDebut = periodeSuivi[0];
        var dateFin = periodeSuivi[1];

        get_suivi_taux(dateDebut,dateFin, $('#devise-destination').val())

    })

    function get_suivi_taux($date_deb,$date_fin,IDMONNAIE){
        $.ajax({
            type: "GET",
            url: "{{route('recup_suivi_taux.get')}}",
            data: {date_deb:$date_deb,
                   date_fin:$date_fin,
                   IDMONNAIE:IDMONNAIE
            },
            dataType: "JSON",
             beforeSend: progressHandler(),
            success: function (resp) {
              table = $('#SuivieTauxTable_change').DataTable();
              table.clear();
              completeHandler()
              $.each(resp.dataSuivi,function(key,value){
                table.row.add([

                     new Date(value.date_seule).toLocaleDateString('fr-FR', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',

                     }),
                     new Date(value.created_at).toLocaleDateString('fr-FR', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit'
                     }),
                    value.NomAgence,
                    // value.MonnaieParDefaut,
                    value.LibelleMonnaie,
                    value.SymboleMonnaie,
                //    (1/parseFloat(value.TauxAvant)).toFixed(2),
                //    (1/parseFloat(value.TauxActuel)).toFixed(2),
                   formatNumberPerf(value.TauxAvant),
                   formatNumberPerf(value.TauxActuel)

                ])
              })
              table.draw();
            },
            error: function(response, statut) {
                         completeHandler()
            }
        });
    }
</script>

<script>

    _('btnModalMAJTaux').addEventListener('click', function(){

        resetFormTaux()
        $('#modalMAJTaux').modal('show')
    })

    _('btnMAJTaux').addEventListener('click', function(){

        let formMAJTaux = new FormData(_('formMAJTaux'))
        formMAJTaux.append('_token', '{{ csrf_token() }}')            

        $.ajax({

            url: "{{ route('validationTauxDeviseAgence') }}",
            type: 'POST',
            data: formMAJTaux,
            contentType : false,
            processData : false,
            dataType: 'json',
            beforeSend: progressHandler(),
            success: function(response) {

                if (response.success == 1) {
                    
                    resetFormTaux()
    
                    var periodeSuivi = dissocierDate($('#periode-Search').val())
                    var dateDebut = periodeSuivi[0];
                    var dateFin = periodeSuivi[1];
    
                    get_suivi_taux(dateDebut,dateFin, $('#devise-destination').val())

                    notifSucces('Mise à jours éffectuée avec succès')
                }else{

                    notifDanger(response.msg2)
                }
            },
            error: function(error) {

                notifError('Échec de l\'opération.')
            },
            complete : completeHandler
        })
    })

    function resetFormTaux(){

        _('formMAJTaux').reset()
    }

    function listeTauxParDeviseParAgence(IDMONNAIE, IDAGENCE) {

        return new Promise(function(resolve, reject) {

            $.ajax({

                url: "{{ route('listeTauxParDeviseParAgence') }}",
                type: 'GET',
                data: {
                    IDMONNAIE : IDMONNAIE,
                    IDAGENCE : IDAGENCE
                },
                dataType: 'json',
                beforeSend: progressHandler(),
                success: function(response) {

                    if (response.success != 1) {

                        notifError(response.msg)
                    }

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

                    notifError('Échec de l\'opération.')
                    reject()

                    completeHandler()
                }
            })
        })
    }

    function actualiseTauxActuel(IDMONNAIE, IDAGENCE){

        listeTauxParDeviseParAgence(IDMONNAIE, IDAGENCE)
            .then(response => {

                if (response.success == 1) {
                    
                    let data = response.data;

                    let TauxActuelMAJTaux = 0

                    if (data != []) {
                        
                        TauxActuelMAJTaux = data.TauxMonnaieInverse
                    }

                    $('#inpTauxActuelMAJTaux').val(TauxActuelMAJTaux).trigger('input')
                }
            })
    }

    _('selIDAGENCEModalMAJTaux').addEventListener('change', function(){

        let IDAGENCE = this.value
        let IDMONNAIE = _('selIDMONNAIEModalMAJTaux').value

        if (IDAGENCE == 0 || IDMONNAIE == 0) {
            
            _('inpTauxActuelMAJTaux').value = 0
        }
    })

    _('selIDMONNAIEModalMAJTaux').addEventListener('change', function(){

        let IDAGENCE = _('selIDAGENCEModalMAJTaux').value
        let IDMONNAIE = this.value

        if (IDAGENCE == 0 || IDMONNAIE == 0) {
            
            _('inpTauxActuelMAJTaux').value = 0
        }

        actualiseTauxActuel(IDMONNAIE, IDAGENCE)
    })
</script>
@endsection