{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'City List')

@section('content')
{{-- <a class="waves-effect waves-light btn" href="{{route('admin.city.create')}}zz">Add City</a> --}}
<section class="users-list-wrapper section">
    <div class="users-list-table">
      <div class="card">
		<div class="row col s12">
            <div class="col s5">
                <h4><b>City</b></h4>
            </div>
            <div class="col s4">
                <div class="input-field">
                    <form action="{{ route('admin.city.index') }}" method="get" class="city-search" id="report-search-form">
                        <input class="search-keyword" type="text" name="keyword" id="keyword" value="{{ request('keyword') ?? '' }}" placeholder="Search...">
                        <i class="material-icons prefix custom-search-icon">search</i>
                    </form>
                </div>
            </div>
            <div class="col s3">
                <div class="input-field pr-9 mr-9">
                    <a href="{{route('admin.city.create')}}" class="btn waves-effect waves-light right"><i class="material-icons left">list</i>Add City</a>
                </div>
            </div>
		</div>
        <div class="card-content">
		  <!-- datatable start -->
		  <div class="center">
			  {{ $cities->withQueryString()->links() }}
		  </div>
          <div class="responsive-table">
            <table id="users-list-datatable" class="table responsive-table striped">
              <thead class="grey lighten-2">
                <tr>
                  <th></th>
                  <th>#</th>
				  <th>Name</th>
                  <th>Merchant Class</th>
				  <th>Created</th>
				  <th>Created By</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                  @forelse ($cities as $key => $city)
                  <tr>
                    <td></td>
                    <td>{{$key + $cities->firstItem()}}</td>
                    <td>{{$city->name}}</td>
                    <td>{{$city->merchantClass ? $city->merchantClass->name : '-'}}</td>
                    <td>{{$city->created_time}}</td>
                    <td>Admin</td>
                    <td>
						<div class="right">
							<i class="material-icons left pt-4">
								<a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.city.edit',$city->id) }}" style="padding: 6px 10px;">edit</a>
							</i>
							<form action="{{ route('admin.city.destroy', $city->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
								<input type="hidden" name="_method" value="DELETE">
								<input type="hidden" name="_token" value="{{ csrf_token() }}">
								<button class="btn waves-effect waves-light red darken-2 border-radius-button" type="submit" name="action" style="padding: 0px 16px;"><i class="material-icons left">delete_forever</i>Delete</button>
							</form>
						</div>
                    </td>
                  </tr>
                  @empty

                  @endforelse
              </tbody>
            </table>
		  </div>
		  <div class="center">
			  {{ $cities->withQueryString()->links() }}
		  </div>

          <!-- datatable ends -->
        </div>
	  </div>
	  {{-- <div id="modal1" class="modal">
		  	<form action="{{ route('admin.city.index') }}" method="get">
				<div class="modal-content pl-0 pr-0 pb-0">
					<div class="modal-filter-header custom-d-flex pl-2 pr-2 pt-2 pb-2">
						<h4 class="m-0 pr-2"><b>City Filter</b></h4>
						<a href="#" class="mt-1 pl-2 clear-filter" id="clearFilter">Clear Filter</a>

						<div class="">
							<a href="#" class="right">
								<i class="material-icons prefix custom-calendar-icon">close</i>
							</a>
							<button class="right" type="submit">submit</button>
						</div>
					</div>
					<div class="modal-filter-body row ml-0 mr-0">
						<div class="col s4 mb-4 date-filter">
							<h5><b>Created</b></h5>
							<div class="filter-box custom-d-flex">
								<input type="date" style="date" name="created_time" placeholder="Choose Date" class="date-filter mb-0" value="{{ request('created_time') ? request('created_time') : '' }}">
							</div>
						</div>
						<div class="col s4 mb-4"></div>
						<div class="col s4 mb-4"></div>
					</div>
				</div>
			</form>
	  </div> --}}
    </div>
  </section>
@endsection

@section('page-script')
<script>
	$(document).ready(function(){
		$('.modal').modal();
	});
	function checkFilter(id, type) {
		var filter_box = "#filter-box-" + type + '-' + id;
		var filter_check = "#filter-check-" + type + '-' + id;

		if ($(filter_box).hasClass("box-checked")) {
			$(filter_box).removeClass("box-checked");
			$(filter_check).removeAttr('checked');
		} else {
			$(filter_box).addClass("box-checked");
			$(filter_check).attr('checked', 'checked');
		}
	}

	$('#clearFilter').on('click', function() {
		$('.filter-box').removeClass('box-checked');
		$('.filter-check').removeAttr('checked');
		$('.date-filter').val('');
	})
</script>
@endsection