@extends('layouts.app')

@section('content')
    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">Add City</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('cities.store') }}" class="row g-2">
                        @csrf
                        <div class="col-12">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <select name="country_id" class="form-select" required>
                                <option value="">— Select —</option>
                                @foreach($countries as $c)
                                    <option value="{{ $c->id }}" {{ old('country_id') == $c->id ? 'selected' : '' }}>
                                        {{ $c->name }} ({{ optional($c->parentContinent)->name ?: $c->continent }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">City name <span class="text-danger">*</span></label>
                            <input name="name" class="form-control" required maxlength="255" value="{{ old('name') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('status') === '0' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-12 d-grid">
                            <button class="btn btn-success">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">Cities</div>
                <div class="card-body p-0">
                    <table class="table table-sm mb-0">
                        <thead>
                        <tr>
                            <th>City</th>
                            <th>Country</th>
                            <th>Continent</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($cities as $row)
                            <tr>
                                <td>{{ $row->name }}</td>
                                <td>{{ optional($row->country)->name ?: '-' }}</td>
                                <td>{{ optional(optional($row->country)->parentContinent)->name ?: optional($row->country)->continent }}</td>
                                <td>{{ $row->status ? 'Active' : 'Inactive' }}</td>
                                <td class="text-end">
                                    <a href="{{ route('cities.edit', $row) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
                                    <form method="POST" action="{{ route('cities.destroy', $row) }}" class="d-inline" onsubmit="return confirm('Delete this city?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted py-3">No cities yet.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
