@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>


            <div class="DashboardResumebox padding mb-2">
                <div class="d-flex">

                   <img src="assets/img/calque9.png" style="width:35px" class="title-icon"/>

                    <div class="title">
                        Listing des commandes
                    </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="fournisseurSelect" 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="produitSelect" style="border-radius:25px">
                          
                                </select>
                            </div>
                        </div>

                    </li>

                        <form>
                        
                                <div class="form-check">
                                        <input class="form-check-input" name="etape" type="radio" value="1" id="etape1" >
                                        <label class="form-check-label text-white" for="etape1" style="font-size:13px">
                                            Commande en préparation
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" name="etape" type="radio" value="2" id="etape2">
                                        <label class="form-check-label text-white" for="etape2" style="font-size:13px">
                                        Commande transmise
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" name="etape" type="radio" value="3" id="etape3">
                                        <label class="form-check-label text-white" for="etape3" style="font-size:13px">
                                        Commande non transmise
                                        </label>
                                    </div>


                                <li>
                                    <div class="d-flex justify-content-center mt-2">

                                        <button type="button" id="appliquerFiltre" class="btn btn_background">Appliquer les filtres</button>

                                        <button type="button" id="ReinitialiserFiltre" class="btn btn_background mx-2">X</button>

                                    </div>
                                </li>
                        </form>

                </ul>

                {{-- <div class="spinner-border text-primary chevronSize mx-2" style="" id="searchLoader" role="status"></div> --}}
                
            </div>

            @include('screens/error_screen')

            <div id ="containerData" style="padding-bottom: 80px">

                <div class="DashboardResumebox2">
                    <div class="d-flex justify-content-center">
                        <h5 style="color:#fff;"><span id="nbreCommande"></span> Commande(s) -T : <span id="totalCommande"></span> </h5>
                    </div>
                </div>
                <div class="DashboardListbox">

                    <div class="text-center mt-3 empty-message">
                        <img src="{{ asset('assets/img/empty.png') }}" class="img-fluid" style="width: 50%;">
                        <p>Aucune Commande pour l'instant</p>
                    </div>

                </div>

            </div>



        </div>

    </div>

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

    @include('partials/bottomBar')
@endsection

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

             filtreElement()

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

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

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

            $('#appliquerFiltre').on('click',function(){
                $('#dropdownButton').dropdown('hide');
              var $recherche = $('#InputRecherche').val()
              recuperationCommande($recherche,$('#fournisseurSelect').val(),$('#produitSelect').val(),$('input[name="etape"]:checked').val())
            })

            $('#ReinitialiserFiltre').on('click',function(){
                
                 $('#etape1').prop('checked',false)
                 $('#etape2').prop('checked',false)
                 $('#etape3').prop('checked',false)
                  filtreElement();
            })

              $('.btnRetry').on('click',function(){
                     recuperationCommande($('#InputRecherche').val(),null,null,1)
                    filtreElement()
                })

           
        })

        function recuperationCommande($rechereche,$filtre_idfournisseur,$filtre_idproduit,$filtre_etape_cde) {


            $.ajax({
                type: "POST",
                url: "{{ route('commande.get') }}",
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                data: {
                    "dateSearch": $rechereche,
                    "filtre_idfournisseur" :$filtre_idfournisseur,
                    "filtre_idproduit"     :$filtre_idproduit,
                    "filtre_etape_cde"     :$filtre_etape_cde
                },
                beforeSend: function() {
                 

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

                },
                success: function(resp) {

                   

                    if(resp.data.length > 0){
                        $('.DashboardListbox').html('')
                    }else{
                          $('.DashboardListbox').html('')
                        $('.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 Commande pour l'instant</p>
                    </div>`)
                    }
                    var nbreCommande = 0;
                    var TotalCommande = 0;
                 $.each(resp.data, function(key, value) {
                        nbreCommande++
                          
                          TotalCommande+=value.TotalNetPayer;
                           designation = '<h4 class="text-size1">' + value.CommentaireCommande + '</h4>'
                        if (value.ModeTransmissionLibelle == "") {
                            designation = '<h4 class="text-size1" style="color:red">' + value.CommentaireCommande + '</h4>'
                        }
                        
                     
                        var ReferenceTransmission ='<span >VIA</span> :'+value.ModeTransmissionLibelle+' - NL : '+formatNumber(value.NombreLigne)+' - T : '+formatNumber(value.TotalNetPayer)+'</h4>'
                        if(value.ReferenceTransmission ==""){
                            
                            ReferenceTransmission ='<span style="color:#06919a">EN PREPA</span> :'+value.ModeTransmissionLibelle+' - NL : '+formatNumber(value.NombreLigne)+' - T : '+formatNumber(value.TotalNetPayer)+'</h4>'
                        }

                        if (key == 0) {

                            $('.DashboardListbox').append(`
                            
                                <div class="d-flex justify-content-between mt-1">
                                                <div>
                                               
                                                     ${designation}
                                                    <h4 class="text-size1" style="margin-top:-7px;">${value.DateCommande}
                                                    <span style="color:#06919a">${value.HeureCommande}</span> - ${value.NomOperateur} </h4>
                                                     <h4 class="text-size1" style="margin-left:35px;margin-top:-7px">
                                                   ${ReferenceTransmission}
                                                </div>

                                                    <a href="#" class="card-drop mt-1" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <ion-icon name="ellipsis-vertical-outline"  class="text-gray mt-1"></ion-icon>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end" style="background:#424242">
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-pencil font-size-16 text-success me-1"></i> Statistique de vente</a></li>
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i> Statistique de vente</a></li>
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Déconditionnement</a></li>
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Corrections de stock</a></li>
                                                    </ul>

                                                
                                            </div>
                                            <hr style="margin-top: -1px;">
                            `)
                        } else {

                            $('.DashboardListbox').append(`
                            
                                <div class="d-flex justify-content-between">
                                                <div style="margin-top:-6px">
                                                ${designation}
                                                    <h4 class="text-size1" style="margin-top:-7px;">${value.DateCommande}
                                                    <span style="color:#06919a">${value.HeureCommande}</span> - ${value.NomOperateur} </h4>
                                                     <h4 class="text-size1" style="margin-left:35px;margin-top:-7px">
                                                   ${ReferenceTransmission}
                                                </div>

                                                    <a href="#" class="card-drop mt-1" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <ion-icon name="ellipsis-vertical-outline"  class="text-gray mt-1"></ion-icon>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-menu-end" style="background:#424242">
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-pencil font-size-16 text-success me-1"></i> Statistique de vente</a></li>
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i> Statistique de vente</a></li>
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Déconditionnement</a></li>
                                                        <li><a href="#" class="dropdown-item text-white" style="font-size:10px"><i class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>Corrections de stock</a></li>
                                                    </ul>

                                                
                                            </div>
                                            <hr style="margin-top: -1px;">
                            `)
                        }

                    }) 

                      $('#nbreCommande').text(formatNumber(nbreCommande))

                      $('#totalCommande').text(formatNumber(TotalCommande))


                      

                     $('#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": false,
                        "fournisseur": true,
                        "produit": true
                },
                dataType: "JSON",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },

                success: function(resp) {

                       $('#fournisseurSelect').html('')
                       $('#fournisseurSelect').append(`
                            <option value="">Client</option>
                        `)
                    
                    $.each(resp.data.TabFournisseur,function(key,value){

                        $('#fournisseurSelect').append(`
                            <option value="${value.IDFOURNISSEUR}">${value.NomFournisseur}</option>
                        `)
                    })

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

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

                        $('#produitSelect').append(`
                            <option value="${value.IDPRODUIT}">${value.DenominationProduit}</option>
                        `)
                    })

                },
                error: function(xhr, status) {

                 
                }
            });

        }
    </script>
@endsection