@extends('admin.layouts.contentLayoutMaster')

@section('title', $title)

@section('vendor-style')
  {{-- vendor css files --}}
  <link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/tables/datatable/datatables.min.css')) }}">
@endsection

@section('content')

  <section class="users-list-wrapper">
    <!-- Ag Grid users list section start -->
    <div id="basic-examples">
      <div class="card">
        <div class="card-content">
          <div class="card-body">
            @include('admin.layouts.error-message')
            <div class="table-responsive">
              <table class="table zero-configuration" id="table">
                <thead>
                <tr>
                  <th>Booking Code</th>
                  <th>Full Name</th>
                  <th>Action</th>
                </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Ag Grid users list section end -->
  </section>
@endsection
@section('vendor-script')
  {{-- vendor files --}}
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/buttons.bootstrap.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
@endsection
@section('page-script')
  <script src="{{ asset(mix('admin/js/scripts/datatables/datatable.js')) }}"></script>
  <script>

      const modalForm = $('#modalform');

      var table = $('#table').DataTable({
          dom: `@include('admin.components.common.datatables.dom')`,
          buttons: [],
          serverSide: true,
          ajax: {
              url:"{{route('admin.booking-reschedule-request.index', ["status" => $status])}}"
          },
          columns : [
              { data : 'booking_code', orderable: true, searchable: true },
              { data : 'full_name', orderable: true, searchable: true },
              { data : 'action', orderable: false, searchable: false },
          ]
      });

      function reloadTable() {
        table.ajax.url("{{route('admin.booking-reschedule-request.index', ["status" => $status])}}").load();
      }
  </script>
@endsection