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

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

@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/select2/select2-materialize.css') }}">
@endsection

{{-- page style --}}
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/form-select2.css') }}">
@endsection

@section('content')
    {{-- <div class="container">
	<div class="row">
		<div class="input-field col s12 m6">
		</div>
		<div class="col m6 input-field">
			<form action="{{ route('admin.township.index') }}" method="get" id="city-form">
				<select class="select2 browser-default" name="city_id" id="city-select">
					<option value="">All</option>
					@foreach ($cities as $city)
						<option value="{{ $city->id }}"
							{{ request()->get('city_id') && request()->get('city_id') == $city->id ? "selected" : '' }}
						>{{ $city->name }}</option>
					@endforeach
				</select>
			</form>
		</div>
	</div>
</div> --}}
    <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>Township</b></h4>
                    </div>
                    <div class="col s4">
                        <div class="input-field">
                            <form action="{{ route('admin.township.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">
                            <a href="{{ route('admin.township.create') }}" class="btn waves-effect waves-light right"><i
                                    class="material-icons left">list</i>Add Township</a>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    <!-- datatable start -->
                    <div class="responsive-table">
                        <div class="center">
                            {{ $townships->withQueryString()->links() }}
                        </div>
                        <table id="users-list-datatable" class="table responsive-table striped">
                            <thead class="grey lighten-2">
                                <tr>
                                    <th></th>
                                    <th>#</th>
                                    <th>Township</th>
                                    <th>City</th>
                                    <th>Created</th>
                                    <th>Created By</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($townships as $key => $township)
                                    <tr>
                                        <td></td>
                                        <td>{{ $key + $townships->firstItem() }}</td>
                                        <td>{{ $township->name }}</td>
                                        <td>{{ $township->city && $township->city->name ? $township->city->name : '-' }}
                                        </td>
                                        <td>{{ $township->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"
                                                        href="{{ route('admin.township.edit', $township->id) }}"
                                                        style="padding: 6px 10px;">edit</a>
                                                </i>
                                                <form action="{{ route('admin.township.destroy', $township->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
                                    <tr>
                                        <td colspan="7">No townships found!</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <div class="center">
                            {{ $townships->withQueryString()->links() }}
                        </div>
                    </div>
                    <!-- datatable ends -->
                </div>
            </div>
        </div>
    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset('vendors/select2/select2.full.min.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('js/scripts/form-select2.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".select2").select2({
                dropdownAutoWidth: true,
                width: '100%'
            });
            $('#city-select').on('change', function() {
                $('#city-form').submit();
            });
        });
    </script>
@endsection