@extends("admin.template.layout")

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

              <!-- Ajax Sourced Server-side -->
              <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
                    @if(get_user_permission('malls','c'))
                    <a href="{{route('venues.create')}}" class="main-btn primary-btn btn-hover btn-sm"><i class='bx bx-plus'></i> Create</a>
                    @endif
                </div>
                <div class="card-body">
                  <form method="get" id="eventFilterForm">
                    <div class="row mb-3">
                      <div class="col-md-2">
                          <label for="nationality_filter" class="form-label">Venue Type:</label>
                          <select id="type" name="type" class="form-control">
                              <option value="">All</option>
                              @if(!empty($venue_types))
                              @foreach($venue_types as $type)
                              <option value="{{$type->id}}">{{$type->name}}</option>
                              @endforeach
                              @endif
                          </select>
                      </div>
                        <div class="col-md-2">
                            <label for="status_filter" class="form-label">Location:</label>
                            <select id="status" name="status" class="form-control">
                                <option value="">All</option>
                                @if(!empty($locations))
                                @foreach($locations as $location)
                                <option value="{{$location->id}}">{{$location->name}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="status_filter" class="form-label">Gifting:</label>
                            <select id="gifting" name="gifting" class="form-control">
                                <option value="">All</option>
                                <option value="1">Available</option>
                                <option value="0">Not Available</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="status_filter" class="form-label">Sort By Date:</label>
                            <select id="sortby" name="sortby" class="form-control">
                                <option value="desc">Newest to Oldest</option>
                                <option value="asc">Oldest to Newest</option>
                            </select>
                        </div>
                      <div class="col-md-3">
                        <label for="name" class="form-label">Search by name:</label>
                        <input type="text" class="form-control" name="name">
                      </div>
                    </div>
                  </form>
                  <div class="card-datatable text-nowrap">
                    <div class="table-responsive">
                      <table class="datatables-ajax table table table-condensed" data-role="ui-datatable" data-src="{{route('venues.getlist')}}" >
                        <thead>
                            <tr>
                                <th class="pt-0 sorting_disabled" data-colname="id">#</th>
                                <th class="pt-0 sorting_disabled" data-searchable="true" data-colname="name">Name</th>

                                <th class="pt-0 sorting_disabled" data-colname="type_name">Type</th>
                                <th class="pt-0 sorting_disabled" data-colname="is_gifting_enabled">Gifting</th>
                                <th class="pt-0 sorting_disabled" data-colname="city">City</th>
                                <th class="pt-0 sorting_disabled" data-colname="country_id">Country</th>
                                <th class="pt-0 sorting_disabled" data-colname="created_at">
                                  Created on
                                </th>
                                <th class="pt-0 sorting_disabled" data-colname="action">Action</th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <!--/ Ajax Sourced Server-side -->
            </div>
@stop
@section('header')
<style>
#DataTables_Table_0_filter{display:none !important}
</style>
@stop
@section('script')
<script>
jQuery(document).ready(function(){
  App.initTreeView();
});

$(function () {
    var table = $('.datatables-ajax').DataTable();
    //trgger create_at colmn
    $('.datatables-ajax thead th[data-colname="created_at"]').click();
    $('.dataTables_filter input[type="search"]').on('keyup', function() {
        var searchText = $(this).val().toLowerCase();
        $(this).val(searchText);
        table.search(searchText).draw();
    });
    $('#eventFilterForm').on('submit', function (event) {
        event.preventDefault();
        var formData = $('#eventFilterForm').serialize();
        table.ajax.url('{{route("venues.getlist")}}?' + formData).load();
    }).on('input', 'input, select', function (event) {
        event.preventDefault();
        var formData = $('#eventFilterForm').serialize();
        table.ajax.url('{{route("venues.getlist")}}?' + formData).load();
    });
});



</script>
@stop