@extends('layouts.studentportalnav')

@section('title','Feedback & Complaint')

@section('content')

<style>

body{
    background:#f6f7fb;
}


/* Header */

.feedback-header{

    background:linear-gradient(135deg,#5E244E,#4a1c3e);
    color:white;
    padding:40px;
    border-radius:20px;
    margin-bottom:35px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);

}


.feedback-header h2{

    font-weight:700;

}


.feedback-header p{

    color:#ddd;

}



/* Cards */

.feedback-card{

    background:#fff;
    border-radius:20px;
    border:none;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;

}


.card-title{

    color:#5E244E;
    font-weight:700;
    margin-bottom:25px;

}


.card-title i{

    color:#d4af37;
    margin-right:8px;

}



/* Inputs */

.form-control,
.form-select{

    border-radius:15px;
    padding:12px;
    border:1px solid #ddd;

}


.form-control:focus,
.form-select:focus{

    border-color:#744a68;
    box-shadow:0 0 0 .2rem rgba(94,36,78,.15);

}


/* Button */

.submit-btn{

    background:#5E244E;
    color:white;
    border:none;
    border-radius:50px;
    padding:12px 30px;
    font-weight:600;

}


.submit-btn:hover{

    background:#4a1c3e;
    color:#fff;

}



/* History */

.history-card{

    margin-top:35px;
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.history-head{

    background:#5E244E;
    color:white;
    padding:18px 25px;

}


.badge-status{

    padding:7px 15px;
    border-radius:50px;
    font-size:13px;

}


.pending{

    background:#fff3cd;
    color:#856404;

}


.resolved{

    background:#d1e7dd;
    color:#0f5132;

}


</style>



<div class="container py-4">


    <!-- Header -->

    <div class="feedback-header">

        <h2>

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

            Feedback & Complaint

        </h2>


        <p>

            Share your suggestions, feedback, or complaints with the
            Automobile Engineering Academy management team.

        </p>


    </div>



    <div class="row g-4">


        <!-- Feedback -->

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


            <div class="feedback-card">


                <h4 class="card-title">

                    <i class="fas fa-star"></i>

                    Submit Feedback

                </h4>



                <form>


                    <div class="mb-3">

                        <label class="form-label">
                            Feedback Type
                        </label>

                        <select class="form-select">

                            <option>
                                Select Type
                            </option>

                            <option>
                                Course
                            </option>

                            <option>
                                Lecturer
                            </option>

                            <option>
                                Workshop
                            </option>

                            <option>
                                Facilities
                            </option>

                        </select>

                    </div>



                    <div class="mb-3">

                        <label class="form-label">
                            Subject
                        </label>


                        <input type="text"
                               class="form-control"
                               placeholder="Enter subject">

                    </div>



                    <div class="mb-3">

                        <label class="form-label">
                            Your Feedback
                        </label>


                        <textarea class="form-control"
                                  rows="5"
                                  placeholder="Write your feedback">

                        </textarea>


                    </div>


                    <button class="submit-btn">

                        <i class="fas fa-paper-plane"></i>

                        Submit Feedback

                    </button>


                </form>


            </div>


        </div>





        <!-- Complaint -->

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


            <div class="feedback-card">


                <h4 class="card-title">


                    <i class="fas fa-exclamation-triangle"></i>

                    Submit Complaint


                </h4>




                <form>


                    <div class="mb-3">


                        <label class="form-label">
                            Complaint Category
                        </label>


                        <select class="form-select">


                            <option>
                                Select Category
                            </option>


                            <option>
                                Academic Issue
                            </option>


                            <option>
                                Staff Issue
                            </option>


                            <option>
                                Technical Issue
                            </option>


                            <option>
                                Other
                            </option>


                        </select>


                    </div>




                    <div class="mb-3">


                        <label class="form-label">
                            Complaint Title
                        </label>


                        <input type="text"
                               class="form-control"
                               placeholder="Enter complaint title">


                    </div>




                    <div class="mb-3">


                        <label class="form-label">
                            Complaint Details
                        </label>


                        <textarea class="form-control"
                                  rows="5"
                                  placeholder="Explain your complaint">

                        </textarea>


                    </div>




                    <button class="submit-btn">


                        <i class="fas fa-paper-plane"></i>

                        Submit Complaint


                    </button>



                </form>



            </div>


        </div>


    </div>






    <!-- Previous History -->


    <div class="history-card">


        <div class="history-head">


            <h4 class="mb-0">

                <i class="fas fa-history"></i>

                Previous Requests

            </h4>


        </div>



        <div class="table-responsive">


            <table class="table table-hover mb-0">


                <thead>


                <tr>

                    <th>
                        Type
                    </th>

                    <th>
                        Subject
                    </th>

                    <th>
                        Date
                    </th>

                    <th>
                        Status
                    </th>


                </tr>


                </thead>



                <tbody>


                <tr>


                    <td>
                        Feedback
                    </td>


                    <td>
                        Workshop Equipment
                    </td>


                    <td>
                        10 July 2026
                    </td>


                    <td>

                        <span class="badge-status resolved">

                            Resolved

                        </span>


                    </td>


                </tr>




                <tr>


                    <td>
                        Complaint
                    </td>


                    <td>
                        Class Schedule Issue
                    </td>


                    <td>
                        05 July 2026
                    </td>


                    <td>

                        <span class="badge-status pending">

                            Pending

                        </span>


                    </td>


                </tr>



                </tbody>


            </table>


        </div>


    </div>



</div>


@endsection