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

@section('content')
 
<style >
	/*.dashboard [class^="col-"] {
  padding-right: 2px!important;
}*/
</style>

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

<section class="content">

     
        <div class="box box-info collapsed-box">
      <div class="box-header with-border">
        <h3 class="box-title">
          <span class="fa fa-fw fa-plus"></span> Add Item To Cart For Online Sell </h3>
        <button type="button" class="btn btn-box-tool add-new-btn" data-widget="collapse" data-collapse="true">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      
     <form method="post" action="{{ route('update_vehicle_addons')}}" enctype="multipart/form-data">
            @csrf
            <div class="container">
                <div class="col-sm-12">
                    <div class="col-sm-3">
                        <div class="form-group ">
                            
                            <label for="exampleInputEmail1">Battery Type</label>
                            <input type="hidden" name="id"  value="{{$product->id}}">
                            <input type="text" name="price" class="form-control" value="{{$product->battery_type}}" readonly>
                             
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group ">
                            
                            <label for="exampleInputEmail1">Battery Volt</label>
                             <input type="text" name="price" class="form-control" value="{{$product->battery_volt}}" readonly>
                             
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group ">
                            
                            <label for="exampleInputEmail1">Purchase price</label>
                             <input type="text" name="purchase_price" class="form-control" value="{{$product->purchase_price}}" >
                             
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group ">
                            
                            <label for="exampleInputEmail1">Distributor price</label>
                             <input type="text" name="dealer_price" class="form-control" value="{{$product->dealer_price}}"  >
                             
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group ">
                            
                            <label for="exampleInputEmail1">Dealer price</label>
                             <input type="text" name="subdealer_price" class="form-control" value="{{$product->subdealer_price}}"  >
                             
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group ">
                            
                            <label for="exampleInputEmail1">Customer price</label>
                             <input type="text" name="customer_price" class="form-control" value="{{$product->customer_price}}"  >
                             
                        </div>
                    </div>
                     
					    </div>	
					    <div class="col-12 col-sm-12 text-center" >
						<div class="form-group margin-top">
						   <button type="submit" class="btn btn-primary margin-top">Submit</button>
						</div>
                       </div>				
				    </div> 
					
					
					
                    </div>
                    
                </div>
            </div>
         </form>
              
    </div>   
   
  </section>
  <!-- Content End -->
</div>
<!-- Content Wrapper End -->

@endsection

 
<style>
.boxheading
{
	background: #e4f1ff;
    display: flex;
    height: 37px;
    padding: 0 0 0 12px;   
    justify-content: space-between;
}
</style>
<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>
    // 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

 $(document).ready(function() {
        $("body").on("click", ".add-more", function() {
            var html = $(".after-add-more").first().clone();

            //  $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");

            $(html).find(".change").html(" <br> <a class='btn btn-danger remove'>- Remove</a>");


            $(".after-add-more").last().after(html);



        });

        $("body").on("click", ".remove", function() {
            $(this).parents(".after-add-more").remove();
        });
    });
</script>