@extends('layouts.studentportalnav')

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

@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);
}

/*==========================
Hero Section
===========================*/
.guideline-hero {
    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
    border-radius: 16px;
    padding: 35px 30px;
    color: var(--white);
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
    border-left: 5px solid var(--theme-red);
}

.guideline-hero h2 {
    font-weight: 700;
    margin-bottom: 10px;
}

.guideline-hero p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    font-size: 15px;
}

/*==========================
Guide Cards
===========================*/
.guide-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
}

.guide-card:hover {
    transform: translateY(-4px);
    border-color: var(--theme-navy);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.card-head {
    background: #753636;
    color: var(--white);
    padding: 18px 22px;
}

.card-head h5 {
    margin: 0;
    font-weight: 600;
}

.card-head i {
    color: var(--theme-yellow);
    margin-right: 10px;
}

.card-body {
    padding: 22px;
}

.card-body ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.card-body li {
    margin-bottom: 10px;
    color: #475569;
}

.card-body li:last-child {
    margin-bottom: 0;
}

/*==========================
Notice Alert Box
===========================*/
.notice {
    background: rgba(255, 234, 133, 0.2);
    border-left: 5px solid var(--theme-red);
    border-radius: 16px;
    padding: 22px;
    margin-top: 35px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .03);
}

.notice h5 {
    color: var(--theme-navy);
    font-weight: 700;
}

.notice p {
    margin-bottom: 0;
    color: #475569;
}

/*==========================
Contact Box
===========================*/
.contact-card {
    margin-top: 30px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
    color: var(--white);
    padding: 35px;
    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
}

.contact-card h4 {
    color: var(--theme-yellow);
    font-weight: 700;
}

.contact-item {
    margin-top: 18px;
    font-size: 15px;
}

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

@media(max-width:768px) {
    .guideline-hero, .contact-card {
        padding: 25px;
    }
}
</style>

<div class="container py-4">

    <!-- Hero -->
    <div class="guideline-hero">
        <h2>
            <i class="fas fa-book-open me-2" style="color: var(--theme-yellow);"></i>
            Student Guidelines
        </h2>
        <p>
            Welcome to the Automobile Engineering Academy. These guidelines are
            designed to help every student maintain professionalism, safety,
            discipline, and academic excellence throughout the training programme.
        </p>
    </div>

    <!-- Guidelines Cards -->
    <div class="row g-4">

        <!-- Classroom -->
        <div class="col-lg-6">
            <div class="guide-card">
                <div class="card-head">
                    <h5>
                        <i class="fas fa-chalkboard-teacher"></i>
                        Classroom Rules
                    </h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>Attend every class on time.</li>
                        <li>Maintain discipline and respect lecturers.</li>
                        <li>Switch mobile phones to silent mode.</li>
                        <li>Complete all assignments before deadlines.</li>
                        <li>Keep classrooms clean and organized.</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Workshop -->
        <div class="col-lg-6">
            <div class="guide-card">
                <div class="card-head">
                    <h5>
                        <i class="fas fa-tools"></i>
                        Workshop Safety
                    </h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>Wear PPE before entering workshops.</li>
                        <li>Follow instructor safety instructions.</li>
                        <li>Never operate equipment without permission.</li>
                        <li>Report damaged tools immediately.</li>
                        <li>Keep workstations clean after practical sessions.</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Attendance -->
        <div class="col-lg-6">
            <div class="guide-card">
                <div class="card-head">
                    <h5>
                        <i class="fas fa-user-check"></i>
                        Attendance Policy
                    </h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>Minimum attendance requirement is 80%.</li>
                        <li>Medical leave must be supported by documents.</li>
                        <li>Repeated absence may affect examinations.</li>
                        <li>Late arrivals will be recorded.</li>
                        <li>Inform the administration if absent.</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Dress -->
        <div class="col-lg-6">
            <div class="guide-card">
                <div class="card-head">
                    <h5>
                        <i class="fas fa-user-tie"></i>
                        Uniform & PPE
                    </h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>Wear academy uniform during lectures.</li>
                        <li>Safety shoes are compulsory.</li>
                        <li>Use gloves and safety glasses.</li>
                        <li>Long hair must be tied properly.</li>
                        <li>ID card must be visible at all times.</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Assessment -->
        <div class="col-lg-6">
            <div class="guide-card">
                <div class="card-head">
                    <h5>
                        <i class="fas fa-file-alt"></i>
                        Assessment Rules
                    </h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>Submit assignments before due dates.</li>
                        <li>No plagiarism is permitted.</li>
                        <li>Bring required materials for practical tests.</li>
                        <li>Follow examination regulations.</li>
                        <li>Maintain academic honesty.</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Conduct -->
        <div class="col-lg-6">
            <div class="guide-card">
                <div class="card-head">
                    <h5>
                        <i class="fas fa-handshake"></i>
                        Student Conduct
                    </h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>Respect staff and fellow students.</li>
                        <li>Protect academy property.</li>
                        <li>Do not smoke inside the campus.</li>
                        <li>Avoid discrimination and harassment.</li>
                        <li>Represent the academy professionally.</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <!-- Notice -->
    <div class="notice">
        <h5>
            <i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
            Important Notice
        </h5>
        <p>
            Students who fail to follow academy regulations may face disciplinary
            action according to the Automobile Engineering Academy Student Policy.
        </p>
    </div>

    <!-- Contact -->
    <div class="contact-card">
        <h4>
            <i class="fas fa-headset me-2"></i>
            Student Support
        </h4>
        <p class="mt-3 text-white-50">
            If you have any questions regarding academic regulations,
            attendance, workshop safety, or student services, please contact
            the Student Affairs Office.
        </p>

        <div class="contact-item">
            <i class="fas fa-envelope"></i>
            support@academy.lk
        </div>

        <div class="contact-item">
            <i class="fas fa-phone"></i>
            +94 11 234 5678
        </div>

        <div class="contact-item">
            <i class="fas fa-map-marker-alt"></i>
            Automobile Engineering Academy
        </div>
    </div>

</div>

@endsection