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

<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
    @foreach($districts as $district)
        <a href="{{ route('admin.areas.upazilas', $district) }}" 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">{{ $district->name_bn }}</h3>
                    <p class="text-xs text-gray-500">{{ $district->name_en }}</p>
                </div>
                <div class="text-right">
                    <p class="text-2xl font-bold text-blue-600">{{ $district->upazilas_count }}</p>
                    <p class="text-xs text-gray-500">{{ app()->getLocale() === 'bn' ? 'উপজেলা' : 'Upazilas' }}</p>
                </div>
            </div>
        </a>
    @endforeach
</div>
@endsection