@extends('adminlayout.admin')

@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-warning"  data-toggle="modal" data-target="#add_battery_in_store">
    <i class="fa fa-fw fa-plus"></i>
    Add Sale
  </a>
  <a class="btn btn-lg btn-success" href="{{route('purchase_request')}}">
    <i class="fa fa-fw fa-plus"></i>
    Purchase Request
  </a> 
  <a class="btn btn-lg btn-primary" href="{{route('add_expence')}}">
    <i class="fa fa-fw fa-plus"></i>
    Add Expences
  </a>    
</section>-->
<!-- Battery product Modal -->
          <div class="modal fade" id="add_battery_in_store" 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 Sale</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-4"> <a class="btn btn-lg btn-warning" href="{{route('partysalevehicles')}}">
                      <i class="fa fa-fw fa-plus"></i>
                       Sale Vehicles
                      </a></div>
                      <div class="col-sm-4">
                      <a class="btn btn-lg btn-success" href="{{route('partysaleaccessory')}}">
                      <i class="fa fa-fw fa-plus"></i>
                      Sale Accessory
                      </a>
                      </div>
                      <div class="col-sm-4">
                      <a class="btn btn-lg btn-primary" href="{{route('sale_battery')}}">
                      <i class="fa fa-fw fa-plus"></i>
                      Sale Battery
                      </a>
               </div>
                  
                 </div>
               
                </div>
                
              </div>
            </div>
      
             
           <br>
          </div>
<BR><BR>

<section class="content">


  <div class="box box-info collapsed-box">
    <div class="box-header with-border">
      <h3 class="box-title">
         From :         </h3>
        <input type="date" name="from"> 
        <h3 class="box-title"> to</h3>
         <input type="date" name="from">

          <label>
              <select name="supplier-supplier-list_length" aria-controls="supplier-supplier-list" class="form-control input-sm">
                <option value="all">All</option>
                <option value="25">Smgeo auto pvt</option>
                <option value="50">spvaig </option>
                <option value="100">df</option>
                <option value="200">sddd</option>
                <option value="-1">All</option>
              </select> </label>
         <button><i class="fa fa-fw fa-search"></i></button>
      </div>

     <!-- <div class="row">

        <section class="content-header due_sec" >
         <div class="due_content due_warning" href="#">

          Paid
          <h4>7900.00</h4>
        </div>
        <div class="due_content due_icon" href="#">
          <i class="fa fa-fw fa-plus"></i>

        </div>
        <div class="due_content due_success" href="#">
          Unpaid
          <h4>7900.00</h4>
        </div> 
        <div class="due_content due_icon" href="#">
          =

        </div>
        <div class="due_content due_primary" href="#">

         Total amt.
         <h4>7900.00</h4>
       </div>    
     </section>
   </div>-->


 </div>

 <div class="row">
  <div class="col-xs-12">
    <div class="box box-success">
      <div class="box-header">
        <h3 class="box-title">
         Battery Requests     
		</h3>
      </div>
      <div class="box-body">
        <div class="table-responsive"> 

          <div id="supplier-supplier-list_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

  <table id="example1" class="table table-bordered table-striped table-hover dataTable" data-hide-colums="" role="grid" aria-describedby="supplier-supplier-list_info" style="width: 1197px;">
            
    <thead>
      <tr class="bg-gray">
        <th class="text-center">Date</th>
        <th class="text-center">Invoice</th>
        <th class="text-center">Party Name</th>
        <th class="text-center">Payment Type</th>
        <th class="text-right">Amount</th>
		<th class="text-right">Gst</th>
        <th class="text-right">Total Amount</th>
		<th class="text-right">Paid Amount</th>
		<th class="text-right">Status</th>
        <th class="text-right">Action</th>
      </tr>
    </thead>    
    <tbody>
	  @foreach($orders as $data)
      <tr>
        <td class="text-center"><a href="#">{{date('d M Y', strtotime($data->bill_date))}}</a></td>
        <td class="text-center">{{$data->invoice_number}}</td>
        <td class="text-center">{{$data->name}}</td>
        <td class="text-right">{{$data->payment_type}}</td>
        <td class="text-center">{{$data->total_price}}</td>
        <td>{{$data->gst}}</td>
		<td>{{$data->grand_total_price}}</td>
		<td>{{$data->paid_amount}}</td>
		<td>@if($data->status==1) Approved @elseif($data->status==2) Reject @else Pending @endif</td>
        <td>
         @if(isset($data->order_items))
         <div class="btn-group">
		
           <button class="btn btn-default buttons-print" data-toggle="modal" data-target="#itemlist{{$data->id}}" type="button" title="Print"><span><i class="fa fa-eye"></i></span></button>
        
          @if(Auth::user()->id==$data->party_id)
			  <a href="#" data-toggle="modal" data-target="#itemlist{{$data->id}}" class="btn btn-default buttons-print">Approved</a>
		  
		          <div class="modal fade" role="dialog" id="itemlist{{$data->id}}">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="width:300px">
                            <div class="modal-content">
                                <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                                <div class="modal-body modal-body-lg">
                                    <h3><strong>Vehicle Request</strong></h3>
                                    
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="personal-document">
                                            <form action="{{route('update_battery_purchase_request')}}" method="post" enctype="multipart/form-data">
                                                @csrf
                                                <input type="hidden" name="id" value="{{$data->id}}">
                                                <div class="row gy-4" style="margin-left: 26px;">
                                                 
												  
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <div class="form-label-group">
                                                                <label class="form-label" for="status">Select Status</label>
                                                            </div>
                                                            <div class="form-control-wrap">
                                                                <select name="status"  class="form-control" style="width: 180px;" >
                                                                    <option value="">Select</option>
                                                                    <option value="1">Approved</option>
                                                                    <option value="2">Rejected</option>
                                                                </select>
                                                                
                                                            </div>
                                                        </div>
                                                    </div>
                                                     <div class="col-md-12">
                                                        <div class="form-group">
                                                            <div class="form-label-group">
                                                                <label class="form-label" for="remark">Remark</label>
                                                            </div>
                                                            <div class="form-control-wrap">
                                                                <textarea  name="remark" id="remark" value="" class="form-control"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
													<div class="form-group" style="margin-top: 11px;">
													  <div class="form-label-group">
													 <button type="submit" class="btn btn-lg btn-primary">Submit</button>
                                                      <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
													  </div>
													  </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div><!-- .tab-pane -->
                                        
                                    </div><!-- .tab-content -->
                                </div><!-- .modal-body -->
                            </div><!-- .modal-content -->
                        </div><!-- .modal-dialog -->
                    </div>
		        
		  
		  @endif	  
           </div>

             <!--Party  Modal -->
         <div class="modal fade" id="itemlist{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="add_partyLabel" aria-hidden="true">
            <div class="modal-dialog" role="document" style="width: max-content!important;">
              <div class="modal-content " >
               
                <div class="">
                <!-- id="printArea" -->
                <div class="modal-header">
                  <h3 class="text-center" id="add_partyLabel"> Item List </h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body printable-area" style="width: max-content!important;">
                 <!-- Add Party Create Form -->
                 <div class="modal-body" id="modal-body">
                  <section class="main-pd-wrapper" style="width: 1000px; margin: auto;border: 1px solid #000; padding: 15px;">
                   
              <table
              class="table table-bordered h4-14"
              style="width: 100%; -fs-table-paginate: paginate; margin-top: 15px;border: 1px solid #f4f4f4;"
              >
              <thead style="display: table-header-group">
               
              <tr style="background-color: #7ebf11;">
                <th style="width: 50px">#</th>
                <th style="width: 150px"><h4>Item Name</h4></th>
                <th style="width: 80px">
                  <h4>
                    Serial<br />
                    Number
                  </h4>
                </th>
                <th style="width: 80px"><h4>QTY</h4></th>
                <th style="width: 60px"><h4>MRP</h4></th>
                <th style="width: 80px">
                  <h4>
                    Unit<br />
                    Price
                  </h4>
                </th>

                <th style="width: 80px">
                  <h4>
                    Taxable <br />
                    Amount
                  </h4>
                </th>
                <th style="width: 80px">
                  <h4>
                    Tax <br />
                    Rate %
                  </h4>
                </th>
                <th style="width: 80px">
                  <h4>
                    CGST
                    <hr />
                    Amount
                  </h4>
                </th>
                <th style="width: 80px">
                  <h4>
                    SGST/<br />
                    UTGST
                    <hr />
                    Amount
                  </h4>
                </th>
                <th style="width: 120px"><h4>TOTAL Value</h4></th>
              </tr>
            </thead>
            <tbody>
			@php
			$i=1;
			@endphp
			 @foreach($data->order_items as $item) 
              <tr style="background-color: gainsboro;">
                <td>{{$i++}}</td>
                <td>{{$item->battery_name}}</td>
                <td>{{$item->serial_number}}</td>
                <td>{{$item->qty}}</td>
                <td>₹ {{$item->price}}</td>
                <td>₹ {{$item->unit_price}}</td>
                <td>₹ {{$item->taxable_amount}}</td>
                <td>₹ {{$item->gst_precent}}</td>
                <td>₹ {{$item->gst/2}}</td>
                <td>₹ {{$item->gst/2}}</td>
                <td>₹ {{$item->total_price}}</td>
              </tr>
			  @endforeach
			  
			
			</tbody>
            
          </table>

         
        </section></div>
                </div>
              </div>
               
              </div>
            </div>
           <br>
          </div>

        @endif


        </td>
      </tr>
	   @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>