@extends('admin.templates.layout')

@section('head')
<link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    #dataTable thead th {
        font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
        color: #64748b; font-weight: 600; background: #f8fafc;
        border-bottom: 1px solid #e2e8f0; padding: 12px;
    }
    #dataTable tbody td { vertical-align: middle; padding: 12px; font-size: 13.5px; color: #334155; }
    #dataTable tbody tr:hover { background: #f8fafc; }
    .card-header-toolbar {
        display: flex; justify-content: space-between; align-items: center;
        gap: 16px; padding: 20px 22px; border-bottom: 1px solid #eef2f7;
    }
    .card-header-toolbar .title-block h5 { font-size: 17px; font-weight: 600; color: #1e293b; margin: 0; }
    .card-header-toolbar .title-block p { font-size: 12.5px; color: #64748b; margin: 3px 0 0; }
    .toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .btn-add-primary {
        display: inline-flex; align-items: center; gap: 7px; height: 38px;
        padding: 0 16px; border-radius: 8px;
        background: linear-gradient(180deg, #4f6ef7 0%, #3d5ce5 100%);
        color: #fff !important; font-size: 13px; font-weight: 600;
        border: none; box-shadow: 0 2px 6px rgba(79, 110, 247, 0.28);
        transition: all .18s ease; white-space: nowrap;
    }
    .btn-add-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 110, 247, 0.35); color: #fff; }
    .select2-container { width: 170px !important; }
</style>
@endsection

@section('content')
<div class="row"><div class="col-lg-12">
    <div class="card">
        <div class="card-header-toolbar">
            <div class="title-block">
                <h5>{{ $page_heading }}</h5>
                <p>Manage all cities grouped by country</p>
            </div>
            <div class="toolbar-actions">
                <select id="countryFilter" class="form-select form-select-sm">
                    <option value="">All Countries</option>
                    @foreach(\App\Models\Country::orderBy('name')->get(['id','name']) as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
                <select id="statusFilter" class="form-select form-select-sm">
                    <option value="">All Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
                <a href="{{ route('admin.cities.create') }}" class="btn-add-primary">
                    <i class="ri-add-line"></i> Add City
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="dataTable">
                    <thead>
                        <tr>
                            <th style="width:50px;">#</th>
                            <th>Name</th>
                            <th>Name (AR)</th>
                            <th>Country</th>
                            <th style="width:120px;">Status</th>
                            <th class="text-end" style="width:120px;">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div></div>
@endsection

@section('script')
<script src="{{ asset('admin_assets/assets/js/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function () {
    $('#countryFilter').select2({ minimumResultsForSearch: -1, placeholder: 'All Countries' });
    $('#statusFilter').select2({ minimumResultsForSearch: -1, placeholder: 'All Status' });

    var table = $('#dataTable').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '{{ route("admin.cities.list") }}',
            data: d => {
                d.status = $('#statusFilter').val();
                d.country_id = $('#countryFilter').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', searchable: false, orderable: false, width: '50px', className: 'text-muted' },
            { data: 'name_col', name: 'name' },
            { data: 'name_ar_col', name: 'name_ar', orderable: false },
            { data: 'country_col', searchable: false, orderable: false },
            { data: 'status_badge', searchable: false, orderable: false },
            { data: 'action', searchable: false, orderable: false, className: 'text-end' }
        ],
        order: [[0, 'desc']],
        pageLength: 10,
        language: {
            emptyTable: '<div class="text-center py-4 text-muted"><i class="ri-map-pin-line fs-32 d-block mb-2"></i>No cities found</div>'
        }
    });

    $('#statusFilter, #countryFilter').on('change', () => table.ajax.reload());

    $(document).on('click', '.delete-btn', function () {
        var url = $(this).data('url');
        Swal.fire({
            title: 'Are you sure?', text: 'You want to delete this city?',
            icon: 'warning', showCancelButton: true,
            confirmButtonText: 'Yes, delete it!', confirmButtonColor: '#d33', cancelButtonColor: '#94a3b8'
        }).then(function (r) {
            if (r.isConfirmed) {
                $.ajax({
                    url: url, type: 'DELETE',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function (res) {
                        toastr.success(res.message);
                        table.ajax.reload(null, false);
                    }
                });
            }
        });
    });
});
</script>
@endsection