@extends('layouts.app')
@section('title', $district->name)
@section('page-title', app()->getLocale() === 'bn' ? 'উপজেলা সমূহ' : 'Upazilas')
@section('content')
<div class="mb-4">
    <a href="{{ route('admin.areas.districts', $district->division) }}" class="text-green-600 hover:text-green-800 text-sm">&larr; {{ $district->division->name }} — {{ app()->getLocale() === 'bn' ? 'জেলা সমূহ' : 'Districts' }}</a>
</div>
<h2 class="text-xl font-bold mb-2">{{ $district->name_bn }} <span class="text-gray-500 text-base font-normal">({{ $district->name_en }})</span></h2>
<p class="text-sm text-gray-500 mb-6">{{ $district->division->name }} → {{ $upazilas->count() }} {{ app()->getLocale() === 'bn' ? 'টি উপজেলা' : 'upazilas' }}</p>

<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
    @foreach($upazilas as $upazila)
        <a href="{{ route('admin.areas.unions', $upazila) }}" class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 hover:shadow-lg transition group">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="font-bold group-hover:text-green-600 transition">{{ $upazila->name_bn }}</h3>
                    <p class="text-xs text-gray-500">{{ $upazila->name_en }}</p>
                </div>
                <div class="text-right">
                    <p class="text-2xl font-bold text-purple-600">{{ $upazila->unions_count }}</p>
                    <p class="text-xs text-gray-500">{{ app()->getLocale() === 'bn' ? 'ইউনিয়ন' : 'Unions' }}</p>
                </div>
            </div>
        </a>
    @endforeach
</div>
@endsection