@extends('layouts/contentNavbarLayout')

@section('title', 'History')

@section('content')
    <h4 class="py-3 mb-4"><span class="text-muted fw-light">Parking Spot /</span> History
    </h4>
        <div class="card">
            <div class="card-body row g-2">
              <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
                <h5 class="m-0 me-2">Scan History</h5>
                <div>

                  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
                    Filter
                  </button>
                </div>
              </div>

              <div class="table-responsive text-nowrap">
                @include('parkingspot.scan_history_table')
              </div>
            </div>
        </div>


        {{-- Basic Modal --}}
        <div class="modal fade" id="basicModal" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel1">Filter History</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="row">
                <div class="row g-2">
                  <div class="col mb-2">
                    <div class="form-floating form-floating-outline">
                                            {!! Form::select('user', $users, '*', ['id' => 'scanner_user_id', 'class' => 'form-control form-select form-select-lg']) !!}
                      <label for="start_date">Select User</label>
                    </div>
                  </div>
                  <div class="col mb-2">
                    <div class="form-floating form-floating-outline">
                      <input type="date" value="{{ Carbon\Carbon::today()->toDateString() }}" id="start_date" class="form-control">
                      <label for="start_date">Start date</label>
                    </div>
                  </div>
                  <div class="col mb-2">
                    <div class="form-floating form-floating-outline">
                      <input type="date" id="end_date" value="{{ Carbon\Carbon::today()->toDateString() }}" class="form-control">
                      <label for="end_date">End date</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" onclick="loadDatatable()" data-bs-dismiss="modal" class="btn btn-primary">Fetch history</button>
              </div>
            </div>
          </div>
        </div>

@endsection

@section('page-script')

  <script type="text/javascript">
    $(document).ready(function () {

     loadDatatable();

    });

    function loadDatatable() {
      $('.data-table').DataTable().destroy();
      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          ajax: "/scan-history?scanner_user_id="+$("#scanner_user_id").val()+
                    "&start_date="+$("#start_date").val()+"&end_date="+$("#end_date").val(),
          columns: [
              {data: 'id', name: 'id'},
              {data: 'user_id', name: 'user_id'},
              {data: 'spot_id', name: 'spot_id'},
              {data: 'vehicle_id', name: 'vehicle_id'}
          ]
      });
    }
  </script>

@endsection