@extends('layouts.app')

@section('content')

<div class="page-breadcrumb">
    <div class="row">
      <div class="col-12 d-flex no-block align-items-center">
        <h4 class="page-title">Stocks History</h4>
        <div class="ms-auto text-end">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">
                Stocks Logs
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div class="container py-5">     
  
    <div class="bg-white rounded shadow mb-5">    
        <ul id="myTab" role="tablist" class="nav nav-tabs nav-pills flex-column flex-sm-row text-center bg-light border-0 rounded-nav">
            <li class="nav-item flex-sm-fill">
              <a id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="true" class="nav-link border-0 text-uppercase font-weight-bold active">Stock History</a>
            </li>                 
        </ul>
        <div id="myTabContent" class="tab-content">
            <div id="history" role="tabpanel" aria-labelledby="history-tab" class="tab-pane fade px-4 py-5 show active">
                <div class="card">
                    <div class="card-body">              
                        <h5 class="card-title">Filter</h5>
                        <div class="row">
                            <div class="col-6">
                                <label for="date_from">From:</label>
                                <input type="date" id="date_from" class="form-control">
                            </div>
                            <div class="col-6">
                                <label for="date_to">To:</label>
                                <input type="date" id="date_to" class="form-control">
                            </div>
                        </div>                    
                        <div class="text-center mt-2 mb-2">
                            <button class="btn btn-primary" id="filter_btn" style="width: 150px;">Filter</button>
                        </div>                        

                        <div class="table-responsive">
                            <table id="zero_config" class="table table-striped table-bordered">
                                <thead>
                                    <tr class="stock-log-row">
                                        <th>Product Name</th>
                                        <th>Initial Quantity</th>
                                        <th>Amount Transacted</th>
                                        <th>Balance</th>
                                        <th>Event</th>
                                        <th>Storage Area</th>
                                        <th>Date & Time</th>
                                        <th>User</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($stockLogs as $log)
                                        <tr>
                                            <td>{{ $log->stock->product->name }}</td>
                                            <td>{{ $log->initial_quantity }}</td>
                                            <td>{{ $log->amount_transacted }}</td>
                                            <td>{{ $log->balance }}</td>
                                            <td>{{ $log->event }} stock item for Production Requisition</td>
                                            <td>{{ $log->storageArea->name }}</td>
                                            <td>{{ $log->created_at->toDateString() }}</td>
                                            <td>{{ $log->user->name }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>      
            </div>       
        </div>
      <!-- End rounded tabs -->
    </div> 

  </div>
 
  <script>
    $(document).ready(function () {
        // Initialize DataTable
        var table = $("#zero_config").DataTable();

        // Filter button click event
        $("#filter_btn").click(function () {
            var dateFrom = $("#date_from").val();
            var dateTo = $("#date_to").val();

            // Apply date range filter
            table.columns(6).search(dateFrom + ' to ' + dateTo).draw();
        });
    });
</script>


  <script src="{{asset('vendor/sweetalerts/sweetalert2.min.js')}}"></script>

  @if(session('success'))
  <script>
      swal("Success", "{{ session('success') }}", "success");
  </script>
  @endif
  @if ($errors->any())
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Oops... There was an error!',
            html: "<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>",
        });
    </script>
@endif

@endsection