@extends('layouts.default')
@section('content')

<link href="{!!url('invoice/css/style.css')!!}" rel="stylesheet">
<div class="right_col" role="main">
  	<div class="">
	    <div class="page-title">
	      	<div class="title_left">
	        	<h3>{{$title}}</h3>
	      	</div>
	    </div>
	    <div class="clearfix"></div>
	    <div class="row">
	    	{{ Userdefined::showMessage() }}
	      	<div class="col-md-12 col-sm-12 col-xs-12">
		        <div class="x_panel">
		          	<div class="x_content">
			          	<form id="invocie_form" class="form-horizontal form-label-left" method="post"  data-toggle="validator" role="form" autocomplete="off">	
			          		<div class="row">
		                     	<div class="col-md-2 col-sm-2 col-xs-12 mui-select form-group">
			                        <select id="consultant" name="consultant" required>
			                           <option value="">Select Consultant</option>
			                           @foreach($consultant as $k=>$consultants)
			                           <option value="{{ $consultants->user_id }}">{{ $consultants->first_name }}</option>
			                           @endforeach
			                        </select>
		                        	<div class="help-block with-errors"></div>
		                        	<label>Select Consultant<i class="mandatory">*</i></label>
		                     	</div>
		                     	<div class=" col-md-2 col-sm-2 col-xs-12 mui-textfield mui-textfield--float-label form-group ">
		                         	<input type="text" id="date_of_issuance" name="date_of_issuance" value=""/ required="">
		                         	<div class="help-block with-errors"></div>
		                         	<label for="date_of_issuance">Date Of Issuance<i class="mandatory">*</i></label>
		                        </div>
		                     	<div class="col-md-2 col-sm-2 col-xs-12 mui-select form-group">
		                     		<select id="invoice_status" name="invoice_status" required >
			                           <option value="">Select Invoice Status</option>
			                           <option value="1" selected>Will Be Paid</option>
			                           <option value="2">Paid</option>
			                           <option value="3">Draft</option>
			                        </select>
		                        	<div class="help-block with-errors"></div>
		                        	<label>Invoice Status<i class="mandatory">*</i></label>
		                     	</div>
		                     	<div class=" col-md-2 col-sm-2 col-xs-12 mui-textfield mui-textfield--float-label form-group " id="due_date_div" >
		                         	<input type="text" id="duedate" name="duedate" value=""/ >
		                         	<div class="help-block with-errors"></div>
		                         	<label for="due date">Due Date</label>
		                        </div>
		                        <div class="col-md-2 col-sm-2 col-xs-12 mui-select form-group" id="paid_cash_div"  style="display: none;">
		                     		<select id="paid_type" name="paid_type"  >
			                           <option value="">Select Paid Type</option>
			                           <option value="cash">Cash</option>
			                           <option value="bank">Bank</option>
			                        </select>
		                        	<div class="help-block with-errors"></div>
		                        	<label>Paid Type<i class="mandatory">*</i></label>
		                     	</div> 
		                        <div class=" col-md-2 col-sm-2 col-xs-12 mui-textfield mui-textfield--float-label form-group " id="date_paid_div" style="display: none;"  >
		                         	<input type="text" id="date_paid" name="date_paid" value=""/>
		                         	<div class="help-block with-errors"></div>
		                         	<label for="datepaid">Date Paid<i class="mandatory">*</i></label>
		                        </div>
		                        <div class=" col-md-2 col-sm-2 col-xs-12 mui-select form-group">
		                         	<select id="invoice_status" name="invoice_status" required >
			                           <option value="">Select Invoice Type</option>
			                           @foreach($invoice_type as $invoice_types)
			                           <option value="{{ $invoice_types->id }}">{{ $invoice_types->invoice_type }}</option>
			                           @endforeach
			                        </select>
		                         	<div class="help-block with-errors"></div>
		                         	<label for="datepaid">Select Invoice Type<i class="mandatory">*</i></label>
		                        </div>
	                    	</div>
	                    	{{-- Invoice Items Strat Here --}}
	                    	<div class="clearfix"></div>
							<div id="item-pnl">
						        <div class="row items-pnl-head">
				                   {{--  <div class="col-sm-1 col" >Add Row</div> --}}
				                    <div class="col-sm-2 col extendable" style="text-align: left">PRODUCTS</div>
				                    <div class="col-sm-2 col" >QUANTITY</div>
				                    <div class="col-sm-2 col">PRICE</div>
				                    <div class="col-sm-2 col taxCol" >TAX</div>
				                    <div class="col-sm-2 col" >TOTAL</div>
				                    <div class="col-sm-2 col">Action</div>
				                </div>

				                <div class="row items-pnl-body" id="item-row">
				                    
				                    <div class="col-sm-2 col extendable ">
				                        <input type="text" class="form-control firstCol req" name="proName[]" placeholder="Product Name">
				                        <div id="description-0" class="hideDiv">
					                        <textarea class="form-control"  style="margin-top: 5px; " name="description[]" placeholder="Description"></textarea>
				                        	<a id="removeDescription-0" onclick="removeDescription(0)" class="btn description-button"><i class="fa fa-trash-o" style="font-size:14px;color:red"></i></a>
				                        </div>
				                    </div>
				                    <div class="col-sm-2 col" >
				                        <input type="text" class="form-control req amnt" value="1" name="qty[]"  id="amount-0" onkeypress="return isNumber(event)" onkeyup="calTotal('0'), calSubtotal()" autocomplete="off">
				                    </div>
				                    <div class="col-sm-2 col">
				                        <div class="input-group">
				                            <div class="input-group-addon currenty" >$</div>
				                            <input type="text" class="form-control req prc"  name="price[]" id="price-0" onkeypress="return isNumber(event)" onkeyup="calTotal('0'), calSubtotal()"  autocomplete="off">
				                        </div>
				                    </div>
				                    <div class="col-sm-2 col taxCol" >
				                        <div class="input-group">
				                            <input type="text" class="form-control vat" name="vat[]" id="vat-0" onkeypress="return isNumber(event)"   onkeyup="calTotal('0'), calSubtotal()" autocomplete="off">
				                            <div class="input-group-addon default-addon-tax"  >%</div>

				                        </div>
				                         <div class="input-group" id="discountDivShow-0"  style="display:none">
					                        <input type="text" class="form-control discount"   name="discount[]" onkeypress="return isNumber(event)"  id="discount-0" onkeyup="calTotal('0'), calSubtotal()" autocomplete="off">
					                        <div class="input-group-addon  default-addon" >%</div>
				                        </div>
				                    </div> 
				                    <div class="col-sm-2 col">
				                        <p><span class="currenty">$</span> <span  class='ttlText' id="result-0">0</span></p>
				                        <input type="hidden" class="ttInput"  name="total[]" id="total-0" value="0">
				                    </div>
				                    <div class="col-sm-2 col" >
				                        <div title="Add Description or Discount" class=" dropdown" style="visibility: visible;">
				                        	<a id="remove_discripton_dicount-0"  class="dropdown-toggle btn btn-sm btn-default " data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
				                        		<span class="vals"><i class="fa fa-plus"></i></span> 
				                        	</a>
				                        	<ul class="dropdown-menu pull-right"   aria-labelledby="dropdownMenu1">
				                        	 	<li id="removeDescription_after_onclick-0"><a onclick="addDescription(0)" data-name="description">Description</a></li>
				                        	 	<li id="removeDiscount_after_onclick-0" ><a onclick="addDiscount(0)" data-name="indirim">Discount</a></li>
				                        	</ul>
				                        </div>
				                    </div>
				                    <div class="clearfix"></div>
				                </div>
		            		</div>
		            		<div class="col-sm-1 col" >
		            			<button type="button" class="btn btn-default btn-sm pull-left" data-toggle="tooltip"  data-placement="top" title="Add more" id="add" >Add Row</button>
			                </div>
			                <div class="row">
				                <div class="col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8" id="tax-row">
				                	{{-- <div class="col-xs-2">
				                        <button type="button" class="btn btn-default btn-sm pull-left" aria-label="Left Align" data-toggle="tooltip" data-placement="top" title="Add Taxes, Shipping, Handling or Other Fees" id="addTax">
				                            Add Tax
				                        </button>
				                    </div> --}}
				                    <div class="col-xs-5">
				                        <h1 class="subtotalCap">Sub Total</h1>
				                    </div>
				                    <div class="col-xs-5">
				                        <input type="hidden" value="0" id="subTotalInput" name="sub_total" >
				                        <h1 class="subtotalCap">
				                            <span class="currenty lightMode">$</span>
				                            <span id="subTotal" class="lightMode">0</span>
				                        </h1>
				                    </div>
				                </div>
				                <div class="col-sm-6 col-sm-offset-6 col-md-4 col-md-offset-8">
				                    <div class="totalbill-row">
				                        <div class="col-xs-5 col-sm-offset-2" >
				                            <h1>Total : </h1>
				                        </div>
				                        <div class="col-xs-5" >
				                            <h1><span class="currenty">$</span> <span id="totalBill">0</span></h1>
				                            <input type="hidden" value="0" name="total_amount" id="totalBillInput">
				                        </div>
				                    </div>
				                </div>
	            			</div>
	        			 	<input type="hidden" value="0" id="taxCounter" >
				            <input type="hidden" value="0" name="counter" id="counter">
				            <input type="hidden" value="$" name="currency" id="currencyInput" >
				            <input type="hidden" value="%" name="taxformat" id="taxFormatInput">
				            <input type="hidden" value="%" name="discountFormat" id="DisFormatInput">
				            <input type="hidden" value="yes" name="applyTax" id="applyTaxInput">
				            <input type="hidden" value="yes" name="applyDiscount" id="applyDiscount">
				            <input type="hidden" value="true"  name="AccessFlag">
				            {{-- Invoice Items End Here --}}
				            {{ csrf_field() }}
							<div class="ln_solid"></div>
			              	<div class="form-group">
				                <div class="col-md-12 col-sm-12 col-xs-12 text-right">
				                  	<button class="btn btn-primary btn-sm" type="reset">Reset</button>
				                  	<button type="submit"  class="btn btn-success btn-sm" >Submit</button>
				                </div>
			              	</div>
			            </form>
					</div>	     
		        </div>
	      	</div>
	    </div>
  	</div>
</div>
<script src="{{ url('invoice/js/jquery.validate.min.js') }}"></script>
<script src="{{ url('invoice/js/custom.js') }}"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// Date Picker For Date OF Issuance
		$('#date_of_issuance').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
            clearBtn: true
        });

		$('#date_of_issuance').on('change', function(e1) {
            if (e1.originalEvent) return;
            var e2 = document.createEvent('HTMLEvents');
            e2.initEvent('change', false, false);
            this.dispatchEvent(e2);
        });
		// Date Picker For Due Date 
		$('#duedate').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
            clearBtn: true
        });

		$('#duedate').on('change', function(e1) {
            if (e1.originalEvent) return;
            var e2 = document.createEvent('HTMLEvents');
            e2.initEvent('change', false, false);
            this.dispatchEvent(e2);
        });
		// Date Picker For Due Date 
		$('#date_paid').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
            clearBtn: true
        });

		$('#date_paid').on('change', function(e1) {
            if (e1.originalEvent) return;
            var e2 = document.createEvent('HTMLEvents');
            e2.initEvent('change', false, false);
            this.dispatchEvent(e2);
        });


        // Values Changes Based On Invoice Status
        $('#invoice_status').on('change',function(){
           var status = $(this).val();
           if(status == 1){
           	$('#due_date_div').show().prop('required');
           	$('#date_paid_div').hide().removeProp('required');
           	$('#paid_cash_div').hide().removeProp('required');
           }
           if(status == 2){
           	$('#due_date_div').hide().removeProp('required');
           	$('#date_paid_div').show().prop('required');
           	$('#paid_cash_div').show().prop('required');
           }
           if(status == 3){
           	$('#due_date_div').hide().removeProp('required');
           	$('#date_paid_div').hide().removeProp('required');
           	$('#paid_cash_div').hide().removeProp('required');
           }
        });
	});
	function isNumber(evt) {
	    evt = (evt) ? evt : window.event;
	    var charCode = (evt.which) ? evt.which : evt.keyCode;
	    if (charCode > 31 && (charCode < 46 || charCode > 57)) {
	        return false;
	    }
	    return true;
	}
</script>
@stop