@extends('layouts.app')
@section('title', __('Card Details'))
@section('page-title', __('Card Details'))
@section('content')
<div class="mb-4">
    <a href="{{ route('admin.cards.index') }}" class="text-green-600 hover:text-green-800 text-sm">&larr; {{ __('Back') }}</a>
</div>

<div class="grid lg:grid-cols-3 gap-6">
    {{-- Card Visual --}}
    <div class="lg:col-span-2">
        <div class="bg-gradient-to-br from-green-700 to-green-900 rounded-2xl shadow-xl p-8 text-white relative overflow-hidden mb-6">
            <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-10 -mt-10"></div>
            <p class="text-sm opacity-75 mb-2">{{ app()->getLocale() === 'bn' ? 'বাংলাদেশ সরকার — পরিবার কার্ড' : 'Government of Bangladesh — Family Card' }}</p>
            <p class="text-2xl font-mono font-bold tracking-wider mb-6">{{ $card->card_number }}</p>
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <p class="opacity-60">{{ __('Head of Family') }}</p>
                    <p class="font-semibold text-lg">{{ $card->family?->head_name_bn }}</p>
                </div>
                <div>
                    <p class="opacity-60">{{ __('NID Number') }}</p>
                    <p class="font-mono">{{ $card->family?->head_nid }}</p>
                </div>
                <div>
                    <p class="opacity-60">{{ __('Issued Date') }}</p>
                    <p>{{ $card->issued_date?->format('d/m/Y') ?? '—' }}</p>
                </div>
                <div>
                    <p class="opacity-60">{{ app()->getLocale() === 'bn' ? 'মেয়াদ শেষ' : 'Expiry' }}</p>
                    <p>{{ $card->expiry_date?->format('d/m/Y') ?? '—' }}</p>
                </div>
            </div>
        </div>

        {{-- Technical Details --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
            <h3 class="font-bold text-lg mb-4">{{ app()->getLocale() === 'bn' ? 'প্রযুক্তিগত তথ্য' : 'Technical Details' }}</h3>
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div><span class="text-gray-500">QR Code Data:</span> <span class="font-mono text-xs break-all">{{ $card->qr_code_data ?? '—' }}</span></div>
                <div><span class="text-gray-500">NFC UID:</span> <span class="font-mono">{{ $card->nfc_uid ?? '—' }}</span></div>
                <div><span class="text-gray-500">Chip Serial:</span> <span class="font-mono">{{ $card->chip_serial_number ?? '—' }}</span></div>
                <div><span class="text-gray-500">{{ __('Status') }}:</span>
                    @php $c = match($card->status) { 'active','delivered' => 'green', 'pending_print' => 'yellow', default => 'blue' }; @endphp
                    <span class="px-2 py-0.5 rounded text-xs font-semibold bg-{{ $c }}-100 text-{{ $c }}-800">{{ ucfirst(str_replace('_',' ',$card->status)) }}</span>
                </div>
                <div><span class="text-gray-500">{{ app()->getLocale() === 'bn' ? 'ইস্যুকারী' : 'Issued By' }}:</span> {{ $card->issuedBy?->name ?? '—' }}</div>
                <div>
                    <span class="text-gray-500">{{ __('Union') }}:</span>
                    {{ $card->family?->union?->name }} → {{ $card->family?->union?->upazila?->name }} → {{ $card->family?->union?->upazila?->district?->name }}
                </div>
            </div>

            {{-- Family Members on Card --}}
            @if($card->family?->members->count())
                <h4 class="font-semibold mt-6 mb-3">{{ __('Family Members') }} ({{ $card->family->members->count() }})</h4>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="py-2 px-3 text-left">{{ __('Name') }}</th>
                                <th class="py-2 px-3 text-left">{{ __('Relation') }}</th>
                                <th class="py-2 px-3 text-center">{{ __('Gender') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($card->family->members as $m)
                                <tr>
                                    <td class="py-2 px-3">{{ $m->name_bn }}</td>
                                    <td class="py-2 px-3">{{ ucfirst($m->relation_to_head) }}</td>
                                    <td class="py-2 px-3 text-center">{{ ucfirst($m->gender) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="space-y-6">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
            <h3 class="font-bold mb-4">{{ app()->getLocale() === 'bn' ? 'স্ট্যাটাস পরিবর্তন' : 'Update Status' }}</h3>
            <form method="POST" action="{{ route('admin.cards.update-status', $card) }}" class="space-y-3">
                @csrf @method('PATCH')
                <select name="status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                    @foreach(['pending_print','printed','dispatched','delivered','active','suspended','lost','replaced'] as $s)
                        <option value="{{ $s }}" {{ $card->status == $s ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                    @endforeach
                </select>
                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg text-sm font-semibold transition">{{ __('Update') }}</button>
            </form>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
            <h3 class="font-bold mb-4">{{ app()->getLocale() === 'bn' ? 'দ্রুত লিঙ্ক' : 'Quick Links' }}</h3>
            <div class="space-y-2">
                @if($card->family)
                    <a href="{{ route('admin.families.show', $card->family) }}" class="block text-blue-600 hover:text-blue-800 text-sm">{{ __('View') }} {{ __('Family') }} →</a>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection