@extends('layouts.site')

@section('title', $page->meta_title ?: $page->title)
@section('meta_description', $page->meta_description ?? 'Make a secure referral to Hillcrest Living.')

@section('content')
    <div class="mx-auto max-w-4xl px-4 py-14 lg:px-8 lg:py-20">
        <header data-aos="fade-up">
            <h1 class="font-display text-4xl font-bold text-[var(--color-heading)] md:text-5xl" style="font-family: var(--font-heading);">{{ $page->title }}</h1>
            @if(filled($page->intro))
                <p class="mt-6 max-w-3xl text-lg text-neutral-700">{{ $page->intro }}</p>
            @endif
        </header>

        @foreach($page->sections as $section)
            <section class="mt-10" data-aos="fade-up">
                @if(filled($section->heading))
                    <h2 class="font-display text-2xl font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">{{ $section->heading }}</h2>
                @endif
                @if(filled($section->body))
                    <div class="prose prose-neutral prose-lg mt-4 max-w-3xl">{!! $section->body !!}</div>
                @endif
            </section>
        @endforeach

        <div class="mt-12 rounded-xl border border-neutral-100 bg-[var(--color-surface-alt)] p-6" data-aos="fade-up">
            @if(session('status'))
                <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900" role="status">{{ session('status') }}</div>
            @else
                @if ($errors->any())
                    <div class="mb-6 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-900" role="alert">
                        <p class="font-semibold">Please review the highlighted fields.</p>
                        <ul class="mt-2 list-disc pl-5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="space-y-5" action="{{ route('referral.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    @honeypot

                    <fieldset class="space-y-4">
                        <legend class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Referrer details</legend>
                        <div>
                            <label class="block text-sm font-medium" for="referrer_name">Name</label>
                            <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="referrer_name" name="referrer_name" type="text" value="{{ old('referrer_name') }}" required>
                        </div>
                        <div class="grid gap-4 md:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium" for="referrer_organisation">Organisation (optional)</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="referrer_organisation" name="referrer_organisation" type="text" value="{{ old('referrer_organisation') }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium" for="referrer_role">Role (optional)</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="referrer_role" name="referrer_role" type="text" value="{{ old('referrer_role') }}">
                            </div>
                        </div>
                        <div class="grid gap-4 md:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium" for="referrer_email">Email</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="referrer_email" name="referrer_email" type="email" value="{{ old('referrer_email') }}" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium" for="referrer_phone">Phone (optional)</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="referrer_phone" name="referrer_phone" type="text" value="{{ old('referrer_phone') }}">
                            </div>
                        </div>
                    </fieldset>

                    <fieldset class="space-y-4 border-t border-neutral-200 pt-6">
                        <legend class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Individual details</legend>
                        <div>
                            <label class="block text-sm font-medium" for="individual_name">Name</label>
                            <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="individual_name" name="individual_name" type="text" value="{{ old('individual_name') }}" required>
                        </div>
                        <div class="grid gap-4 md:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium" for="individual_dob">Date of birth (optional)</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="individual_dob" name="individual_dob" type="date" value="{{ old('individual_dob') }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium" for="individual_postcode">Postcode (optional)</label>
                                <input class="mt-2 w-full min-h-[44px] rounded-md border border-neutral-300 px-3" id="individual_postcode" name="individual_postcode" type="text" value="{{ old('individual_postcode') }}">
                            </div>
                        </div>
                    </fieldset>

                    <fieldset class="space-y-3 border-t border-neutral-200 pt-6">
                        <legend class="font-display text-lg font-semibold text-[var(--color-heading)]" style="font-family: var(--font-heading);">Support needs (optional)</legend>
                        <div class="grid gap-2 sm:grid-cols-2">
                            @foreach($supportOptions as $key => $label)
                                <label class="flex items-start gap-2 text-sm">
                                    <input class="mt-1" type="checkbox" name="support_needs[]" value="{{ $key }}" @checked(in_array($key, old('support_needs', []), true))>
                                    <span>{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                    </fieldset>

                    <div class="border-t border-neutral-200 pt-6">
                        <label class="block text-sm font-medium" for="additional_notes">Additional notes (optional)</label>
                        <textarea class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-sm" id="additional_notes" name="additional_notes" rows="5">{{ old('additional_notes') }}</textarea>
                    </div>

                    <div>
                        <label class="block text-sm font-medium" for="attachment">Attachment (optional — PDF, DOC, images — max 5MB)</label>
                        <input class="mt-2 block w-full text-sm" id="attachment" name="attachment" type="file" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,image/*,application/pdf">
                    </div>

                    <button class="inline-flex min-h-[44px] w-full items-center justify-center rounded-md bg-[var(--color-accent)] px-4 py-3 text-sm font-semibold text-white hover:opacity-90" type="submit">Submit referral</button>
                </form>
            @endif
        </div>

        <nav class="mt-12 text-sm text-neutral-600" aria-label="Breadcrumb">
            <ol class="flex flex-wrap gap-2">
                <li><a class="underline-offset-4 hover:underline" href="{{ route('home') }}">Home</a></li>
                <li aria-hidden="true">/</li>
                <li class="text-neutral-900">Referral</li>
            </ol>
        </nav>
    </div>
@endsection