@extends('admin.layouts.app')
@section('content')

@foreach ($cities as $key => $city)
<x-danger-modal :id="$city->id" header="Danger" message="Are you sure deleted it?!" link="{{ route('admin.cities.destroy', $city->id) }}" />
@endforeach


<div class="row">
    <div class="col-12">
        <form action="{{ route('admin.cities.bulk-option') }}" method="POST" enctype="multipart/form-data" id="bulkActionForm">
            @csrf
            <input type="hidden" name="bulk_type" id="bulk_type" />
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Cities</h5>
                    <div class="options">
                        <div class="btn-group">
                            <button type="button" class="btn btn-label-primary dropdown-toggle waves-effect" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="ti ti-settings me-2"></i>
                                Options
                            </button>
                            <ul class="dropdown-menu" style="">
                                <li><a class="dropdown-item text-danger" href="javascript:void(0);" onclick="bulkDelete()"><i class="ti ti-trash me-2"></i>Bulk Delete</a></li>
                                <li><a class="dropdown-item" href="{{ route('admin.cities.create') }}"><i class="ti ti-plus me-2"></i>Create New</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-datatable table-responsive">
                    <table class="table" id="cities-table">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="form-check-input check-all me-3"> ID</th>
                                <th>Name</th>
                                <th>Country</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    $(function() {

        var table = $('#cities-table').DataTable({
            processing: true
            , serverSide: true
            , ajax: "{{ route('admin.cities.index') }}"
            , columns: [{
                    data: 'id'
                    , name: 'id'
                    , orderable: false
                    , searcheable: false
                }
                , {
                    data: 'name'
                    , name: 'name'
                }
                , {
                    data: 'country'
                    , name: 'country'
                }
                , {
                    data: 'action'
                    , name: 'action'
                    , orderable: false
                    , searcheable: false
                }
            , ]
            , order: []
        });

    });

</script>

{{-- checkall in table --}}
<script>
    $(document).on("change", ".check-all", function() {
        if (this.checked) {
            $('.check-one:checkbox').each(function() {
                this.checked = true;
            });
        } else {
            $('.check-one:checkbox').each(function() {
                this.checked = false;
            });
        }
    });
    $(document).ready(function() {});

</script>

<script>
    function bulkDelete() {
        if (confirm('Are you sure deleted selected ?!')) {
            document.getElementById('bulk_type').value = 'delete';
            document.getElementById('bulkActionForm').submit();
        }
    }

</script>


@endsection