<!DOCTYPE html>
<html>
    
@extends('layouts.formorder')

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<style>
	
        .badge  { margin-top:-20px; padding:-20px; }
        
        
        #tbl-order td { 
          padding:.2rem .2rem; 
          font-size: 0.85rem;
        }
        
        #tbl-order th { font-size: 0.85rem; color:white; border: 0.01rem white solid; padding: 2px;2px;}
        
        #tbl-detail th { height:40px; }
        #tbl-detail td { height:70px; }
        #tbl-detail tr { border-bottom:1px gray solid; }
        
        #tabel-product th { height:60px; }      
        
        #tabel-product td { height:50px; }
        #tabel-product tr { border-bottom:1px gray solid; }
        
        .badge  { margin-top:-20px; padding:-20px; }
        
        #prosesorder { margin-top:5px; height:60px; }
                    
            
        
	</style>

</head>


<!-------------------------------------->	
<body>
<!--- pesan masuk--->
@if( $mess>0 )
    <a href="{{ route('home') }}" class="notification">
      <span><i class="fa fa-envelope fa-2x"></i></span>
      <span class="badge">{{ $mess }}</span>
    </a>
@endif    


<!-- cek password -->
@if(Auth::user()->is_active==0)
    <script type="text/javascript">
        function alertPassword(){
	
		    swal({
                title: "Warning",
                text: "Silakan ubah Password Anda !",
                icon: "{{ DIR_APP }}public/images/password.png",
                imageWidth: 50,
                imageHeight: 50,
            });
		    
		    
        }
    
        window.onload=alertPassword;
     </script>   
@endif


<div class="container-fluid" style="width:100%;">

<input type="hidden" id="user_id" value="{{ Auth::user()->id }}">

@section('header')
    <!---header ---->
@endsection


@section('isi')

<div class="row" style="margin-top:-210px; margin-left:-23px; margin-right:-23px; z-index:100">
  <div class="col-xs-0 col-sm-0 col-md-3"></div>  
    <div class="col-sm-12 col-md-6 col-xs-12">
      <div class="card" style="width:100% height:auto;">
        <div class="card-block">
            
    <section id="order" class="show">
			    
        <div class="text-right">
            <h5 class="text-left" style="margin-top:10px;margin-left:10px;">&nbsp;{{ tanggal_indonesia(date('Y-m-d'), false) }}</h5>
            <a onclick="newOrder()" class="btn btn-flat btn-md show" id="addOrder" style="margin-bottom:0px; margin-top:-35px;margin-right:15px; 
            border:2px black solid; border-radius:5px; background-color:#32CD32"><i class="fa fa-plus-circle"></i> New Order </a>
        </div>			    
		    
		    <div class="card" style="background-color:white; color:black; margin: 1px 3px 5px 3px; border-radius:0">
		        <div class="card-block">

            <table "table table-responsive table-hover" id="tbl-order" width="100%">
                <thead>
                    <tr class="tblheader">
                        <th style="display:none"></th>
                    </tr>
                </thead>
                
                <tbody></tbody>
                
            </table>
            
                </div>
            </div>
				
    </section>
<!--------------------------------------------->
    <section id="neworder" class="hide">
        
        <input type="hidden" id="ord_id" name="ord_id">

        <form class="form-horizontal" data-toggle="validator" method="patch" id="form-order">
        {{ csrf_field() }} {{ method_field('POST') }}
        
            <p></p>
            <h6 class="text-center">NEW ORDER</h6>
            <p></p>
            
            <div class="form-group">
                <label for="tgl" class="col-md-6 control-label">Tanggal</label>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <input id="tgl" type="date" class="form-control" name="tgl" value="{{ date('Y-m-d') }}" readonly="true" autofocus required autocomplete="off">
                    <small class="text pull-right">Tanggal Order</small>
                </div>
            </div> 
   
            <div class="form-group">
                <label for="cus" class="col-md-6 control-label">Customer</label>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <select id="cus" type="text" class="form-control" name="cus" autofocus required>
                        <option value=""> -- Pilih Customer -- </option>
                        @foreach($cust as $cst)
                            <option value="{{ $cst->id_cust }}">{{ $cst->cus_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>  

            <div class="form-group">
                <label for="disc" class="col-md-6 control-label">Discount </label>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <input id="disc" type="number" class="form-control" name="disc" value="0.00" autofocus required autocomplete="off">
                    <small class="text pull-right">Discount Khusus</small>
                </div>
            </div>
            <br><br>
            
            <div class="text-left" style="margin-left:15px;">
                <button id="submit-control" type="submit" class="btn btn-success btn-flat btn-md" style="width:100px;height:40px; 
                padding:5px 5px; border:2px black solid; border-radius:5px;"><i class="fa fa-floppy-o"></i> Save </button>
                <a onclick="tutupForm()" id="tutup" class="btn btn-warning btn-flat btn-md" style="width:100px;height:40px; 
                padding:5px 5px; border:2px black solid; border-radius:5px;"><i class="fa fa-times"></i> Cancel </a>	
                <p></p>
            </div>

        </form>

    </section>
<!-------------------------------------------->
    <section id="inputorder" class="hide">

        <div class="text-right">
            <a onclick="tutupForm()" class="btn_close" style="background-color:transparent; color:black;"><i class="fa fa-times"></i></a> 
    	</div>        

        <div class="text-left" style="margin-top:-20px; margin-left:5px;">
            <div id="nomor_order" name="nomor_order"></div>
            <div id="customer" name="customer"></div>          
        </div>			    
        
        <section id="tbl_detail" class="hide">
        
    <section id="prosesorder" class="text-center">
        <a onclick="posting()" class="btn btn-danger btn-flat btn-md hide" id="postingorder" 
        style="margin-bottom:5px; margin-top:3px;border:1px black solid; border-radius:5px; color:white;">
            <i class="fa fa-lock"></i> Posting </a>
        <a onclick="inputDetail()" class="btn btn-success btn-flat btn-md hide" id="inputdetail" 
        style="margin-bottom:5px; margin-top:3px;border:1px black solid; border-radius:5px; color:white;">
            <i class="fa fa-plus-circle"></i> Input Detail </a>
    </section>
        
		<div class="card" style="background-color:white; color:black; margin-bottom:5px;border-radius:0;">
		  <div class="card-block">
		            
            <table "table-responsive" id="tbl-detail" width="100%">
                <thead>
                    <tr>
                        <th>Deskripsi</th>
                        <th>Harga</th>
                        <th>Disc</th>
                        <th>QTY</th>
                        <th></th>
                    </tr>
                </thead>    
            </table>
            
           </div>
        </div>
            
        </section>
    </section>
    
<!--------------------------------------->    
    
    <section id="input_detail" class="hide">
        
        <form class="form-horizontal" data-toggle="validator" method="patch" id="form-detail">
        {{ csrf_field() }} {{ method_field('POST') }}
        
        <input type="hidden" id="det_id" name="det_id">
        <input type="hidden" id="orderid" name="orderid">
        
            <p></p>
            <h6 class="text-center">INPUT DETAIL ORDER</h6>
            <p></p>
            
            <div class="form-group">
                <input id="brg" type="hidden" class="form-control" name="brg">	
                <label for="brg" class="col-md-6 control-label">Product</label>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="input-group">
                    <input type="text" class="form-control" id="nmbrg" name="nmbrg" required readonly="true">
                    <span class="input-group-btn">
					    <button onclick="pilihProduct()" type="button" class="btn btn-danger btn-flat" style="height:35px;"> + </button>
				    </span>
				    </div>
                </div>
            </div> 
            
   
            <div class="form-group">
                <label for="harga" class="col-md-6 control-label">Harga</label>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <input id="harga" type="number" class="form-control" name="harga" readonly="true">
                </div>
            </div>  

            <div class="form-group">
                <label for="disc1" class="col-md-6 control-label">Discount </label>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <input id="disc1" type="number" class="form-control" name="disc1" value="0.00" autofocus required autocomplete="off">
                    <small class="text pull-right">Discount per-item</small>
                </div>
            </div>

            <div class="form-group">
                <label for="qty" class="col-md-6 control-label">QTY Order </label>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <input id="qty" type="number" class="form-control" name="qty" value="0.00" min="1.00" autofocus required autocomplete="off">
                    <small class="text pull-right">Jumlah Orderan minimal 1</small>
                </div>
            </div>

            <br>

            <div class="text-left" style="margin-left:15px;">
                <button id="submit-input" type="submit" class="btn btn-outline-success btn-flat btn-lg" style="border-radius:5px;"><i class="fa fa-floppy-o"></i> Save </button>
                <a onclick="tutupFormDetail()" id="tutup" class="btn btn-outline-warning btn-flat btn-lg" style="border-radius:5px;"><i class="fa fa-times"></i> Cancel </a>	
                <p></p>
            </div>

        </form>

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

@endsection

@section('footer')
<!--
    footer
-->   
@endsection

</div>

@include('order.productlist')
<!---------------------------------------------------->

<!-- javascript -->
@section('script')

<script type="text/javascript">

var table, tblOrder, save_method;
var idorder = $('#user_id').val();

showData(idorder);

function showData(id){
    $(function(){
    	$.fn.dataTable.ext.errMode = 'throw';
    	table = $('#tbl-order').DataTable({
    		 "paging": true,
    		 "iDisplayLength": 1000,
         	 "processing" : true,
    		 "searching" : false,
    		 "destroy": true,
    		 "sort": false,
    		 "dom" : "bti",
    		 "ajax" : {
    			"url" : "{{ DIR_APP }}order/"+id+"/listorder",
    			"type" : "GET"
    		}
    	}); 
    });
}

function showDetail(id){
    $(function(){
    	$.fn.dataTable.ext.errMode = 'throw';
    	table = $('#tbl-detail').DataTable({
    		 "paging": true,
    		 "iDisplayLength": 1000,
         	 "processing" : true,
    		 "searching" : false,
    		 "destroy": true,
    		 "sort": false,
    		 "dom" : "bti",
    		 "ajax" : {
    			"url" : "{{ DIR_APP }}order/"+id+"/listdetail",
    			"type" : "GET"
    		}
    	}); 
    });
}


/* submit neworder */
   $('#form-order').validator().on('submit', function(e){

       if(!e.isDefaultPrevented()){
		 // $('#submit-control').html(' data sedang disimpan ... ');
		  //$('#submit-control').attr('disabled','disabled');		  

          var id = $('#ord_id').val();
          if(save_method == "add") { url = "{{ route('order.store') }}"; tipe="POST"; }
          else { url = "{{ DIR_APP }}order/"+id+"/simpan_edit"; tipe="GET"; }
             
          $.ajax({
              url : url,
              type : tipe,
              data : $('#form-order').serialize(),
              success : function(data){
    
              if(data.msg =="error"){  
                  swal("WARNING", " Data Order gagal disimpan ! ","error"); 
              }else{
                    swal("SUCCESS", " Data Order berhasil disimpan ! ","success");
    			    $('#submit-control').html('<i class="fa fa-floppy-o"></i> Save');
    			    $('#submit-control').removeAttr('disabled');	
                    $('#tbl-order').DataTable().ajax.reload();
                    tutupForm();
                }
              },
              error : function(){
                 $('#submit-control').html('<i class="fa fa-floppy-o"></i> Save');
    			 $('#submit-control').removeAttr('disabled');
                 alert("Tidak dapat menyimpan data!");
              }   
          });
             return false;
        }
	  
   });


function setOrder(id){
    if(id==0){
        $('#neworder').addClass('hide');
    }else{
        $('#order').removeClass('hide');
        $('#order').addClass('show');
    }
}

function newOrder(){
	save_method="add";
    bukaForm();	
    $('input[name=_method]').val('POST');
}

function bukaForm(){
    $('#order').addClass('hide');
    $('#neworder').removeClass('hide');
    $('#neworder').addClass('show');
    
    document.getElementById("form-order").reset();
}

function tutupForm(){
    tutupFormDetail();
    $('#neworder').addClass('hide');
    $('#order').removeClass('hide');
    $('#order').addClass('show');
    $('#inputorder').addClass('hide');
    
    document.getElementById("form-order").reset();
}

function addDetail(id){
    bukaFormDetail();	
    load_hdr(id);
    showDetail(id);
    $('#ord_id').val(id);
    
}

function bukaFormDetail(){
    $('#order').addClass('hide');
    $('#inputorder').removeClass('hide');
    $('#inputorder').addClass('show');
    $('#tbl_detail').removeClass('hide');
    $('#tbl_detail').addClass('show');
    
    document.getElementById("form-detail").reset();
}

function tutupFormDetail(){

    $('#tbl_detail').addClass('show');
    $('#tbl_detail').removeClass('hide');
    $('#input_detail').addClass('hide');
    
    document.getElementById("form-detail").reset();
}

function load_hdr(id){
  $.ajax({
	   url : "{{ DIR_APP }}order/"+id+"/load_hdr",
       type : "GET",
       dataType : 'JSON',
       success : function(data){
            $('#nomor_order').text("NO.ORDER : "+data.order_no);
            $('#customer').text(data.cus_name);
            $('#no_ord').val(data.order_no);
            $('#cust').val(data.cus_name);
                if( data.order_status==1 )
                {   
                    $('#inputdetail').removeClass('show');
                    $('#inputdetail').addClass('hide');
                    $('#postingorder').removeClass('show');
                    $('#postingorder').addClass('hide'); 
                }else{
                    $('#inputdetail').removeClass('hide');
                    $('#inputdetail').addClass('show');
                    $('#postingorder').removeClass('hide');
                    $('#postingorder').addClass('show'); 
                }            
       },
       error : function(){
		 return false;
       }
  });
}    


/* input detail */

function inputDetail(){
    save_method="add";
    $('#tbl_detail').addClass('hide');
    $('#input_detail').removeClass('hide');
    $('#input_detail').addClass('show');
    
    document.getElementById("form-detail").reset();
    
    $('input[name=_method]').val('POST');
    $('#orderid').val($('#ord_id').val());
    $('#brg'),removeAttr('readonly', 'disabled');
    $('#harga').removeAttr('readonly','disabled');
}


function editDetail(id){
   save_method = "edit";
   $('input[name=_method]').val('PATCH');
   $.ajax({
     url : "{{ DIR_APP }}order/"+id+"/editdetail",
     type : "GET",
     dataType : "JSON",
     success : function(data){

        $('#tbl_detail').addClass('hide');
        $('#input_detail').removeClass('hide');
        $('#input_detail').addClass('show');
        
        $('#det_id').val(id);
        $('#nmbrg').val(data.nama_brg);
        $('#harga').val(data.harga);
        $('#disc1').val(data.disc);
        $('#qty').val(data.qty);
        $('#brg').attr('readonly', true);
        $('#harga').attr('readonly', true);
       
     },
     error : function(){
       alert("Tidak dapat menampilkan data!");
     }
   });    
    
}


/* pilih product */

 	tblproduct = $('#tabel-product').DataTable({
        "scrollY" : '65vh',
        //"scrollCollapse": true,
        //"bSort": false,
        "destroy": true,
        "processing" : true,
	    "paging" : false,
	    "dom" : 'bft',
    });
    
function pilihProduct(){
	
    $('#modal-product').modal('show');
	
    tblproduct.ajax.url("{{ DIR_APP }}order/listproduct");
	tblproduct.ajax.reload();
}

function selectProduct(brg){
	$('#brg').val(brg);
	$('#modal-product').modal('hide');

	var idbrg = $('#brg').val();
	
	$.ajax({
        url : "order/"+idbrg+"/tampilproduct",
        type : "GET",
        dataType : "JSON",
        success : function(data){
			$('#nmbrg').val(data.nama_brg);
			$('#harga').val(data.harga_retail);
        },
        error : function(){
          alert("Tidak dapat menampilkan data!");
        }   
     });  
}

/* submit detail */
   $('#form-detail').validator().on('submit', function(e){

       if(!e.isDefaultPrevented()){

          var id = $('#det_id').val();
          if(save_method == "add") { url = "{{ DIR_APP }}order/simpandetail"; tipe="POST"; }
          else { url = "{{ DIR_APP }}order/"+id+"/simpan_editdetail"; tipe="GET"; }
             
          $.ajax({
              url : url,
              type : tipe,
              data : $('#form-detail').serialize(),
              success : function(data){
    
                if(data.msg =="error"){  
                  swal("WARNING", " Detail Order gagal disimpan ! ","error"); 
                }else{
                    swal("SUCCESS", " Detail Order berhasil disimpan ! ","success");
                    $('#tbl-detail').DataTable().ajax.reload();
                    $('#tbl-order').DataTable().ajax.reload();
                   
                    if(save_method=="add")
                    {
                        $('#nmbrg').val('');
                        $('#harga').val("0");
                        $('#disc1').val("0.00");
                        $('#qty').val("0.00");
                    }else{
                        tutupFormDetail();
                    }
                }
              },
              error : function(){
                 alert("Tidak dapat menyimpan data/ Product sdh ada dalam Order !");
              }   
          });
             return false;
        }
	  
   });

function posting()
{
    ord = $('#ord_id').val();
    swal({
    	title: "Confirmasi",
    	text: "Posting Orderan ?",
    	//icon: {{ DIR_APP }}+"public/images/printer.png",
        imageClass:'img-responsive rounded-circle',	
    	buttons: [
    		'Batal',
    		'Posting'
    		],
    	dangerMode: true,
    		}).then(function(isConfirm) {
    		if (isConfirm) {
    		  url = {{ DIR_APP }}+"order/"+ord+"/posting";  
              $.ajax({
                  url : url,
                  type : "GET",
                  success : function(data){
                      if(data.msg =="error"){  
                          swal("WARNING", " Data Order gagal diposting ! ","error"); 
                      }else{ load_hdr(ord); $('#tbl-order').DataTable().ajax.reload(); $('#tbl-detail').DataTable().ajax.reload(); }
                  },
                  error : function(){
                     alert("Tidak dapat menyimpan data!");
                  }   
              });    		    
        			
        	} else {
    			//swal("Cancel", "Menu batal diprint ", "error");
    	}
    });    
}

</script>

@endsection

</body>

</html>

