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

@section('content')

<style >
  section .due_sec{
   margin: 10px 0px 10px 15px;
   
 }
 div .due_content{
   display: inline-block;
   border-radius: 10px;
   padding: 10px 15px 10px 15px;
 }
 div .due_warning{
  background-color: #bcfbaf;
}
div .due_success{
  background-color:#f9e1c0 ;
}
div  .due_primary{
  background-color: #b9e5f0;
}
</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="#" data-toggle="modal" data-target="#save_gstrate">
        <i class="fa fa-fw fa-plus"></i>
        Add VOLTS
      </a>


       <!-- GST  EDIT  Modal -->
                              <div class="modal fade" id="save_gstrate" tabindex="-1" role="dialog" aria-labelledby="save_gstrate" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h5 class="modal-title" style="text-align: center!important;" id="save_gstrate">ADD VOLT VALUES</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="{{ route('save_volt_value') }}" method="post" enctype="multipart/form-data">
                                     @csrf

                                      <div class="modal-body">
                                        <div class="row">
                                          <div class=" col-sm-6 col-md-6 ">

                                            <label for="p_name" class="control-label">
                                             VOLT<i class="required">*</i>
                                            </label>
                                            <input type="text" class="form-control" id="p_name" name="name" value="{{old('name')}}" autocomplete="off" required >


                                          </div>
                                          <div class=" col-sm-6 col-md-6 ">
                                            <label for="value" class="control-label">
                                             VOLT Value <i class="required">*</i>
                                            </label>
                                            <input type="value" class="form-control" id="value" name="value" value="{{old('value')}}" autocomplete="off" placeholder="value Enter..." required >

                                          </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>
     
    </section>
<BR><BR>

<section class="content">



 <div class="row">
  <div class="col-xs-12">
    <div class="box box-success">
      <div class="box-header">
      <h3 class="box-title">
             VOLTS LIST          </h3>
      </div>
      <div class="box-body">
         <div class="col-lg-12 col-xs-12">
                              <div class="table-responsive" style="min-height:166px">
                                  <table class="table table-striped no-margin">
                                  <thead>
                                    <tr class="bg-gray">
                                     
                                      <th class="text-left"> NAME.</th>
                                      
                                      <th class="text-left">VALUE</th>
                                      <th class="text-left">ACTION</th>
                                       
                                    </tr>
                                  </thead>
                                  <tbody>
                                   @php 
                                    $i=1;
                                    @endphp
                                      @foreach($volts as $data)
                                        <tr id="{{$data->id}}">
                                            
                                           <td >{{$data->name}}</td>
                                            <td >{{$data->value}}</td>
                                           <td>           
                                    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#updategst{{$data->id}}" > Edit</a>
                                   <a href="{{ route('delete_volt_value',[$data->id] ) }}" class="btn btn-danger delete-list" onclick="return confirm('Are you sure you want to delete this item?');"> Delete</a>
                                   
                                </td>
                                        </tr>

                              <!-- GST  EDIT  Modal -->
                              <div class="modal fade" id="updategst{{$data->id}}" tabindex="{{$data->id}}" 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" style="text-align: center!important;" id="add_productLabel">Update GST RATE</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="{{ route('update_volt_value',[$data->id] ) }}" method="post" enctype="multipart/form-data">
                                     @csrf

                                      <div class="modal-body">
                                        <div class="row">
                                          <div class=" col-sm-6 col-md-6 ">

                                            <input type="hidden" name="id" value="{{$data->id}}">
                                            <label for="p_name" class="control-label">
                                              VOLT name<i class="required">*</i>
                                            </label>
                                            <input type="text" class="form-control" id="p_name" name="name" value="{{$data->name}}" autocomplete="off" required >


                                          </div>
                                          <div class=" col-sm-6 col-md-6 ">
                                            <label for="value" class="control-label">
                                             VOLT Value <i class="required">*</i>
                                            </label>
                                            <input type="value" class="form-control" id="value" name="value" value="{{$data->value}}" autocomplete="off" placeholder="value Enter..." required >

                                          </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>


                                        @endforeach

                                      </tbody>
                                </table>
                                </div>
                              
                              </div>
                          </div>
</div>
</div>
</div>


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



@endsection
 <style>
      * {
        box-sizing: border-box;
      }

      
      .h4-14 h4 {
        font-size: 12px;
        margin-top: 0;
        margin-bottom: 5px;
      }
      .img {
        margin-left: "auto";
        margin-top: "auto";
        height: 30px;
      }
      pre,
      p {
        /* width: 99%; */
        /* overflow: auto; */
        /* bpicklist: 1px solid #aaa; */
        padding: 0;
        margin: 0;
      }
      table {
        font-family: arial, sans-serif;
        width: 100%;
        border-collapse: collapse;
        padding: 1px;
      }
      .hm-p p {
        text-align: left;
        padding: 1px;
        padding: 5px 4px;
      }
      td,
      th {
        text-align: left;
        padding: 8px 6px;
      }
      .table-b td,
      .table-b th {
        border: 1px solid #ddd;
      }
      th {
        /* background-color: #ddd; */
      }
      .hm-p td,
      .hm-p th {
        padding: 3px 0px;
      }
      .cropped {
        float: right;
        margin-bottom: 20px;
        height: 100px; /* height of container */
        overflow: hidden;
      }
      .cropped img {
        width: 400px;
        margin: 8px 0px 0px 80px;
      }
      .main-pd-wrapper {
        box-shadow: 0 0 10px #ddd;
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;
      }
      .table-bordered td,
      .table-bordered th {
        border: 1px solid #ddd;
        padding: 10px;
        font-size: 14px;
      }
    </style>

 <script>
    function printArea() {
      // Create a new window for printing
      var printWindow = window.open('');

      // Get the content of the printable area
      var printableContent = document.querySelector('.printable-area').innerHTML;

      // Write the content to the new window
      printWindow.document.write('<html><head><title>Printable Area</title></head><body>');
      printWindow.document.write(printableContent);
      printWindow.document.write('</body></html>');

      // Close the document for printing
      printWindow.document.close();

      // Trigger the print dialog
      printWindow.print();
      location.reload(true);
    }
  </script>

</body>


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