@extends('layouts.app')
@section('title', $parent->name . ' - Parent Profile')
@section('page-title', 'Parent Profile')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <div class="flex items-center justify-between">
        <a href="{{ route('parents.index') }}" class="text-sm text-gray-500 hover:text-gray-700"><i class="fas fa-arrow-left mr-1"></i> Back to Parents</a>
        <a href="{{ route('parents.edit', $parent) }}" class="inline-flex items-center gap-2 bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-800 transition">
            <i class="fas fa-edit"></i> Edit
        </a>
    </div>

    {{-- Profile Card --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-100 flex items-center gap-4">
            <div class="w-14 h-14 bg-primary-700 rounded-full flex items-center justify-center text-xl font-bold text-white">
                {{ strtoupper(substr($parent->name, 0, 1)) }}
            </div>
            <div>
                <h2 class="text-xl font-bold text-gray-800">{{ $parent->name }}</h2>
                <p class="text-sm text-gray-500">{{ $parent->email }}@if($parent->phone) · {{ $parent->phone }}@endif</p>
            </div>
            <div class="ml-auto">
                @if($parent->is_active)
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
                @else
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Inactive</span>
                @endif
            </div>
        </div>
        <div class="p-6 grid grid-cols-2 md:grid-cols-3 gap-6">
            <div>
                <p class="text-xs text-gray-400 uppercase font-medium">Occupation</p>
                <p class="text-sm font-medium text-gray-800 mt-1">{{ $parent->parentProfile?->occupation ?? '—' }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 uppercase font-medium">Emergency Contact</p>
                <p class="text-sm font-medium text-gray-800 mt-1">{{ $parent->parentProfile?->emergency_contact ?? '—' }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 uppercase font-medium">Address</p>
                <p class="text-sm font-medium text-gray-800 mt-1">{{ $parent->parentProfile?->address ?? '—' }}</p>
            </div>
        </div>
    </div>

    {{-- Linked Children --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-child mr-2 text-primary-600"></i>Linked Children</h3>
        </div>
        <div class="p-6">
            @if($parent->children->count())
                <div class="space-y-3">
                    @foreach($parent->children as $child)
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-sm font-bold text-blue-700">
                                    {{ strtoupper(substr($child->name, 0, 1)) }}
                                </div>
                                <div>
                                    <a href="{{ route('students.show', $child) }}" class="font-medium text-gray-800 hover:text-primary-600">{{ $child->name }}</a>
                                    <p class="text-xs text-gray-500">
                                        {{ $child->studentProfile?->schoolClass?->full_name ?? 'No class' }}
                                        @if($child->pivot->relationship)
                                            · <span class="capitalize">{{ $child->pivot->relationship }}</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            <div class="flex items-center gap-3">
                                @if($child->is_active)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Inactive</span>
                                @endif
                                <a href="{{ route('students.show', $child) }}" class="text-blue-600 hover:text-blue-800 text-sm"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-sm text-gray-400 text-center py-4">No children linked to this parent.</p>
            @endif
        </div>
    </div>

    {{-- Fee Summary --}}
    @if($feeSummary && $feeSummary->total_invoices > 0)
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-money-bill-wave mr-2 text-primary-600"></i>Fee Summary</h3>
        </div>
        <div class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-gray-50 rounded-lg p-4 text-center">
                <p class="text-xs text-gray-400 uppercase font-medium">Total Invoices</p>
                <p class="text-xl font-bold text-gray-800 mt-1">{{ $feeSummary->total_invoices }}</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-4 text-center">
                <p class="text-xs text-gray-400 uppercase font-medium">Total Amount</p>
                <p class="text-xl font-bold text-gray-800 mt-1">₹{{ number_format($feeSummary->total_amount ?? 0) }}</p>
            </div>
            <div class="bg-green-50 rounded-lg p-4 text-center">
                <p class="text-xs text-green-600 uppercase font-medium">Paid</p>
                <p class="text-xl font-bold text-green-700 mt-1">₹{{ number_format($feeSummary->paid_amount ?? 0) }}</p>
            </div>
            <div class="bg-red-50 rounded-lg p-4 text-center">
                <p class="text-xs text-red-600 uppercase font-medium">Pending</p>
                <p class="text-xl font-bold text-red-700 mt-1">₹{{ number_format($feeSummary->pending_amount ?? 0) }}</p>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection