@extends('layout.layout')

@section('content')
@include('components.alert')

<div class="container-fluid app-bg">
    <div class="page-shell">

        <x-page-title title="My Children" description="Select a student to view their full profile and details.">
        </x-page-title>

        @if($students->isEmpty())
            <div class="ui-card text-center py-5">
                <iconify-icon icon="mdi:account-off-outline" style="font-size: 3rem; color: #9ca3af;"></iconify-icon>
                <p class="mt-3 text-muted">No students linked to your account.</p>
            </div>
        @else
            <div class="children-grid">
                @foreach($students as $student)
                    <div class="child-card">
                        <div class="child-card__avatar">
                            @if($student->student_photo)
                                <img src="{{ $student->student_photo }}" alt="{{ $student->full_name }}">
                            @else
                                {{ strtoupper(substr($student->first_name ?? 'S', 0, 1)) }}
                            @endif
                        </div>

                        <div class="child-card__info">
                            <div class="child-card__name">
                                {{ trim(($student->first_name ?? '') . ' ' . ($student->last_name ?? '')) ?: 'Unknown' }}
                            </div>

                            @if($student->student_code)
                                <div class="child-card__code">
                                    <iconify-icon icon="mdi:identifier"></iconify-icon>
                                    {{ $student->student_code }}
                                </div>
                            @endif

                            @if($student->pricingPlanType)
                                <div class="child-card__badge">
                                    {{ $student->pricingPlanType->name ?? '' }}
                                </div>
                            @endif

                            <div class="child-card__stats">
                                <span>
                                    <iconify-icon icon="mdi:book-open-outline"></iconify-icon>
                                    {{ $student->courseStudents_count ?? $student->courseStudents->count() }} Course(s)
                                </span>
                            </div>
                        </div>

                        <a href="{{ route('children.show', $student->id) }}"
                           class="asset-btn asset-btn--primary child-card__btn">
                            <iconify-icon icon="mdi:eye-outline"></iconify-icon>
                            View Details
                        </a>
                    </div>
                @endforeach
            </div>
        @endif

    </div>
</div>
@endsection

@push('styles')
<style>
    .children-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.25rem;
        margin-top: 1.25rem;
    }

    .child-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .child-card:hover {
        box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
        transform: translateY(-2px);
    }

    .child-card__avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, #eff6ff, #eef2ff);
        color: #071b3d;
        font-size: 1.75rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid #e0e7ff;
    }

    .child-card__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .child-card__info {
        width: 100%;
    }

    .child-card__name {
        font-size: 1.05rem;
        font-weight: 800;
        color: #111827;
        margin-bottom: 0.3rem;
    }

    .child-card__code {
        font-size: 0.85rem;
        color: #6b7280;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .child-card__badge {
        display: inline-block;
        background: #eff6ff;
        color: #071b3d;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
        margin-bottom: 0.5rem;
    }

    .child-card__stats {
        font-size: 0.85rem;
        color: #6b7280;
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

    .child-card__stats span {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .child-card__btn {
        width: 100%;
        justify-content: center;
        margin-top: 0.25rem;
    }
</style>
@endpush