@extends('layouts.studentportalnav')

@section('title', 'Student Dashboard')

@section('content')

<style>
:root {
    --theme-navy: #1E233E;
    --theme-navy-dark: #15182C;
    --theme-red: #822424;
    --theme-red-hover: #df2c3e;
    --theme-yellow: #FFEA85;
    --theme-bg: #F4F6F9;
    --text-dark: #1E293B;
}

/* Welcome Banner */
.welcome-banner {
    background: linear-gradient(135deg, #1E233E 0%, #2A1F3B 50%, #4A1A24 100%);
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 10px 30px rgba(30, 35, 62, 0.15);
}

.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 234, 133, 0.12) 0%, rgba(255, 234, 133, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.user-avatar-badge {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.avatar-circle {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFEA85 0%, #F59E0B 100%);
    color: #1E233E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Stat Cards Modern */
.stat-card-modern {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(30, 35, 62, 0.1);
    border-color: rgba(30, 35, 62, 0.2);
}

.stat-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.stat-number {
    font-size: 2.1rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    margin-bottom: 2px;
    letter-spacing: -0.5px;
}

.stat-label {
    color: #64748B;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Section Title Accent */
.title-accent {
    width: 6px;
    height: 24px;
    background: linear-gradient(180deg, var(--theme-red) 0%, var(--theme-red-hover) 100%);
    border-radius: 4px;
    display: inline-block;
}

/* Modern Service Card */
.service-card-modern {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none !important;
}

.service-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(130, 36, 36, 0.1);
    border-color: rgba(130, 36, 36, 0.3);
}

.service-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    background: rgba(130, 36, 36, 0.08);
    color: var(--theme-red);
    transition: all 0.3s ease;
}

.service-card-modern:hover .service-icon-box {
    background: var(--theme-red);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(130, 36, 36, 0.3);
}

.service-card-modern h5 {
    font-weight: 700;
    color: #0F172A;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.service-card-modern p {
    color: #64748B;
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.55;
}

.action-link {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--theme-red);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    transition: gap 0.2s ease, color 0.2s ease;
}

.service-card-modern:hover .action-link {
    gap: 10px;
    color: var(--theme-red-hover);
}

/* Document Card */
.doc-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: #CBD5E1;
}

.doc-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #FEF2F2;
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
}
</style>

<div class="portal-content-container">

    <!-- Welcome Hero Banner -->
    <div class="welcome-banner card rounded-4 mb-4">
        <div class="card-body p-4 p-lg-5 d-flex align-items-center justify-content-between flex-wrap gap-3 position-relative" style="z-index: 1;">
            <div>
                <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
                    <span class="badge bg-success bg-opacity-20 text-success border border-success border-opacity-20 px-3 py-2 rounded-pill fw-semibold" style="font-size: 0.78rem;">
                        <i class="fa-solid fa-circle me-1" style="font-size: 7px; vertical-align: middle;"></i> Active Academic Year 2026
                    </span>
                    <span class="text-white-50 small"><i class="fa-regular fa-calendar me-1"></i> {{ date('l, F j, Y') }}</span>
                </div>
                <h2 class="fw-bold text-white mb-2" style="letter-spacing: -0.5px;">
                    Welcome Back, {{ Auth::check() ? Auth::user()->first_name : 'Student' }}! 👋
                </h2>
                <p class="text-white-50 mb-0 fs-6" style="max-width: 580px;">
                    Manage your academic activities, course schedules, and exam performance directly from your portal dashboard.
                </p>
            </div>

            @if(Auth::check())
                <div class="user-avatar-badge d-flex align-items-center gap-3 bg-white bg-opacity-10 p-3 rounded-4 backdrop-blur border border-white border-opacity-10">
                    <div class="avatar-circle">
                        {{ strtoupper(substr(Auth::user()->first_name, 0, 1)) }}
                    </div>
                    <div class="text-white d-none d-sm-block">
                        <div class="fw-bold fs-6">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</div>
                        <div class="small fst-italic text-warning opacity-75" style="font-size: 11px;">{{ Auth::user()->email }}</div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Key Performance Metrics (Stat Cards) -->
    <div class="row g-3 g-lg-4 mb-4">

        <div class="col-xl-3 col-md-6">
            <div class="stat-card-modern">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
                        <i class="fa-solid fa-book-open-reader"></i>
                    </div>
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
                        <i class="fa-solid fa-circle-check me-1"></i> Active
                    </span>
                </div>
                <div>
                    <div class="stat-number">6</div>
                    <div class="stat-label">Enrolled Courses</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="stat-card-modern">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #10B981 0%, #047857 100%);">
                        <i class="fa-solid fa-file-signature"></i>
                    </div>
                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
                        <i class="fa-solid fa-clock me-1"></i> Pending
                    </span>
                </div>
                <div>
                    <div class="stat-number">3</div>
                    <div class="stat-label">Assignments Due</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="stat-card-modern">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);">
                        <i class="fa-solid fa-chart-line"></i>
                    </div>
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
                        <i class="fa-solid fa-arrow-trend-up me-1"></i> Grade B+
                    </span>
                </div>
                <div>
                    <div class="stat-number">78%</div>
                    <div class="stat-label">Average Result</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="stat-card-modern">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);">
                        <i class="fa-solid fa-bell"></i>
                    </div>
                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
                        <i class="fa-solid fa-bullhorn me-1"></i> Upcoming
                    </span>
                </div>
                <div>
                    <div class="stat-number">2</div>
                    <div class="stat-label">Exam Notices</div>
                </div>
            </div>
        </div>

    </div>


    <div class="col-lg-5" id="notifications-section" style="width: 100%;">
    <div class="card border-0 shadow-sm rounded-3 h-100">
        <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
            <h5 class="fw-bold mb-0 text-dark">
                <i class="fa-solid fa-bell text-danger me-2"></i>System Notifications
            </h5>
            <span class="badge bg-danger rounded-pill">{{ $unreadNotifications ?? 0 }} Unread</span>
        </div>
        <div class="card-body p-0" style="max-height: 450px; overflow-y: auto;">
            <ul class="list-group list-group-flush">
                @forelse($notifications ?? [] as $notification)
                    <li class="list-group-item p-3 border-bottom {{ $notification->is_read ? 'bg-light text-muted' : 'bg-white' }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="me-2">
                                {{-- Type Badge --}}
                                @if($notification->type == 'success')
                                    <span class="badge bg-success mb-1">Success</span>
                                @elseif($notification->type == 'warning')
                                    <span class="badge bg-warning text-dark mb-1">Warning</span>
                                @else
                                    <span class="badge bg-info text-dark mb-1">Info</span>
                                @endif

                                <h6 class="fw-bold mb-1 {{ $notification->is_read ? 'text-secondary' : 'text-dark' }}">
                                    {{ $notification->title }}
                                </h6>
                                <p class="mb-1 text-muted small">{{ $notification->message }}</p>


                                <small class="text-secondary opacity-75 d-block" style="font-size: 11px;">
                                    <i class="fa-regular fa-clock me-1"></i>{{ $notification->created_at->diffForHumans() }}
                                </small>
                            </div>

                            {{-- Mark as Read Button --}}
                            @if(!$notification->is_read)
                                <form action="{{ route('admin.notifications.read', $notification->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-outline-success border-0 rounded-circle" title="Mark as Read">
                                        <i class="fa-solid fa-check"></i>
                                    </button>
                                </form>
                            @else
                                <span class="text-muted" title="Read"><i class="fa-solid fa-check-double text-secondary"></i></span>
                            @endif
                        </div>
                    </li>
                @empty
                    <li class="list-group-item text-center py-4 text-muted">
                        <i class="fa-solid fa-inbox fs-3 d-block mb-2 text-secondary"></i>
                        No notifications found.
                    </li>
                @endforelse
            </ul>
        </div>
    </div>
</div>

    <!-- Student Services Grid -->
    <div class="mb-4">
        <h5 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
            <span class="title-accent"></span> Student Services & Quick Actions
        </h5>

        <div class="row g-3 g-lg-4">

            <div class="col-lg-4 col-md-6">
                <a href="/mycourse" class="service-card-modern">
                    <div>
                        <div class="service-icon-box">
                            <i class="fa-solid fa-book-bookmark"></i>
                        </div>
                        <h5>My Courses</h5>
                        <p>Access all registered learning modules, video lectures, and syllabus materials.</p>
                    </div>
                    <div class="action-link">
                        Explore Courses <i class="fa-solid fa-arrow-right"></i>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6">
                <a href="/timetable" class="service-card-modern">
                    <div>
                        <div class="service-icon-box">
                            <i class="fa-solid fa-calendar-days"></i>
                        </div>
                        <h5>Class Timetable</h5>
                        <p>Check your weekly lecture schedules, classroom locations, and timing updates.</p>
                    </div>
                    <div class="action-link">
                        View Schedule <i class="fa-solid fa-arrow-right"></i>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6">
                <a href="/results" class="service-card-modern">
                    <div>
                        <div class="service-icon-box">
                            <i class="fa-solid fa-award"></i>
                        </div>
                        <h5>Exam Results</h5>
                        <p>Review semester examination grades, transcript records, and academic progress.</p>
                    </div>
                    <div class="action-link">
                        View Marks <i class="fa-solid fa-arrow-right"></i>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6">
                <a href="/Studentguidelines" class="service-card-modern">
                    <div>
                        <div class="service-icon-box">
                            <i class="fa-solid fa-book-open"></i>
                        </div>
                        <h5>Student Guidelines</h5>
                        <p>Read campus rules, academic regulations, safety procedures, and code of conduct.</p>
                    </div>
                    <div class="action-link">
                        Read Guidelines <i class="fa-solid fa-arrow-right"></i>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6">
                <a href="/Feedback&Complain" class="service-card-modern">
                    <div>
                        <div class="service-icon-box">
                            <i class="fa-solid fa-comments"></i>
                        </div>
                        <h5>Feedback & Complaints</h5>
                        <p>Submit inquiries, suggestions, or complaints directly to the student support team.</p>
                    </div>
                    <div class="action-link">
                        Submit Inquiry <i class="fa-solid fa-arrow-right"></i>
                    </div>
                </a>
            </div>

            <div class="col-lg-4 col-md-6">
                <a href="/StudentProfile" class="service-card-modern">
                    <div>
                        <div class="service-icon-box">
                            <i class="fa-solid fa-id-card"></i>
                        </div>
                        <h5>Student Profile</h5>
                        <p>View and update your personal contact details, credentials, and security PIN.</p>
                    </div>
                    <div class="action-link">
                        Manage Profile <i class="fa-solid fa-arrow-right"></i>
                    </div>
                </a>
            </div>

        </div>
    </div>

    <!-- Official Document Downloads Section -->
    <div class="mb-5">
        <h5 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
            <span class="title-accent"></span> Official Academic Documents (PDF)
        </h5>

        <div class="row g-3 g-lg-4">
            <div class="col-xl-3 col-md-6">
                <a href="{{ route('student.download.calendar') }}" class="text-decoration-none" target="_blank">
                    <div class="doc-card text-center">
                        <div class="doc-icon-badge">
                            <i class="fa-solid fa-file-pdf"></i>
                        </div>
                        <h6 class="fw-bold text-dark mb-1">Academic Calendar</h6>
                        <small class="text-muted d-block mb-3">Semester dates & holidays</small>
                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
                            <i class="fa-solid fa-download me-1"></i> Download PDF
                        </span>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-md-6">
                <a href="{{ route('student.download.handbook') }}" class="text-decoration-none" target="_blank">
                    <div class="doc-card text-center">
                        <div class="doc-icon-badge">
                            <i class="fa-solid fa-file-pdf"></i>
                        </div>
                        <h6 class="fw-bold text-dark mb-1">Student Handbook</h6>
                        <small class="text-muted d-block mb-3">Campus rules & policies</small>
                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
                            <i class="fa-solid fa-download me-1"></i> Download PDF
                        </span>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-md-6">
                <a href="{{ route('student.download.examcode') }}" class="text-decoration-none" target="_blank">
                    <div class="doc-card text-center">
                        <div class="doc-icon-badge">
                            <i class="fa-solid fa-file-pdf"></i>
                        </div>
                        <h6 class="fw-bold text-dark mb-1">Exam Code of Conduct</h6>
                        <small class="text-muted d-block mb-3">Examination guidelines</small>
                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
                            <i class="fa-solid fa-download me-1"></i> Download PDF
                        </span>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-md-6">
                <a href="{{ route('student.download.helpdesk') }}" class="text-decoration-none" target="_blank">
                    <div class="doc-card text-center">
                        <div class="doc-icon-badge">
                            <i class="fa-solid fa-file-pdf"></i>
                        </div>
                        <h6 class="fw-bold text-dark mb-1">Helpdesk Support Guide</h6>
                        <small class="text-muted d-block mb-3">IT & portal assistance</small>
                        <span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
                            <i class="fa-solid fa-download me-1"></i> Download PDF
                        </span>
                    </div>
                </a>
            </div>
        </div>
    </div>

</div>

@endsection