@push('page_css')
<link href="https://cdn.datatables.net/2.3.0/css/dataTables.dataTables.min.css" rel="stylesheet"/>
<style>
  /* table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric {
    text-align: left !important;  /* Adjust this value as needed */
  /* } */
  .ml-3 {
    margin-left: 3px !important;
  }
</style>
@endpush
@php ($headerOption = [
'title' => "",
'header_buttons' => [
   (count($data)) ? '<a class="'. \Config::get('view.buttons.secondary') .'" href="'. route('reports.customer-drinks-log-export', Request::input()) .'" data-toggle="tooltip" data-original-title="Export Records"><i class="bx bx-download"></i></a>' : '',
  ],
'filters' => isset($filters) ? $filters : [],
'data' => isset($data) ? $data : []
])
@extends('admin.layouts.layout', $headerOption)


@section('content')
 <div class="row mb-2 d-none">
    <div class="col-sm-12">
        <div class="search-box mr-2 mb-2 d-inline-block">
            <div class="position-relative">
                <input type="text" class="form-control" placeholder="Search...">
                <i class="bx bx-search-alt search-icon"></i>
            </div>
        </div>
    </div>
</div>
<div class="table-responsive">
  <table class="{!! \Config::get('view.table.table_class') !!}" id="drinkLogTable">
    <thead class="{!! \Config::get('view.table.table_head_class') !!}">
      <tr>
        <th width="29%">Customer</th>
        <th width="20%">Staff</th>
        <th width="10%">Served At</th>
      </tr>
    </thead>
    <tbody class="{!! \Config::get('view.table.table_body_class') !!}">
      @if(isset($data) && count($data) > 0)
        @foreach($data as $row)
          <tr>
            <td>
              {{ $row['customer']['full_name'] }}
            </td>
            <td>
              {{ $row['staff']['full_name'] }}
            </td>
            <td>{{ isset($row['created_at']) ?  \Carbon\Carbon::parse($row['created_at'])->format(\Config::get('settings.date_format')) . ' ' . \Carbon\Carbon::parse($row['created_at'])->format(\Config::get('settings.time_format')) : 'NA'}}</td>
          </tr>
        @endforeach
      @else
        <tr>
          <td colspan="3" class="text-center">No records found</td>
        </tr>
      @endif
  </table>  
</div>


@include('admin.components.pagination')
@push('page_script')
<script src="https://cdn.datatables.net/2.3.0/js/dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js" referrerpolicy="origin"></script>
<script>
    let table;

    $(document).ready(function() {   

        $('#filter-panel').css('display', 'block'); 
    });    
        
</script>
@endpush

@endsection