@extends('layouts.app')

@section('title', 'My Sponsorships — TAM')

@section('content')

{{-- Page Header --}}
<div class="bg-[#1D4B28] text-white py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight">My Sponsorships</h1>
                <p class="mt-1 text-sm text-white/70">Welcome back, {{ auth()->user()->name }}</p>
            </div>
            <a href="{{ route('children.index') }}"
               class="inline-flex items-center gap-2 rounded-full bg-brand-yellow px-5 py-2.5 text-sm font-bold text-gray-900 hover:bg-yellow-300 transition shadow">
                <i class="bi bi-heart-fill"></i> Sponsor Another Child
            </a>
        </div>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="mb-6 flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 p-4 text-green-800">
            <i class="bi bi-check-circle-fill text-green-500 mt-0.5"></i>
            <span class="text-sm">{{ session('success') }}</span>
        </div>
    @endif
    @if(session('error'))
        <div class="mb-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-red-800">
            <i class="bi bi-exclamation-circle-fill text-red-500 mt-0.5"></i>
            <span class="text-sm">{{ session('error') }}</span>
        </div>
    @endif

    {{-- Stats Row --}}
    @if($sponsorships->isNotEmpty())
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-10">
        <div class="rounded-2xl border border-[#b8cec0] bg-[#EAF4EC] p-5">
            <p class="text-xs font-semibold uppercase tracking-widest text-[#3D6146]">Children Sponsored</p>
            <p class="mt-2 text-4xl font-extrabold text-[#1D4B28]">{{ $sponsorships->count() }}</p>
        </div>
        <div class="rounded-2xl border border-[#b8cec0] bg-[#EAF4EC] p-5">
            <p class="text-xs font-semibold uppercase tracking-widest text-[#3D6146]">Active</p>
            <p class="mt-2 text-4xl font-extrabold text-[#1D4B28]">{{ $sponsorships->where('status', 'active')->count() }}</p>
        </div>
        <div class="rounded-2xl border border-yellow-100 bg-yellow-50 p-5 col-span-2 sm:col-span-1">
            <p class="text-xs font-semibold uppercase tracking-widest text-yellow-700">Monthly Total</p>
            <p class="mt-2 text-4xl font-extrabold text-yellow-800">${{ number_format($sponsorships->where('status', 'active')->sum('amount'), 2) }}</p>
        </div>
    </div>
    @endif

    {{-- Sponsorships --}}
    @if($sponsorships->isEmpty())
        <div class="rounded-2xl border-2 border-dashed border-[#b8cec0] bg-white py-20 text-center">
            <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-[#EAF4EC]">
                <i class="bi bi-heart text-3xl text-[#3D6146]"></i>
            </div>
            <h3 class="text-lg font-bold text-[#1D4B28]">No Sponsorships Yet</h3>
            <p class="mt-2 text-sm text-gray-500 max-w-xs mx-auto">You haven't sponsored a child yet. Browse children waiting for a sponsor and start your journey today.</p>
            <a href="{{ route('children.index') }}"
               class="mt-6 inline-flex items-center gap-2 rounded-full bg-[#1D4B28] px-6 py-3 text-sm font-bold text-white hover:bg-[#173c20] transition shadow">
                <i class="bi bi-search"></i> Browse Children
            </a>
        </div>
    @else
        <h2 class="text-lg font-bold text-[#1D4B28] mb-4">Your Sponsored Children</h2>
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($sponsorships as $sponsorship)
                <div class="rounded-2xl border border-[#b8cec0] bg-white overflow-hidden shadow-sm hover:shadow-md transition">
                    {{-- Photo Banner --}}
                    <div class="relative h-40 bg-[#EAF4EC]">
                        @if($sponsorship->child->photo_url)
                            <img src="{{ Storage::url($sponsorship->child->photo_url) }}"
                                 alt="{{ $sponsorship->child->first_name }}"
                                 class="h-full w-full object-cover object-top">
                        @else
                            <div class="flex h-full items-center justify-center">
                                <i class="bi bi-person text-6xl text-[#b8cec0]"></i>
                            </div>
                        @endif

                        {{-- Status badge --}}
                        <span class="absolute top-3 right-3 rounded-full px-2.5 py-1 text-xs font-bold
                            @if($sponsorship->status === 'active') bg-green-100 text-green-800
                            @elseif($sponsorship->status === 'cancelled') bg-red-100 text-red-800
                            @else bg-gray-100 text-gray-700 @endif">
                            {{ ucfirst($sponsorship->status) }}
                        </span>
                    </div>

                    <div class="p-5">
                        <h3 class="text-lg font-extrabold text-[#1D4B28]">{{ $sponsorship->child->first_name }} {{ $sponsorship->child->last_name }}</h3>
                        <p class="text-sm text-gray-500">{{ $sponsorship->child->age }} yrs &bull; {{ $sponsorship->child->country }}</p>

                        <div class="mt-4 space-y-2 text-sm">
                            <div class="flex justify-between text-gray-600">
                                <span>Monthly amount</span>
                                <span class="font-bold text-[#1D4B28]">${{ number_format($sponsorship->amount, 2) }}</span>
                            </div>
                            <div class="flex justify-between text-gray-600">
                                <span>Since</span>
                                <span class="font-medium">{{ $sponsorship->starts_at?->format('M d, Y') ?? '—' }}</span>
                            </div>
                            @if($sponsorship->child->school_level)
                            <div class="flex justify-between text-gray-600">
                                <span>School level</span>
                                <span class="font-medium">{{ $sponsorship->child->school_level }}</span>
                            </div>
                            @endif
                        </div>

                        <div class="mt-4 pt-4 border-t border-gray-100">
                            <a href="{{ route('children.show', $sponsorship->child) }}"
                               class="inline-flex items-center gap-1.5 text-sm font-semibold text-[#1D8A3A] hover:underline">
                                <i class="bi bi-person-circle"></i> View Profile
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection