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

@section('content')



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

  <br>
  <br>
  <!-- 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> Vehicle Quotation</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>
      <!-- product add model -->
      <div class="modal fade" id="add_battery_in_store" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
       <form  action="{{ route('add_party') }}" method="post">
         @csrf
         <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="add_productLabel">Add New Praty</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

             <div class="row">
              <div class=" col-sm-6 col-md-6 ">
                <label for="cat_name" class="control-label">
                  Party Name<i class="required">*</i>
                </label>
                <input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Type name" required>
                <span class="text-danger"></span>
              </div>

              <div class=" col-sm-6 col-md-6 ">
                <label for="pan" class="control-label">
                 GST NUMBER(Optional)<i class="required">*</i>
               </label>
               <input type="text" class="form-control" id="color" name="gst" autocomplete="off" placeholder="gst number..." >
               <span class="text-danger"></span>
             </div>

             <div class=" col-sm-6 col-md-6 ">
              <label for="pan" class="control-label">
               Phone Number<i class="required">*</i>
             </label>
             <input type="text" class="form-control" id="phone" name="phone" autocomplete="off" placeholder="phone.." required>
             <span class="text-danger"></span>
           </div>

           <div class="col-sm-6 col-md-6">               
            <label for="date" class="control-label">
             State<i class="required">*</i>
           </label>

           <select id="supply_state" class="form-control" name="state" 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-6">               
          <label for="date" class="control-label">
            City<i class="required">*</i>
          </label>
          <select id="city" class="form-control" name="city" required onchange="getDealers(this.value)">

          </select>
        </div> 

        <div class="col-sm-6 col-md-6">                
          <label for="Billing" class="control-label">
            Billing Address*<i class="required">*</i>
          </label>
          <textarea class="form-control" name="full_address" type="text" placeholder="Enter Full Address.."></textarea>
          <br>
        </div> 

      </div>

    </div>
    <div class="modal-footer" style="text-align: center;">
      <button  class="btn btn-lg btn-info" name="submit" data-loading-text="Processing...">
        <i class="fa fa-fw fa-save"></i>
      Submit        </button>
    </div>
  </div>
</div>
</form>
<br>
</div>
<!-- party add model -->
<div class="modal fade" id="add_battery_in_store" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
 <form  action="{{ route('add_party') }}" method="post">
   @csrf
   <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add_productLabel">Add New Praty</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       <div class="row">
        <div class=" col-sm-6 col-md-6 ">
          <label for="cat_name" class="control-label">
            Party Name<i class="required">*</i>
          </label>
          <input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Type name" required>
          <span class="text-danger"></span>
        </div>

        <div class=" col-sm-6 col-md-6 ">
          <label for="pan" class="control-label">
           GST NUMBER(Optional)<i class="required">*</i>
         </label>
         <input type="text" class="form-control" id="color" name="gst" autocomplete="off" placeholder="gst number..." >
         <span class="text-danger"></span>
       </div>

       <div class=" col-sm-6 col-md-6 ">
        <label for="pan" class="control-label">
         Phone Number<i class="required">*</i>
       </label>
       <input type="text" class="form-control" id="phone" name="phone" autocomplete="off" placeholder="phone.." required>
       <span class="text-danger"></span>
     </div>

     <div class="col-sm-6 col-md-6">               
      <label for="date" class="control-label">
       State<i class="required">*</i>
     </label>

     <select id="supply_state" class="form-control" name="state" 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-6">               
    <label for="date" class="control-label">
      City<i class="required">*</i>
    </label>
    <select id="city" class="form-control" name="city" required onchange="getDealers(this.value)">

    </select>
  </div> 

  <div class="col-sm-6 col-md-6">                
    <label for="Billing" class="control-label">
      Billing Address*<i class="required">*</i>
    </label>
    <textarea class="form-control" name="full_address" type="text" placeholder="Enter Full Address.."></textarea>
    <br>
  </div> 

</div>

</div>
<div class="modal-footer" style="text-align: center;">
  <button  class="btn btn-lg btn-info" name="submit" data-loading-text="Processing...">
    <i class="fa fa-fw fa-save"></i>
  Submit        </button>
</div>
</div>
</div>
</form>
<br>
</div>



<form  action="{{ route('save_quotation_invoice') }}" method="post">
 @csrf
 <!-- Add Sale Create Form -->
 <div  class="form-horizontal" >


  <!-- Battery product Modal -->

  <div class="col-sm-12 col-md-4">               
    <label for="date" class="control-label">
     Party<i class="required">*</i>
   </label>
   <a class="text-right" style="float: right; cursor: pointer;" data-toggle="modal" data-target="#add_battery_in_store">
    <span class="fa fa-fw fa-plus"></span>NewParty
  </a>
  <select id="party_name" class="form-control" name="party_name" required>
    <option value="">--Select--</option>

    @foreach($parties as $party)

    <option value="{{$party->id}}">{{$party->party_name}}({{$party->phone}})</option>
    @endforeach  

  </select>
</div>
<div class="col-sm-12 col-md-4"></div>
<div class="col-sm-12 col-md-4">
<!-- <label for="date" class="control-label">-->
<!--  <h3> Ref No.:21</h3>-->
<!--</label>-->
<br>

<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"  readonly>

<br><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" style="
    font-size: 12px;
">
              <th colspan="2">SELECT VEHICLE</th>
                <!--<th>CHESSIS NUMBER</th>-->
                <th>VEHICLE NAME</th>
                <th style="width: 5%;">VEHICLE COLOR</th>
                <th >BATTERY TYPE</th>
                <th>RIDING RANGE</th>
               
                <th style="width: 10%;">MRP</th>
                <th style="width: 10%;">UNIT PRICE</th>
                <th style="width: 10%;">QTY</th>
                <th>TAXABLE AMOUNT</th>
                <th style="width: 5%;">GST(%)</th>
                <th>GST(AMT.)</th>
                <th style="width: 10%;">TOTAL VALUE</th>
                <th class="w-5 text-center">
                  <i class="fa fa-trash-o"></i>
                </th>
            </tr>
          </thead>
          <tbody>
           <tr>
             <td colspan="2">
              <select id="itemName" onchange="getItemDetail(this.value, this)" name="itemdetail[]" class="form-control input-sm text-center" required>
     <option value="">select</option>
         @foreach($products as $data)
                   <option  id="{{$data->id}}" value="{{$data->id}}">{{$data->name}}({{$data->color}}-{{$data->battery_type}})</option>
                   @endforeach
        </select>
              
               
             </td>

             <td>
              <input class="form-control input-sm text-center itemName" type="text"  name="itemName[]" required readonly>
            </td>
            <td>  
              <input class="form-control input-sm text-center color" type="text"  name="color[]"  readonly>    

            </td>

            <td>
              <input class="form-control input-sm text-center battery_type" type="text" name="battary_type[]" required readonly>

            </td>
            <td><input class="form-control input-sm text-center hsnCode" type="text" readonly name="riding_range[]" required>
              
            </td>

            <td><input class="form-control input-sm text-center mrp"  type="number" name="mrp[]" oninput="calculateTotal(this)" required></td>
            <td><input class="form-control input-sm text-center unitPrice" type="number" name="unitPrice[]"  oninput="calculateTotal(this)"></td>
             <td><input class="form-control input-sm text-center" type="number" name="qty[]"  oninput="calculateTotal(this)" value="1"></td>
            <td><input class="form-control input-sm text-center unitPrice" type="number" name="taxableAmount[]" value="0" readonly oninput="calculateTotal(this)"></td>
            <td>                 
             <select class="form-control input-sm text-center" name="cgst[]" onchange ="calculateTotal(this)" required> 
              @foreach($GstTax as $data)                    
              <option value="{{$data->value}}">{{$data->name}}</option>
              @endforeach                   
            </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" 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>
         <td>
            <input type="hidden" class="form-control input-sm text-center" name="incrementalField[]" value="1" readonly>
        </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="10">
        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="10">
                  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="10">
                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="10">
                  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> -->
              <!-- <tr class="bg-blue">
                  <th class="text-right" colspan="11">
                  UnPaid Amount                  </th>
                  <th class=" text-right" >
                 
                  <input style="color: #000; font-size: 22px"  type="number" id="unpaid" name="unpaid_amount" value="">
                  </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>

  function getItemDetail(val , ths)
  {

    var item_code = val;    
    var party_role = $("#party_name option:selected").attr('data');
  //name  battery_type  dealer_price  sub_dealer_price  customer_price  color   riding_range  
    $.ajax({
      type: "GET",
      url: "{{url('admin/quotation-item-detail')}}" +'/'+ item_code,
      dataType: 'json',
      success: function(response) {
        console.log(response);

        if (response.status == "Success") {         
          var item_details = response.item_details;   
          $(ths).parent().parent().find('.hsnCode').val(item_details.riding_range);
          //$(ths).parent().parent().parent().find('.chassis_number').val(item_details.id);
          $(ths).parent().parent().find('.itemName').val(item_details.name);
          $(ths).parent().parent().find('.battery_type').val(item_details.battery_type);
          $(ths).parent().parent().find('.color').val(item_details.color);
          
          var price =0;
         //  if(party_role=='dealer')
         //  {
         //   price=item_details.dealer_price;
         // }
         // if(party_role=='sub_dealer')
         // {
         //   price=item_details.subdealer_price;
         // }
         $(ths).parent().parent().find('.mrp').val(item_details.price);
         $(ths).parent().parent().find('.unitPrice').val(item_details.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;
  //     }
  //     if (input.name === 'qty[]') {
  //       input.value = 1;
  //     }
  //   });

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

 let rowCount = 1; // Initialize a counter to keep track of rows

        function addNewProductRow() {
            // Clone the template row
            var newRow = document.createElement('tr'); // Create a new table row

            // Create new elements for the new row
            newRow.innerHTML = `
                <td colspan="2">
              <select id="itemName" onchange="getItemDetail(this.value, this)" name="chassis_number[]" class="form-control input-sm text-center" required>
     <option value="">select</option>
         @foreach($products as $data)
                   <option  id="{{$data->id}}" value="{{$data->id}}">{{$data->name}}({{$data->color}}-{{$data->battery_type}})</option>
                   @endforeach
        </select>
               
               <input class="chassis_number" type="hidden"  name="chassis_number[]" value="" required readonly>
             </td>

             <td>
              <input class="form-control input-sm text-center itemName" type="text"  name="itemName[]" required readonly>
            </td>
            <td>  
              <input class="form-control input-sm text-center color" type="text"  name="color[]"  readonly>    

            </td>

            <td>
              <input class="form-control input-sm text-center battery_type" type="text" name="battary_type[]" required readonly>

            </td>
            <td><input class="form-control input-sm text-center hsnCode" type="text" readonly name="riding_range[]" required>
             
            </td>

            <td><input class="form-control input-sm text-center mrp" type="number" name="mrp[]" oninput="calculateTotal(this)" required></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="qty[]"  oninput="calculateTotal(this)" value="1"></td>
            <td><input class="form-control input-sm text-center unitPrice" type="number" name="taxableAmount[]" value="0"  oninput="calculateTotal(this)"></td>
            <td>                 
             <select class="form-control input-sm text-center" name="cgst[]" onchange ="calculateTotal(this)" required> 
              @foreach($GstTax as $data)                    
              <option value="{{$data->value}}">{{$data->name}}</option>
              @endforeach                   
            </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" 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>
         
                <td>
                    <input type="hidden" class="form-control input-sm text-center" name="incrementalField[]" value="${++rowCount}" readonly>
                </td>
            `;

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

        function removeRow(row) {
            // Remove the row from the table
            var i = row.parentNode.parentNode.rowIndex; // Get the row index
            document.getElementById("invoiceTable").deleteRow(i);
        }



  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 taxableAmount = qty * mrp;
	row.querySelector('input[name="taxableAmount[]"]').value = taxableAmount;
    var cgst = parseFloat(row.querySelector('select[name="cgst[]"]').value) || 0;
    var gstamtValue = (taxableAmount * cgst/100) || 0;
    row.querySelector('input[name="sgstUtgst[]"]').value = gstamtValue.toFixed(2);
            //var cgst = parseFloat(row.querySelector('input[name="cgst[]"]').value) || 0;
            //var sgstUtgst = parseFloat(row.querySelector('input[name="sgstUtgst[]"]').value) || 0;
    
           // var totalValue = (taxableAmount + cgst + sgstUtgst) || 0;
    var discount=0;
    taxableAmount = row.querySelector('input[name="taxableAmount[]"]').value ;
    gstamtValue = (taxableAmount * cgst/100) || 0;
    row.querySelector('input[name="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('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('total_amount').value =  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 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>



<script type="text/javascript">

// function partyHandler(val='')
// {
//   var party_name = $('#party_name').val();
//   var supply_state = $('#supply_state').val();
//   var city = $('#city').val();

//   $('#reset').click();
//   $('#total').html('0');
//   $('#party_name').val(party_name);
//   $('#supply_state').val(supply_state);
//   $('#city').val(city);

//   if(val)
//   {
//     $("#vehiclelist :input").attr("disabled", false);
//   }else{
//     $("#vehiclelist :input").attr("disabled", true);

//   }
// }
// partyHandler();
</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> 
  //   function getRefDetail(refid)
  // {
  //   if(refid !='')
  //   {
  //    var url = "{{ url('get-referral') }}"+'/'+refid;    
  //    $.ajax({
  //           type: "GET",
  //           url: url,
  //           dataType: 'json',
  //           success: function(response) {
  //               console.log(response);

  //               if (response.status == "1") {
  //                  $('#refname').html('<span style="color: #f5f6fa;">'+response.name+'</span>');

  //                   $('#user_type').val(response.slug);
  //         $('#select2-user_type-container').html(response.rolename);  
  //                   defaultid(response.slug);         

  //               } else {
  //                   $('#refname').html('<span style="color: #ef1806;">'+response.message+'</span>');
  //               }
  //           }
  //       });
  //   }else{
  //      $('#refname').html('');
  //   }

  // }

  function getPostOffice(m_pincode) {
        //var pin_select = ('#pinaddress').val();
    $.ajax({
      type: "GET",
      url: "https://api.postalpincode.in/pincode/" + m_pincode,
      dataType: 'json',
      success: function(response) {
        console.log(response);
        var option = '';
        if (response[0].Status == "Success") {
          var PostOffice = response[0].PostOffice;
          var len = PostOffice.length;
          option += '<option value="" selected disabled> -- Select Option -- </option>';
          for (let index = 0; index < PostOffice.length; index++) {
            option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
          }
          $('#pin_error').html("");
          $('#post_office').html(option);

          $("#post_office").on("click", function() {

          });
          document.getElementById('post_office').click();

        } else {
          $('#pin_error').html(response[0].Message);
          $('#post_office').html("");
        }
      }
    });
  }

  function changeAddress() {
    var pin             = $('#pin').val();
    var post_office     = $('#post_office').val();
    $.ajax({
      type: "GET",
      url: "https://api.postalpincode.in/pincode/" + pin,
      dataType: 'json',
      success: function(response) {
        console.log(response);
        var pin_select_status = 0;
        var option = '';
        if (response[0].Status == "Success") {
          var PostOffice = response[0].PostOffice;
          option += '<option value="" selected disabled> -- Select Option -- </option>';
          for (let index = 0; index < PostOffice.length; index++) {
            if (post_office == PostOffice[index].Name) {
              pin_select_status   = 1;
              $('#city').val(PostOffice[index].District);
              $('#state').val(PostOffice[index].State);
              $('#country').val(PostOffice[index].Country);
            }
            option += "<option value='" + PostOffice[index].Name + "'>"  + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
          }
          if (pin_select_status == 0) {
            $('#pin_error').html("Error Please re-select address.");
            $('#post_office').html(option);
          } else {
            $('#pin_error').html('');
          }
        } else {
          $('#pin_error').html(response[0].Message);
          $('#post_office').html('');
        }
      }
    });
  }

    // function PanValidate(panVal) {
    //     var regpan = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

    //     if(regpan.test(panVal)){
    //         // valid pan card number
    //         $('#pan_error').html('');
    //         var url = "{{ url('pan_validate') }}";

    //         $.ajax({
    //             url: url,
    //             headers: {
    //                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //             },
    //             type: "POST",
    //             data: {
    //                 'pan': panVal
    //             },
    //             dataType: 'json',
    //             context: this,
    //             success: function(result) {
    //                 if(result.message=="PAN verified successfully"){
    //                     $('#name').val(result.registered_name);
    //                     $('#father_name').val(result.father_name);
    //                 } else {
    //                     $('#name').val('');
    //                     $('#father_name').val('');
    //                     $('#pan_error').html(result.message);
    //                 }
    //                 console.log(result);
    //             },
    //             error: function(error) {
    //                 console.log(error.responseText);
    //             }
    //         });
    //     } else {
    //         $('#pan_error').html('invalid pan card number');
    //     }
    // }



    // NioApp.Toast('This is a note for top right toast message.', 'info', {
    //   position: 'top-right'
    // });

    // NioApp.Toast('<h5>Update Successfully</h5><p>Your profile has been successfully updated.</p>', 'success');

    // var url = "";
    // Swal.fire({
    //     title: "Registration Successfull!",
    //     html: "Your User Id is <h4>user->user_id</h4> and Password is <h4>password</h4> <h5><a href='"+url+"'> Click here to Login </a></h5>",
    //     icon: "success",
    //     showCancelButton: true,
    //     showCloseButton: true,
    // });
</script>
<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>