@extends('layouts.master', ['hide_topbar' => 'topbar2','hide_sidebar' => 'ok'])
@section('title', 'Page accueil')
@section('titlePageHeading', '')

    @section('content')
    @if($commande_editable)
        <fieldset >     
            <legend>Catalogue produits 
            <a style="font-size: 80%;padding: 0;" class="btn btn-link" data-toggle="collapse" href="#bloc_1" role="button" aria-expanded="false" aria-controls="bloc_1">
                <i class="fa fa-plus-square" aria-hidden="true" onclick="$('#m_bloc_1').show();$('#p_bloc_1').hide()" style="display: none" id="p_bloc_1"></i>
                <i class="fa fa-minus-square" aria-hidden="true" onclick="$('#p_bloc_1').show();$('#m_bloc_1').hide()" id="m_bloc_1" ></i>
            </a>  
            <a style="float: right;" href="/commandes/commandes_fiche/0/{{ $canals_id}}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
                <i class="fas fa-redo"></i> Initialiser
            </a>   
            </legend>    
            <div class="collapse show" id="bloc_1">
                <div class="quote">{!! $liste_produits !!}</div> 
            </div> 
        </fieldset>
    @else
        @include('partials.commande_info')
    @endif


    <fieldset >     
        <legend>Panier commandes
        <a style="font-size: 80%;padding: 0;" class="btn btn-link" data-toggle="collapse" href="#bloc_2" role="button" aria-expanded="false" aria-controls="bloc_2">
            <i class="fa fa-plus-square" aria-hidden="true" onclick="$('#m_bloc_2').show();$('#p_bloc_2').hide()" style="display: none" id="p_bloc_2"></i>
            <i class="fa fa-minus-square" aria-hidden="true" onclick="$('#p_bloc_2').show();$('#m_bloc_2').hide()" id="m_bloc_2" ></i>
        </a>     
        </legend>    
        <div class="collapse show" id="bloc_2">
            <div class="quote">{!! $liste_commandes_details !!}</div> 
        </div> 
    </fieldset>


    <fieldset id="fieldset_liste_commandes_gratuites"  >     
        <legend>Gratuites et cadeaux
        <a style="font-size: 80%;padding: 0;" class="btn btn-link" data-toggle="collapse" href="#bloc_grat" role="button" aria-expanded="false" aria-controls="bloc_grat">
            <i class="fa fa-plus-square" aria-hidden="true" onclick="$('#m_bloc_grat').show();$('#p_bloc_grat').hide()" style="display: none" id="p_bloc_grat"></i>
            <i class="fa fa-minus-square" aria-hidden="true" onclick="$('#p_bloc_grat').show();$('#m_bloc_grat').hide()" id="m_bloc_grat" ></i>
        </a>     
        </legend>    
        <div class="collapse show" id="bloc_grat">
            <div class="quote">{!! $liste_commandes_gratuites !!}</div> 
        </div> 
    </fieldset>

    <fieldset id="fieldset_liste_commandes_restrictions">
        <legend>Restrictions commandes
            <a style="font-size: 80%;padding: 0;" class="btn btn-link" data-toggle="collapse" href="#bloc_restriction"
                role="button" aria-expanded="false" aria-controls="bloc_restriction">
                <i class="fa fa-plus-square" aria-hidden="true"
                    onclick="$('#m_bloc_restriction').show();$('#p_bloc_restriction').hide()" style="display: none"
                    id="p_bloc_restriction"></i>
                <i class="fa fa-minus-square" aria-hidden="true"
                    onclick="$('#p_bloc_restriction').show();$('#m_bloc_restriction').hide()" id="m_bloc_restriction"></i>
            </a>
        </legend>
        <div class="collapse show" id="bloc_restriction">
            <div class="quote">{!! $liste_commandes_restrictions !!}</div>
            <br>
            <div class="quote">{!! $liste_commandes_objectifs !!}</div>
        </div>
    </fieldset>



    @if($commande_editable)  
        
        @if(session('action_editable') && $commande_editable && $commandes_id==0)
            <div class="form-row">
                <div class="col-sm-9">
                </div>
                {{-- @if($_REQUEST["edit_prix_net_2"]!=0)
                    <a class="col-md-3 btn btn-primary btn-sm btn-block" href="{{ url('commandes/commandes_fiche?edit_prix_net_2=0') }}" class="btn btn-default">Désactiver modification prix</a>
                @else
                    <a class="col-md-3 btn btn-primary btn-sm btn-block" href="{{ url('commandes/commandes_fiche?edit_prix_net_2=1') }}" class="btn btn-default">Activer modification prix</a>
                @endif --}}
            </div>
        @endif

        <fieldset >     
            <legend>Réference commande
            <a style="font-size: 80%;padding: 0;" class="btn btn-link" data-toggle="collapse" href="#bloc_3" role="button" aria-expanded="false" aria-controls="bloc_3">
                <i class="fa fa-plus-square" aria-hidden="true" onclick="$('#m_bloc_3').show();$('#p_bloc_3').hide()" style="display: none" id="p_bloc_3"></i>
                <i class="fa fa-minus-square" aria-hidden="true" onclick="$('#p_bloc_3').show();$('#m_bloc_3').hide()" id="m_bloc_3" ></i>
            </a>     
            </legend>           
            <div class="panel panel-default">
            <div class="panel-body">  
                <div class="collapse show" id="bloc_3">
                    
                    <form id="formConfirmCommande"  action="{{ url('commandes/commandes_save/') }}" method="post" >
                        {{	csrf_field() }}
                        <div class="form-group row">
                            <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm font-weight-bold">N° commande</label>
                            <div class="col-sm-4">
                            <input readonly type="text" class="form-control form-control-sm" value="{{ $commande->n_commande }}" >
                            </div>

                            <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm font-weight-bold">Date commande</label>
                            <div class="col-sm-4">
                            <input readonly type="text" class="form-control form-control-sm" value="{{ $commande->created_at->format('d/m/Y H:i') }}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm font-weight-bold">Client </label>
                            <div class="col-sm-10">
                                <select class="form-control form-control-sm class_multi_select" id="clients_id" name="clients_id" required >
                                    <option value="" ></option>
                                    @foreach ($clients as $client)
                                    <option {{ ($client->id == $commande->clients_id) ? 'selected' : '' }} value="{{ $client->id }}" data-reglements="0,{{ $client->reglements_modes }}" >
                                        {{ $client->id.' | '.$client->denomination.' | '.$client->tel.' | '.$client->type_libelle.' | '.$client->ville_libelle }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm font-weight-bold">Commentaire</label>
                            <div class="col-sm-4">
                                <textarea class="form-control form-control-sm" id="commentaire" name="commentaire" rows="1">{{ $commande->commentaire }}</textarea>
                            </div>

                            <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm font-weight-bold">Statut commande </label>
                            <div class="col-sm-4">                            
                                @if($commande->commandes_statuts_id>0)                           
                                <input readonly type="text" class="form-control form-control-sm" value="{{ $commande->commande_statut->libelle }}" >
                                @else
                                <input readonly type="text" class="form-control form-control-sm" value="Non Enregistrée" >
                                @endif
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm font-weight-bold">Date livraison </label>
                            <div class="col-sm-2">                            
                            <input type="date" class="form-control form-control-sm"  id="livraison_date_demande" name="livraison_date_demande"  value="{{ $livraison_date_demande }}">
                            <script>
                                // $('#livraison_date_demande').datepicker({
                                //     autoclose: true,
                                //     dateFormat: 'dd/mm/yy',
                                //     format: 'dd/mm/yy'
                                //     /*, startDate:  new Date(),                                            
                                //     endDate: new Date(new Date().setDate(new Date().getDate() + 42)),
                                //     minDate:  new Date(),                                            
                                //     maxDate: new Date(new Date().setDate(new Date().getDate() + 42))*/
                                // });
                            </script>
                            </div>
                            <div class="col-sm-2">
                                <select class="form-control form-control-sm class_multi_select" id="livraison_heure_demande" name="livraison_heure_demande" required >
                                    <option  {{ ($livraison_heure_demande == 0) ? 'selected' : '' }} value="00:00"  >La journée</option>
                                    <option  {{ ($livraison_heure_demande == 1) ? 'selected' : '' }} value="01:00"  >Le matin</option>
                                    <option  {{ ($livraison_heure_demande == 2) ? 'selected' : '' }} value="02:00"  >L'après-midi</option>
                                </select>
                            </div> 

                            <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm font-weight-bold">Mode de paiement</label>
                            <div class="col-sm-4">
                                <select class="form-control form-control-sm class_multi_select" id="reglements_modes_id" name="reglements_modes_id" required >                                    
                                    @foreach ($reglements_modes as $reglements_mode)
                                    <option {{ ($reglements_mode->id == $commande->reglements_modes_id) ? 'selected' : '' }} value="{{ $reglements_mode->id }}"   >
                                        {{ $reglements_mode->libelle }}
                                    </option>
                                    @endforeach
                                </select>
                                
                                <script>
                                    $(function(){
                                        $('#clients_id').change(function(){
                                            change_client(0);
                                        });
                                        if($('#clients_id').val()>0) change_client(1);
                                    });
                                    function change_client(mode){
                                        var selected = $('#clients_id').find('option:selected');
                                        var reglements = selected.data('reglements');
                                        var reglements_arr = reglements.split(",");
                                        $("#reglements_modes_id  option").attr("disabled", "disabled");
                                        //$('select[name="reglements_modes_id"] option').attr('disabled', 'disabled');
                                        var selec_reg = 0;
                                        var element=0;
                                        for(var i = 0; i < reglements_arr.length; i++) {
                                            element=reglements_arr[i];  
                                            if(element>0){                                          
                                                $("#reglements_modes_id option[value=" + element + "]").removeAttr('disabled');
                                                if(element==1){
                                                    selec_reg=1;
                                                }
                                            }
                                        } 
                                        if(selec_reg==0)  selec_reg=element;
                                        if(mode==0) $('#reglements_modes_id').val(selec_reg);
                                        $('#reglements_modes_id').select2();

 
                                        //$('#div_reglements_modes').text(reglements);
                                        //$("#theSelect option[value=" + value + "]").removeAttr('disabled');
                                        //$("#theSelect option:selected").attr('disabled','disabled').siblings().removeAttr('disabled');
                                    }

                                </script>
                            </div>
                        </div>
                        <div class="form-row" style="height: 20px;">
                        </div>
                        <div class="form-row">
                            <div class="col-sm-6">
                            </div>
                            @if(session('action_editable') && $commande_editable)
                            <div class="form-group col-md-3">
                                <input type="submit" class="btn btn-primary btn-sm btn-block" formaction="{{ url('commandes/commandes_save/1/'.$canals_id) }}"  value="Enregistrer brouillon">
                            </div>
                            <div class="form-group col-md-3">
                                <input id="commandes_id" name="commandes_id" readonly type="hidden" class="form-control form-control-sm" value="{{ $commande->id }}">
                                <input type="submit" class="btn btn-primary btn-sm btn-block" formaction="{{ url('commandes/commandes_save/2/'.$canals_id) }}"  value="Valider commande">
                            </div>
                            @endif
                        </div>
                    </form>

                </div>
            </div>
            </div>
        </fieldset>
    @endif
    
    <div class="form-row">
        <a class="col-md-3 btn btn-primary btn-sm btn-block" href="{{ URL::previous() }}" class="btn btn-default">Retour</a>
    </div>

    <script>

        function grid_onload_commandes_details(){

            var option = {
            /*style: 'percent',*/
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
            };
            var option_percent = {
            style: 'percent',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
            };

            var formatter = new Intl.NumberFormat("de-DE",option);
            var formatter_percent = new Intl.NumberFormat("de-DE",option_percent);
            var grid 		= 	$("#liste_commandes_details");         
            prix_ttc_total 	= 	grid.jqGrid('getCol', 'prix_ttc_total')[0]; 
            grid.jqGrid('footerData','set', { 
                prix_total_net: '' + formatter.format(prix_ttc_total*1.0)
            }, false);

            
            setTimeout("grid_onload_gratuites();", 1000);

        }

        function grid_onload_gratuites(){

            var option = {
            /*style: 'percent',*/
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
            };
            var option_percent = {
            style: 'percent',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
            };

            var formatter = new Intl.NumberFormat("de-DE",option);
            var formatter_percent = new Intl.NumberFormat("de-DE",option_percent);
            var grid 		= 	$("#liste_commandes_gratuites");         
            /*prix_ttc_total 	= 	grid.jqGrid('getCol', 'prix_ttc_total')[0]; 
            grid.jqGrid('footerData','set', { 
                prix_total_net: '' + formatter.format(prix_ttc_total*1.0)
            }, false);*/


            let nbr = grid.jqGrid('getGridParam', 'records');
            if(nbr>0){
                $('#fieldset_liste_commandes_gratuites').show();
            }else{
                $('#fieldset_liste_commandes_gratuites').hide();
            }


            var grid2 = $("#liste_commandes_restrictions");
            /*prix_ttc_total 	= 	grid2.jqGrid('getCol', 'prix_ttc_total')[0]; 
            grid2.jqGrid('footerData','set', { 
                prix_total_net: '' + formatter.format(prix_ttc_total*1.0)
            }, false);*/
            let nbr2 = grid2.jqGrid('getGridParam', 'records');
            // if (nbr2 > 0) {
            //     $('#fieldset_liste_commandes_restrictions').show();
            // } else {
            //     $('#fieldset_liste_commandes_restrictions').hide();
            // }

        }

        
        function details_produits(rowid){            
            //var rowid = jQuery(this).jqGrid('getGridParam','selrow'); // returns null if no row is selected  (single row)
            var grid 		= 	$("#liste_produits");  
            grid.jqGrid('viewGridRow', rowid, {width: 700,top : 45,left : 324});
        }

        
        function change_qte(){
            var carton  = $('#sel_cmd_carton').val();
            var qte     = $('#sel_cmd_qte').val();
            var colisage     = $('#sel_cmd_colisage').val();
            
            var total     = carton*colisage*1+qte*1;
            $('#sel_cmd_total').val(total);
        }

        function do_onselect_produits(ids,qte_max,colisage){
                Swal.fire({
                title: 'Quantité commandée',
                type: 'question',
                html:   '<div class="form-group row">'+
                        '<label for="colFormLabelSm" class="col-sm-4 col-form-label col-form-label-sm font-weight-bold">Carton ('+colisage+' Unités )</label>'+
                        '<input min="0" onkeypress="change_qte()" onchange="change_qte()" type="number" placeholder="Carton" id="sel_cmd_carton" value="" class="col-sm-4 form-control" >'+
                        '<input type="hidden" placeholder="colisage" id="sel_cmd_colisage" value="'+colisage+'" class="col-sm-4 form-control" >'+
                        '<div class="col-md-4"></div>'+
                        '</div>'+
                        '<div class="form-group row">'+
                        '<label for="colFormLabelSm" class="col-sm-4 col-form-label col-form-label-sm font-weight-bold">Unité</label>'+
                        '<input min="0" onkeypress="change_qte()" onchange="change_qte()" type="number" placeholder="Unité" id="sel_cmd_qte" value="0" class="col-sm-4 form-control" >'+
                        '<div class="col-md-4"></div>'+
                        '</div>'+
                        '<div class="form-group row">'+
                        '<label for="colFormLabelSm" class="col-sm-4 col-form-label col-form-label-sm font-weight-bold">Total unité</label>'+
                        '<input disabled type="number" placeholder="Total Unité" id="sel_cmd_total" value="0" class="col-sm-4 form-control" >'+
                        '<div class="col-md-4"></div>'+
                        '</div>',
                customClass: 'swal2-overflow',
                onOpen:function(){
                    $( "#sel_cmd_carton" ).focus();
                },
                confirmButtonText: 'Valider',
                cancelButtonText: 'Cancel',
                showCancelButton: true,
                showCloseButton: true,
                focusConfirm: false,
                preConfirm: () => {
                        change_qte();
                        var carton  = $('#sel_cmd_carton').val();
                        var qte     = $('#sel_cmd_qte').val();
                        var total     = $('#sel_cmd_total').val();
                        if (!(total>0)) {
                            Swal.showValidationMessage('Quantité non valide');
                        }                        
                        if (!(carton>=0)) {
                            Swal.showValidationMessage('Nombre carton non valide');
                        }
                        if (total>qte_max) {
                            Swal.showValidationMessage('vous avez dépassé la quantité maximum pour ce produit ! (Qte Max ='+qte_max+')');
                        }
                }
                }).then(function(result) {
                    if(result.value){
                        var carton  = $('#sel_cmd_carton').val();
                        var qte     = $('#sel_cmd_total').val();
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        $.ajax({
                            type: 'POST',
                            url: "/commandes/add_produits_details/"+ids+"?qte="+qte,
                            data: {_token: CSRF_TOKEN,qte: qte+"",carton: carton+""},
                            dataType: 'JSON',
                            success: function (results) {
                                if (results.success === false) {
                                    Swal.fire({
                                        title: '',
                                        html: "Ce produit a déjà été ajouté",
                                        timer: 6000,
                                        timerProgressBar: true
                                    });                                    
                                }else{                                
                                    var grid = jQuery("#liste_commandes_details"); 
                                    grid.trigger("reloadGrid",[{jqgrid_page:1,current:true}]);
                                    
                                    var grid_gratuit = jQuery("#liste_commandes_gratuites"); 
                                    grid_gratuit.trigger("reloadGrid",[{jqgrid_page:1,current:true}]);
                                }

                            }
                        });
                    }
                });

        }
        
        function do_onselect_produits_old(ids,qte_max){
           //alert(ids);
           Swal.fire({
                title: 'Quantité commandée',
                input: 'number',         
                inputValue: '1',
                inputAttributes: {
                    autocapitalize: 'off'                    
                },
                showCancelButton: true,
                confirmButtonText: 'Valider',
                showLoaderOnConfirm: true,
                inputValidator: (qte) => {
                    if (qte>qte_max) {
                     return 'vous avez dépassé la quantité maximum pour ce produit ! (Qte Max ='+qte_max+')';
                    }
                },
                preConfirm: (qte) => {
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

                        $.ajax({
                            type: 'POST',
                            url: "/commandes/add_produits_details/"+ids+"?qte="+qte,
                            data: {_token: CSRF_TOKEN},
                            dataType: 'JSON',
                            success: function (results) {
                                var grid = jQuery("#liste_commandes_details"); 
                                grid.trigger("reloadGrid",[{jqgrid_page:1,current:true}]);                                
                                if (results.success === false) {       
                                    Swal.fire({
                                        title: '',
                                        html: "Ce produit a déjà été ajouté",
                                        timer: 6000,
                                        timerProgressBar: true
                                    });
                                }
                            }
                        });
                },
                allowOutsideClick: () => !Swal.isLoading()
                });
        }

    </script>

@endsection