@extends('backend.layouts.app')

@section('main-content')
<section class="content-header">
    <div class="container-fluid my-2">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Cities</h1>
            </div>
            <div class="col-sm-6 text-end">
                <a href="{{ route('cities.create') }}" class="btn btn-primary">New City</a>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <x-messages />
        <div class="card">
            <form action="" method="GET">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" onclick="window.location.href='{{ route('cities.index') }}'"
                                class="btn btn-outline-secondary">Reset</button>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex gap-2 justify-content-end">
                                <select name="per_page" class="form-control" style="max-width: 140px;" onchange="this.form.submit()">
                                    @foreach ([10, 25, 50, 100, 500, 1000] as $size)
                                        <option value="{{ $size }}" @selected((int) request('per_page', 15) === $size)>{{ $size }} / page</option>
                                    @endforeach
                                </select>
                                <div class="input-group">
                                    <input type="text" value="{{ Request::get('keyword') }}" name="keyword"
                                        class="form-control" placeholder="Search city or country">
                                    <button type="submit" class="btn btn-default">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                    <thead>
                        <tr>
                            <th width="60">ID</th>
                            <th>Name</th>
                            <th>Country</th>
                            <th>Code</th>
                            <th>Businesses</th>
                            <th width="100">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($cities as $city)
                            <tr>
                                <td>{{ $city->id }}</td>
                                <td>{{ $city->name }}</td>
                                <td>{{ $city->country ?? '—' }}</td>
                                <td>{{ $city->code ?? '—' }}</td>
                                <td>{{ $city->businesses_count }}</td>
                                <td class="d-flex gap-2">
                                    <a href="{{ route('cities.show', $city) }}" class="text-danger w-4 h-4 mr-1">
                                        <i class="fa-regular fa-pen-to-square"></i>
                                    </a>
                                    <form action="{{ route('cities.destroy', $city) }}" method="POST"
                                        onsubmit="return confirm('Are you sure you want to delete this city?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn-none bg-transparent border-0">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6">No cities found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="card-footer clearfix">
                {{ $cities->links() }}
            </div>
        </div>
    </div>
</section>
@endsection