@extends('layouts.studentportalnav')

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

@section('content')

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
:root {
    --theme-navy: #2D355B;        /* Primary Navy */
    --theme-navy-dark: #1F2541;   /* Dark Navy */
    --theme-red: #822424;         /* Primary Accent Red */
    --theme-red-hover: #df2c3e;   /* Red Hover */
    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
    --bg-light: #F6F6F6;          /* Page Background */
    --white: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
}

/* Header */
.profile-header {
    background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%) !important;
    color: var(--white);
    border-radius: 16px;
    padding: 35px 30px;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
    border-left: 5px solid var(--theme-red);
}

.profile-header h2 {
    font-weight: 700;
}

.profile-header p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

/* Profile Card */
.profile-card {
    background: var(--white);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
    height: 100%;
}

/* Student Image */
.profile-image {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--theme-navy);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.student-name {
    color: var(--theme-navy);
    font-weight: 700;
    margin-top: 15px;
}

.student-id {
    background: var(--theme-navy);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 50px;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Information */
.info-title {
    color: var(--theme-navy);
    font-weight: 700;
    border-bottom: 2px solid var(--theme-yellow);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.info-title i {
    color: var(--theme-red);
    margin-right: 8px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.info-row:last-child {
    border-bottom: none;
}

.label {
    color: #64748b;
    font-weight: 500;
}

.value {
    font-weight: 600;
    color: #1e293b;
}

/* Course Box */
.course-box {
    background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
    color: var(--white);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
    height: 100%;
}

.course-box h4 {
    color: var(--theme-yellow);
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 10px;
}

.course-item {
    margin-top: 14px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.course-item i {
    color: var(--theme-yellow);
    width: 28px;
}

/* Buttons */
.edit-btn {
    background: var(--theme-red) !important;
    color: var(--white) !important;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.edit-btn:hover {
    background: var(--theme-red-hover) !important;
    color: var(--white) !important;
}

@media(max-width:768px) {
    .profile-header, .profile-card, .course-box {
        padding: 25px;
    }
}
</style>

<div class="container py-4">

    <!-- Header -->
    <div class="profile-header">
        <h2> <i class="fas fa-user-graduate"></i> Student Profile </h2>
        <p>Manage your personal information and academic details.</p>
    </div>

    <!-- Main Profile Row -->
    <div class="row g-4">
        <!-- Profile Card -->
        <div class="col-lg-4">
            <div class="profile-card text-center">
                <img src="{{ !empty($student->image) ? asset($student->image) : 'https://i.pravatar.cc/300' }}" 
                     class="profile-image" alt="Profile Image">
                     
                <h3 class="student-name">{{ $student->full_name }}</h3>

                <span class="student-id">
                    Student ID : {{ $student->student_id }}
                </span>
                <hr>

                <button class="edit-btn mt-3">
                    <i class="fas fa-edit"></i> Edit Profile 
                </button>
            </div>
        </div>

        <!-- Personal Details -->
        <div class="col-lg-8">
            <div class="profile-card">
                <h4 class="info-title">
                    <i class="fas fa-user"></i> Personal Information
                </h4>

                <div class="info-row">
                    <span class="label">Full Name</span>
                    <span class="value">{{ $student->full_name }}</span>
                </div>

                <div class="info-row">
                    <span class="label">NIC / Passport</span>
                    <span class="value">{{ $student->nic_passport }}</span>
                </div>

                <div class="info-row">
                    <span class="label">Date of Birth</span>
                    <span class="value">
                        {{ !empty($student->date_of_birth) ? date('d F Y', strtotime($student->date_of_birth)) : 'N/A' }}
                    </span>
                </div>

                <div class="info-row">
                    <span class="label">Gender</span>
                    <span class="value">{{ $student->gender }}</span>
                </div>

                <div class="info-row">
                    <span class="label">Email</span>
                    <span class="value">{{ $student->email }}</span>
                </div>

                <div class="info-row">
                    <span class="label">Phone</span>
                    <span class="value">{{ $student->phone }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Education & Course Details Row -->
    <div class="row g-4 mt-1">
        <!-- Education -->
        <div class="col-lg-6">
            <div class="profile-card">
                <h4 class="info-title">
                    <i class="fas fa-graduation-cap"></i> Educational Background
                </h4>
                <div class="info-row">
                    <span class="label">Qualification</span>
                    <span class="value">{{ $student->qualification }}</span>
                </div>
                <div class="info-row">
                    <span class="label">Institute</span>
                    <span class="value">{{ $student->institute }}</span>
                </div>
                <div class="info-row">
                    <span class="label">Year Completed</span>
                    <span class="value">{{ $student->year_completed }}</span>
                </div>
            </div>
        </div>

        <!-- Course Details -->
        <div class="col-lg-6">
            <div class="course-box">
                <h4><i class="fas fa-car"></i> Course Details</h4>

                <div class="course-item">
                    <i class="fas fa-book"></i> {{ $student->course_name }}
                </div>
                <div class="course-item"> 
                    <i class="fas fa-calendar"></i> Duration : {{ $student->duration }}
                </div>
                <div class="course-item">
                    <i class="fas fa-layer-group"></i> Current Semester : {{ $student->current_semester }}
                </div>
                <div class="course-item">
                    <i class="fas fa-user-tie"></i> Trainer : {{ $student->trainer_name }}
                </div>
            </div>
        </div>
    </div>

</div>
@endsection