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

  
<!-- Content Header end -->
<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="  text-center">
      <span class="fa fa-fw fa-plus"></span>   Add Replace Request            </h3>
      
    </div>
   @if(Session::has('message'))
    <p class="alert alert-{{ Session::get('alert-class', 'alert-info') }}" style="text-align: center;">{{ Session::get('message') }}</p>

    @endif
     <!--  -->

    
    <form  id="formexpense" action="{{ route('check_return_status') }}" method="post" enctype="multipart/form-data" >
    @csrf
    <!-- Add Sale Create Form -->
    <div  class="form-horizontal">
     
  


<div class="well well-sm">
  <div class="row">
    <div class="col-md-12">
            

        
        <form id="form-quotation" class="form-horizontal ng-valid ng-dirty ng-valid-parse" action="{{route('check_return_status')}}" method="post" enctype="multipart/form-data">
   @csrf
   <div class="container">
   
   <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" 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-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 onchange="getDealers(this.value)">
                 
              </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" onchange="partyHandler(this.value)">
		    <option value="">Select</option>
			
		     @foreach($parties as $data)
		      <option value="{{$data->id}}" >{{$data->name}}</option>
		     @endforeach

		    </select>
			</div>  
   </div>
 
  <div class="box-body" style="display: block;">
     


    <div class="form-group">
      <label for="date" class="col-sm-3 control-label">
          Date<i class="required">*</i>
      </label>
      <div class="col-sm-6">
        <input type="text" class="form-control datepicker ng-untouched ng-valid ng-not-empty ng-dirty ng-valid-parse" name="date" ng-model="date" autocomplete="off">
         @error('date')
            <p class="text-danger">{{ $message }}</p>
            @enderror
      </div>
    </div>

     
    <div class="form-group">
      <label for="reference_no" class="col-sm-3 control-label">
           SELECT  CUSTOMAR<i class="required">*</i>
      </label>
      <div class="col-sm-6">
         <select class="form-control" name="name" id="vehiclecategory" data-msg="Required" required=""  >
         @foreach($downlines as $downline)
                <option value="{{ $downline->downline_id }}">{{ $downline->name }}</option>
            @endforeach
        </select>
         @error('name')
            <p class="text-danger">{{ $message }}</p>
            @enderror
      </div>
    </div>

    <div class="form-group">
      <label for="reference_no" class="col-sm-3 control-label">
          SELECT DEFECTED PART<i class="required">*</i>
      </label>
      <div class="col-sm-6">
         <select class="form-control" name="part"  required="" id="column-select" >
          <option value="">Select</option>
          <option value="moter_number" >MOTER</option>
          <option value="control_number">CONTROLLER</option>
          <option value="serial" >BATTERY</option>
          <!--<option value="serial">CHARGER</option>-->
        </select>
        @error('part')
            <p class="text-danger">{{ $message }}</p>
            @enderror
      </div>
    </div>
    <div class="form-group">
      <label for="reference_no" class="col-sm-3 control-label">
          DEFECTED PART SERIAL NUMBER<i class="required">*</i>
      </label>
      <div class="col-sm-6">
        <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-empty"  name="defect_serial" Value="" ng-model="refNo" autocomplete="off" required="">
        @error('defect_serial')
            <p class="text-danger">{{ $message }}</p>
            @enderror
      </div>
    </div>
    

     <div class="form-group">
      <label for="quotation-note" class="col-sm-3 control-label">
         DEFECTED REASON <i class="required">*     </label>
      <div class="col-sm-6">
        <textarea id="quotation-note" class="form-control ng-pristine ng-valid ng-empty ng-touched" name="remark" Value="" ng-model="quotationNote" required=""></textarea>
       @error('remark')
            <p class="text-danger">{{ $message }}</p>
            @enderror
      </div>
    </div>


  <div class="form-group">
      <label for="reference_no" class="col-sm-3 control-label">
          CHECKED BY<i class="required">*</i>
      </label>
      <div class="col-sm-6">
        <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-empty" id="reference_no" name="check_by" ng-model="refNo" autocomplete="off">
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-4 col-sm-offset-3 text-center">            
        <button  type="submit" class="btn btn-block btn-lg btn-info"  data-loading-text="Saving...">
          <i class="fa fa-fw fa-save"></i>
            Save        </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>
</form>



        </div>
      </div>
    </div>
    
  </div>
</form>


 <script>
   


     function submitexpenseForm() { 
       var form = document.getElementById('formexpense');
       var formData= new formData(form);
       fetch(form.action,{
        headers:{
          'X-CSRF-TOKEN':document.querySelector('meta[name="X-CSRF-TOKEN"]').getAttribute('content')
        },
        method:form.method,
        body:formData
       }).then(response=>response.json())
         .then(data=>console.log(data))
         .catch(error=>console.error('Error:',error));

     }

     </script>

<script>
        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 rmk = parseFloat(row.querySelector('textarea[name="rmk[]"]').value) || 0;

            var taxableAmount = qty * mrp;
           
            var totalValue = (taxableAmount ) || 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);
        }

        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();
            }
        }
    </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

<!-- product Modal -->
          <div class="modal fade" id="add_exp_cat" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="add_productLabel">New Expence Category</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                 <form id="form-purchase" class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
                  @csrf 
                <div class="modal-body">
                 <div class="row">
                    <div class=" col-sm-6 col-md-6 ">
                    <label for="expense_name" class="control-label">
                    ITEM NAME<i class="required">*</i>
                    </label>
                    <input type="text" class="form-control" id="expense_name" name="expense_name" value="" autocomplete="off" placeholder="Type product name ">
                  </div>
                    <div class=" col-sm-6 col-md-6 ">
                    <label for="expense_type" class="control-label">
                     ITEM CODE<i class="required">*</i>
                    </label>
                    <select class="form-control" name="expense_type" >
                         <option value="">  Select Expence Type</option>
                        <option value="Direct"> Direct  </option>
                        <option value="InDirect"> InDirect  </option>
                     </select>
                   </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>
                </form>
              </div>
            </div>
           <br>
          </div>

<script> 
  
  
  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].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('');
            }
          }
        });
      }

  </script>
  <script>
  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+'?type=purchase',
				dataType: 'json',
				success: function(response) {
					
					 var option = '<option value="" selected disabled> -- Select Option -- </option><option value="1" data="1">SPVAIG AUTOMOBILES PVT LTD</option>';
					if (response.status) {
						
						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>  
  <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>