@extends('layouts.portal')

@section('title', 'Profile')

@section('page-header')
    <div class="mb-8">
        <h1 class="font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">Profile</h1>
        <p class="mt-1 text-sm text-slate-500">Student information on record.</p>
    </div>
@endsection

@section('content')
    <div class="grid gap-6 lg:grid-cols-3">
        {{-- Identity card --}}
        <div class="rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm shadow-slate-900/[0.03]">
            <span class="mx-auto flex h-24 w-24 items-center justify-center rounded-3xl bg-gradient-to-br from-accent-500 to-accent-700 font-display text-3xl font-extrabold text-white shadow-xl shadow-accent-500/30">{{ $child->initials }}</span>
            <h2 class="mt-4 font-display text-lg font-bold text-slate-900">{{ $child->full_name }}</h2>
            <p class="mt-1 text-xs font-medium uppercase tracking-wider text-slate-400">{{ $child->admission_no }}</p>
            <div class="mt-4 flex flex-wrap justify-center gap-2">
                @if ($child->class)
                    <x-portal.badge tone="accent">{{ $child->class->name }}</x-portal.badge>
                @endif
                @if ($child->campus)
                    <x-portal.badge tone="sky">{{ $child->campus->name }}</x-portal.badge>
                @endif
                <x-portal.badge tone="{{ $child->is_active ? 'emerald' : 'rose' }}">{{ $child->is_active ? 'Active' : 'Inactive' }}</x-portal.badge>
            </div>
            @if ($child->admitted_at)
                <p class="mt-5 border-t border-slate-100 pt-4 text-xs text-slate-400">Enrolled {{ $child->admitted_at->format('j M Y') }}</p>
            @endif
        </div>

        {{-- Details --}}
        <div class="space-y-6 lg:col-span-2">
            <x-portal.panel heading="Personal details" subtitle="Bio data on file">
                <dl class="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2">
                    @foreach ([['Date of birth', $child->date_of_birth?->format('j F Y')], ['Gender', $child->gender ? ucfirst($child->gender) : null], ['Blood group', $child->blood_group], ['Email', $child->email], ['Phone', $child->phone], ['National ID no.', $child->national_id_no]] as [$label, $value])
                        @if ($value)
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $label }}</dt>
                                <dd class="mt-1 text-sm font-medium text-slate-800">{{ $value }}</dd>
                            </div>
                        @endif
                    @endforeach
                    @php
                        $fullAddress = collect([$child->address, $child->city, $child->state])->filter()->implode(', ');
                    @endphp
                    @if ($fullAddress)
                        <div class="sm:col-span-2">
                            <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">Home address</dt>
                            <dd class="mt-1 text-sm font-medium text-slate-800">{{ $fullAddress }}</dd>
                        </div>
                    @endif
                </dl>
            </x-portal.panel>

            <x-portal.panel heading="Health notes" subtitle="Visible to the school only when needed" padding>
                @php
                    $health = collect([['Medical conditions', $child->medical_conditions], ['Allergies', $child->allergies], ['Previous school', $child->previous_school]])->filter(fn ($f) => $f[1]);
                @endphp
                @if ($health->isEmpty())
                    <p class="text-sm text-slate-400">Nothing recorded.</p>
                @else
                    <dl class="space-y-4">
                        @foreach ($health as [$label, $value])
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $label }}</dt>
                                <dd class="mt-1 text-sm text-slate-700">{{ $value }}</dd>
                            </div>
                        @endforeach
                    </dl>
                @endif
            </x-portal.panel>

            @if ($child->parent)
                @php($guardian = $child->parent)
                <x-portal.panel heading="Guardian" subtitle="Primary contact">
                    <div class="flex items-center gap-4">
                        <span class="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-500 to-sky-700 font-display text-base font-bold text-white shadow-lg shadow-sky-500/25">{{ $guardian->initials }}</span>
                        <div>
                            <p class="text-sm font-bold text-slate-900">{{ $guardian->full_name }}</p>
                            <p class="text-xs text-slate-400">{{ ucfirst($guardian->relationship ?? 'Guardian') }}@if ($guardian->phone) · {{ $guardian->phone }}@endif</p>
                        </div>
                    </div>
                </x-portal.panel>
            @endif

            @unless ($isParent)
                @php($editable = collect($editPerms ?? [])->filter()->except('dob')->isNotEmpty())
                @if ($editable || ($editPerms['photo'] ?? false))
                    <x-portal.panel heading="Update my details" subtitle="Keep your information current">
                        <form method="POST" action="{{ route('portal.profile.update', $school->id) }}" enctype="multipart/form-data" class="space-y-4">
                            @csrf
                            @if ($editPerms['photo'] ?? false)
                                <div class="flex items-center gap-4">
                                    @if ($child->photo_url)
                                        <img src="{{ $child->photo_url }}" alt="" class="h-14 w-14 rounded-2xl object-cover ring-1 ring-slate-200">
                                    @else
                                        <span class="flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
                                            <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
                                        </span>
                                    @endif
                                    <input type="file" name="photo" accept="image/jpeg,image/png,image/jpg,image/webp"
                                           formaction="{{ route('portal.profile.photo', $school->id) }}"
                                           onchange="this.form.action=this.getAttribute('formaction'); this.form.submit()"
                                           class="block w-full max-w-xs text-sm text-slate-500 file:mr-3 file:rounded-xl file:border-0 file:bg-accent-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-accent-700 hover:file:bg-accent-100">
                                </div>
                            @endif
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                @if ($editPerms['phone'] ?? false)
                                    <label class="block">
                                        <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Phone</span>
                                        <input type="text" name="phone" value="{{ old('phone', $child->phone) }}" class="mt-1 block w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500">
                                    </label>
                                @endif
                                @if ($editPerms['email'] ?? false)
                                    <label class="block">
                                        <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Email</span>
                                        <input type="email" name="email" value="{{ old('email', $child->email) }}" class="mt-1 block w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500">
                                    </label>
                                @endif
                                @if ($editPerms['address'] ?? false)
                                    <label class="block sm:col-span-1">
                                        <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Home address</span>
                                        <input type="text" name="address" value="{{ old('address', $child->address) }}" class="mt-1 block w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500">
                                    </label>
                                @endif
                            </div>
                            @php($fieldsEnabled = ($editPerms['phone'] ?? false) || ($editPerms['email'] ?? false) || ($editPerms['address'] ?? false))
                            @if ($fieldsEnabled)
                                <button type="submit" class="rounded-xl bg-accent-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-accent-700">Save changes</button>
                            @endif
                        </form>
                    </x-portal.panel>
                @endif
            @endunless
        </div>
    </div>
@endsection