@extends('partials/app')
@section('capsule')
    {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::: ESPACE RECHERCHE DE DATE ::::::::::::::::::::::::::::::::::::::::::::::  --}}
    <div class="heigthSpace">

        <div class="section">

            <!-- * Dialog Basic -->
            <div id="loader_custom" style="display: none">
                {{-- <img src="assets/img/loading-icon.png" alt="icon" class="loading-icon"> --}}
                <div style="background: #ffffff;width:200px; height:80px;border-radius:15px" class="d-flex justify-content-center align-items-center">
                    <div class="spinner-border " style="color:red" role="status"></div>
                    <p class="mt-2 mx-2">Chargement...</p>
                </div>
            </div>


            <!-- Modal Basic -->
            <div class="modal fade modalboxCustom"id="ModalActionSheet" tabindex="-1" role="dialog">
                <div class="modal-dialog info_modal" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Détail</h5>
                            <a href="#" data-bs-dismiss="modal"><ion-icon name="close-circle-outline"></ion-icon>
                                Fermer</a>
                        </div>
                        <div class="modal-body">


                            <div id="modalContent">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- * Modal Basic -->


            <div class="DashboardResumebox padding mb-2">
                <div class="d-flex">
                    <img src="assets/img/calque5.png" style="width:20px" class="title-icon" />
                    <div class="title">
                        <span id="nbrealert"></span> Alerte(s) d'op. sensible
                    </div>
                </div>
            </div>

            <div class="d-flex mb-2">
                {{-- <ion-icon class="chevronSize" name="chevron-back-outline"></ion-icon> --}}
                <div class="d-flex position-relative  w-100">
                    <input type="text" class="form-control inputSearch date" id="InputRecherche">
                    <ion-icon class="search-icon" name="search-outline" id="IconRecherche"></ion-icon>

                </div>
                <a href="#" class="card-drop" data-bs-toggle="dropdown" id="dropdownButton" aria-expanded="false">
                    <div class="critereSearch">
                         <ion-icon name="options-outline" class="chevronSize text-gray" style="margin-top:-2.2px"></ion-icon>
                   </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end w-75 dropdown-filter"
                    style="background:#424242;padding:12px;border-radius:20px">

                    <div class="text-white d-flex justify-content-between">
                        <div class="d-flex text-white">
                            <div class="critereSearch1"><ion-icon name="options-outline" style="font-size:18px"></ion-icon></div>
                            <span>Plus de critère</span>
                        </div>
                        <div>
                            <ion-icon name="close-outline" id="closeDropdown"
                                style="font-size:20px;margin-right:8px"></ion-icon>
                        </div>
                    </div>

                    <li>
                        <div class="form-group boxed">
                            <div class="input-wrapper">

                                <select class="form-control custom-select" id="Operateur" style="border-radius:25px">
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>

                        <div class="form-group boxed">
                            <div class="input-wrapper">
                                <select class="form-control custom-select" id="rubriqueTresorerie"
                                    style="border-radius:25px">
                                </select>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn_background btn_background-w" id="appliquerFiltre">Appliquer les filtres</button>
                            <button type="button" class="btn btn_background" id="ReinitialiserFiltre"><img src="assets/img/Calque11.png" style="width:20px;height:20px;" class="title-icon"/></button>
                        </div>
                    </li>
                </ul>
            </div>

            @include('screens/error_screen')

            <div id ="containerData">

                <div class="DashboardListbox mb-4" style="border-top-left-radius: 15px;border-top-right-radius: 15px">
                    {{-- <div class="text-center mt-3 empty-message">
                        <img src="{{ asset('assets/img/empty.png') }}" class="img-fluid" style="width: 50%;">
                        <p>Aucune alerte pour l'instant</p>
                    </div> --}}

                    <p class="empty-message">Aucune alerte pour l'instant</p>

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

    {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::: FIN ESPACE RECHERCHE DE DATE ::::::::::::::::::::::::::::::::::::::::::::::  --}}

    @include('partials/bottomBar')
@endsection

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


            $('.dropdown-filter').on('click', function(event) {
                event.stopPropagation();
            });
            $('#closeDropdown').on('click', function() {
                $('#dropdownButton').dropdown('hide');
            });

            $('#IconRecherche').on('click', function() {
                var $recherche = $('#InputRecherche').val()
                recuperationAlert($recherche,null,null)
            })

            filtreElement()
            var $recherche = $('#InputRecherche').val()
            recuperationAlert($recherche,null,null)

            $(document).on('click', '#VoirAlert', function() {
                $AletText = $(this).data('text')
                $AletID = $(this).data('id')
                $AletDateOp = $(this).data('dateoperation')
                $AletOperateur = $(this).data('nomoperateur')
                $AletHeureOp = $(this).data('heureoperation')


                $('#modalContent').html('')

                $('#modalContent').append(`
                                
                                     <div class="d-flex justify-content-between">
                                        <div class="text-dark">${$AletOperateur}</div>
                                            <div>${$AletDateOp} ${$AletHeureOp}</div>
                                    </div>

                                    <p class="mt-5">
                                        <div>${$AletText}</div>
                                    </p>
                                
                `)

                   $('#ModalActionSheet').modal('show')

                    $.ajax({
                        type: "POST",
                        url: "{{ route('updateStatutAlert.update') }}",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        data: {
                            idAlert: $AletID
                        },
                        dataType: "JSON",
                        beforeSend: function() {
                            {{-- $('#modalSpinner').css('display','block') --}}
                        },
                        success: function(resp) {

                            if (resp.succes) {
                                {{-- $('#modalSpinner').css('display','none') --}}
                                $('#checkStatut' + $AletID).css('background', 'orange')
                            }
                        },
                        error: function(xrh) {
                            showToast("Erreur", 'Une Erreur s\'est produite', "bg-danger");
                        }
                    });
            })

            $('.btnRetry').on('click', function() {
                var $recherche = $('#InputRecherche').val()
                recuperationAlert($recherche,null,null)
            })

            
            $('#appliquerFiltre').on('click',function(){
                $('#dropdownButton').dropdown('hide');
              var $recherche = $('#InputRecherche').val()
              recuperationAlert($recherche,$('#Operateur').val(),$('#rubriqueTresorerie').val())
            })

            $('#ReinitialiserFiltre').on('click',function(){
                  filtreElement();
            })

        })

        function recuperationAlert($rechereche, $filtre_id_operateur, $filtre_type_operation) {

            $.ajax({
                type: "POST",
                url: "{{ route('alert.get') }}",
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                data: {
                    search: $rechereche,
                    "filtre_id_operateur": $filtre_id_operateur,
                    "filtre_type_operation": $filtre_type_operation,
                },
                beforeSend: function() {

                    $('#errorBlock').css('display', 'none')
                    $('#EmptyBlock').css('display', 'none')
                    $('#loader_custom').css('display', 'flex')

                },
                success: function(resp) {

                    $('.DashboardListbox').html('')

                    var nbreAlert = 0;
                   
                    $.each(resp.data, function(key, value) {
                        nbreAlert++

                        var designation = value.DescriptionOperationSensible.length > 50 ? value
                            .DescriptionOperationSensible.substring(0, 50) + '...' : value
                            .DescriptionOperationSensible

                        var statut = value.OperationSensibleValidee == false ? '<div id="checkStatut' +
                            value.IDOPERATIONSENSIBLE +
                            '" style="width:12px;height:12px;background:orange;border-radius:20px"></div>' :
                            '<div id="checkStatut' + value.IDOPERATIONSENSIBLE +
                            '" style="width:12px;height:12px;background:green;border-radius:20px"></div>'

                      
                        var hr = ''

                        if (resp.data.length - 1 != key) {

                            var hr = '<hr style="margin-top: -3px; color:gray">'
                        }
                        if (key == 0) {

                            $('.DashboardListbox').append(`
                            
                                        <div  data-id="${value.IDOPERATIONSENSIBLE}" data-text="${value.DescriptionOperationSensible}" data-dateoperation="${value.DateOperationSensible}" data-nomoperateur="${value.NomOperateur}" data-heureoperation="${value.HeureOP}" id="VoirAlert">
                                                <div class="d-flex justify-content-between mt-1">
                                                    <div style="margin-top:-12px">
                                                        <div class="text-size1 text-dark">${designation}</div>
                                                        <div class="text-size1 mb-1" style="color:gray">${value.DateOperationSensible} ${value.HeureOP} - ${value.NomOperateur} </div>
                                                    </div>
                                                    ${statut}
                                                </div>
                                        </div>
                                         ${hr}
                            `)
                        } else {

                            $('.DashboardListbox').append(`
                                            <div data-id="${value.IDOPERATIONSENSIBLE}" data-text="${value.DescriptionOperationSensible}" data-dateoperation="${value.DateOperationSensible}" data-nomoperateur="${value.NomOperateur}" data-heureoperation="${value.HeureOP}" id="VoirAlert" >
                                            <div class="d-flex justify-content-between">
                                                <div style="margin-top:-12px">
                                                    <div class="text-size1 text-dark">${designation}</div>
                                                    <div class="text-size1 mb-1" style="color:gray">${value.DateOperationSensible} ${value.HeureOP} - ${value.NomOperateur} </div>
                                                </div>
                                                    ${statut}
                                            </div>
                                        </div>
                                         ${hr}
                            `)
                        }

                    })

                    $('.nbrealert').text(nbreAlert)
                    $('#loader_custom').css('display', 'none')
                     if (resp.data.length == 0) {

                        $('.DashboardListbox').append(`<p class="empty-message">Aucune alerte pour l'instant</p>`)
                    }

                },
                error: function(xhr, status) {

                    $('#errorBlock').css('display', 'block')
                    $('#containerData').css('display', 'none')
                    $('#loader_custom').css('display', 'none')
                }
            });
        }


        function filtreElement() {

            $.ajax({
                type: "POST",
                url: "{{ route('filtreMulti.get') }}",
                data: {
                    "famille": false,
                    "grande_famille": false,
                    "categorie_produit": false,
                    "emplacement_rayon": false,
                    "emplacement_reserve": false,
                    "client": false,
                    "type_client": false,
                    "mode_paiement": false,
                    "operateur": true,
                    "fournisseur": false,
                    "produit": false,
                    "rubrique_operation": true
                },
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },

                success: function(resp) {

                    $('#rubriqueTresorerie').html('')
                    $('#rubriqueTresorerie').append(`
                        <option value="">Rubrique de l'opération</option>
                    `)

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

                        $('#rubriqueTresorerie').append(`
                            <option value="${value.IDTRESORERIERUBRIQUE}">${value.LibelleRubriqueOperation}</option>
                        `)
                    })


                    $('#Operateur').html('')
                    $('#Operateur').append(`
                        <option value="">Operateur</option>
                    `)

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

                        $('#Operateur').append(`
                            <option value="${value.IDOPERATEUR}">${value.NomOperateur}</option>
                        `)
                    })

                },
                error: function(xhr, status) {

                }
            });

        }
    </script>
@endsection