@extends('layouts.default')
@section('title', $module_title)
@push('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
@endpush
@section('content')

<script>
    @if (Session::has('success'))
            swal({
            title: "Success!",
                    text: "{{Session::get('success')}}",
                    icon: "success",
                    button: "Go Ahead!"
            }).then(function () {

    });
    @endif
</script>
<div class="row">
    <!--Grid column-->   
            @if(Session::has('error'))
        <div class="alert alert-danger text-center">
            {{Session::get('error')}}
        </div>
        @endif

        <div class="col-md-12 mb-5">
        <!--Grid row-->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">{{$module_title}}</h4>
            </div>
            <div class="panel-body" >

                <form class="form-inline" method='POST' action='panel-advocate-billing' enctype="multipart/form-data">
@csrf
                <div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<table class="table table-bordered table-hover" id="invoiceItem">	
						<tr>
							<th width="2%"><input id="checkAll" class="formcontrol" type="checkbox"></th>							
							<th width="38%">Item Name</th>
							<th width="15%">Quantity</th>
														
							<th width="15%">Total (Rs.)</th>
						</tr>							
						<tr>
							<td><input class="itemRow" type="checkbox"></td>
							
							<td>
                                                        
                                        <select class="productName form-control form-control-sm" name="productName[]" id="productName_1">
                                            <option value="0">select</option>
                                            @foreach($statement_of_rates as $ot)
                                            <option data-rate='{{ $ot->rate }}' value="{{ $ot->id }}"  > {{ strtoupper($ot->particulars) }} [Rs {{ $ot->rate }}  {{$ot->quantity_type}}]</option>
                                            @endforeach
                                        </select><input type="hidden" name="price[]" id="price_1" class="form-control price" autocomplete="off"> 
                                                        </td>			
                                                        
                                                        
                                                        
							<td><input type="number" name="quantity[]" id="quantity_1" class="form-control quantity" value="1" autocomplete="off" /></td>
							
							<td> <input type="number" name="total[]" id="total_1" class="form-control bg-white total" autocomplete="off" readonly="readonly"/> </td>
						</tr>						
					</table>
				</div>
			</div>
			<div class="row">
				<div class="form-group col-xs-6 col-sm-3 col-md-3 col-lg-3">
					<button class="btn btn-danger delete" id="removeRows" type="button">- Delete</button>
					<button class="btn btn-success" id="addRows" type="button">+ Add More</button>                                        
				</div>
			</div>
			<div class="row">	
				<div class="col-xs-6 col-sm-8 col-md-8 col-lg-8">
					<h4>Notes: </h4>
					<div class="form-group">
						<textarea class="form-control txt" rows="5" name="notes" id="notes" placeholder="Your Notes"></textarea>
					</div>
					
				</div>
				<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
					<span class="form-inline">
					    Grand Total (Rs.) : <input type="number" class="form-control bg-white" name="grandtotal" id="grandtotal" value="0" placeholder="gRAND Total" readonly="readonly">
                                        </span>
                                    <br>
                                    <span class="form-inline m-1">
					    <input data-loading-text="Saving Invoice..." type="submit" name="invoice_btn" value="Save Invoice" class="btn btn-success submit_btn invoice-save-btm">						
                                        </span>
				</div>
			</div>
                
                </form>
            </div>      
        </div>
    </div>               
</div>
@endsection

@push('scripts')
<script>
        var token = $("meta[name='csrf-token']").attr("content");
    $(document).ready(function () {
        
        
        $(document).on('change', '.productName', function() {          	
            var x = $(this).children("option:selected").data("rate");
            const myArray = $(this).attr('id').split("_"); 
            $("#price_"+myArray[1]).val(x);           
        });
	$(document).on('click', '#checkAll', function() {          	
		$(".itemRow").prop("checked", this.checked);
	});	
	$(document).on('click', '.itemRow', function() {  	
		if ($('.itemRow:checked').length == $('.itemRow').length) {
			$('#checkAll').prop('checked', true);
		} else {
			$('#checkAll').prop('checked', false);
		}
	});  
	var count = $(".itemRow").length;
	$(document).on('click', '#addRows', function() { 
		count++;
		var htmlRows = '';
                var particular = '<select class="productName form-control form-control-sm" name="productName[]" id="productName_'+count+'"><option value="0">select</option>@foreach($statement_of_rates as $ot)<option data-rate="{{ $ot->rate }}" value="{{ $ot->id }}"  >{{ strtoupper($ot->particulars) }} [Rs {{ $ot->rate }}  {{$ot->quantity_type}}]</option>@endforeach</select><input type="hidden" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off">';
                
		htmlRows += '<tr>';
		htmlRows += '<td><input class="itemRow" type="checkbox"></td>';          
		
		htmlRows += '<td>'+particular+'</td>';	
		htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" value="1" autocomplete="off" /> </td>';   		
		htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control bg-white total" value="0" autocomplete="off" readonly="readonly" /></td>';          
		htmlRows += '</tr>';
		$('#invoiceItem').append(htmlRows);
	}); 
	$(document).on('click', '#removeRows', function(){
		$(".itemRow:checked").each(function() {
			$(this).closest('tr').remove();
		});
		$('#checkAll').prop('checked', false);
		calculateTotal();
	});		
	$(document).on('change', "[id^=productName_]", function(){
		calculateTotal();
	});
        $(document).on('blur', "[id^=quantity_]", function(){
		calculateTotal();
	});	
	$(document).on('blur', "[id^=price_]", function(){
		calculateTotal();
	});	
	

    });
    
    
    
    
    
    
    
    
    

	
function calculateTotal(){
	var totalAmount = 0; 
	$("[id^='price_']").each(function() {
		var id = $(this).attr('id');
		id = id.replace("price_",'');
		var price = $('#price_'+id).val();
		var quantity  = $('#quantity_'+id).val();
		if(!quantity) {
			quantity = 1;
		}
		var total = price*quantity;
		$('#total_'+id).val(parseInt(total));
		totalAmount += total;			
	});
	$('#grandtotal').val(parseInt(totalAmount));	
	
}

 
    
</script>
@endpush