@extends("admin.template.layout")

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
              <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
                    <div class="export-dropdown">
                      <button class="main-btn primary-btn btn-hover btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="bx bx-export"></i> Export All
                      </button>
                      <div class="dropdown-menu" aria-labelledby="exportDropdown">
                        <a class="dropdown-item" href="{{route('reports.venue.export','csv')}}"><i class="bx bx-file"></i> Export as CSV</a>
                        <a class="dropdown-item" href="{{route('reports.venue.export','pdf')}}"><i class="bx bx-file"></i> Export as PDF</a>
                        <a class="dropdown-item" href="{{route('reports.venue.export','excel')}}"><i class="bx bx-file"></i> Export as EXCEL</a>
                      </div>
                    </div>
                </div>
                <div class="card-body">
                    @if(session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif                  
                    <form method="get" id="FilterForm">
                      <div class="row mb-3">
                        <div class="col-md-2">
                            <label for="date_from" class="form-label">Date From:</label>
                            <input type="date" id="d_from" name="d_from" class="form-control" value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="date_to" class="form-label">Date To:</label>
                            <input type="date" id="d_to" name="d_to" class="form-control" value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="status_filter" class="form-label">Venues:</label>
                            <select name="venue" id="venue" class="form-control">
                              <option value="">All</option>
                              @foreach($venues as $venue)
                              <option value="{{$venue->id}}">{{$venue->name}}</option>
                              @endforeach
                            </select>
                        </div>                                                
                        <div class="col-md-2">
                            <label for="nationality_filter" class="form-label">Checked In Users:</label>
                            <select name="user" id="user" class="form-control">
                              <option value="">All</option>
                              @foreach($users as $user)
                              <option value="{{$user->id}}">{{$user->name}}</option>
                              @endforeach
                            </select>
                        </div>                      

                      </div>
                    </form>
                  <div class="card-datatable text-nowrap">
                    <div class="table-responsive">
                    <table class="datatables-ajax table table-condensed" data-role="ui-datatable" data-src="{{route('reports.venue.list')}}" >
                        <thead>
                            <tr>
                                <th class="pt-0" data-colname="id">#</th>
                                <th class="pt-0" data-searchable="true" data-colname="user_name"> User </th>
                                <th class="pt-0" data-colname="venue_name"> Venue</th>
                                <th class="pt-0" data-colname="check_in_time">Check in</th>
                                <th class="pt-0" data-colname="check_out_time">Check out</th>
                                <th class="pt-0" data-colname="time_spent">Time Spent</th>
                                <th class="pt-0" data-colname="status">Status</th>
                                <th class="pt-0" data-colname="venue_id">Action</th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!--/ Ajax Sourced Server-side -->
</div>
@stop
@section('script')
<script>
  jQuery(document).ready(function(){

      App.initTreeView();

  })
</script>

<script>
$(function () {
    $('#FilterForm').on('input', 'input, select', function (event) {
        event.preventDefault();
        var formData = $('#FilterForm').serialize();
        var table = $('.datatables-ajax').DataTable();
        table.ajax.url('{{ route("reports.venue.list") }}?' + formData).load();
    });
});
</script>
@stop