@extends('layouts.app')
@section('header_title', 'Dashboard')
@section('content')

@php
    $authUser = auth()->user();
    $userName = $authUser->name ?? 'there';
    $firstName = explode(' ', trim($userName))[0];
    $currentProgram = session('program');
    $currentYear = session('enrollment_year');

    $programMeta = [
        1 => ['name' => 'Summer Camp',          'short' => 'Summer Camp',  'gradient' => 'linear-gradient(135deg, #f1bc00 0%, #ff7a00 100%)',  'soft' => '#fff8dd', 'accent' => '#f1bc00', 'icon' => 'ki-sun',         'tagline' => 'Bright days, brilliant minds'],
        2 => ['name' => 'Afterschool Program', 'short' => 'Afterschool',  'gradient' => 'linear-gradient(135deg, #3699ff 0%, #1e5dbc 100%)',  'soft' => '#eef6ff', 'accent' => '#3699ff', 'icon' => 'ki-book',        'tagline' => 'Learn beyond the classroom'],
        3 => ['name' => 'Preschool Program',   'short' => 'Preschool',    'gradient' => 'linear-gradient(135deg, #f1416c 0%, #b8235b 100%)',  'soft' => '#fff5f8', 'accent' => '#f1416c', 'icon' => 'ki-teddy-bear',  'tagline' => 'First steps in learning'],
        4 => ['name' => 'Winter Camp',          'short' => 'Winter Camp',  'gradient' => 'linear-gradient(135deg, #7239ea 0%, #2d1880 100%)',  'soft' => '#f1e7ff', 'accent' => '#7239ea', 'icon' => 'ki-snow',        'tagline' => 'Cozy days of discovery'],
    ];
@endphp

<style>
    .dash-page { padding: 2rem 2rem 3rem; }
    @media (max-width: 768px) { .dash-page { padding: 1rem 1rem 2rem; } }

    .dash-welcome { margin-bottom: 2rem; }
    .dash-welcome h1 {
        font-size: 1.85rem;
        font-weight: 700;
        color: #181c32;
        margin-bottom: 0.35rem;
        letter-spacing: -0.01em;
    }
    .dash-welcome p {
        color: #6c7293;
        font-size: 1rem;
        margin: 0;
    }
    .dash-welcome .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 1.6s ease-in-out 1; }
    @keyframes wave {
        0%, 100% { transform: rotate(0deg); }
        20% { transform: rotate(-12deg); }
        40% { transform: rotate(14deg); }
        60% { transform: rotate(-8deg); }
        80% { transform: rotate(8deg); }
    }

    .dash-section-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #181c32;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .dash-section-title::before {
        content: '';
        width: 4px;
        height: 18px;
        background: linear-gradient(180deg, #3699ff, #50cd89);
        border-radius: 4px;
    }

    .dash-current-banner {
        background: #ffffff;
        border: 1px solid #e4e6ef;
        border-radius: 16px;
        padding: 1.25rem 1.5rem;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
        box-shadow: 0 4px 14px rgba(15,23,42,0.04);
    }
    .dash-current-banner .dcb-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
    .dash-current-banner .dcb-icon {
        width: 56px; height: 56px;
        border-radius: 14px;
        display: inline-flex; align-items: center; justify-content: center;
        color: #fff;
        flex-shrink: 0;
        font-size: 1.6rem;
    }
    .dash-current-banner .dcb-info .dcb-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #a1a5b7;
        margin-bottom: 4px;
    }
    .dash-current-banner .dcb-info .dcb-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #181c32;
        line-height: 1.2;
    }
    .dash-current-banner .dcb-info .dcb-year {
        font-size: 0.9rem;
        color: #6c7293;
        margin-top: 2px;
    }
    .dash-current-banner .dcb-switch {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.55rem 1rem;
        border-radius: 999px;
        background: #f4f6fa;
        color: #3f4254;
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
        border: 1px solid #e4e6ef;
        transition: all 0.18s ease;
        cursor: pointer;
    }
    .dash-current-banner .dcb-switch:hover { background: #eef0f6; color: #181c32; }

    /* ── Program cards ────────────────────────────────────── */
    .program-card {
        position: relative;
        display: block;
        background: #ffffff;
        border: 1px solid #e4e6ef;
        border-radius: 18px;
        padding: 1.5rem 1.4rem 1.35rem;
        text-decoration: none;
        overflow: hidden;
        transition: all 0.25s ease;
        height: 100%;
        cursor: pointer;
    }
    .program-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 6px;
        background: var(--card-gradient);
    }
    .program-card::after {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 130px; height: 130px;
        border-radius: 50%;
        background: var(--card-soft);
        opacity: 0.6;
        z-index: 0;
        transition: transform 0.3s ease;
    }
    .program-card:hover {
        transform: translateY(-4px);
        border-color: var(--card-accent);
        box-shadow: 0 14px 36px rgba(15,23,42,0.10);
    }
    .program-card:hover::after { transform: scale(1.12); }
    .program-card.is-current {
        border-color: var(--card-accent);
        box-shadow: 0 8px 24px rgba(15,23,42,0.08);
    }
    .program-card-body { position: relative; z-index: 1; }
    .program-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    .program-card-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: var(--card-gradient);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 6px 16px rgba(15,23,42,0.18);
    }
    .program-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: var(--card-soft);
        color: var(--card-accent);
    }
    .program-card-badge::before {
        content: '';
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--card-accent);
        box-shadow: 0 0 0 3px var(--card-soft);
    }
    .program-card-year {
        font-size: 1.65rem;
        font-weight: 700;
        color: #181c32;
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin-bottom: 4px;
    }
    .program-card-name {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--card-accent);
        margin-bottom: 0.4rem;
    }
    .program-card-tagline {
        font-size: 0.8rem;
        color: #6c7293;
        margin-bottom: 1.1rem;
        min-height: 36px;
    }
    .program-card-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--card-accent);
        margin-top: auto;
    }
    .program-card-cta .arrow { transition: transform 0.2s ease; }
    .program-card:hover .program-card-cta .arrow { transform: translateX(4px); }

    .dash-empty {
        background: #ffffff;
        border: 1px dashed #d7dae5;
        border-radius: 16px;
        padding: 3rem 1.5rem;
        text-align: center;
        color: #6c7293;
    }
    .dash-empty .icon {
        width: 56px; height: 56px;
        border-radius: 50%;
        background: #f4f6fa;
        color: #a1a5b7;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }
</style>

<div class="dash-page">

    {{-- ─── Welcome ─────────────────────────────────────── --}}
    <div class="dash-welcome">
        <h1>Welcome back, {{ $firstName }} <span class="wave">👋</span></h1>
        <p>Choose a program below to begin or continue an enrollment.</p>
    </div>

    {{-- ─── Current program banner ──────────────────────── --}}
    @if($currentProgram && isset($programMeta[$currentProgram]))
        @php $cur = $programMeta[$currentProgram]; @endphp
        <div class="dash-current-banner">
            <div class="dcb-left">
                <div class="dcb-icon" style="background: {{ $cur['gradient'] }};">
                    <i class="ki-duotone {{ $cur['icon'] }} fs-2 text-white">
                        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                    </i>
                </div>
                <div class="dcb-info">
                    <div class="dcb-label">Currently Selected</div>
                    <div class="dcb-title">{{ $cur['name'] }}</div>
                    <div class="dcb-year">
                        @if($currentProgram == 1)
                            {{ $currentYear }} Season
                        @else
                            {{ $currentYear }}–{{ $currentYear + 1 }} Academic Year
                        @endif
                    </div>
                </div>
            </div>
            <a href="javascript:void(0)" class="dcb-switch switch-camp-modal">
                <i class="ki-duotone ki-arrows-loop fs-5"><span class="path1"></span><span class="path2"></span></i>
                Switch Program
            </a>
        </div>
    @endif

    {{-- ─── Available programs grid ─────────────────────── --}}
    <div class="dash-section-title">Available Programs</div>

    @php
        $programCards = [];
        if (!empty($results)) {
            foreach ($results as $prog) {
                if ($prog->status !== 'ACTIVE') continue;
                if ($prog->is_summer_camp == 1) {
                    $programCards[] = ['type' => 1, 'year' => $prog->year, 'yearLabel' => $prog->year];
                }
                if ($prog->is_afterschool == 1) {
                    $programCards[] = ['type' => 2, 'year' => $prog->year, 'yearLabel' => $prog->year . '–' . ($prog->year + 1)];
                }
                if ($prog->is_preschool == 1) {
                    $programCards[] = ['type' => 3, 'year' => $prog->year, 'yearLabel' => $prog->year . '–' . ($prog->year + 1)];
                }
                if ($prog->is_wintercamp == 1) {
                    $programCards[] = ['type' => 4, 'year' => $prog->year, 'yearLabel' => $prog->year . '–' . ($prog->year + 1)];
                }
            }
        }
    @endphp

    @if(count($programCards) > 0)
        <div class="row g-4">
            @foreach($programCards as $card)
                @php
                    $meta = $programMeta[$card['type']];
                    $isCurrent = ($currentProgram == $card['type'] && $currentYear == $card['year']);
                    $url = url('switch-program-with-tabs?switch_tab=yes&program=' . $card['type'] . '&enrollment_year=' . $card['year']);
                @endphp
                <div class="col-lg-3 col-md-6">
                    <a href="{{ $url }}" class="program-card {{ $isCurrent ? 'is-current' : '' }}"
                       style="--card-gradient: {{ $meta['gradient'] }}; --card-soft: {{ $meta['soft'] }}; --card-accent: {{ $meta['accent'] }};">
                        <div class="program-card-body d-flex flex-column h-100">
                            <div class="program-card-top">
                                <div class="program-card-icon">
                                    <i class="ki-duotone {{ $meta['icon'] }} fs-2 text-white">
                                        <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                    </i>
                                </div>
                                @if($isCurrent)
                                    <span class="program-card-badge">Active</span>
                                @endif
                            </div>
                            <div class="program-card-year">{{ $card['yearLabel'] }}</div>
                            <div class="program-card-name">{{ $meta['short'] }}</div>
                            <div class="program-card-tagline">{{ $meta['tagline'] }}</div>
                            <div class="program-card-cta">
                                {{ $isCurrent ? 'Open' : 'Enroll Here' }}
                                <span class="arrow">→</span>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    @else
        <div class="dash-empty">
            <div class="icon">
                <i class="ki-duotone ki-information-2 fs-2"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
            </div>
            <div class="fw-semibold mb-1">No active programs available</div>
            <div class="fs-7">Programs will appear here once they become available.</div>
        </div>
    @endif

</div>

@endsection