@extends('layouts.studentportalnav')

@section('title', 'Assignments')

@section('content')

<style>
body{
    background:#f4f7fc;
}

.page-title{
    font-size:32px;
    font-weight:700;
    color:#1f2937;
}

.assignment-card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.assignment-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.assignment-header{
    background:linear-gradient(135deg,#5E244E,#4a1c3e);
    color:white;
    padding:18px;
}

.assignment-header h5{
    margin:0;
    font-weight:600;
}

.assignment-body{
    padding:22px;
}

.info-box{
    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
}

.info-title{
    color:#6b7280;
    font-size:14px;
}

.info-value{
    font-weight:600;
}

.status{
    padding:6px 14px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
}

.pending{
    background:#fff3cd;
    color:#856404;
}

.submitted{
    background:#d1e7dd;
    color:#0f5132;
}

.overdue{
    background:#f8d7da;
    color:#842029;
}

.progress{
    height:8px;
    border-radius:20px;
}

.btn-submit{
    border-radius:50px;
    padding:10px 22px;

}

.search-box{
    border-radius:50px;
}

.filter-btn{
    border-radius:50px;
    margin-right:8px;
}
</style>

<div class="container py-4">

    <!-- Page Header -->

    <div class="d-flex justify-content-between align-items-center mb-4"   >

        <div>
            <h2 class="page-title"  style="color:#5E244E">
                <i class="fas fa-file-alt text-primary" style="color: #5E244E !important;"  ></i>
                Assignments
            </h2>

            <p class="text-muted">
                View, download and submit your course assignments.
            </p>
        </div>

    </div>

    <!-- Search -->

    <div class="row mb-4">

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

            <input type="text"
                   class="form-control search-box"
                   placeholder="Search Assignment...">

        </div>

        <div class="col-md-6 text-md-end mt-3 mt-md-0">

            <button class="btn btn-primary filter-btn" style="background-color:#5E244E">All</button>
            <button class="btn btn-warning filter-btn">Pending</button>
            <button class="btn btn-success filter-btn">Submitted</button>
            <button class="btn btn-danger filter-btn">Overdue</button>

        </div>

    </div>

    <div class="row">

        <!-- Assignment 1 -->

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

            <div class="card assignment-card">

                <div class="assignment-header">

                    <h5>
                        Engine Maintenance Report
                    </h5>

                </div>

                <div class="assignment-body">

                    <div class="info-box">
                        <span class="info-title">Module</span>
                        <span class="info-value">Automobile Engineering</span>
                    </div>

                    <div class="info-box">
                        <span class="info-title">Due Date</span>
                        <span class="info-value text-danger">
                            20 July 2026
                        </span>
                    </div>

                    <div class="info-box">
                        <span class="info-title">Status</span>

                        <span class="status pending">
                            Pending
                        </span>

                    </div>

                    <hr>

                    <p class="text-muted">

                        Prepare a detailed report on preventive engine
                        maintenance including servicing procedures and
                        safety guidelines.

                    </p>

                    <label class="small text-muted mb-2">
                        Submission Progress
                    </label>

                    <div class="progress mb-4">

                        <div class="progress-bar bg-warning"
                             style="width:40%">
                        </div>

                    </div>

                    <div class="d-flex justify-content-between">

                        <a href="#"
                           class="btn btn-outline-primary">

                            <i class="fas fa-download"></i>
                            Download

                        </a>

                        <a href="#"
                           class="btn btn-success btn-submit">

                            <i class="fas fa-upload"></i>
                            Submit

                        </a>

                    </div>

                </div>

            </div>

        </div>

        <!-- Assignment 2 -->

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

            <div class="card assignment-card">

                <div class="assignment-header bg-success">

                    <h5>
                        Brake System Inspection
                    </h5>

                </div>

                <div class="assignment-body">

                    <div class="info-box">
                        <span class="info-title">Module</span>
                        <span class="info-value">Vehicle Technology</span>
                    </div>

                    <div class="info-box">
                        <span class="info-title">Due Date</span>
                        <span class="info-value">
                            10 July 2026
                        </span>
                    </div>

                    <div class="info-box">
                        <span class="info-title">Status</span>

                        <span class="status submitted">
                            Submitted
                        </span>

                    </div>

                    <hr>

                    <p class="text-muted">

                        Explain the complete brake inspection procedure
                        with diagrams and maintenance schedule.

                    </p>

                    <label class="small text-muted mb-2">
                        Submission Progress
                    </label>

                    <div class="progress mb-4">

                        <div class="progress-bar bg-success"
                             style="width:100%">
                        </div>

                    </div>

                    <div class="d-flex justify-content-between">

                        <a href="#"
                           class="btn btn-outline-primary">

                            <i class="fas fa-download"></i>
                            Download

                        </a>

                        <button class="btn btn-secondary btn-submit" disabled>

                            Submitted

                        </button>

                    </div>

                </div>

            </div>

        </div>

        <!-- Assignment 3 -->

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

            <div class="card assignment-card">

                <div class="assignment-header bg-danger">

                    <h5>
                        Transmission System Analysis
                    </h5>

                </div>

                <div class="assignment-body">

                    <div class="info-box">
                        <span class="info-title">Module</span>
                        <span class="info-value">Power Train</span>
                    </div>

                    <div class="info-box">
                        <span class="info-title">Due Date</span>
                        <span class="info-value text-danger">
                            01 July 2026
                        </span>
                    </div>

                    <div class="info-box">
                        <span class="info-title">Status</span>

                        <span class="status overdue">
                            Overdue
                        </span>

                    </div>

                    <hr>

                    <p class="text-muted">

                        Compare manual and automatic transmission systems
                        with advantages and disadvantages.

                    </p>

                    <label class="small text-muted mb-2">
                        Submission Progress
                    </label>

                    <div class="progress mb-4">

                        <div class="progress-bar bg-danger"
                             style="width:0%">
                        </div>

                    </div>

                    <div class="d-flex justify-content-between">

                        <a href="#"
                           class="btn btn-outline-primary">

                            <i class="fas fa-download"></i>
                            Download

                        </a>

                        <button class="btn btn-danger btn-submit">

                            Submit Late

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection