@extends('layouts.admin')

@section('title', 'Cities')

@section('content')
<div class="admin-page-header">
    <div>
        <h1>All Cities</h1>
        <p class="admin-page-subtitle mb-0">View and filter cities with state and country context.</p>
    </div>
</div>

<div class="admin-card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="admin-form-label">Search</label>
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" value="{{ $search }}" class="admin-form-control form-control" placeholder="Type city name">
                </div>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Country</label>
                <select name="country_id" class="admin-form-control form-select" onchange="this.form.submit()">
                    <option value="">Select country</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}" {{ (string)$countryId === (string)$country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">State</label>
                <select name="state_id" class="admin-form-control form-select">
                    <option value="">Select state</option>
                    @foreach($states as $state)
                        <option value="{{ $state->id }}" {{ (string)$stateId === (string)$state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="admin-form-label">Status</label>
                <select name="status" class="admin-form-control form-select">
                    <option value="">All status</option>
                    <option value="1" {{ $status === '1' ? 'selected' : '' }}>Show</option>
                    <option value="0" {{ $status === '0' ? 'selected' : '' }}>Hidden</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="admin-btn-primary w-100" style="margin-top: 28px;">
                    <i class="bi bi-filter"></i> Filter
                </button>
            </div>
            <div class="col-md-1">
                <a href="{{ route('admin.settings.shipping.cities') }}" class="btn btn-outline-secondary w-100" style="margin-top: 28px;">
                    <i class="bi bi-arrow-counterclockwise"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="admin-table table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th style="width:80px;">#</th>
                        <th>Name</th>
                        <th>State</th>
                        <th>Country</th>
                        <th style="width:180px;">Area Wise Shipping Cost</th>
                        <th style="width:140px;">Show/Hide</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($cities as $city)
                        <tr>
                            <td>{{ $city->id }}</td>
                            <td class="fw-semibold">{{ $city->name }}</td>
                            <td>{{ $city->state->name ?? '—' }}</td>
                            <td>{{ $city->country->name ?? '—' }}</td>
                            <td>₹{{ number_format($city->cost ?? 0, 2) }}</td>
                            <td>
                                <form method="POST" action="{{ route('admin.settings.shipping.cities.status', $city) }}" class="d-inline">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="status" value="{{ $city->status ? 0 : 1 }}">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" role="switch" {{ $city->status ? 'checked' : '' }} onchange="this.form.submit()">
                                        <label class="form-check-label text-muted small">{{ $city->status ? 'Visible' : 'Hidden' }}</label>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="admin-empty-state">
                                    <i class="bi bi-building"></i>
                                    <h3>No Cities Found</h3>
                                    <p>No cities match your current filters.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination - Right Aligned -->
        @if($cities->hasPages())
        <div class="pagination-wrapper mt-4">
            <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                <div class="pagination-info-text">
                    Showing <strong>{{ $cities->firstItem() ?? 0 }}</strong>–<strong>{{ $cities->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $cities->total() }}</strong> cities
                </div>
                <div class="pagination-controls">
                    {{ $cities->links('vendor.pagination.admin-categories') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection