@extends('base')
@php
    use App\fonctions\definir_date_selection_fonction;
    $dates=(new definir_date_selection_fonction())->definir_date_selection($parametre->parametre_date_grille_generale);
@endphp
@section('content')
    <div class="alert alert-success text-center">Liste de(s) commande(s)</div>
    <div class="form-row">
        <div class="form-group col-md-2" >
            <label for="date_debut">Début:</label>
            <input type="date" class="form-control" style="color:black !important" id="date_debut" value="{{$dates['debut']}}">
        </div>
        <div class="col-md-1" style="margin-top: 1.6%;margin-left: -0.4%;">

            <button type="button" class="btn btn-success" id="date_precedent" ><i class="fas fa-caret-left"></i></button>
        </div>
        <div class="col-md-1" style="margin-top: 1.6%;margin-left: -6%;">
            <button type="button" class="btn btn-success" id="date_suivant"><i class="fas fa-caret-right"></i></button>
        </div>
        <div class="form-group col-md-2" style="margin-left: -6%;">
            <label for="date_fin">Fin:</label>
            <input type="date" class="form-control" style="color:black !important" id="date_fin" value="{{$dates['fin']}}">
        </div>
        <div class="col-md-1">
            <label for="horaire_commande" ><b>Période :</b></label>
            <select class="form-control" name="horaire_commande" id="horaire_commande">
                <option value="0" selected="selected">Journée</option>
                <option value="1">Matin</option>
                <option value="2" >Après midi</option>
            </select>
        </div>
        <div class="col-md-1">
            <label for="detail_commande" ><b>Détail :</b></label>
            <select class="form-control" name="detail_commande" id="detail_commande">
                <option value="0">OF</option>
                <option value="1" selected="selected">BL</option>
                <option value="2" >Ligne commande</option>
            </select>
        </div>
        <div class="col-md-3" style="text-align: right;padding-top: 1.5%;padding-right: 3%;">
            <button class="btn btn-success refrech" >Rafraichir</button>
            <button class="btn btn-success " id="commande_graph_synthese">Synthèse</button>
                    </div>
    </div>
    <div class="form-row">
        <div class="col-md-2">
            <label for="commande_centrale" ><b>Centrale :</b></label>
            <select class="form-control" name="commande_centrale[]" id="commande_centrale" multiple>
                @foreach($centrales as $centrale)
                    <option value="{{$centrale->id_centrale}}" selected>{{$centrale->centrale_code}} -> {{$centrale->centrale_nom}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label for="commande_statut" ><b>Statut :</b></label>
            <select class="form-control" name="commande_statut" id="commande_statut">
                <option value="0">Tous</option>
                <option value="1">Pré commande</option>
                <option value="2">Validée</option>
                <option value="3">Sur centrale</option>
                <option value="4">Soldée</option>
                <option value="5">Annulée</option>
            </select>
        </div>
        <div class="col-md-2">
            <label for="commande_suivi_commande" ><b>Suivi :</b></label>
            <select class="form-control" name="commande_suivi_commande" id="commande_suivi_commande">
                <option value="0">Toutes</option>
                @foreach($suivis_commande AS $suivi_commande)
                    <option value="{{$suivi_commande->id_suivi_commande}}">{{$suivi_commande->suivi_commande_code}} ->
                        {{$suivi_commande->suivi_commande_libelle}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label for="commande_client_comptant" ><b>Client :</b></label>
            <select class="form-control" name="commande_client_comptant" id="commande_client_comptant">
                <option value="9">Toutes</option>
                <option value="1">Comptant</option>
                <option value="0">En compte</option>

            </select>
        </div>
        <div class="col-md-2" style="padding-top: 2%;">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="commande_soldee" name="commande_soldee" checked >
                <label class="form-check-label" for="commande_soldee" > Inclure soldées</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="commande_sous_centrale" name="commande_sous_centrale" checked >
                <label class="form-check-label" for="commande_sous_centrale" > Inclure sous centrale</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="commande_confirme" name="commande_confirme">
                <label class="form-check-label" for="commande_confirme">Uniquement confirmées</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="afficher_tours" name="afficher_tours" checked>
                <label class="form-check-label" for="afficher_tours">Afficher tours</label>
            </div>
        </div>
    </div>
    <div  class="col-md-12 text-center">
        Nombre de commande(s) : <span id="nombre_commande" class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;">0 </span>
        Qte commandée : <span id="quantitee" class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;">0</span>
        Qte livrée : <span id="quantite_livree" class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;"></span>
        Qte reste : <span id="quantite_reste" class="badge" style="background : #dff0d8; color: #000; font-size: 15px; margin-bottom:0.5%;">0</span>
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" id="table_commande">
            <thead style="background-color:#28a745; color:white">
            <tr>
                <th scope="col" class="text-center">D</th>
                <th scope="col" class="text-center">CENT</th>
                <th scope="col" class="text-center">C</th>
                <th scope="col" class="text-center">DATE</th>
                <th scope="col" class="text-center">HEURE</th>
                <th scope="col" class="text-center">CLIENT</th>
                <th scope="col" class="text-center">CHANTIER</th>
                <th scope="col" class="text-center">FORMULE</th>
                <th scope="col" class="text-center">QTE</th>
                <th scope="col" class="text-center">CUBAGE</th>
                <th scope="col" class="text-center">Service(s)</th>
                <th scope="col" class="text-center">REF CMDE CLIENT</th>
                <th scope="col" class="text-center">COMMENTAIRE</th>
                <th scope="col" class="text-center">TOUR(S)</th>
                <th scope="col" class="text-center">CODE DEVIS</th>
                <th scope="col" class="text-center">ENVOI CONFIRMATION</th>
                <th scope="col" class="text-center">SOLDE</th>
                <th scope="col" class="text-center">PDF</th>
                <th scope="col" class="text-center" aria-label="Rendering engine: activate to sort column ascending">SUPPRIMER</th>
            </tr>
            </thead>
        </table>
    </div>

    <script>
        $(document).ready(function() {
            var text = "COMMANDE - SMART CENTRAL  " ;
            $('title').text(text);
            /////////////////////////////////////
            $("#date_debut").change(function (e) {
                e.preventDefault();
                let valeur = $(this).val()
                if (valeur && !isNaN(Date.parse(valeur))) {
                    $("#date_fin").val($("#date_debut").val());
                }
            });
            ///////////////////////////////////////
            $("#date_precedent").click(function() {
                var moment = $("#date_debut").val();
                // alert( moment);
                var formattedDate = new Date(moment);
                formattedDate.setDate(formattedDate.getDate() - 1);
                var d = formattedDate.getDate();
                if (d < 10) {
                    d = "0" + d;
                }
                var m = formattedDate.getMonth();
                m += 1; // JavaScript months are 0-11
                // console.log(m)
                if (m < 10) {
                    m = "0" + m;
                }
                var y = formattedDate.getFullYear();
                $("#date_debut").val(y + "-" + m + "-" + d);
                // alert(y + "-" + m + "-" +d);
                $("#date_debut").change();
            });
            $("#date_suivant").click(function() {
                var moment = $("#date_debut").val();
                // alert( moment);
                var formattedDate = new Date(moment);
                formattedDate.setDate(formattedDate.getDate() + 1);
                var d = formattedDate.getDate();
                if (d < 10) {
                    d = "0" + d;
                }
                var m = formattedDate.getMonth();
                m += 1; // JavaScript months are 0-11
                // console.log(m)
                if (m < 10) {
                    m = "0" + m;
                }
                var y = formattedDate.getFullYear();
                $("#date_debut").val(y + "-" + m + "-" + d);
                // alert(y + "-" + m + "-" +d);
                $("#date_debut").change();
            });
            ////////////////////////////////

            var table = $('#table_commande').on('processing.dt', function(e, settings, processing) {
                $('.ring').css('display', processing ? 'block' : 'none');
                $('#filtre_loading').css('display', processing ? 'block' : 'none');
            }).DataTable({
                scrollX: true,
                // fixedHeader: true,
                scrollCollapse: true,
                autoWidth: true,
                paging: true,
                searchDelay: 3000, // en millisecondes, donc 3 secondes
                fixedHeader: {
                    header: true,
                    // footer: true
                },
                // fixedColumns: {
                //     leftColumns: 2,
                //     // rightColumns: 1
                // },
                "iDisplayLength": 100,
                dom: 'lBfrtip',
                buttons: [

                    { "extend": 'excel', "text": 'Export excel', "className": 'btn btn-success', title: 'Liste de(s) commande(s) ', exportOptions: { columns: [1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] } }
                ],
                "ajax": {
                    // "url": "https://minierbeton.myalfi-connect.com/commande/commande_table_tr.php",
                    "url": "{{route('commande_laravel.table')}}",
                    "type": "GET",

                    "data": {
                        'date_debut': function() { return $('#date_debut').val() },
                        'date_fin': function() { return $("#date_fin").val() },
                        'commande_centrale': function() { return $("#commande_centrale").val() },
                        'commande_soldee': function() {
                            if ($('input[name=commande_soldee]').is(':checked')) { var commande_soldee = 1 } else { var commande_soldee = 0 }
                            return commande_soldee
                        },
                        'commande_sous_centrale': function() {
                            if ($('input[name=commande_sous_centrale]').is(':checked')) { var commande_sous_centrale = 1 } else { var commande_sous_centrale = 0 }
                            return commande_sous_centrale
                        },
                        'commande_confirme': function() {
                            if ($('input[name=commande_confirme]').is(':checked')) { var commande_confirme = 1 } else { var commande_confirme = 0 }
                            return commande_confirme
                        },
                        'horaire_commande': function() { return $("#horaire_commande").val() },
                        'commande_suivi_commande': function() { return $("#commande_suivi_commande").val() },
                        'commande_client_comptant': function() { return $("#commande_client_comptant").val() },
                        'commande_statut': function() { return $("#commande_statut").val() },

                    },

                    "dataSrc": function(json) {
                        // console.log();

                        $("#nombre_commande").html(json.recordsTotal);
                        $("#quantitee").html(json.quantitee);
                        $("#quantite_livree").html(json.quantite_livree);
                        $("#quantite_reste").html(json.quantite_reste);

                        return json.data;
                    },
                },

                columnDefs: [
                    {
                        "targets": 1,
                        "createdCell": function(td, cellData, rowData, row, col) {
                            // console.log(rowData);

                            // if (cellData < 1) {
                            $(td).css('background-color', rowData['DT_RowColor']);
                            // }

                            if (rowData['DT_ConfirmerCentraleColor'] != "") {
                                $(td).css('background-color', rowData['DT_ConfirmerCentraleColor']);

                            }
                        }



                    },

                    {
                        "targets": 3,
                        "createdCell": function(td, cellData, rowData, row, col) {

                            if (rowData['DT_confirmerDateColor'] != "") {
                                $(td).css('background-color', rowData['DT_ConfirmerDateColor']);
                            }


                        }

                    },

                    {
                        "targets": 4,
                        "createdCell": function(td, cellData, rowData, row, col) {

                            if (rowData['DT_confirmerHeureColor'] != "") {
                                $(td).css('background-color', rowData['DT_ConfirmerHeureColor']);
                            }
                            if (rowData['DT_HeureColor'] != "") {
                                $(td).css('background-color', rowData['DT_HeureColor']);
                            }

                        }

                    },

                    {
                        "targets": 5,
                        "createdCell": function(td, cellData, rowData, row, col) {



                            if (rowData['DT_ClientColor'] != "") {
                                $(td).css('background-color', rowData['DT_ClientColor']);
                            }
                            if (rowData['DT_ConfirmerClientColor'] != "") {
                                $(td).css('background-color', rowData['DT_ConfirmerClientColor']);
                            }
                            if (rowData['DT_ClientComptant'] == "1") {
                                $(td).css('color', 'blue');
                            }

                        }

                    },


                    {
                        "targets": 6,
                        "createdCell": function(td, cellData, rowData, row, col) {


                            if (rowData['DT_RowSousCentrale'] == 1) {
                                $(td).css('background-color', 'khaki');
                            }

                            if (rowData['DT_ConfirmerChantierColor'] != "") {
                                $(td).css('background-color', rowData['DT_ConfirmerChantierColor']);
                            }
                            // }
                        }



                    },
                    {
                        "targets": 7,
                        "createdCell": function(td, cellData, rowData, row, col) {


                            if (rowData['DT_AdjAjoutColor'] != "") {
                                $(td).css('background-color', rowData['DT_AdjAjoutColor']);

                            }

                            if (rowData['DT_ConfirmerFormuleColor'] != "") {
                                $(td).css('background-color', rowData['DT_ConfirmerFormuleColor']);
                            }

                        }

                    },

                    {
                        "targets": 8,
                        "createdCell": function(td, cellData, rowData, row, col) {

                            if (rowData['DT_ConfirmerQuantiteColor'] != "") {
                                $(td).css('background-color', rowData['DT_ConfirmerQuantiteColor']);
                            }

                        }

                    },


                    {
                        "targets": 9,
                        "createdCell": function(td, cellData, rowData, row, col) {


                            if (rowData['DT_LivreeColor'] != "") {
                                $(td).css('background-color', rowData['DT_LivreeColor']);
                                //$(td).css('color', rowData['DT_LivreeColor']);
                            }

                        }

                    },
                    {
                        "targets": 11,
                        "createdCell": function(td, cellData, rowData, row, col) {

                            if (rowData['DT_ClientBcObligatoire'] == "1") {
                                $(td).css('background-color', 'magenta');
                            }

                        }

                    },

                    {
                        "targets": 13,
                        "data": function(json) {
                            var valeur = json[13];
                            // console.log(valeur[0]['planning_quantite']);
                            // var text = '<div class="btn-group" role="group"><button id="btnpdf" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + valeur + '</button><div class="dropdown-menu" aria-labelledby="btnpdf"><a class="dropdown-item commande_pdf" >Valorisé</a><a class="dropdown-item commande_pdf_non_valorisee" >Non Valorisé</a></div></div> ';
                            var text = '<div class = "text-center" style= "color:' + json['DT_MoyenDechargementColor'] + ' ;font-weight: bold;">Moyen dech : ' + json['DT_MoyenDechargement'] + '</div><div>Nb véhicule(s) prev : ' + json['DT_NbVehicule'] + '</div><div>Nb voyage(s) prev : ' + json['DT_NbVoyage'] + '</div><div>Cadence : ' + json['DT_TpsCadence'] + ' / Dech. : ' + json['DT_TpsDech'] + '</div><div class="text-center">Nombre de Tour(s)  : <span class="badge" style="background: #dff0d8; color: #000; font-size: 15px;">' + valeur.length + '</span></div>';
                            if ($('input[name=afficher_tours]').is(':checked')) {
                                for (let index = 0; index < valeur.length; index++) {

                                    var heure_planning = valeur[index]['planning_date'] + ' ' + valeur[index]['planning_heure_dep_centrale'];
                                    var formattedDate = new Date(heure_planning);
                                    // console.log(heure_planning);
                                    // console.log(formattedDate);
                                    var h = formattedDate.getHours();
                                    if (h < 10) {
                                        h = "0" + h;
                                    }
                                    var min = formattedDate.getMinutes();
                                    if (min < 10) {
                                        min = "0" + min;
                                    }

                                    // const element = array[index];
                                    text += '<div class="tour_prev" id_tour_prev="' + valeur[index]['id_planning'] + '" style="background: lightblue;margin-bottom: 1%;padding: 2%;border-radius: 10px;cursor: pointer;"><b>' + h + ':' + min + '</b>-' + valeur[index]['Vehicule_Code'] + '-' + valeur[index]['chauffeur_nom'] + '-<b>' + valeur[index]['planning_quantite'] + '</b></div>';
                                }
                            }


                            // var text = 'tour';

                            return text;
                        },
                        "defaultContent": null



                    },
                    {
                        "targets": 10,
                        "data": function(json) {
                            var valeur = json[10];
                            // console.log(valeur[0]['planning_quantite']);
                            // var text = '<div class="btn-group" role="group"><button id="btnpdf" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + valeur + '</button><div class="dropdown-menu" aria-labelledby="btnpdf"><a class="dropdown-item commande_pdf" >Valorisé</a><a class="dropdown-item commande_pdf_non_valorisee" >Non Valorisé</a></div></div> ';
                            var text = '';

                            for (let index = 0; index < valeur.length; index++) {

                                var color= 'style=""';
                                if(valeur[index]['service_couleur']!=null && valeur[index]['service_couleur']!='#fff'){
                                    color='style="color:'+valeur[index]['service_couleur']+'"';
                                }
                                // const element = array[index];
                                text += '<div '+color+'>' + valeur[index]['service_nom'] + '</div>';
                                if (index < (valeur.length) - 1) {
                                    text += '<div>-</div>';
                                }

                                // var color= 'style=""';
                                // if(valeur[index]['ligne_commande_couleur_article']!=null && valeur[index]['ligne_commande_couleur_article']!='#fff'){
                                //     color='style="color:'+valeur[index]['ligne_commande_couleur_article']+'"';
                                // }
                                // // const element = array[index];
                                // text += '<div '+color+'>' + valeur[index]['ligne_commande_libelle_article'] + '</div>';
                                // if (index < (valeur.length) - 1) {
                                //     text += '<div>-</div>';
                                // }
                            }



                            // var text = 'tour';

                            return text;
                        },
                        "defaultContent": null



                    },
                    {
                        "targets": 17,
                        "data": function(json) {
                            var valeur = json[17];

                            var text = '<div class="btn-group" role="group"><button id="btnpdf" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + valeur + '</button><div class="dropdown-menu" aria-labelledby="btnpdf"><a class="dropdown-item commande_pdf" >Valorisé</a><a class="dropdown-item commande_pdf_non_valorisee" >Non Valorisé</a></div></div> ';


                            return text;
                        },
                        "defaultContent": null



                    },
                    {
                        "targets": 0,
                        "data": null,
                        "orderable": false,
                        "className": 'details-control',
                        "defaultContent": ''
                    },
                    // { "className": "d-none", "targets": [14] },
                    { "className": "text-center align-middle th_cursor_pointer", "targets": [0] },
                    // { "className": "text-center align-middle modif_commande th_cursor_pointer", "targets": [1] },
                    { "className": "text-center align-middle devis_pdf_dans_commande th_cursor_pointer", "targets": [14] },
                    { "className": "text-center align-middle solde_commande th_cursor_pointer", "targets": [16] },
                    { "className": "text-center align-middle confirmer_commande th_cursor_pointer", "targets": [2] },
                    //  { "className":"text-center align-middle pdf_commande th_cursor_pointer", "targets": [16] },
                    { "className": "text-center align-middle supp_commande th_cursor_pointer", "targets": [18] },
                    { "className": "text-center align-middle ", "targets": "_all" },
                    { "orderable": false, "targets": [10, 12] },
                    { "width": "70px", "targets": [3] },
                    //{ "width": "80px", "targets": [1] },
                    //    { "width": "150px", "targets": [5] },
                    // { "width": "200px", "targets": [8] },
                    { "width": "100px", "targets": [5] },
                    { "width": "100px", "targets": [10] },
                    { "width": "80px", "targets": [9] },
                    { "width": "80px", "targets": [8] },
                    { "width": "200px", "targets": [13] },
                    //    { "width": "150px", "targets": [13] },
                    //    { "width": "150px", "targets": [11] },
                ],
                //"order": [
                //    [3, 'asc'],

                //],

                // "createdRow": function(row, data, dataIndex) {

                //     // console.log(data['DT_RowColor']);
                //     $(row).css('background-color', data['DT_RowColor'])

                // }
            });
            $(".btn-success").css("color", "#fff");
            $(".btn-success").css("background-color", "#218838");
            $(".btn-success").css("#1e7e34", "#1e7e34");



        });
    </script>

@endsection