@extends('adminlayout.dashadmin')
<!-- 'adminlayout.admin'
 --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@section('content')
 
<style>
  .table-bordered>thead>tr>th {
    border: 1px solid #f4f4f4!important;
    font-size: small!important;
    text-align: center!important;
}
</style>

<!-- Content Wrapper Start -->
<div class="content-wrapper" ng-controller="PurchaseController">

  <!-- Content Header Start -->
  <!--<section class="content-header" style="float:right;">
   <a  class="btn btn-lg btn-info" href="{{('party-transaction')}}">
        <i class="fa fa-fw fa-plus"></i>
        PURCHASE LIST
        </a>
        <a  class="btn btn-lg btn-info" href="{{('party-sale-list')}}">
        <i class="fa fa-fw fa-plus"></i>
        SELL LIST
        </a>
  </section>-->
  <br>
  <br>
  <!-- Content Header end -->
@if(Session::has('message'))
    <p class="alert alert-{{ Session::get('alert-class', 'alert-info') }}" style="text-align: center;">{{ Session::get('message') }}</p>

    @endif
  <!-- 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>   New Sale Customer*            </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_customer_battery_order') }}" method="post">
     @csrf
        <!-- Add Sale Create Form -->
        <div  class="form-horizontal" >
          <div class=" col-sm-12 col-md-3">
            <input class="form-control input-sm text-center" type="hidden" name="uid" value="{{ Auth::user()->id }}">
            
                 <label for="name" class="control-label">
                  Customer Name<i class="required">*</i>
                </label>
                <input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Enter Customer name...">
              </div>
              <div class=" col-sm-12 col-md-3">
               <label for="Phone" class="control-label">
                Phone<i class="required">*</i>
              </label>
              <input type="text" class="form-control" id="Phone" name="phone" autocomplete="off" placeholder="Enter Phone.." onkeypress="return isNumber(event)" maxlength="10" >
            </div>
            <div class=" col-sm-12 col-md-3">
               <label for="father" class="control-label">
                Father Name*<i class="required">*</i>
              </label>
              <input type="text" class="form-control" id="father" name="father_name" autocomplete="off" placeholder="Enter father..">
            </div>
           
           <div class=" col-sm-12 col-md-3">
             <label for="Email" class="control-label">
              Email<i class="required">*</i>
            </label>
            <input type="email" class="form-control" id="Email" name="email" autocomplete="off" placeholder="Enter Email.." required>
          </div>
            <div class=" col-sm-6 col-md-3">
          <label for="date" class="control-label">
                   State<i class="required">*</i>
              </label>
              <select class="form-control" name="state_id" id="state_id" onchange="getCity(this.value)" required >
			 <option value="">--Select--</option>
			 @foreach($states as $state)
				<option value="{{$state->id}}">{{$state->name}}</option>
			 @endforeach	
			</select>
          </div>
		  <div class=" col-sm-6 col-md-3 ">
              <label for="city" class="control-label">
               district<i class="required">*</i>
              </label>
              <select class="form-control" name="city" id="city_id" required>
					<option></option>
				</select>	
              @error('city')
              <p class="text-danger">{{ $message }}</p>
              @enderror
              <input type="hidden" name="country" value="India" id="country">
													
			  <input type="hidden" name="latitude" id="latitude" value="">
			  <input type="hidden" name="longitude" id="longitude" value="">
          </div>
         
          <div class=" col-sm-6 col-md-3 ">
              <label for="pin" class="control-label">
                Pin Code<i class="required">*</i>
              </label>
              <input type="text" name="pin" class="form-control  @error('pincode') error @enderror" id="pin" placeholder="Enter pin Code" value=""  >
              @error('pin')
              <p class="text-danger">{{ $message }}</p>
              @enderror
              <p class="text-danger" id="pin_error"></p>
          </div>         
         
        <div class=" col-sm-3 col-md-3 ">
            <label for="pan" class="control-label">
              Full Address*<i class="required">*</i>
            </label>
            <textarea class="form-control" name="address" type="text" placeholder="Enter Full Address.."></textarea>
            <br>
          </div>
       
        
<div class="well well-sm">
  <div class="row">
    <div class="col-md-12">
      <div class="table-responsive">
        <table id="invoiceTable" class="table-bordered mb-0">
          <thead>
            <tr class="bg-info">
				<th>SERIAL</th>							
				<th>WARRANTY</th>
				<th>MODEL</th>
				<th>TYPE</th>
				<th>QTY</th>
				<th>MRP</th>
				<th>UNIT PRICE</th>
				<th>TAXABLE AMOUNT</th>
				<th>GST(%)</th>
				<th>GST(AMT.)</th>
                <th>DISCOUNT</th>  
				<th>TOTAL VALUE</th>
				<th class="w-5 text-center">
				  <i class="fa fa-trash-o"></i>
				</th>
			</tr>
           
          </thead>
          <tbody>
          <tr>
            
			<td>
			
			 <select id="battery_id" onchange="getItemDetail(this.value, this)" name="battery_id[]" class="form-control input-sm text-center" required style="width: 120px;">
			 <option value="">select</option>
			 @foreach($batteries as $data)
			  <option value="{{$data->id}}">{{$data->serial}}</option>
			 @endforeach
			</select>
			
			</td>
		   
			 <td>
		   
				<input class="form-control input-sm text-center warranty" type="text"  name="warranty[]" required readonly>
			 
			 </td>


			<td>
			 <input class="form-control input-sm text-center model" type="text"  name="model[]" required readonly>
		   
			</td>
                <td><input class="form-control input-sm text-center type" type="text" readonly name="type[]" required readonly></td>
                <td><input class="form-control input-sm text-center" type="number" name="qty[]" oninput="calculateTotal(this)" value="1"  required readonly></td>
                <td><input class="form-control input-sm text-center mrp" type="number" name="mrp[]" oninput="calculateTotal(this)" required readonly></td>
                <td><input class="form-control input-sm text-center unitPrice" type="number" name="unitPrice[]" readonly oninput="calculateTotal(this)"></td>
                <td><input class="form-control input-sm text-center" type="number" name="taxableAmount[]" readonly></td>
                <td>
                  <!-- <input class=" input-sm text-center" type="number" name="cgst[]" oninput="calculateTotal(this)" required> -->
                   <select class="form-control input-sm text-center"  list="itemName" name="cgst[]" onchange ="calculateTotal(this)" required> 
                    @foreach($GstTax as $data)
                    
                    <option value="{{$data->value}}">{{$data->name}}</option>

                    @endforeach
                    <!-- <input class="itemid" type="hidden"  name="itemid[]" value="">
                     -->
                   </select>

                </td>
                <td><!-- <input class=" input-sm text-center" type="number" name="sgstUtgst[]" oninput="calculateTotal(this)" required> -->
                   <input class="form-control input-sm text-center" type="number" name="sgstUtgst[]" readonly>
                </td>
                 <td><input class="form-control input-sm text-center discount" type="number" name="discount[]"  oninput="calculateTotal(this)" required></td>
                <td><input class="form-control input-sm text-center" type="number" name="totalValue[]" readonly></td>
              
                <td class="text-center"><a onclick="removeRow(this)" ><i class="fa fa-close text-red pointer " ></i></a></td>
            </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5">
              <!-- <div id="total"> 0</div> -->
              <button class="btn btn-primary btn-sm" type="button" id="addRowBtn" onclick="addNewProductRow();">Add Product</button>
            </td>
          </tr>

          <tr class="bg-yellow">
            <th class="text-right" colspan="11">
            Payable Amount                  </th>
            <th class="col-sm-2 text-right">
              <input type="hidden" name="payableamount" 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="11">
            Payment Method                  </th>
            <th class="col-sm-2 text-center">
              <select id="pmethod-id" class="form-control select2" name="payment_method" onchange="paymentHandler(this.value)">
                      <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>
					  <option value="Razorpay">Razorpay</option>
					  <option value="Payu">Payu</option>
					  <option value="Cashfree">Cashfree</option>
              </select>
            </th>
            <th class="w-25p">&nbsp;</th>
          </tr>
          <tr class="bg-blue">
            <th class="text-right" colspan="11">
            Paid Amount                  </th>
            <th class="col-sm-2 text-right" >
              <div style="background-color: #fff;" id="total" class="text-center paidAmount" >0</div>
              <input type="hidden" id="paid_amount" name="paid_amount" value="">
            </th>
            <th class="w-25p">&nbsp;</th>
          </tr>

        </tfoot>
      </table>
    </div>
  </div>
</div>
</div>
              <div class="form-group">
                <div class="col-sm-4 col-sm-offset-3 text-center submittype">            
                  <button id="create-purchase-submit" class="btn btn-block 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>
                </div>
				<div class="col-sm-4 col-sm-offset-3 text-center buttontype" style="display:none">            
                  <button type="button" id="create-purchase-submit" class="btn btn-block btn-lg btn-info"  name="submit" data-loading-text="Processing..." onclick="doPayemnt()">
                    <i class="fa fa-fw fa-save"></i>
                      Submit        </button>
                </div>
                <div class="col-sm-2 text-center">            
                  <button type="reset" class="btn btn-block btn-lg btn-danger" id="reset" name="reset">
                    <span class="fa fa-fw fa-circle-o"></span>
                      Reset        </button>
                </div>
              </div>
            </div>
<input type="hidden" name="payment_info" id="payment_info" value="" />
          </form>
         

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>

function doPayemnt()
{
	var error=0;
	 $(".requiredfiled").each(function(){
       if(!$(this).val())
	   {
		   error=1;
	   }
    });
	if(error)
	{
		return false;
	}
	var name = $('#name').val();
	var phone = $('#Phone').val();
	var email = $('#Email').val();
	var amount = $('#paid_amount').val();
	
	 var options = {

								
								"key": "{{env('RAZORPAY_KEY')}}",								

								"amount": amount*100,

								"name": "SMGO",

								"description": "description",

								"image": "https://spvaigautomobiles.com/assets/autoev/images/logo.png ",

								"handler": function(response) {
									jQuery('#payment_info').val(response.razorpay_payment_id);							      
									jQuery('#customer_part_order_form').submit();									 

								},

								"prefill": {

									"name": name, 

									"email": email, 

									"contact": "+91"+phone

								},

								"notes": {

									"address": "address" //customer address 

								},

								"theme": {

									"color": "#15b8f3" // screen color

								},
								"modal": {
									"ondismiss": function(){
										
									       //history.go(-1);					 

									}
								}
								

							};

							var propay = new Razorpay(options);

							propay.open();
}

function paymentHandler(pay_method)
{
	if(pay_method=='Razorpay')
	{
		 
		$('.submittype').hide();
		$('.buttontype').show();
		
	}else
	{
		$('.submittype').show();
		$('.buttontype').hide();
	}
}
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_id').html(option);
                } else {
                    $('#city_id').html(option);
                }
            }
        });
}

function getItemDetail(val , ths)
{
    var battery_id = val;  
  
  
  var party_role = $("#party_name option:selected").attr('data');
   
  $.ajax({
            type: "GET",
            url: "{{url('admin/battery-detail')}}" +'/'+ battery_id,
            dataType: 'json',
            success: function(response) {              
                if (response.status == "Success") {         
                    var item_details = response.item_details;   
					$(ths).parent().parent().find('.warranty').val(item_details.warranty); 
                     $(ths).parent().parent().find('.model').val(item_details.model); 
					 $(ths).parent().parent().find('.type').val(item_details.type); 
					 
                     var price =item_details.customer_price;;
                    
					
                    $(ths).parent().parent().find('.mrp').val(price);
                    $(ths).parent().parent().find('.unitPrice').val(price);
                    calculateTotal(ths);
          
                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html("");
                }
            }
        });
  
  
}
        function addNewProductRow() {
            // Clone the template row
            var newRow = document.querySelector('#invoiceTable tbody tr').cloneNode(true);

            // Clear the input values in the new row
            var inputs = newRow.querySelectorAll('input');
            inputs.forEach(input => {
                input.value = '';
                if (input.name === 'totalValue[]' || input.name === 'taxableAmount[]') {
                    input.value = 0;
                }
            });

            // Append the new row to the table
            document.querySelector('#invoiceTable tbody').appendChild(newRow);
        }

        function calculateTotal(input) {
            var row = input.closest('tr');
            var qty = parseFloat(row.querySelector('input[name="qty[]"]').value) || 0;
            var mrp = parseFloat(row.querySelector('input[name="mrp[]"]').value) || 0;
            var unitPrice = parseFloat(row.querySelector('input[name="unitPrice[]"]').value) || 0;
            var discount = parseFloat(row.querySelector('input[name="discount[]"]').value) || 0;
            var taxableAmount = qty * mrp;
            var cgst = parseFloat(row.querySelector('select[name="cgst[]"]').value) || 0;
            //var cgst = parseFloat(row.find("select[name^='cgst']").val()) || 0;

            //var sgstUtgst = parseFloat(row.querySelector('input[name="sgstUtgst[]"]').value) || 0;

            var gstamtValue = (taxableAmount * cgst/100) || 0;

            row.querySelector('input[name="sgstUtgst[]"]').value = gstamtValue.toFixed(2);

            var totalValue = (taxableAmount + gstamtValue - discount) || 0;

            // Update the Taxable Amount and TOTAL Value fields
            row.querySelector('input[name="taxableAmount[]"]').value = taxableAmount.toFixed(2);
            row.querySelector('input[name="totalValue[]"]').value = totalValue.toFixed(2);

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

        function updateOverallTotal() {
            var totalValues = document.querySelectorAll('input[name="totalValue[]"]');
            var overallTotal = 0;

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

            document.getElementById('total').textContent =  overallTotal.toFixed(2);
      document.getElementById('paid_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 isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
    </script>

          

<script type="text/javascript">
$(document).ready(function() {
  $('.datepicker').datepicker({
    language: langCode,
    format: "yyyy-mm-dd",
    autoclose:true,
    todayHighlight: true
  }).datepicker("setDate",'now');
});
</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;
}
</style>

@endsection


<script>
    // alert(document.cookie);
    getLocation();
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
        alert("Geolocation is not supported by this browser.");
      }
    }
    
    function showPosition(position) {
        
      document.getElementById("latitude").value=position.coords.latitude;
      document.getElementById("longitude").value=position.coords.longitude;
      sessionStorage.setItem("latitude", position.coords.latitude);
      sessionStorage.setItem("longitude", position.coords.longitude);
    }
    </script>