@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto px-4 py-10 space-y-6">
    @if($scheme->is_expired)
        <div class="bg-amber-100 border border-amber-300 text-amber-950 p-4 rounded-2xl text-xs font-bold">
            ⚠️ This notification expired on {{ $scheme->application_end_date->format('d M Y') }}. It remains visible in the Information Area for reference and will automatically delete itself in {{ $scheme->days_until_permanent_delete }} days.
        </div>
    @endif

    <div class="bg-white p-6 rounded-2xl border border-neutral-200 space-y-4">
        <span class="px-3 py-1 bg-emerald-50 text-[#105C35] text-xs font-bold rounded-lg">{{ $scheme->category }} • {{ $scheme->applicable_state }}</span>
        <h1 class="text-2xl font-extrabold text-neutral-900">{{ $scheme->title }}</h1>
        <p class="text-sm text-neutral-600">{{ $scheme->detailed_description }}</p>

        <!-- Interactive Required Documents Checklist -->
        <div class="bg-[#F7FAF7] p-5 rounded-2xl border border-neutral-200">
            <h2 class="text-base font-extrabold text-neutral-900 mb-3">📋 Required Documents Checklist (Interactive)</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                @foreach(($scheme->required_documents ?? []) as $doc)
                    <label class="flex items-center gap-2.5 p-2.5 bg-white rounded-xl border border-neutral-200 text-xs font-semibold cursor-pointer">
                        <input type="checkbox" class="w-4 h-4 accent-[#168447]" />
                        <span>{{ $doc }}</span>
                    </label>
                @endforeach
            </div>
        </div>

        <div class="pt-4 flex flex-wrap gap-3">
            <a href="{{ $scheme->direct_registration_url ?: $scheme->official_department_website }}" target="_blank" class="px-5 py-2.5 bg-[#168447] text-white text-xs font-bold rounded-xl">Apply on Official Portal ↗</a>
            <a href="{{ $scheme->official_department_website }}" target="_blank" class="px-5 py-2.5 bg-neutral-100 text-neutral-800 text-xs font-bold rounded-xl">Department Website ↗</a>
        </div>
    </div>
</div>
@endsection