@extends('layouts.school')

@section('title', $parent->full_name)
@section('header', 'Parent Details')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('school.parents.index', request()->route('schoolId')) }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Back to Parents</a>
        <div class="flex gap-2">
            <a href="{{ route('school.parents.edit', [request()->route('schoolId'), $parent->id]) }}" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">Edit Parent</a>
            @if(($parent->children_count ?? 0) === 0 && !$children->count())
                <form method="POST" action="{{ route('school.parents.destroy', [request()->route('schoolId'), $parent->id]) }}" onsubmit="return confirm('Remove this parent/guardian?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700">Delete</button>
                </form>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <div class="xl:col-span-1 rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <div class="flex items-center gap-4">
                <div class="flex h-14 w-14 items-center justify-center rounded-full bg-primary-100 text-lg font-bold text-primary-700">{{ $parent->initials }}</div>
                <div class="min-w-0">
                    <h2 class="truncate text-lg font-bold text-gray-900">{{ $parent->full_name }}</h2>
                    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-50 text-blue-700">{{ ucfirst($parent->relationship) }}</span>
                </div>
            </div>

            <dl class="mt-6 space-y-3 text-sm">
                <div class="flex justify-between gap-4">
                    <dt class="font-medium text-gray-500">Phone</dt>
                    <dd class="text-right text-gray-900">{{ $parent->phone ?? '—' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="font-medium text-gray-500">Alternate Phone</dt>
                    <dd class="text-right text-gray-900">{{ $parent->alternate_phone ?? '—' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="font-medium text-gray-500">Email</dt>
                    <dd class="text-right break-all text-gray-900">{{ $parent->email ?? '—' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="font-medium text-gray-500">Occupation</dt>
                    <dd class="text-right text-gray-900">{{ $parent->occupation ?? '—' }}</dd>
                </div>
                <div class="border-t border-gray-100 pt-3"></div>
                <div>
                    <dt class="font-medium text-gray-500">Address</dt>
                    <dd class="mt-0.5 text-gray-900">
                        @if($parent->address || $parent->city || $parent->state)
                            {{ $parent->address }}{{ $parent->city ? ', ' . $parent->city : '' }}{{ $parent->state ? ', ' . $parent->state : '' }}
                        @else
                            —
                        @endif
                    </dd>
                </div>
                @if($parent->notes)
                    <div>
                        <dt class="font-medium text-gray-500">Other Information</dt>
                        <dd class="mt-0.5 text-gray-900">{{ $parent->notes }}</dd>
                    </div>
                @endif
                <div class="flex justify-between gap-4 border-t border-gray-100 pt-3">
                    <dt class="font-medium text-gray-500">Registered</dt>
                    <dd class="text-right text-gray-900">{{ $parent->created_at?->format('d M Y') ?? '—' }}</dd>
                </div>
            </dl>
        </div>

        <div class="xl:col-span-2 space-y-6">
            <div class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">Children / Linked Students ({{ $children->count() }})</h3>
                    <a href="{{ route('school.students.create', request()->route('schoolId')) }}" class="text-xs font-semibold text-primary-600 hover:text-primary-700">+ Register Student</a>
                </div>
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-500">Student</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-500">Admission No.</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-500">Class</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase text-gray-500">Status</th>
                            <th class="px-6 py-3 text-right text-xs font-semibold uppercase text-gray-500"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($children as $child)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 text-xs font-bold text-green-700">{{ $child->initials }}</div>
                                        <span class="text-sm font-medium text-gray-900">{{ $child->full_name }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-600">{{ $child->admission_no ?? '—' }}</td>
                                <td class="px-6 py-4 text-sm text-gray-600">{{ $child->class?->name ?? 'Unassigned' }}</td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $child->is_active ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700' }}">{{ $child->is_active ? 'Active' : 'Inactive' }}</span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ route('school.students.show', [$child->school_id, $child->id]) }}" class="text-xs font-medium text-primary-600 hover:text-primary-700">View Student</a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="px-6 py-10 text-center text-sm text-gray-500">No students linked to this parent yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection