@extends('layouts.master')
@section('title') {{ Config::get('mainshuttlepayment.title') }} @stop
@section('body')
<div class="row" style="padding-bottom: 20px;">
	<div class="col-md-6">
            <div class="form-inline">
                <input type="text" class="form-control fromDate" placeholder="From Date">
                <input type="text" class="form-control toDate" placeholder="To Date">
                <button class="btn btn-primary filterJobs">Filter Jobs</button>
            </div>
            </br>
			<select class="form-control chosen-select all_jobs" name="all_jobs">
			
			</select>
			<div style="clear: both;"></div>			

    </div>
</div>

<div class="content jobinfo">

</div>

<style>
#page-wrapper {
    background-color:#fff !important;
}
.btn span.glyphicon {    			
	opacity: .0;				
}
.btn.active span.glyphicon {				
	opacity: 1;				
}
</style>
<div>
<div class="content">
   <form class="input-append" class="maindiv">
       <div class="control-group" id="fields">
           <div class="main-div">
        
          </div>  
     </div>   

     <div class="row" id="addbtn" style="display: none;">
        <button id="b1" class="btn btn-PRIMARY add-more" type="button">add</button>
     </div>                    

     <div style="clear: both;"></div>
     <div class="" id="savebtn"  style="display: none; text-align: right; width: 80%;" >
        <button id="save" class="btn btn-primary save" type="button">SAVE</button>
     </div>                    
</form>
</div> 
    
    <script>
    
    
    $(document).ready(function(){



    var next = 1;
    $(".add-more").click(function(e){
        e.preventDefault();
        next = $("#count").val();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = ++next;
        var newIn = '<div class="row payment_fields"  id="field' + next + '" style="padding-bottom: 10px;">';
        newIn += '       <div class="col-md-4">';
        newIn += '         <textarea  placeholder="Name"  class="form-control" name="name[]"></textarea> ';
        newIn += '      </div> ';                  
        newIn += '      <div class="col-md-3">';
        
        newIn += '	<div class="btn-group" data-toggle="buttons">';
        newIn += '			<label class="btn btn-success active">';
        newIn += '				<input type="radio" checked="checked" value="plus" name="type' + next + '" id="option2" autocomplete="off" chacked>';
        newIn += '				<span class="glyphicon glyphicon-ok"> </span> Expense';
        newIn += '			</label>';
        newIn += '			<label class="btn btn-warning">';
        newIn += '				<input type="radio" value="minus" name="type' + next + '" id="option1" autocomplete="off">';
        newIn += '				<span class="glyphicon glyphicon-ok"></span> Discount';
        newIn += '			</label>';
        
        
        newIn += '		</div>';
        newIn += '   </div> ';                  
        newIn += '  <div class="col-md-2">';
        newIn += '       <input autocomplete="off" class="form-control" name="amount[]" type="text" placeholder="Amount "  />';
        newIn += '   </div> ';
        newIn += '  <div class="col-md-1" id="remove' + next + '">';
        newIn += '   </div>       ';            
        newIn += ' </div>';
        
        newIn += '  ';
        newIn += '';
        
        
        
    //   newIn += ' <input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
        //var newInput = $(newIn);
        var removeBtn_html = '<button id="remove' + (next) + '" class="btn btn-danger remove-mes" >-</button>';
       
        $(addto).after(newIn);
        $("div#remove" + (next)).html(removeBtn_html);
        //$(addRemove).after(removeButton);
    $("#count").val(next);
        

        	$(document).on('click', '.remove-mes', function(e){
                var _this = this;
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
               // alert(fieldNum)
             //   bootbox.confirm("Are you sure you want to delete", function (r) {
    			//	if(r){
    				    
                      var fieldID  = "#field" + fieldNum;
                      lastID = $("#count").val();
                    //  ;
                      if(lastID == fieldNum){
                        --lastID;
                        $("#count").val(lastID);
                      }
                 
                        $(fieldID).remove();
                   
    		//	}
                  
             //  });
               
          
            });
    });
    

    
});

    
</script>
</div>


</div>




@stop
@section('script')
<script>
	$('.chosen-select').chosen({search_contains:true});
	$(function(){
		var _token = $('meta[name="_token"]').attr('content');
        
		loadAllJobs();

        $('.fromDate').datepicker({
            dateFormat: "yy-mm-dd",
            onSelect: function(){
                $(".toDate").datepicker( "option", "minDate", new Date($('.fromDate').val()) );
            }
        });
        $(".toDate").datepicker({
            dateFormat: "yy-mm-dd",
            onSelect: function(){
                $(".fromDate").datepicker( "option", "maxDate", new Date($('.toDate').val()) );
            }
        });

        $(".filterJobs").click(function(){
            loadAllJobs();
        });

		$('.all_jobs').change(function(){
		  var job_id = $('.all_jobs').val();
			var data = {
				job_id: $('.all_jobs').val(),
			};
            
            if(job_id != ''){
                getJobInfo(data);
            }else{
              $('.jobinfo').html('');
              $("div.main-div").html('') ; 
              $("#addbtn").hide(); 
              $("#savebtn").hide();           
            }
		});

		function getJobInfo(data){
		  var dom = '';
          var cods = '';
			$.post("{{ url('/mainshuttlepayment/getJobInfo') }}", {_token: _token, data: data}, function(e){
	           var vehicle = e.vehicle;
	           var vehicle_cods = e.vehicle_cods;
                 	$.each(vehicle_cods, function(i, o){
                 	    if(o.id != undefined){
                 	      cods = o.sap_ref+'(Trip Ref: '+o.num+')' + ', ' + cods
                 	    }
                    })   
                    if(vehicle.length == 0){
                          dom +=  '<div class="alert alert-danger fade in alert-dismissable" style="width:70%">';
                          dom +=  '<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">�</a>';
                          dom +=  'There is no Vehicle Assigned!';
                          dom +=  '</div>';
                    }      


                	$.each(vehicle, function(i, k){
					dom += '<div style="margin-bottom: 15px;padding: 15px; background-color:#fcfcfc"><h1>Job # '+ data.job_id;
					dom += '</h1><div class="row" style="padding-bottom: 10px;">';
					dom += '<div class="col-md-3">Transporter: '+ k.shuttle_transporter +'</div>';
					dom += '<div class="col-md-3">Return Type:'+ (k.empty_type) +'</div>';
					dom += '<div class="col-md-3">Vehicle: #'+ (k.number) +'</div>';
					dom += '</div>';
					dom += '<div class="row"style="padding-bottom: 10px;">';
					dom += '<div class="col-md-3">Weight: '+ (k.weight) +'</div>';
					dom += '<div class="col-md-3">Shuttle Type: '+ (k.shuttle_type) +'</div>';
					dom += '<div class="col-md-3">Volume: '+ (k.volume) +'</div>';
					dom += '</div>';
					dom += '<div class="row"style="padding-bottom: 10px;">';
					dom += '<div class="col-md-3">Location : '+ (k.location_combination_name) +' '+ k.location_combination_cost+'</div>';
					dom += '<div class="col-md-3">Pallets Allocation: '+ (k.pallets_allocation) +'</div>';
					dom += '<div class="col-md-3">Takeoff Date:'+ (k.takeoff_date) +'</div>';
					dom += '</div>';


                    if(cods != ''){
                        dom += '<div class="row"style="padding-bottom: 10px;">';
                        dom += '<div class="col-md-6">Assigned COD(s) : '+ cods +'</div>';
                        dom += '</div></div>';
                    }else{
                      dom +=  '<div class="alert alert-danger fade in alert-dismissable" style="width:70%">';
                      dom +=  '<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">�</a>';
                      dom +=  'There is No CODs Assigned to the vehicle !';
                      dom +=  '</div>';
                    }			
				
               });
                    
                    
		
            $('.jobinfo').html(dom);
            
            var payment_info = e.payment_info;   
            var payment_line_items = e.payment_line_items;   
            var tot_pay = e.count;
            var   newIn = '<input  type="hidden" id="payment_id" name="payment_id" value="'+ payment_info.id +'" />';
            var i =0;
            if(tot_pay > 0){ --tot_pay;
                 newIn += '<input id="count" type="hidden" id="count"name="count" value="'+tot_pay+'" />';         
                 $.each(payment_line_items, function(j, n){
                    var i =j;
                    newIn += '<div class="row payment_fields"  id="field' + i + '" style="padding-bottom: 10px;">';
                    newIn += '       <div class="col-md-4">';
                    newIn += '         <textarea  class="form-control" name="name[]">'+n.name+'</textarea> ';
                    newIn += '      </div> ';                  
                    newIn += '      <div class="col-md-3">';
                    
                    newIn += '	     <div class="btn-group" data-toggle="buttons">';
                    newIn += '			<label class="btn btn-success '+(n.type == 'plus'? 'active': '')+'">';
                    newIn += '				<input type="radio" '+(n.type == 'plus'? 'checked="checked"': '')+'  value="plus" name="type' + i + '" id="option2" autocomplete="off" >';
                    newIn += '				<span class="glyphicon glyphicon-ok"></span> Expense ';
                    newIn += '			</label>';
                    newIn += '			<label class="btn btn-warning '+(n.type == 'minus'? 'active': '')+'">';
                    newIn += '				<input type="radio" '+(n.type == 'minus'? 'checked="checked"': '')+' value="minus" name="type' + i + '" id="option1" autocomplete="off">';
                    newIn += '				<span class="glyphicon glyphicon-ok"></span> Discount ';
                    newIn += '			</label>';
                    newIn += '	 	   </div>';
                    newIn += '      </div> ';                  
                    newIn += '      <div class="col-md-2">';
                    newIn += '            <input autocomplete="off" value="'+n.amount+'" class="form-control" name="amount[]" type="text" placeholder="Amount "  />';
                    newIn += '      </div> ';
                    newIn += '      <div class="col-md-1" id="remove' + i + '">';
                    ///newIn += '         <button id="remove' + (i) + '" class="btn btn-danger remove-me" >-</button></div>';
                    newIn += '      </div>       ';            
                    newIn += ' </div>';
                    newIn += '';                 
          
                 });
    
    
             }else{
                
                var i = 0;
                var   newIn = '<input id="count" type="hidden" id="count"name="count" value="'+i+'" />';         
                newIn += '<div class="row payment_fields"   id="field' + i + '" style="padding-bottom: 10px;">';
                newIn += '       <div class="col-md-4">';
                newIn += '         <textarea  placeholder="Name" id="name' + i + '"  class="form-control" name="name[]"></textarea> ';
                newIn += '      </div> ';                  
                newIn += '      <div class="col-md-3">';
                
                newIn += '	     <div class="btn-group" data-toggle="buttons">';
                newIn += '			<label class="btn btn-success active">';
                newIn += '				<input type="radio" checked="checked"  value="plus" name="type' + i + '" id="option2" autocomplete="off" >';
                newIn += '				<span class="glyphicon glyphicon-ok"></span> Expense ';
                newIn += '			</label>';
                newIn += '			<label class="btn btn-warning ">';
                newIn += '				<input type="radio"  value="minus" name="type' + i + '" id="option1" autocomplete="off">';
                newIn += '				<span class="glyphicon glyphicon-ok"></span> Discount ';
                newIn += '			</label>';
                newIn += '	 	   </div>';
                newIn += '      </div> ';                  
                newIn += '      <div class="col-md-2">';
                newIn += '            <input  id="amount' + i + '" autocomplete="off" value="" class="form-control" name="amount[]" type="text" placeholder="Amount "  />';
                newIn += '      </div> ';
                newIn += '      <div class="col-md-1" id="remove' + i + '">';
             //   newIn += '         <button id="remove' + (i) + '" class="btn btn-danger remove-me" >-</button></div>';
                newIn += '      </div>       ';            
                newIn += ' </div>';
                newIn += '';                 

             }
             if(data.job_id != ''){
                $("div.main-div").html(newIn) ;     
                $("#addbtn").show(); 
                $("#savebtn").show(); 
            }else{
                $("div.main-div").html('') ;    
                $("#addbtn").hide(); 
                $("#savebtn").hide(); 
             }
                     
             
		  }, 'json');  
		}

		function loadAllJobs(callback){
			$select = $('.all_jobs');

            var data = {
                fromDate: $(".fromDate").val(),
                toDate: $(".toDate").val()
            };

			$.post("{{ url('/mainshuttlepayment/loadAllJobs') }}", {_token: _token, data: data}, function(e){
				var dom = '<option value=""> Select Job</option>';
				if(typeof(e) == 'object' && Object.keys(e).length > 0){
					$.each(e, function(i, k){
                        if(k.payment_id != 0){
                            dom += '<option class="text-success bg-success" value="'+ k.id +'">Job # '+ k.id +', Created at  '+ k.created_at +'</option>';
                        }else{
                            dom += '<option value="'+ k.id +'">Job # '+ k.id +', Created at  '+ k.created_at +'</option>';
                        }
					});
				}
				$select.html(dom);
				if(callback !== undefined && typeof(callback) == 'function'){
					callback();
				}
                	$(".chosen-select").trigger("chosen:updated");
			}, 'json');
            
            
          
		}
		


    $(".save").click(function(e){

      //  var validated = true;
         //  var _token = $('meta[name="_token"]').attr('content');
         //  var data = $('#fields').serializeArray();
         //   $("div#fields input").each(function() {
         //        var type = $(this).attr("type");
         //        if ($(this).val() != "") {
         //            data.push({name: $(this).attr('name'), value: $(this).val()});
         //          ///  $('span#asa').append($(this).attr('name') + ' : '+ $(this).val() + ",   ")
         //           $(this).css({'border':'1px solid #ccc'}); 
         //           if($(this).attr('name') == 'amount[]'){
         //                if (isNaN($(this).val())) {
         //                    $(this).css({'border':'1px solid red'});
         //                    validated = false;
         //                }
         //           }
                   
                   
         //        }else{
         //            $(this).css({'border':'1px solid red'}); 
         //            validated = false;
         //        } 
                
         // }); 
         
         
               
         //   $("div#fields textarea").each(function() {
         //        var type = $(this).attr("type");
         //         if ($(this).val() != "") {
         //            data.push({name: $(this).attr('name'), value: $(this).val()});
         //           // $('span#asa').append($(this).attr('name') + ' : '+ $(this).val() + ",   ")
         //             $(this).css({'border':'1px solid #ccc'});
         //        }else{
         //            validated = false;
         //            $(this).css({'border':'1px solid red'}); 
         //        }
         //   }); 
                            
          
         //     $("div#fields input[type='radio']:checked").each(function() {
         //        var type = $(this).attr("type"); 
         //        if (type != "button") {
         //            data.push({name: $(this).attr('name'), value: $(this).val()});
         //      //   $('span#asa').append($(this).attr('name') + ' : '+ $(this).val() + ",   ")
         //        }
         //   }); 
            
         //    var job_id = $('.all_jobs').val();
            
         //    data.push({name: 'job_id', value: job_id});
         //    data.push({name: '_token', value: _token});
            // if(validated == true){
            //     $.post("{{ url('/mainshuttlepayment/savePayments') }}", data, function(e){
              //     $.highlightOrThrow(e, function(){});
              //  }, 'json');
                
            // }else{   
            //     var arr = {'ok' : 0, 'msg' :'some fileds are empty or not valid.'};
              //   $.highlightOrThrow(arr, function(){});
            // }
            // {_token: _token}

      $("textarea, input[type='text']").css({'border':'1px solid #ccc'});
      var data = []; 
      var errors = 0;
      $(".payment_fields").each(function(){
        var name = $(this).find("textarea").val();
        var amount = $(this).find("input[type='text']").val();
        var type = $(this).find("input[type='radio']:checked").val();
        
        if($.trim(name).length > 0 || $.trim(amount).length > 0){
          var row = {
            type: type
          };

          if($.trim(name).length > 0){
            row["name"] = $.trim(name);
          }else{
            errors = 1;
            $(this).find("textarea").css({'border':'1px solid red'});
          }

          if($.trim(amount).length > 0 && !isNaN(amount)){
            row["amount"] = $.trim(amount);
          }else{
            errors = 1;
            $(this).find("input[type='text']").css({'border':'1px solid red'});
          }

          if(!errors) data.push(row);
        }

      });

      if(!errors){
        var result = {
          job_id: $(".all_jobs").val(),
          rows: data
        };
        $.post("{{ url('/mainshuttlepayment/savePayments') }}", {_token: _token, data: result}, function(e){
           $.highlightOrThrow(e, function(){
            loadAllJobs();
           });
        }, 'json');
      }else{
        $.notify.error("<b>Sorry there are invalid inputs</b>");
      }
         
    });

	});
    
        

    
    
    

</script>
@stop