@extends('admin.layout')
@section('title', 'Cities')
@section('content')
<main class="page">
    <span class="eyebrow">Location</span><h1 class="title">Cities</h1>
    <p class="muted">Manage towns and cities job seekers can browse. Add an optional city photo.</p>
    @if (session('status'))<div class="flash" role="status">{{ session('status') }}</div>@endif
    @if ($errors->any())<div class="error-box" role="alert">{{ $errors->first() }}</div>@endif

    <section class="panel category-create">
        <h2 class="section-title">Add a city</h2>
        <form method="POST" action="{{ route('admin.cities.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="settings-grid">
                <div class="field"><label for="name">City or town name *</label><input class="input" id="name" name="name" value="{{ old('name') }}" maxlength="160" required></div>
                <div class="field"><label for="county_id">County *</label><select class="input" id="county_id" name="county_id" required><option value="">Choose a county</option>@foreach ($counties as $county)<option value="{{ $county->id }}" @selected(old('county_id') == $county->id)>{{ $county->name }}</option>@endforeach</select></div>
                <div class="field"><label for="image">City image</label><input class="input" id="image" name="image" type="file" accept="image/jpeg,image/png,image/webp"><p class="hint">JPG, PNG, or WebP, up to 5 MB.</p></div>
                <div class="field"><label for="is_active">Visibility</label><select class="input" id="is_active" name="is_active"><option value="1" @selected(old('is_active', '1') === '1')>Active and public</option><option value="0" @selected(old('is_active') === '0')>Hidden</option></select></div>
            </div>
            <button class="button" type="submit">Add city</button>
        </form>
    </section>

    <section class="panel">
        <div class="panel-head"><strong>{{ number_format($cities->total()) }} cities</strong><span class="muted">Active cities appear on the public Cities page.</span></div>
        @forelse ($cities as $city)
            <article style="padding:20px;border-bottom:1px solid #edf1ee">
                <div style="display:flex;align-items:center;gap:14px;margin-bottom:12px">
                    @if ($city->image_path)<img src="{{ route('admin.content.image', ['type' => 'city', 'record' => $city->id]) }}" alt="{{ $city->name }}" style="width:96px;height:64px;object-fit:cover;border-radius:10px">@endif
                    <div><strong>{{ $city->name }}</strong><div class="muted">{{ $city->county->name }} · {{ $city->is_active ? 'Active' : 'Hidden' }}</div></div>
                </div>
                <form method="POST" action="{{ route('admin.cities.update', $city) }}" enctype="multipart/form-data">
                    @csrf @method('PATCH')
                    <div class="settings-grid">
                        <div class="field"><label for="city-name-{{ $city->id }}">City or town</label><input class="input" id="city-name-{{ $city->id }}" name="name" value="{{ $city->name }}" required></div>
                        <div class="field"><label for="city-county-{{ $city->id }}">County</label><select class="input" id="city-county-{{ $city->id }}" name="county_id" required>@foreach ($counties as $county)<option value="{{ $county->id }}" @selected($city->county_id === $county->id)>{{ $county->name }}</option>@endforeach</select></div>
                        <div class="field"><label for="city-image-{{ $city->id }}">Replace image</label><input class="input" id="city-image-{{ $city->id }}" name="image" type="file" accept="image/jpeg,image/png,image/webp"></div>
                        <div class="field"><label for="city-active-{{ $city->id }}">Visibility</label><select class="input" id="city-active-{{ $city->id }}" name="is_active"><option value="1" @selected($city->is_active)>Active and public</option><option value="0" @selected(!$city->is_active)>Hidden</option></select></div>
                    </div>
                    @if ($city->image_path)<label class="settings-remove"><input type="checkbox" name="remove_image" value="1"> Remove current image</label>@endif
                    <button class="button button-secondary" type="submit">Save city</button>
                </form>
                <form method="POST" action="{{ route('admin.cities.delete', $city) }}" style="margin-top:10px" onsubmit="return confirm('Delete this city?')">@csrf @method('DELETE')<button class="button button-danger" type="submit">Delete city</button></form>
            </article>
        @empty
            <div class="empty">No cities yet. Add the first one above.</div>
        @endforelse
        <div class="pagination">{{ $cities->links() }}</div>
    </section>
</main>
@endsection