@extends('layout.master')

@section('content')



<div class="main-mobile-header doc-mobile-header">
      <a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
    </div>

   

    



     <div class="main main-app p-3 p-lg-4">
     	

        <div class="mb-4">
          <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Battery Inventory List</li>
          </ol>
        </div>



      <div class="">
        <div class="row">

          <div class="col-lg-8">
            <h2 class="main-title">Battery Inventory List</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
           <!--  <button type="button" class="btn btn-primary">Add Employee</button> -->
            <!-- <a href="/form" class="btn btn-primary">Create Hotel</a> -->
            <a href="/usermanual/AddBatteryInInventory.pdf" class="btn btn-primary">User Manual</a>
            <a type="button" href="{{ route('inventory.create_battery') }}" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
              <i class="btn-icon-prepend" data-feather="package"></i>
              Add Battery Inventory
            </a>
          </div>

        </div>

        <hr class="main-separator">        
    


<!--         <h5 id="section9" class="main-subtitle">Basic Example</h5>
 -->        <!-- <p>In this examples, we load the data from an existing HTML table.</p> -->

        <div class="card card-example">
    <div class="card-body" style="background-color: white;">
        
                      <div class="card-header">
                  <!-- Custom Search -->
    <div class="row">
        <div class="col-6">
            <form action="/inventory/battery" method="GET" class="form-inline my-2 my-lg-0">
        <div class="row"> 
        <div class="col-8">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="query">
        </div>
        <div class="col-4">

        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
        </div>
        </div>
    </form>
        </div>
        
        <div class="col-6">
               <form action="/inventory/battery" method="GET">
    <div class="filter mb-2">
    <div class="sel">
        <select id="brand" name="status" onchange="this.form.submit()" class="form-select">
            <option value="" {{ 'Test' == '' ? 'selected' : '' }}>Select </option>
            
        </select>
    </div>
</div>

</form>


        </div>
        
        
    
    </div>
    

              </div>

        
        <div class="table-responsive">
            <table id="" class="table table-hover">
                <thead class="text-center">
                    <tr>
                        <th>No</th>
                        <th>No</th>
                        <th>Brand</th>
                        <th>Model Number</th>
                        <th>Voltage</th>
                        <th>Cost</th>
                        <th>Stocks</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($batteryInventory as $key => $batteryInventoryItem)
                   
                    <tr>
                        <td>{{ $batteryInventoryItem->id }}</td>
                        <td>{{ $key + 1 }}</td>
                        <td>
                            <a href="{{ route('inventory.show_battery', $batteryInventoryItem->id) }}" class="">
                            {{ $batteryInventoryItem->brand }}
                            </a>
                        </td>
                        <td>{{ $batteryInventoryItem->model_number }}</td>
                        <!--<td>{{ $batteryInventoryItem->capacity_ah }}</td>-->
                        <td>{{ $batteryInventoryItem->voltage }}</td>
                        <td>{{ $batteryInventoryItem->unit_price }} ({{ $batteryInventoryItem->currency }})</td>
                        @if($batteryInventoryItem->quantity==0)
                        <td>Out of Stock</td>
                        @else
                        <td>{{ $batteryInventoryItem->quantity }}</td>
                        @endif
                        <!--<td>-->
                        <!--    <a href="{{ route('inventory.edit_battery', $batteryInventoryItem->id) }}" class="">-->
                        <!--        <i class="ri-edit-box-line" style="font-size: 20px;"></i>-->
                        <!--    </a>-->
                        <!--</td>-->
                    </tr>
                    @endforeach
                </tbody>
            </table>

@if ($batteryInventory->isEmpty())
    <p>No data found.</p>
@else
<nav style="margin-left: auto;" aria-label="Page navigation example">
    <ul class="pagination pagination-circled">
        <!-- Previous Page Link -->
        @if ($batteryInventory->onFirstPage())
            <li class="page-item disabled"><span class="page-link"><i class="ri-arrow-left-s-line"></i></span></li>
        @else
            <li class="page-item"><a class="page-link" href="{{ $batteryInventory->previousPageUrl() }}"><i class="ri-arrow-left-s-line"></i></a></li>
        @endif

        <!-- First Page Link -->
        <li class="page-item"><a class="page-link" href="{{ $batteryInventory->url(1) }}">1</a></li>
        @if ($batteryInventory->currentPage() > 4)
            <li class="page-item disabled"><span class="page-link">...</span></li>
        @endif

        <!-- Pagination Elements -->
        @php
            // Calculate start and end pages to display
            $start = max(2, $batteryInventory->currentPage() - 2);
            $end = min($batteryInventory->lastPage() - 1, $batteryInventory->currentPage() + 2);
        @endphp

        @for ($page = $start; $page <= $end; $page++)
            @if ($page == $batteryInventory->currentPage())
                <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
            @else
                <li class="page-item"><a class="page-link" href="{{ $batteryInventory->url($page) }}">{{ $page }}</a></li>
            @endif
        @endfor

        @if ($batteryInventory->currentPage() < $batteryInventory->lastPage() - 3)
            <li class="page-item disabled"><span class="page-link">...</span></li>
        @endif
        <!-- Last Page Link -->
        <li class="page-item"><a class="page-link" href="{{ $batteryInventory->url($batteryInventory->lastPage()) }}">{{ $batteryInventory->lastPage() }}</a></li>

        <!-- Next Page Link -->
        @if ($batteryInventory->hasMorePages())
            <li class="page-item"><a class="page-link" href="{{ $batteryInventory->nextPageUrl() }}"><i class="ri-arrow-right-s-line"></i></a></li>
        @else
            <li class="page-item disabled"><span class="page-link"><i class="ri-arrow-right-s-line"></i></span></li>
        @endif
    </ul>
</nav>
@endif

        </div><!-- table-responsive -->
    </div><!-- card-body -->
</div><!-- card -->



        <br><br><br>

        

      </div><!-- container -->


<script type="text/javascript">
$(document).ready(function() {
    $('.pagi-btn').click(function() {

  $('.gridjs .gridjs-tr th:first-child').hide();
  $('.gridjs .gridjs-tr td:first-child').hide();

      
     $('.gridjs .gridjs-tr').click(function() {
         var firstTd = $(this).find('td:first');
         var id= firstTd.text();
         window.location.href = '/inventory/battery/' + id +'/view';
     });

    }); 
    
   setTimeout(function(){
     
     $('.gridjs .gridjs-tr th:first-child').hide();
     $('.gridjs .gridjs-tr td:first-child').hide();

     $('.gridjs .gridjs-tr').click(function() {
        var firstTd = $(this).find('td:first');
        var id= firstTd.text();
         window.location.href = '/inventory/battery/' + id +'/view';
    });
    
      
  }, 200);

}); 
</script>

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>

    <script type="text/javascript">
      $("#tableGrid1").Grid({
        className: {
          table: 'table table-bordered mb-0'
        },
        search: true
      });
    </script>
     
     <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    .gridjs-head{
      display: flex;
    }
    .gridjs-search{
      width: 50%;
    }
    .filter{
      margin-left: auto;
      width: 200px;
    }
    </style>

   <script>
$(document).ready(function() {
  setTimeout(function(){
    $('.active_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div></div>');
    $('.inactive_status .gridjs-head').append('<div class="filter mb-2"><div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div></div>');
  }, 200);
});
function getval(sel){
  var value = sel.value;
  console.log(value);
  $('.active_status .gridjs-head .filter').html('');
  $('.active_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop" class="form-select"  onchange="getval(this);"><option value="Active" selected>Active</option><option value="Inactive">Inactive</option></select></div>');
  $('.inactive_status .gridjs-head .filter').html('');
  $('.inactive_status .gridjs-head .filter').append('<div class=" sel"><select id="fliterdrop2" class="form-select"  onchange="getval(this);"><option value="Active">Active</option><option value="Inactive" selected>Inactive</option></select></div>');
    if (value=='Active') {
    $('.active_status').show();
    $('.inactive_status').hide();
    }
    else if (value=='Inactive') {
    $('.inactive_status').show();
    $('.active_status').hide();
    }
    // console.log($("#fliterdrop").val);
    // $(".filter").html("");
}
// $('.filter').change(function() {
//   console.log("here is my on change");
//     var value = $(this).val();
//     if (value=='Active') {
//     $('.active_status').show();
//     $('.inactive_status').hide();
//     }
//     else if (value=='Inactive') {
//     $('.inactive_status').show();
//     $('.active_status').hide();
//     }
// });
</script>


    <script type="text/javascript">

      $("#tableGrid1").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  search: true
});

 //       $('#filter').change(function() {
 //   console.log('Button clicked!');
 //   var value = $(this).val();
 //   alert(value)

 // });


    </script>


@endsection