@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">
                    <ion-icon name="options-outline" class="chevronSize mx-2 text-gray"></ion-icon>
                </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">
                            <ion-icon name="options-outline" style="font-size:20px;margin-right:8px"></ion-icon>
                            <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-center mt-2">
                            <button type="button" class="btn btn_background">Appliquer les filtres</button>
                            <button type="button" class="btn btn_background mx-2">X</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>

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

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

    @include('partials/bottomBar')
@endsection

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

            let currentDate = new Date();
            $('.inputSearch').val(formatDate(currentDate))

            $('.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)
            })

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

            $(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)
            })

        })

        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('')

                    if (resp.data.length == 0) {

                        $('.DashboardListbox').append(` <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>`)
                    }
                    var nbreAlert = 0;
                    var msgnonLu = 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>'

                        if (value.OperationSensibleValidee == false) {
                            msgnonLu++
                        }
                        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')

                },
                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