academy/resources/views/Feedback&Complain.blade.php

@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 Form -->
        <div class="col-lg-6">
            <div class="feedback-card">
                <h4 class="card-title"><i class="fas fa-star"></i> Submit Feedback</h4>
                <form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
    @csrf
    <div class="mb-3">
        <label class="form-label"> Feedback Type </label>
        <!-- Added name="feedback_type" -->
        <select class="form-select" id="feedbackType" name="feedback_type" required>
            <option value=""> Select Type </option>
            <option value="Course">Course</option>
            <option value="Lecturer">Lecturer </option>
            <option value="Workshop">Workshop </option>
            <option value="Facilities"> Facilities </option>
        </select>
    </div>
    <div class="mb-3">
        <label class="form-label">Subject </label>
        <!-- Added name="subject" -->
        <input type="text" class="form-control" id="feedbackSubject" name="subject" placeholder="Enter subject" required>
    </div>
    <div class="mb-3">
        <label class="form-label">Your Feedback </label>
        <!-- Added name="feedback_text" -->
        <textarea class="form-control" id="feedbackText" name="feedback_text" rows="5" placeholder="Write your feedback" required></textarea>
    </div>
    <button type="submit" class="submit-btn">
        <i class="fas fa-paper-plane"></i>Submit Feedback
    </button>
</form>
               <!-- <form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label"> Feedback Type </label>
                        <select class="form-select" id="feedbackType" required>
                            <option value=""> Select Type </option>
                            <option value="Course">Course</option>
                            <option value="Lecturer">Lecturer </option>
                            <option value="Workshop">Workshop </option>
                            <option value="Facilities"> Facilities </option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Subject </label>
                        <input type="text" class="form-control" id="feedbackSubject" placeholder="Enter subject" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Your Feedback </label>
                        <textarea class="form-control" id="feedbackText" rows="5" placeholder="Write your feedback" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane"></i>Submit Feedback
                    </button>
                </form> -->
            </div>
        </div>

        <!-- Complaint Form -->
        <div class="col-lg-6">
            <div class="feedback-card">
                <h4 class="card-title"><i class="fas fa-exclamation-triangle"></i> Submit Complaint</h4>
                <form id="complaintForm">
                    <div class="mb-3">
                        <label class="form-label"> Complaint Category</label>
                        <select class="form-select" id="complaintCategory" required>
                            <option value="">Select Category </option>
                            <option value="Academic Issue"> Academic Issue</option>
                            <option value="Staff Issue">Staff Issue </option>
                            <option value="Technical Issue">Technical Issue</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label"> Complaint Title </label>
                        <input type="text" class="form-control" id="complaintTitle" placeholder="Enter complaint title" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label"> Complaint Details</label>
                        <textarea class="form-control" id="complaintDetails" rows="5" placeholder="Explain your complaint" required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane"></i>Submit Complaint
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Previous History Table -->
    <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 id="historyTableBody">
                    <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>

<!-- JavaScript to handle Submissions -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.getElementById('historyTableBody');

    // Ada dwaya lassanata ganna function ekak
    function getFormattedDate() {
        const options = { day: '2-digit', month: 'long', year: 'numeric' };
        return new Date().toLocaleDateString('en-GB', options);
    }

    // 1. Feedback Form Submission
    document.getElementById('feedbackForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const subject = document.getElementById('feedbackSubject').value;
        const date = getFormattedDate();

        // Table eke udatama row ekak add karanna (tr)
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td>Feedback</td>
            <td>${subject}</td>
            <td>${date}</td>
            <td><span class="badge-status pending"> Pending </span></td>
        `;

        // Aluth data eka table eke udatama insert karanawa
        tableBody.insertBefore(newRow, tableBody.firstChild);

        // Form eka reset karanawa
        this.reset();
        alert('Feedback submitted successfully!');
    });

    // 2. Complaint Form Submission
    document.getElementById('complaintForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const title = document.getElementById('complaintTitle').value;
        const date = getFormattedDate();

        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td>Complaint</td>
            <td>${title}</td>
            <td>${date}</td>
            <td><span class="badge-status pending"> Pending </span></td>
        `;

        tableBody.insertBefore(newRow, tableBody.firstChild);

        this.reset();
        alert('Complaint submitted successfully!');
    });
});
</script>

@endsection