@extends('adminlayout.dashadmin')

@section('content')
 


<style>
.serialnumber{
	width: 90px;
    height: 25px;
}
.error{
	color:red;
}
.input-box {
  
    height: 80px;
}
</style>
<!-- Content Wrapper Start -->
<div class="content-wrapper" ng-controller="PurchaseController">

  
  <!-- Content Header end -->

  <!-- Content Start -->
  <!-- Content Start -->
  <section class="content">
     <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">
            <span class="fa fa-fw fa-plus"></span>Sale Vehicle</h3>
          <button type="button" class="btn btn-box-tool add-new-btn" data-widget="collapse" data-collapse="true">
            <i class="fa fa-minus"></i>
          </button>
        </div>
        <form  action="{{ route('save_vehicle_request_order') }}" method="post" onsubmit="return checkValidation();">
		 @csrf
        <!-- Add Sale Create Form -->
        <div  class="form-horizontal" >
		 <input type="hidden" class="form-control" name="request_id" value="{{$requestorders->id}}"  >
		<div class="col-sm-12 col-md-4">               
              <label for="date" class="control-label">
                   State<i class="required">*</i>
              </label>
              <select id="supply_state" class="form-control" name="state"  required>
			      <option value="{{$requestorders->state}}">{{$requestorders->statename}}</option>                 
                   
              </select>
           </div>
		  <div class="col-sm-12 col-md-4">               
              <label for="date" class="control-label">
                  City<i class="required">*</i>
              </label>
              <select id="city" class="form-control" name="city" required>
                  <option value="{{$requestorders->city}}">{{$requestorders->cityname}}</option> 
              </select>
           </div> 
          <div class=" col-sm-12 col-md-4">
                 <label for="party_name" class="control-label">
                  Party<i class="required">*</i>
              </label>              
           
	       <select id="party_name" class="form-control" name="party_name">
		    <option value="{{$requestorders->user_id}}" data="{{$requestorders->user_type}}">{{$requestorders->name}}</option>
		    </select>
			  
		   </div>
		    <div class="col-sm-12 col-md-4">
                 
                <label for="date" class="control-label">
                   Invoice Number<i class="required">*</i>
                </label>
                <input type="text" class="form-control" name="invoice_number" value="{{$requestorders->invoice_number}}" autocomplete="off"  readonly>
                    
              
            </div>
         <div class="col-sm-12 col-md-4">
                 
                <label for="date" class="control-label">
                   Bill Date<i class="required">*</i>
                </label>
                <input type="text" class="form-control" name="bill_date" value="{{ date('Y-m-d H:i:s') }}" autocomplete="off">
                    
              
            </div>
        
              <div class="col-sm-12 col-md-4">                
				<label for="Billing" class="control-label">
				  Billing Address*<i class="required">*</i>
				</label>
				<textarea class="form-control" name="Billing" type="text" placeholder="Enter Full Address..">{{$requestorders->address}}</textarea>
				<br>
              </div>
             
      <div class="well well-sm" id="vehiclelist">
  <div class="row">
    <div class="col-lg-12">
      <div class="table-responsive"> <!-- table table-striped table-editable table-bordered --> 
        <table id="invoiceTable" class="table-bordered mb-0">
          <thead>
             <tr class="bg-info">
                              
                 <th class="text-center">NAME/HSN/COLOR</th>
             
                 <th class="text-center" >BATTERY</th>                
                 <th class="text-center" >CHESSIS NO</th>
                <th class="text-center">CHARGER NO</th>
                
                <th class="text-center">MRP</th>
                <th class="text-center">UNIT PRICE</th>
                
                <th class="text-center">TAXABLE AMOUNT</th>
                <th class="text-center" style="width: 5%;">GST(%)</th>
                <th class="text-center" style="width: 5%;">GST AMOUNT</th>
               
                <th class="text-center">TOTAL VALUE</th>
                <th class="w-5 text-center">
                  <i class="fa fa-trash-o"></i>
                </th>
            </tr>
          </thead>
          <tbody>
		  @php
		  $rowindex=100;
		  @endphp
		  @foreach($requestorders->request_items as $request_item)
		   @for($i=1; $i<=$request_item->qty; $i++)
              <tr class="vehicletr">
		        <td>
				  <input type="hidden" name="item_id[{{$rowindex}}]" value="{{$request_item->good_id}}" class="itemid">
				  <input type="hidden" name="uuid[]" value="{{$rowindex}}">	     
				  <input type="text" value="{{$request_item->vehicle->name}}" name="vehicle_name[{{$rowindex}}]" style="width:100px;border: none;" readonly="">
				  <input type="text" value="{{$request_item->vehicle->hsn}}" name="vehicle_hsn[{{$rowindex}}]" style="width:100px;border: none;" readonly="">		
				  <input type="text" value="{{$request_item->color}}" name="color[{{$rowindex}}]" style="width:100px;border: none;" class="itemcolor" readonly="">	
				  <input type="hidden" value="1" name="qty[{{$rowindex}}]" class="qty">			

				</td>		
				<td style="min-width: 190px;"> 
                 @if($request_item->battery_type)				
				<input type="hidden" name="battery_type[{{$rowindex}}]" value="{{$request_item->battery_type}}" class="battery-type">  
				 		
				{{$request_item->battery_type}}/ @if($request_item->battery_type)<input type="hidden" name="battery_volt[{{$rowindex}}]" value="{{$request_item->battery_volt}}" class="battery-volt">{{$request_item->battery_volt}} @else <input type="text" name="battery_volt[{{$rowindex}}]" value="" class="battery-volt">  @endif
				 					
					
				 @endif	
				</td>		
				<td>	
				  <input class="chassis_number" type="text" name="chassis_number[{{$rowindex}}]" value="" required="" style="width:120px">		
				</td>	
				<td>	
                    @if($request_item->battery_type)				
    				  <input class="text-center charger_serial_number" type="text" name="charger_serial_number[{{$rowindex}}]" style="width:100px">
                    @endif				
				</td>		
				<td>		 
 				<input class="text-center mrp" type="number" name="mrp[{{$rowindex}}]" value="" oninput="calculateTotal(this)" style="width:100px" required="">		
				</td>	
				<td>		 <input class="text-center unitPrice" type="number" name="unitPrice[{{$rowindex}}]" value="" oninput="calculateTotal(this)" required="" style="width:100px">	
				</td>	
				<td><input class="text-center taxableAmount" type="number" name="taxableAmount[{{$rowindex}}]" value="" oninput="calculateTotal(this)" style="width:100px"></td>      
				<td>
				<select class="text-center cgst" name="cgst[{{$rowindex}}]" onchange="calculateTotal(this)" required=""> 
 				   @foreach($GstTax as $data)                    
                    <option value="{{$data->value}}">{{$data->name}}</option>
                    @endforeach  
					</select>              
				</td>             
				<td>              
				<input class="text-center sgstUtgst" type="number" name="sgstUtgst[{{$rowindex}}]" style="width:100px" readonly="">                </td>             
				<td><input class="text-center totalValue" type="number" name="totalValue[{{$rowindex}}]" style="width:100px" readonly=""></td>              
				<td class="text-center"><a onclick="removeRow(this)"><i class="fa fa-close text-red pointer "></i></a></td>    
				</tr>
				@php
		         $rowindex++;
		        @endphp
            @endfor
			
            @endforeach
              </tbody>
              <tfoot>
               
			     <tr class="bg-yellow">
                  <th class="text-right" colspan="9">
                  Payable Amount                  </th>
                  <th class=" text-right">
                    <input type="hidden" name="payable-amount" value="">
                    <h4 class="text-center"><b></b></h4>
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-blue">
                  <th class="text-right" colspan="9">
                  Payment Method                  </th>
                  <th class=" text-center">
                    <select id="pmethod-id" class="form-control select2" name="payment_method" >
                      <option value="Cash">Direct Cash</option>
                      <option value="UPI">UPI PAYMENT</option>
                      <option value="Bank Transfer">Bank Transfer  </option>
                      <option value="NEFT">NEFT PAYMENT</option>
                    </select>
                  </th>
                 <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-blue">
                  <th class="text-right" colspan="9">
                  Total Amount                  </th>
                  <th class=" text-right" >
                    <div style="background-color: #fff;" id="total" class="text-center paidAmount" >0</div>
					  <input type="hidden" id="total_amount" name="total_amount" value="">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>

                <tr class="bg-blue">
                  <th class="text-right" colspan="9">
                  Paid Amount                  </th>
                  <th class=" text-right" >
                     <input style="color: #000; font-size: 22px;text-align:center; width: 100%;"  type="text" id="paid_amount" name="paid_amount" value="0">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                
               
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
              <div style="padding-bottom: 15px;" >
                <div class="text-center">            
                  <button id="create-purchase-submit" class="btn btn-lg btn-info" data-form="#form-purchase" data-datatable="#purchase-purchase-list" name="submit" data-loading-text="Processing...">
                    <i class="fa fa-fw fa-save"></i>
                      Submit        </button>
                   
                  <button type="reset" class="btn btn-lg btn-danger" id="reset" name="reset">
                    <span class="fa fa-fw fa-circle-o"></span>
                      Reset        </button>
                          
                </div>
                
              </div>
            </div>

          </form>
        


<script>
$(document).ready(function(){
  $(".vehicletr").each(function(){
      var party_role = $("#party_name option:selected").attr('data');      
	  var vehicle_id = $(this).find('.itemid').val();	
	  var battery_type = $(this).find('.battery-type').val();	
	  var battery_volt = $(this).find('.battery-volt').val();	
	  
	  $.ajax({
        method: 'POST',
        url: "{{ url('admin/get-vehicle-price') }}",
		data:{_token: "{{ csrf_token() }}", vehicle_id:vehicle_id, battery_type:battery_type,battery_volt:battery_volt, party_role:party_role},
        dataType: 'json',
        success:(response) =>{
			//$('.loading').hide();
            if (response.status) {                
				$(this).find('.mrp').val(response.item_price); 
                $(this).find('.unitPrice').val(response.item_price); 
                $(this).find('.taxableAmount').val(response.item_price); 
                $(this).find('.totalValue').val(response.item_price); 
                $(this).find('.taxableAmount').trigger("input");
				
            }	
           
          
        },
        error: function(xhr, status, error) {
            console.log('Error fetching vehicle details:', error);
            // Optionally, display an error message in the UI
            $('#pin_error').html("An error occurred while fetching the details.");
        }
    });
	  
	  
  });
  
  
  $(document).on('input',".serialnumber",function(event){
			$(this).removeClass('duplicate-error');
		});
});

function checkValidation()
{
	var flag =0;
	var stored	=	[];
	var chassis_stored	=	[];
	var charger_stored	=	[];
	
	var	inputs	=	$('.serialnumber');
	$.each(inputs,function(k,v){
		var getVal	=	$(v).val();
		if(stored.indexOf(getVal) != -1)
		{
			$(v).addClass('duplicate-error');
			flag =1;
		}
		else
		{
			stored.push($(v).val());
		}	
	});
	
	var	chassis_inputs	=	$('.chassis_number');
	$.each(chassis_inputs,function(k,v){
		var getVal	=	$(v).val();
		if(chassis_stored.indexOf(getVal) != -1)
		{
			$(v).addClass('duplicate-error');
			flag =1;
		}
		else
		{
			chassis_stored.push($(v).val());
		}	
	});
	var	charger_inputs	=	$('.chassis_number');
	$.each(charger_inputs,function(k,v){
		var getVal	=	$(v).val();
		if(charger_stored.indexOf(getVal) != -1)
		{
			$(v).addClass('duplicate-error');
			flag =1;
		}
		else
		{
			charger_stored.push($(v).val());
		}	
	});
	
	
	if(flag)
	{
	 return false;
	}else
	{
		return true;
	}
}
function calculateTotal(input) 
{
            var row = input.closest('tr');
            var qty = parseFloat(row.querySelector('.qty').value) || 0;
            var mrp = parseFloat(row.querySelector('.mrp').value) || 0;
            var unitPrice = parseFloat(row.querySelector('.unitPrice').value) || 0;

            var taxableAmount = qty * mrp;
             var cgst = parseFloat(row.querySelector('.cgst').value) || 0;
             var gstamtValue = (taxableAmount * cgst/100) || 0;
             row.querySelector('.sgstUtgst').value = gstamtValue.toFixed(2);
            
		   var discount=0;
             taxableAmount = row.querySelector('.taxableAmount').value ;
		   gstamtValue = (taxableAmount * cgst/100) || 0;
		   row.querySelector('.sgstUtgst').value = gstamtValue.toFixed(2);
		   
		   
            var totalValue = (parseFloat(taxableAmount) + parseFloat(gstamtValue) - parseFloat(discount)) || 0;
			
            // Update the Taxable Amount and TOTAL Value fields
           // row.querySelector('input[name="taxableAmount[]"]').value = taxableAmount.toFixed(2);
            row.querySelector('.totalValue').value = totalValue.toFixed(2);

            // Update the overall TOTAL Value
            updateOverallTotal();
 }

function updateOverallTotal() {
	var totalValues = document.querySelectorAll('.totalValue');
	var overallTotal = 0;

	totalValues.forEach(input => {
		overallTotal += parseFloat(input.value) || 0;
	});

	document.getElementById('total').textContent =  overallTotal.toFixed(2);
	document.getElementById('total_amount').value =  overallTotal.toFixed(2);
}

function removeRow(button) {
	// Only remove rows after the first row
	var row = button.closest('tr');
	if (row.rowIndex !== 1) {
		row.parentNode.removeChild(row);

		// Update the overall TOTAL Value after removing the row
		updateOverallTotal();
	}
}
		
function getCity(state_id)
{
	 $.ajax({
            type: "GET",
            url: "{{url('admin/city-list')}}/" + state_id,
            dataType: 'json',
            success: function(response) {
                console.log(response.cities);
                 var option = '';
                if (response.status) {
                     option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < response.cities.length; index++) {
                        option += "<option value='" + response.cities[index].id + "'>" + response.cities[index].name + "</option>";
                    }
                   $('#city').html(option);
                } else {
                    $('#city').html(option);
                }
            }
        });
}

 function getDealers(city_id)
	{
		 $.ajax({
				type: "GET",
				url: "{{url('admin/dealerlist-by-city')}}/" + city_id,
				dataType: 'json',
				success: function(response) {
					
					 var option = '';
					if (response.status) {
						 option += '<option value="" selected disabled> -- Select Option -- </option>';
						for (let index = 0; index < response.dealers.length; index++) {
							option += "<option value='" + response.dealers[index].id + "' data='"+response.dealers[index].user_type+"'>" + response.dealers[index].name + "</option>";
						}
					   $('#party_name').html(option);
					} else {
						$('#party_name').html(option);
					}
				}
			});
	}

 		
    </script>

          

  
  </section>
  <!-- Content End -->
</div>
<!-- Content Wrapper End -->

        </div>
      </div>
      </section>
  <!-- Content End -->

</div>
<!-- Content Wrapper End -->
    
   
    <div class="scrolling-sidebar-bg"></div>
    <div class="scrolling-sidebar-mask"></div>
    <!-- Scrolling Sidebar End -->
 
</div>
<!-- End Wrapper -->





<style>
.profitWrap
{
  padding: 5px;
}
.duplicate-error
{
	border: 2px solid red;
}
</style>

@endsection