@extends('models')
@section('titre-page',"on à préparer sans facture")
@section('content-body')
<!-- Page Header -->
<div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb ">
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-8 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Vente</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bon à préparer sans facture</li>
                        </ol>

                    </nav>
                </div>

                <div class="col-xl-4 col-lg-4 col-md-8 text-end">

                    <div class="d-flex justify-content-end align-items-center mt-2">
                        <p class="mb-0 text-muted">Période&nbsp;:</p>
                        <input type="text" id="periode-bon-preparation" class="form-control text-center" name="daterange" />
                    </div>
                </div>
            </div>
        </div>
</div>
<div class="card">
    <div class="card-body">
      
        <div class="row g-1">
            <div class="col-xl-1 mb-2">
                    <div class="col-xl-12">
                       <div for="" class="mt-2 text-muted">Agence  :</div>
                       <select  class="form-select" style="padding :6px" id="agence-bon-preparation" @disabled(checkIfDroit('DG_AccesMultiSite'))>
                          
                        </select>
                    </div>
            </div>

              <div class="col-xl-2 mb-2">
                    <div class="col-xl-12">
                       <div for="" class="mt-2 text-muted">Type  :</div>
                       <select  class="form-select" style="padding :6px" id="type-bon-preparation">
                            <option value="0">TOUS</option>
                            <option value="1">NORMALE</option>
                            <option value="2">URGENTE</option>
                            <option value="3">GARDE</option>
                            <option value="4">MISE EN PLACE</option>
                            <option value="6">RENFORCEMENT</option>
                            <option value="7">CALL OUT</option>
                        </select>
                    </div>
            </div>

            <div class="col-xl-6 mb-2">
                <div class="row g-1">
                    <div class="col-xl-4">
                       <div for="" class="mt-2 text-muted">Mode de passation  :</div>
                       <select name="" class="form-select" style="padding :6px" id="mode-passation">
                            <option value="0">TOUS</option>
                            <option value="1">TELEPHONE</option>
                            <option value="2">EXTRANET</option>
                            <option value="3">PHARMA-ML</option>
                            <option value="4">TEDIS-DIRECT</option>
                        </select>
                    </div>
                    <div class="col-xl-4">
                        <div for="" class="mt-2 text-muted">Tournée  :</div>
                        <select name="" class="form-select" style="padding :6px" id="tournee-client">
                          
                        </select>
                    </div>
                    <div class="col-xl-4">
                         <div for="" class="mt-2 text-muted">Zone de stockage  :</div>
                          <select class="form-select" style="padding :6px" id="zone-stockage">
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-xl-2" style="margin-top: 22px" >
                    <div class="form-check form-check-md form-switch ms-2">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch-uniq-cmu">
                        <label class="form-check-label" style="font-weight: 100; font-size:12px" for="switch-uniq-cmu">Uniq les C.M.U</label>
                    </div>

                    <div class="form-check form-check-md form-switch ms-2">
                        <input class="form-check-input" type="checkbox" role="switch" id="switch-uniq-gardes">
                        <label class="form-check-label" style="font-weight: 100; font-size:12px" for="switch-uniq-gardes">Uniq les Gardes</label>
                    </div>
            </div>

            <div class="col-xl-1">
                <div class="d-flex justify-content-end mt-4">
                    <div>
                        <button  id="BtnActualise-bon-preparation"
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="Actualiser l'interface"
                         class="btn btn-warning-light">
                        <i class="ri-refresh-line" style="font-size:13px;"></i>
                        </button>
                    </div>

                    <div class="ms-2">
                        <button  id="recalculer-bon-preparation"  data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Recontroler"
                            class="btn btn-primary-light">
                        <i class="ri-add-circle-line" style="font-size:13px;"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

            

        <div class="table-responsive mt-4">
            <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="bon-preparation-sans-facture-table">
                <thead class="bg-thead">
                    <tr>
                        <th class="d-none">id</th>
                        <th><input class="form-check-input me-1" type="checkbox" id="checkSelectAll">#</th>
                        <th>Date</th>
                        <th>N° commande</th>
                        <th>Client</th>
                        <th>Type</th>
                        <th>Zone de collecte</th>
                        <th>Commentaire</th>
                    </tr>
                </thead>
            </table>
        </div>

        <div class="table-responsive mt-4">
            <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="bon-preparation-sans-facture-detail-table">
                <thead class="bg-thead">
                    <tr>
                        <th>Désignation</th>
                        <th>Colisage</th>
                        <th>Qte à collecter</th>
                        <th>Qte collectée</th>
                        <th>Ecart</th>
                        <th>Allée</th>
                        <th>Emplacement</th>
                        <th>Douchette assignée</th>
                        <th>Lecteur collecteur</th>
                        <th>Code</th>
                        <th>N° Bac</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@endsection

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

        listingComboAgence('#agence-bon-preparation').then((result) => {
            $('#agence-bon-preparation').val($("#idSiteEnCours").val()).change()
        });

        listingComboTourneeClient('#tournee-client')
        $('#tournee-client').select2()
        remplirSelect2("{{route('filtre_zone_stockage.get')}}",null, "#zone-stockage", "IDZONESTOCKAGE","NomZoneStockage", null, "TOUTES");
        $('#zone-stockage').select2()

        $(document).on('click', '#BtnActualise-bon-preparation', function() {
            var agence = $('#agence-bon-preparation').val();
            var typeBonPreparation = $('#type-bon-preparation').val();
            var modePassation = $('#mode-passation').val();
            var tourneeClient = $('#tournee-client').val();
            var zoneStockage = $('#zone-stockage').val();
            var periodeBonPreparation = $('#periode-bon-preparation').val().split(' - ');
            var dateDebut = periodeBonPreparation[0];
            var dateFin = periodeBonPreparation[1];
            var uniqCmu = $('#switch-uniq-cmu').is(':checked');
            var uniqGardes = $('#switch-uniq-gardes').is(':checked');

            recuperationDataTableSuiviIntegrationSage(agence,typeBonPreparation, modePassation, tourneeClient, zoneStockage, dateDebut, dateFin, uniqCmu, uniqGardes);
        });

        fixe_elements_on_headers_tab('bon-preparation-sans-facture-table',`
                    <div class="d-flex align-items-center">
                       <div style="width:12px;height:12px; border-radius:12px;background:teal"></div>
                          <span class="ms-2">En collecte</span>
                    </div>

                    <div class="d-flex align-items-center ms-2">
                       <div style="width:12px;height:12px; border-radius:12px;background:#38B44A"></div>
                          <span class="ms-2">Collecte terminée</span>
                    </div>

                    <div class="d-flex align-items-center ms-2">
                       <div style="width:12px;height:12px; border-radius:12px;background:orange"></div>
                          <span class="ms-2">Collecte terminée sans qtés collectées</span>
                    </div>

                    <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                                                    <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                                    <span id="btn-export-prepartion-sans-facture" class="fw-bold" style="cursor : pointer;">Exporter</span>
                    </span>

                  
        `);

        fixe_elements_on_headers_tab('bon-preparation-sans-facture-detail-table',`
                    
                    <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                                                    <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                                    <span id="btn-export-prepartion-sans-facture-detail" class="fw-bold" style="cursor : pointer;">Exporter</span>
                    </span>

                  
        `);

        var tables = $('#bon-preparation-sans-facture-table').DataTable();
        $(document).on('click','#bon-preparation-sans-facture-table tbody tr', function() {

            var row = tables.row(this);
            var rowDataId = row.data()[0];
            
            $.ajax({
                type: "GET",
                url: "{{ route('recup_bonPreparationSansFactureDetail.get') }}",
                data: {idBonPreparation: rowDataId},
                dataType: "JSON",
                success: function (resp) {
                    var tableDetail = $('#bon-preparation-sans-facture-detail-table').DataTable();
                    tableDetail.clear().draw();

                    $.each(resp.data, function(index, item) {
                        tableDetail.row.add([
                            item.DesignationProduit,
                            item.ColisageProduit,
                            item.QuantiteAPreparer,
                            item.QuantitePreparee,
                            item.QuantiteAPreparer - item.QuantitePreparee,
                            item.NomAllee,
                            item.NomEmplacementDetail,
                            item.lecteurAssigne,
                            item.NomLecteur,
                            item.CodeCipProduit1,
                            item.NumeroBAC
                        ]);
                    });
                    tableDetail.draw();
                }
            });
    
        });

        $(document).on('click','#btn-export-prepartion-sans-facture',function(){
            var data = remplissage_avec_row_add_DataTable('bon-preparation-sans-facture-table')
            const filename = file_name("PRÉPARATION SANS FACTURE");
             const tabExclus=['#']
            download_excel_file('{{route("export_global_excel.export")}}', data, filename, tabExclus);
        })

         $(document).on('click','#btn-export-prepartion-sans-facture-detail',function(){
            var data = remplissage_avec_row_add_DataTable('bon-preparation-sans-facture-detail-table')
            const filename = file_name("DETAILS PRÉPARATION SANS FACTURE");
            
            download_excel_file('{{route("export_global_excel.export")}}', data, filename);
        })

        $(document).on('click', '#checkSelectAll', function() {
            var isChecked = $(this).is(':checked');
            $('.checking-checkbox-tab').prop('checked', isChecked);
        });

        $(document).on('click','#recalculer-bon-preparation', function() {
            var checkedBoxes = $('.checking-checkbox-tab:checked');
            if (checkedBoxes.length === 0) {
                notif('warning','Attention','Veuillez sélectionner au moins un bon de préparation.');
                return;
            }

            var ids = [];
            checkedBoxes.each(function() {
                ids.push({
                    idBonPreparation: $(this).data('idbonpreparation'),
                    idCmdeClient: $(this).data('idcmdeclient')
                });
            });

            $.ajax({
                type: "PUT",
                url: "{{ route('recalcul_bonPreparationSansFacture.update') }}",
                data: {ids: ids,_token: "{{ csrf_token() }}"},
                dataType: "JSON",
                beforeSend: progressHandler(),
                success: function (resp) {
                     completeHandler()
                    if (resp.succes) {
                        notif('success','Succès',resp.msg);
                       
                       recuperationDataTableSuiviIntegrationSage($('#agence-bon-preparation').val(), $('#type-bon-preparation').val(), $('#mode-passation').val(), $('#tournee-client').val(), $('#zone-stockage').val(), $('#periode-bon-preparation').val().split(' - ')[0],
                        $('#periode-bon-preparation').val().split(' - ')[1], $('#switch-uniq-cmu').is(':checked'), $('#switch-uniq-gardes').is(':checked'), false);
                    } else {
                        notif('danger','Erreur',resp.msg);
                    }
                },
                error: function (xhr, status, error) {
                     completeHandler()
                    console.error("Erreur lors du recalcul des bons de préparation :", error);
                }
            });
        });
    })

    function recuperationDataTableSuiviIntegrationSage($agence,$typeBonPreparation,$modePassation,$tourneeClient,$zoneStockage,$dateDebut,$dateFin,$uniqCmu,$uniqGardes,$verif = true) {


      $.ajax({
        type: "GET",
        url: "{{ route('recup_bonPreparationSansFacture.get') }}",
        data: {
            agence:$agence,
            typeBonPreparation:$typeBonPreparation,
            modePassation:$modePassation,
            tourneeClient:$tourneeClient,
            zoneStockage: $zoneStockage,
            date_debut:$dateDebut,
            date_fin:$dateFin,
            uniqCmu:$uniqCmu,
            uniqGardes:$uniqGardes
        },
        beforeSend: function() {
            if($verif){
             progressHandler();
            }
        },
        dataType: "JSON",
        success: function (resp) {
            if($verif){
              completeHandler();
            }

            var table =  $('#bon-preparation-sans-facture-table').DataTable();
            table.clear().draw();

                $.each(resp.data, function(index, item) {
                    if(item.TypeCommandeClient == 1){
                        item.type_bon_preparation = 'NORMALE';
                    } else if(item.TypeCommandeClient == 2){
                        item.type_bon_preparation = 'URGENTE';
                    } else if(item.TypeCommandeClient == 3){
                        item.type_bon_preparation = 'GARDE';
                    } else if(item.TypeCommandeClient == 4){
                        item.type_bon_preparation = 'MISE EN PLACE';
                    } else if(item.TypeCommandeClient == 6){
                        item.type_bon_preparation = 'RENFORCEMENT';
                    } else if(item.TypeCommandeClient == 7){
                        item.type_bon_preparation = 'CALL OUT';
                    }

                   var EtapeCollecte ='';
                    switch (item.EtapeCollecte) {
                        case 1:
                        EtapeCollecte += `<div style="width:12px;height:12px; border-radius:12px;background:teal;position:absolute;margin-left:30px;margin-top:5px"></div>`;
                            break;
                        case 2:
                        EtapeCollecte += `<div style="width:12px;height:12px; border-radius:12px;background:#38B44A;position:absolute;margin-left:30px;margin-top:5px"></div>`;
                            break;
                        case 4:
                        EtapeCollecte += `<div style="width:12px;height:12px; border-radius:12px;background:orange;position:absolute;margin-left:30px;margin-top:5px"></div>`;
                            break;
                    }

                    switch (item.ModeCommande) {
                        case 1:
                             numeroCommande = `${EtapeCollecte} <span class="badge bg-primary-transparent w-75">${item.NumeroCommandeClient}</span>`;
                            break;
                        case 2:
                             numeroCommande = `${EtapeCollecte} <span class="badge bg-danger-transparent w-75">${item.NumeroCommandeClient}</span>`;
                            break;
                        case 3:
                             numeroCommande = `${EtapeCollecte} <span class="badge bg-warning-transparent w-75">${item.NumeroCommandeClient}</span>`;
                        case 4:
                             numeroCommande = `${EtapeCollecte} <span class="badge bg-success-transparent w-75">${item.NumeroCommandeClient}</span>`;
                            break;
                       
                    }

                    table.row.add([
                        item.IDBONPREPARATION,
                        `<div>
                            <input type="checkbox" class="form-check-input me-1 checking-checkbox-tab"
                            data-idbonpreparation="${item.IDBONPREPARATION}" id="checkbox-${index}" data-idcmdeclient="${item.IDCOMMANDECLIENT}" />
                            <label for="checkbox-${index}" class="form-check-label"></label>
                        </div>`,
                        new Date(item.DateCommandeClient).toLocaleDateString('fr-FR', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit'
                        }),
                        numeroCommande,
                        item.NomClient,
                        item.type_bon_preparation,
                        item.NomZoneStockage ? item.NomZoneStockage : '',
                        item.CommentaireComdeClient
                    ])
                });

                table.draw();
        },
        error: function (xhr, status, error) {
            if($verif){
              completeHandler();
            }
            console.error("Erreur lors de la récupération des données :", error);
        }
      });
    }
</script>
@endsection