@extends('layouts.public')
@section('title', __('Check Status'))
@section('content')
<section class="py-16">
    <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-center mb-4">{{ __('Check Status') }}</h1>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-8">{{ __('Check your family card status') }}</p>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-8">
            <form method="POST" action="{{ route('public.status-search') }}">
                @csrf
                <div class="mb-6">
                    <label class="block text-sm font-medium mb-2">{{ __('NID Number') }}</label>
                    <input type="text" name="nid" value="{{ old('nid') }}" required
                           class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-green-500 focus:border-green-500"
                           placeholder="{{ __('Enter your NID number') }}">
                    @error('nid') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
                </div>
                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-semibold transition">
                    {{ __('Check Status') }}
                </button>
            </form>
        </div>

        @if(isset($family))
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-8 mt-8">
                <h2 class="font-bold text-lg mb-4 text-green-700 dark:text-green-400">
                    @if(app()->getLocale() === 'bn') আপনার পারিবারিক কার্ডের তথ্য @else Your Family Card Information @endif
                </h2>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Family Code') }}</span><span class="font-semibold">{{ $family->family_id_code }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Head of Family') }}</span><span class="font-semibold">{{ $family->head_name_bn }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Status') }}</span>
                        <span class="px-2 py-0.5 rounded text-xs font-semibold
                            {{ match($family->status) {
                                'active' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
                                'approved' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
                                'pending_review' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
                                'rejected' => 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
                                default => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
                            } }}">
                            {{ ucfirst(str_replace('_', ' ', $family->status)) }}
                        </span>
                    </div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('Quantile') }}</span><span>{{ $family->quantile_label }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-500">{{ __('PMT Score') }}</span><span>{{ $family->pmt_score }}</span></div>
                    @if($family->card)
                        <div class="flex justify-between"><span class="text-gray-500">{{ __('Card Number') }}</span><span class="font-mono">{{ $family->card->card_number }}</span></div>
                        <div class="flex justify-between"><span class="text-gray-500">{{ __('Card Status') }}</span><span>{{ $family->card->status_label }}</span></div>
                    @endif
                </div>
            </div>
        @elseif(isset($notFound))
            <div class="bg-yellow-50 dark:bg-yellow-900/30 rounded-xl p-6 mt-8 text-center">
                <p class="text-yellow-700 dark:text-yellow-300">{{ __('No results found') }}</p>
            </div>
        @endif
    </div>
</section>
@endsection