@extends('layouts.studentportalnav')

@section('title','Dashboard')

@section('content')

<style>
:root{
    --primary:#5E244E;
    --secondary:#8B3A74;
    --light:#f5f6fb;
    --dark:#2d2d2d;
}

body{
    background:var(--light);
}

/* Header */
.dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.dashboard-header h2{
    font-weight:700;
    color:var(--dark);
}

.dashboard-header p{
    color:#777;
    margin:0;
}

.avatar{
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:20px;
}

/* Statistic Cards */

.stat-card{
    background:#fff;
    border-radius:15px;
    padding:25px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
    height:100%;
}

.stat-card:hover{
    transform:translateY(-6px);
}

.stat-icon{
    width:60px;
    height:60px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:22px;
    margin-bottom:20px;
}

.stat-card h3{
    font-weight:700;
    margin-bottom:5px;
}

.stat-card p{
    color:#777;
    margin:0;
}

/* Services */

.section-title{
    font-size:24px;
    font-weight:bold;
    margin:40px 0 20px;
}

.service-card{
    background:#fff;
    border-radius:15px;
    padding:30px;
    text-align:center;
    transition:.3s;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    height:100%;
}

.service-card:hover{
    transform:translateY(-8px);
}

.service-card i{
    font-size:45px;
    color:var(--primary);
    margin-bottom:20px;
}

.service-card h5{
    font-weight:700;
}

.service-card p{
    color:#777;
    font-size:14px;
}
</style>

<div class="container-fluid">

<div class="dashboard-header">

<div>
<h2>Welcome Back,  student
<p>Manage your academic activities from your dashboard.</p>
</div>

<!-- <div class="avatar">
S
</div> -->

</div>

<!-- Statistics -->

<div class="row g-4">

<div class="col-lg-3 col-md-6">
<div class="stat-card">

<div class="stat-icon" style="background:#5E244E;">
<i class="fa-solid fa-book"></i>
</div>

<h3>6</h3>
<p>Enrolled Courses</p>

</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="stat-card">

<div class="stat-icon" style="background:#0d9488;">
<i class="fa-solid fa-file-lines"></i>
</div>

<h3>3</h3>
<p>Assignments</p>

</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="stat-card">

<div class="stat-icon" style="background:#d97706;">
<i class="fa-solid fa-chart-column"></i>
</div>

<h3>78%</h3>
<p>Average Result</p>

</div>
</div>

<div class="col-lg-3 col-md-6">
<div class="stat-card">

<div class="stat-icon" style="background:#dc2626;">
<i class="fa-solid fa-bell"></i>
</div>

<h3>2</h3>
<p>Exam Notices</p>

</div>
</div>

</div>

<!-- Services -->

<div class="section-title">
Student Services
</div>

<div class="row g-4">

<div class="col-lg-4 col-md-6"  >
<a href="/mycourse" class="text-decoration-none" style="color:#5E244E">

<div class="service-card">

<i class="fa-solid fa-book"></i>

<h5>My Courses</h5>

<p>Access all learning materials and course content.</p>

</div>

</a>
</div>

<div class="col-lg-4 col-md-6" >
<a href="/timetable" class="text-decoration-none" style="color:#5E244E">

<div class="service-card">

<i class="fa-solid fa-calendar-days"></i>

<h5>Class Timetable</h5>

<p>View your weekly lecture timetable.</p>

</div>

</a>
</div>

<div class="col-lg-4 col-md-6">
<a href="/Assignments" class="text-decoration-none" style="color:#5E244E">

<div class="service-card">

<i class="fa-solid fa-file-lines"></i>

<h5>Assignments</h5>

<p>Submit and manage assignments.</p>

</div>

</a>
</div>

<div class="col-lg-4 col-md-6">
<a href="/results" class="text-decoration-none" style="color:#5E244E">

<div class="service-card">

<i class="fa-solid fa-square-poll-vertical"></i>

<h5>Exam Results</h5>

<p>Check semester examination results.</p>

</div>

</a>
</div>

<div class="col-lg-4 col-md-6">
<a href="/Feedback&Complain" class="text-decoration-none"style="color:#5E244E">

<div class="service-card">

<i class="fa-solid fa-comments"></i>

<h5>Feedback & Complaint</h5>

<p>Send feedback and contact administration.</p>

</div>

</a>
</div>

<div class="col-lg-4 col-md-6">

 <a href="/StudentProfile" class="text-decoration-none"style="color:#5E244E">

<div class="service-card">

<i class="fa-solid fa-user"></i>
 
<!-- <a href="{{ route('StudentProfile') }}" class="text-decoration-none"style="color:#5E244E">
    <div class="service-card">
    <i class="fas fa-user"></i> Profile
</a> -->
<h5>Student Profile</h5>

<p>Update your personal information.</p>

</div>

</a>
</div>

</div>

</div>

@endsection