@extends('models')
@section('titre-page', 'Traçabilité des bacs')
@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);">Contrôles</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Traçabilité des bacs</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 style="background:rgb(240,241,247);width:100%;padding:13px; margin-bottom: 6px; border-radius:10px">

                <div style="background:rgb(255, 255, 255);padding:13px; border-radius:10px">

                    <div class="row g-2 ">

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

                            <label for="" class="mt-2">Agence</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select AgenceListSelect" id="AgenceListSelect"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                            </select>

                        </div>

                        <div class="col-xl-3">
                            <label for="" class="mt-2">Client </label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select client" id="client">

                            </select>
                        </div>


                        <div class="col-xl-2">
                            <label for="" class="mt-2">Periode </label> <span class="mt-2 me-2">:</span>
                            <input type="text" name="daterange" class="form-control dateInputSearch2" style="padding :6px"
                                id="dateInputSearch">
                        </div>

                        <div class="col-xl-2">
                            <label for="" class="mt-2">Type</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select typevehicule" id="typevehicule">
                                <option value="0">TOUS</option>
                                <option value="1">VOITURE</option>
                                <option value="2">MOTO</option>


                            </select>
                        </div>

                        <div class="col-xl-3">
                            <label for="" class="mt-2">Livreur</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select livreur" id="livreur">
                              
                            </select>
                        </div>


                    </div>

                    <div class="row g-2 mb-4">

                        <div class="col-xl-3">

                            <label for="" class="mt-2">Bac</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select selectBac" id="selectBac">

                            </select>

                        </div>

                        <div class="col-xl-2">
                            <label for="" class="mt-2">Type colis </label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select typecolis" id="typecolis">
                                    <option value="0">TOUS</option>
                                    <option value="1">NORMAL</option>
                                    <option value="2">FROID</option>
                                    <option value="3">SOUS CLE</option>
                            </select>
                        </div>


                        <div class="col-xl-3">
                            <label for="" class="mt-2">Véhicule</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select vehicule" id="vehicule">
                            </select>
                        </div>

                        <div class="col-xl-3">
                            <label for="" class="mt-2">Tournée</label> <span class="mt-2 me-2">:</span>
                            <select class="Pselect2 form-select tournee" id="tournee"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                            </select>
                        </div>



                        <div class="col-xl-1" style="margin-top:34px;">
                            <div class="d-flex justify-content-end">
                                <div class="me-1">
                                    <span data-bs-toggle="tooltip" title="Recherche" role="button" id="searchBacBtn"
                                        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>
                        </div>

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


            <nav class="nav nav-pills flex-column flex-sm-row mb-3" role="tablist">
                <a class="flex-sm-fill text-sm-center nav-link active"  id="onglet1" data-bs-toggle="tab" role="tab"
                    aria-current="page" href="#BacARecuperer"  aria-selected="true">BAC A RECUPERER</a>
                <a class="flex-sm-fill text-sm-center nav-link" id="onglet2" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#BacEnCoursDeLivraison" aria-selected="false">BAC EN COURS DE LIVRAISON</a>

                <a class="flex-sm-fill text-sm-center nav-link" id="onglet3" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#BacArechercher" aria-selected="false">BAC A RECHERCHER</a>

                <a class="flex-sm-fill text-sm-center nav-link" id="onglet4" data-bs-toggle="tab" role="tab" aria-current="page"
                    href="#BacDisponible" aria-selected="false">BAC DISPONIBLE/ENDOMMAGE</a>

               
            </nav>

            <div class="tab-content">
                <div class="tab-pane text-muted active" id="BacARecuperer" role="tabpanel">

                   <div class="row">
                   
                    <div class="col-xl-8">
                            
                            <div class="table-responsive">
                                <table class="tablehover table table-striped text-nowrap w-100" id="bacArecuperer1Table">
                                    <thead class="bg-thead">
                                        <tr>
                                        <th>IDCLIENT</th>
                                        <th></th>
                                        <th></th>
                                            <th>Bac</th>
                                            <th>Livreur</th>
                                            <th>N° Immatriculation</th>
                                            <th>Heure livraison</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            
                    </div>

                    <div class="col-xl-4">
                             <div class="table-responsive">
                                <table class="tablehover table table-striped text-nowrap w-100" id="bacArecuperer2Table">
                                    <thead class="bg-thead">
                                        <tr>
                                         <th></th>
                                          <th></th>
                                        <th>Bac</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                    </div>
                   
                   </div>

                </div>

                {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: --}}

                <div class="tab-pane text-muted " id="BacEnCoursDeLivraison" role="tabpanel">
                    
                    <div class="row">

                        <div class="col-xl-8">
                        
                            <div class="table-responsive">

                                <table class="tablehover table table-striped text-nowrap w-100" id="BacEnCours1Table">
                                    <thead class="bg-thead">
                                        <tr>
                                            <th>IDCLIENT</th>
                                            <th></th>
                                            <th></th>
                                            <th>Bac</th>
                                            <th>Livreur</th>
                                            <th>N° Immatriculation</th>
                                            <th>Date et heure de départ</th>
                                            <th>Statut</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

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

                                <div class="table-responsive">

                                    <table class="tablehover table table-striped text-nowrap w-100" id="BacEnCours2Table">
                                        <thead class="bg-thead">
                                            <tr>
                                             <th></th>
                                             <th></th>
                                                <th>Bac</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                        
                        </div>
                    </div>
                </div>

                {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: --}}

                <div class="tab-pane text-muted " id="BacArechercher" role="tabpanel">

                    <div class="row">

                        <div class="col-xl-8">
                        
                            <div class="table-responsive">

                                <table class="tablehover table table-striped text-nowrap w-100" id="BacArechercher1Table">
                                    <thead class="bg-thead">
                                        <tr>
                                             <th>Bac</th>
                                            <th>Livreur</th>
                                            <th>N° Immatriculation</th>
                                            <th>Heure livraison</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

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

                                <div class="table-responsive">

                                    <table class="tablehover table table-striped text-nowrap w-100" id="BacArechercher2Table">
                                        <thead class="bg-thead">
                                            <tr>
                                             <th></th>
                                             <th></th>
                                                <th>Bac</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                        
                        </div>
                    </div>
                </div>

                {{-- ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: --}}

                <div class="tab-pane text-muted " id="BacDisponible" role="tabpanel">

                <div class="row">
                
                    <div class="col-xl-6">
                    
                         <div class="table-responsive">
                                <table class="tablehover table table-striped text-nowrap w-100" id="BacDisponible1Table">
                                    <thead class="bg-thead">
                                        <tr>
                                        <th>Bac</th>
                                        <th>Agence</th>
                                        
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                    </div>
                    <div class="col-xl-6">


                             <div class="table-responsive">
                                <table class="tablehover table table-striped text-nowrap w-100" id="BacDisponible2Table">
                                    <thead class="bg-thead">
                                        <tr>
                                        <th>Bac</th>
                                         <th>Agence</th>
                                        
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            
                       </div>
                
                </div>
                   
                </div>

            
            </div>

        </div>
    </div>
@endsection

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

            var onglet = 1;

            
            listeAgence();
            //listeProduit();
            recuperationVehicule('#vehicule')
            recuperationClients('.client')
            recuperationBac('#selectBac')
            listingComboTourneeClient('#tournee')
            listingComboPersonnel('#livreur')
            
            $(document).on('click','#onglet1',function(){
                onglet = 1;
            })

            $(document).on('click','#onglet2',function(){
                onglet = 2;
            })

            $(document).on('click','#onglet3',function(){
                onglet = 3;
            })

            $(document).on('click','#onglet4',function(){
                onglet = 4;
            })
            $(document).on('click', '#searchBacBtn', function() {

            
                $date = dissocierDate($('#dateInputSearch').val())
                $dateDeb = $date[0]
                $dateFin = $date[1]
               
                MarequetesAjax("{{ route('tracabilite_bac.get') }}", "GET", {
                        'agence': $('#AgenceListSelect').val(),
                        'DateDeb': $dateDeb,
                        'DateFin': $dateFin,
                        'livreur': $('#livreur').val(),
                        'client': $('#client').val(),
                        'vehicule': $('#vehicule').val(),
                        'tournee': $('#tournee').val(),
                        'typecolis': $('#typecolis').val(),
                        'typevehicule': $('#typevehicule').val(),
                        'bac': $('#selectBac').val(),
                        'Onglet':onglet
                    }, null, true, "JSON", function(resp) {

                        completeHandler()
                   

                        if(resp.error){
                           notifError(resp.msg)
                            return false;
                        }
                        if(resp.onglet == 1){
                           
                             var tableArecuperer1 = $('#bacArecuperer1Table').DataTable();
                             tableArecuperer1.clear().draw()

                             var tableArecuperer2 = $('#bacArecuperer2Table').DataTable();
                             tableArecuperer2.clear().draw()

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

                                tableArecuperer1.row.add([
                                    value.IDCLIENT,
                                    value.LibelleTournee,
                                    value.NomClient,
                                    value.NumeroBAC,
                                    value.NomPrenomPersonnel,
                                    value.ImmatriculeVehicule,
                                    formatDate(value.HeureLivraison)
                                ])

                                tableArecuperer2.row.add([
                                    value.IDCLIENT,
                                    value.LibelleTournee,
                                    value.NumeroBAC,
                                ])
                            })

                            tableArecuperer1.draw();
                            tableArecuperer2.draw();
                            return false
                        }


                         if(resp.onglet == 2){

                             var tableBacEnCours1 = $('#BacEnCours1Table').DataTable();
                             tableBacEnCours1.clear().draw()

                             var tableBacEnCours2 = $('#BacEnCours2Table').DataTable();
                             tableBacEnCours2.clear().draw()

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

                                var statut = value.HeureLivraison ? '<span class="badge bg-danger-transparent text-danger" style="font-size:.78rem; width:102px;">EXPEDIÉ</span>' : '<span class="badge bg-danger-transparent text-danger" style="font-size:.78rem; width:102px;">CHARGÉ</span>';
                                tableBacEnCours1.row.add([
                                    value.IDCLIENT,
                                    value.LibelleTournee,
                                    value.NomClient,
                                    value.NumeroBAC,
                                    value.NomPrenomPersonnel,
                                    value.ImmatriculeVehicule,
                                    value.DateHeureDepart,
                                    statut
                                ])
                                tableBacEnCours2.row.add([
                                    value.IDCLIENT,
                                    value.LibelleTournee,
                                     value.NumeroBAC,
                                ])
                            })

                            tableBacEnCours1.draw();
                            tableBacEnCours2.draw();
                            return false
                        }

                         if(resp.onglet == 3){

                            var tableBacArechercher1 = $('#BacArechercher1Table').DataTable();
                             tableBacArechercher1.clear().draw()

                             var tableBacArechercher2 = $('#BacArechercher2Table').DataTable();
                             tableBacArechercher2.clear().draw()

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

                                tableBacArechercher1.row.add([
                                        value.NumeroBAC,
                                        value.NomPrenomPersonnel,
                                        value.ImmatriculeVehicule,
                                        value.HeureLivraison
                                ])
                                 tableBacArechercher2.row.add([
                                     value.IDCLIENT,
                                     value.LibelleTournee,
                                     value.NumeroBAC,
                                 ])
                            })

                            tableBacArechercher1.draw();
                             tableBacArechercher2.draw();
                             return false
                        }

                        if(resp.onglet == 4){

                             var tableBacDisponible1 = $('#BacDisponible1Table').DataTable();
                             tableBacDisponible1.clear().draw()

                             var tableBacDisponible2 = $('#BacDisponible2Table').DataTable();
                             tableBacDisponible2.clear().draw()

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

                                    var AGENCE = ''
                                    if(value.IDAGENCE == 2){
                                    AGENCE = 'VRIDI'
                                    }
                                    
                                    if(value.IDAGENCE==3){
                                     AGENCE = 'GAGNOA'
                                    }
                                    if(value.IDAGENCE==4){
                                         AGENCE = 'BOUAKE'
                                    }
                                tableBacDisponible1.row.add([

                                    value.NumeroBAC,
                                    AGENCE
                                ])
                            })

                            tableBacDisponible1.draw()

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

                                  var AGENCE = ''
                                 
                                    if(value.IDAGENCE == 2){
                                    AGENCE = 'VRIDI'
                                    }
                                    
                                    if(value.IDAGENCE==3){
                                     AGENCE = 'GAGNOA'
                                    }
                                    if(value.IDAGENCE==4){
                                         AGENCE = 'BOUAKE'
                                    }
                                tableBacDisponible2.row.add([

                                    value.NumeroBAC,
                                    AGENCE

                                ])

                            })

                            tableBacDisponible2.draw()
                            return false
                       }
                       
                      

                        //fixeTableHeader(table)
                    }, function() {},
                    function() {
                        progressHandler()
                    })
            })





        })


        function listeProduit() {
            MarequetesAjax("{{ route('listingProduitSimple') }}", "GET", null, null, true, "JSON", function(resp) {


                $('.ProduitListSelect').html('')
                $('.ProduitListSelect').append('<option value="0" selected>TOUS</option>')
                $.each(resp.data, function(key, value) {
                    $('.ProduitListSelect').append('<option value="' + value.IDPRODUIT + '">' + value
                        .DesignationProduit + '</option>');
                })
            })
        }
    </script>
@endsection