@extends('layouts.admin')

@section('content')


<style>
fieldset{
	    border: 1px solid #ddd !important;
    margin-bottom: 10px;
    xmin-width: 0;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    background-color: #f5f5f5;
    padding-left: 10px!important;
}
legend{
	    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
    width: 35%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 5px 5px 10px;
    background-color: #ffffff;
}
.select2-container .select2-selection--single {
    height: auto !important;
    /* padding-top: 2px; */
    /* font-weight: 400; */
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    /* line-height: 18px!important; */
}
</style>

<!-- Content Header (Page header) -->
<div class="content-header">
  <div class="container-fluid">
	<div class="row mb-2">
	  <div class="col-sm-6">
		<h1 class="m-0 text-dark">Detail de la commande</h1>
	  </div><!-- /.col -->
	  <div class="col-sm-6">
		<ol class="breadcrumb float-sm-right">
		  <li class="breadcrumb-item"><a href="{{ url('/') }}">Accueil</a></li>
		  <li class="breadcrumb-item active">Detail commande</li>
		</ol>
	  </div><!-- /.col -->
	</div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
	
	
<div class="content">
<div class="container-fluid">


		
		
        <div class="row">
          <div class="col-lg-12">
            
            <!-- /.card -->
			@if(session()->get('completed'))				
				<div class="alert alert-success alert-dismissible">
                  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                  <h5><i class="icon fas fa-check"></i> Alert!</h5>
                  {{ session()->get('completed') }}
                </div>
				
			  @endif

				
			 
			<fieldset>
			<legend>
			Info commande
			<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>
			</legend>
			<div class="panel panel-default">
            <div class="panel-body">  
                <div class="collapse show" id="bloc_3">
                    
                    <form id="formConfirmCommande" action="#" method="post">
                        
                        <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" name="num_commande" value="{{ $commande->numero_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" name="date_commande" value="{{ $commande->date_commande }}">
                            </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">                            
								<input readonly="" type="text" class="form-control form-control-sm" value="Non Enregistrée">
							</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="text" class="form-control form-control-sm hasDatepicker" id="livraison_date_demande" name="livraison_date_demande" value="17/12/2020">
                            <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 select2-hidden-accessible" id="livraison_heure_demande" name="livraison_heure_demande" required="" tabindex="-1" aria-hidden="true">
                                    <option selected="" value="00:00">La journée</option>
                                    <option value="01:00">Le matin</option>
                                    <option value="02:00">L'après-midi</option>
                                </select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 195px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-livraison_heure_demande-container"><span class="select2-selection__rendered" id="select2-livraison_heure_demande-container">La journée</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                            </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 select2" style="width: 100%;" id="reglements_modes_id" name="reglements_modes_id">
									<option value="">Choisir Le mode de reglement</option>	
									@foreach($reglement_modes as $reglement_mode)
									<option value="{{ $reglement_mode->id }}" @if($reglement_mode->id==$commande->mode_paiement) selected @endif>{{ $reglement_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>
                        
                    </form>

                </div>
            </div>
            </div>
			</fieldset>
			
			
			<fieldset>
				<legend>
			Liste des produits selectionnés
			<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>
			</legend>
			<div class="card">
              
              <div class="card-body table-responsive p-0 blockm" id="produits_client">
			  {!! $output_commande_grid !!}
              </div>
			  
			  
			  <script>
			  $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
			
			
		
				
			  </script>
            </div>
			</fieldset>
			
			<div class="form-row">
                            
                            <div class="form-group col-md-3">
                                <a type="submit" class="btn btn-primary btn-sm btn-block" href="{{ url('liste-commandes/global') }}" >retour</a>
                            </div>
							
							
                        </div>
			
			
			
			
			
            <!-- /.card -->
          </div>
          <!-- /.col-md-6 -->
          
          <!-- /.col-md-6 -->
        </div>
        <!-- /.row -->
      </div>
	  </div>
	  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
	  <script>
	
		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,client_id){
                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 unite     = $('#sel_cmd_qte').val();
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        $.ajax({
                            type: 'POST',
                            //url: "/commandes/add_produits_details/"+ids+"?qte="+qte,
							url: '{{ route('commande_add_details_produits.set') }}',
                            data: {_token: CSRF_TOKEN,qte: qte+"",carton: carton+"", unite: unite, ids: ids, client_id:client_id, user:{{ Auth::id() }}},
                            //dataType: 'JSON',
                            success: function (results) {
								console.log(results);
                                var grid = jQuery("#grid_commande"); 
                                grid.trigger("reloadGrid",[{jqgrid_page:1,current:true}]);                                
                                if (results == "false") {       
                                    Swal.fire({
                                        title: '',
                                        html: "Ce produit a déjà été ajouté",
                                        timer: 6000,
                                        timerProgressBar: true
                                    });
                                }
                            }
                        });
                    }
                });

        }
			  </script>
@endsection