@extends('admin.layouts.master2')
@section('title', 'Student Dashboard')

@section('content')
<style>
    :root {
        --primary-emerald: #047857;
        --primary-hover: #065f46;
        --primary-light: #ecfdf5;
        --primary-border: #a7f3d0;
        --slate-900: #0f172a;
        --slate-800: #1e293b;
        --slate-700: #334155;
        --slate-600: #475569;
        --slate-500: #64748b;
        --slate-200: #e2e8f0;
        --slate-100: #f1f5f9;
        --slate-50:  #f8fafc;
    }

    .dashboard-wrapper {
        padding: 2rem 0 3.5rem;
        background-color: #f8fafc;
        min-height: calc(100vh - 120px);
    }

    /* Hero Banner */
    .hero-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 20px;
        padding: 2rem 2.25rem;
        box-shadow: 0 4px 20px -5px rgba(15, 23, 42, 0.05);
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .hero-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(180deg, var(--primary-emerald) 0%, #065f46 100%);
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.85rem;
        background: var(--primary-light);
        border: 1px solid var(--primary-border);
        border-radius: 9999px;
        color: var(--primary-emerald);
        font-size: 0.785rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.85rem;
    }

    .hero-title {
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--slate-900);
        margin: 0 0 0.5rem;
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        color: var(--slate-600);
        margin: 0;
    }

    .btn-complain {
        background: #ffffff;
        border: 1.5px solid var(--primary-emerald);
        color: var(--primary-emerald);
        font-weight: 700;
        font-size: 0.875rem;
        padding: 0.65rem 1.25rem;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }

    .btn-complain:hover {
        background: var(--primary-emerald);
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(4, 120, 87, 0.25);
    }

    /* Stats Cards */
    .stat-card-mini {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 16px;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1.15rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--primary-light);
        color: var(--primary-emerald);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .stat-val {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--slate-900);
        line-height: 1.2;
    }

    .stat-lbl {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--slate-500);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    /* Academic Session Card */
    .session-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.04);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .session-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px -5px rgba(15, 23, 42, 0.08);
        border-color: var(--primary-border);
    }

    .session-card-header {
        background: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-hover) 100%);
        color: #ffffff;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .session-year {
        font-size: 1.15rem;
        font-weight: 800;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .session-card-body {
        padding: 1.25rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .semester-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1rem;
        background: var(--slate-50);
        border: 1px solid var(--slate-200);
        border-radius: 12px;
        margin-bottom: 0.75rem;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .semester-item:last-child {
        margin-bottom: 0;
    }

    .semester-item:hover {
        background: var(--primary-light);
        border-color: var(--primary-border);
        transform: translateX(3px);
    }

    .semester-name {
        font-size: 0.925rem;
        font-weight: 700;
        color: var(--slate-800);
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .semester-action {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--primary-emerald);
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    /* Empty State */
    .empty-state {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 20px;
        padding: 4rem 2rem;
        text-align: center;
        box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
    }

    .empty-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: var(--slate-100);
        color: var(--slate-400);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin: 0 auto 1.25rem;
    }
</style>

<div class="dashboard-wrapper">
    <div class="container">
        
        <!-- Welcome Hero Banner -->
        <div class="hero-card">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-3 mb-lg-0">
                    <div class="hero-badge">
                        <i class="fas fa-graduation-cap"></i>
                        <span>Student Result Portal</span>
                    </div>
                    <h1 class="hero-title">
                        Welcome back, {{ Auth::user()->name ?? Auth::user()->username }}
                    </h1>
                    <p class="hero-subtitle">
                        Select an academic session and semester below to view and print your examination results.
                    </p>
                </div>
                <div class="col-lg-4 text-lg-right">
                    <a href="{{ route('posts.create') }}" class="btn-complain">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>Lodge Result Grievance</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Mini Stats Row -->
        <div class="row mb-4">
            <div class="col-md-4 mb-3 mb-md-0">
                <div class="stat-card-mini">
                    <div class="stat-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div>
                        <div class="stat-val">{{ $session_count }}</div>
                        <div class="stat-lbl">Sessions Recorded</div>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-3 mb-md-0">
                <div class="stat-card-mini">
                    <div class="stat-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div>
                        <div class="stat-val">{{ $results->count() }}</div>
                        <div class="stat-lbl">Published Results</div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="stat-card-mini">
                    <div class="stat-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <div class="stat-val" style="font-size: 1rem;">Verified Record</div>
                        <div class="stat-lbl">ABU DLC Official Portal</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Results Grid -->
        <div class="mb-3">
            <h4 style="font-size: 1.15rem; font-weight: 800; color: var(--slate-900); margin-bottom: 1.25rem;">
                <i class="fas fa-folder-open text-success mr-2"></i> Academic Session Results
            </h4>
        </div>

        @if($results->count() > 0)
            @php
                $groupedResults = $results->groupBy('session')->sortKeysDesc();
            @endphp

            <div class="row">
                @foreach($groupedResults as $sessionYear => $semesterResults)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="session-card">
                            <div class="session-card-header">
                                <h3 class="session-year">
                                    <i class="fas fa-university"></i>
                                    {{ $sessionYear }} / {{ $sessionYear + 1 }}
                                </h3>
                                <span class="badge badge-light" style="font-weight: 700; border-radius: 6px; padding: 0.35rem 0.65rem;">
                                    {{ count($semesterResults) }} Result(s)
                                </span>
                            </div>

                            <div class="session-card-body">
                                <div>
                                    @foreach($semesterResults as $result)
                                        @php
                                            $semester = $result->semester;
                                            if ($semester == 1) {
                                                $semName = 'January Semester';
                                                $semIcon = 'fa-snowflake';
                                            } elseif ($semester == 2) {
                                                $semName = 'May Semester';
                                                $semIcon = 'fa-sun';
                                            } elseif ($semester == 3) {
                                                $semName = 'September Semester';
                                                $semIcon = 'fa-leaf';
                                            } else {
                                                $semName = 'Semester ' . $semester;
                                                $semIcon = 'fa-calendar';
                                            }
                                        @endphp

                                        <a href="{{ route('result.show', ['session' => $result->session, 'semester' => $result->semester]) }}" 
                                           target="_blank" 
                                           class="semester-item">
                                            <div class="semester-name">
                                                <i class="fas {{ $semIcon }} text-muted"></i>
                                                <span>{{ $semName }}</span>
                                            </div>
                                            <div class="semester-action">
                                                <span>View</span>
                                                <i class="fas fa-external-link-alt"></i>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <!-- Empty State -->
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="fas fa-folder-open"></i>
                </div>
                <h3 style="font-size: 1.35rem; font-weight: 800; color: var(--slate-900); margin-bottom: 0.5rem;">
                    No Results Available Yet
                </h3>
                <p class="text-muted" style="max-width: 480px; margin: 0 auto 1.5rem; font-size: 0.925rem;">
                    Your examination results have not been uploaded or published for your matriculation record. Please check back later or contact support.
                </p>
                <a href="{{ route('posts.create') }}" class="btn-complain">
                    <i class="fas fa-headset"></i> Contact Support
                </a>
            </div>
        @endif

    </div>
</div>
@endsection