@extends('layouts.admin')

@section('title', 'View City - Admin Panel')
@section('page-title', 'City Details')

@section('content')
    <div class="pt-[14px] pb-8">
        <div class="mb-6">
            <a href="{{ route('admin.cities.index') }}" class="text-[#717182] hover:text-[#FF8FA3] flex items-center gap-2">
                <i class="ri-arrow-left-line"></i>
                <span>Back to Cities</span>
            </a>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-[#0000001A] p-6 md:p-8 mb-6">
            <div class="flex justify-between items-start mb-6">
                <div>
                    <h2 class="text-[#0A0A0A] text-[24px] font-medium font-['poppins'] mb-2">{{ $city->name }}</h2>
                    <p class="text-[#717182] font-['poppins']">City Details</p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('admin.cities.edit', $city) }}" class="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition">
                        <i class="ri-pencil-line"></i> Edit
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">City Name</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $city->name }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">State/Province</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $city->state->name }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Country</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $city->state->country->name }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Status</label>
                    <span class="px-3 py-1 rounded-full text-sm {{ $city->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                        {{ $city->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Total Clubs</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $city->clubs()->count() }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Slug</label>
                    <p class="text-sm font-mono text-gray-600">{{ $city->slug }}</p>
                </div>
            </div>
        </div>
    </div>
@endsection