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

<div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
                <th class="text-left py-3 px-4">{{ app()->getLocale() === 'bn' ? 'ইউনিয়ন' : 'Union' }}</th>
                <th class="text-left py-3 px-4">{{ app()->getLocale() === 'bn' ? 'ইংরেজি নাম' : 'English Name' }}</th>
                <th class="text-center py-3 px-4">{{ app()->getLocale() === 'bn' ? 'ধরণ' : 'Type' }}</th>
                <th class="text-center py-3 px-4">{{ app()->getLocale() === 'bn' ? 'পরিবার সংখ্যা' : 'Families' }}</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            @foreach($unions as $union)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <td class="py-3 px-4 font-medium">{{ $union->name_bn }}</td>
                    <td class="py-3 px-4 text-gray-500">{{ $union->name_en }}</td>
                    <td class="py-3 px-4 text-center text-xs">{{ ucfirst($union->type ?? 'union') }}</td>
                    <td class="py-3 px-4 text-center">
                        <span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">{{ $union->families_count }}</span>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection