309 lines
9.9 KiB
PHP
309 lines
9.9 KiB
PHP
@extends('layouts.studentportalnav')
|
|
|
|
@section('title', 'Feedback & Complaint')
|
|
|
|
@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 */
|
|
.feedback-header {
|
|
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
|
color: var(--white);
|
|
padding: 35px 30px;
|
|
border-radius: 16px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
|
border-left: 5px solid var(--theme-red);
|
|
}
|
|
|
|
.feedback-header h2 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.feedback-header p {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Cards */
|
|
.feedback-card {
|
|
background: var(--white);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
height: 100%;
|
|
}
|
|
|
|
.card-title {
|
|
color: var(--theme-navy);
|
|
font-weight: 700;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.card-title i {
|
|
color: var(--theme-red);
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Form Controls */
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: var(--theme-navy);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-control,
|
|
.form-select {
|
|
border-radius: 10px;
|
|
padding: 12px 15px;
|
|
border: 1px solid #cbd5e1;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
border-color: var(--theme-navy);
|
|
box-shadow: 0 0 0 0.25rem rgba(45, 53, 91, 0.15);
|
|
}
|
|
|
|
/* Buttons */
|
|
.submit-btn {
|
|
background: var(--theme-red) !important;
|
|
color: var(--white) !important;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 12px 30px;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: var(--theme-red-hover) !important;
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
/* History Card */
|
|
.history-card {
|
|
margin-top: 35px;
|
|
background: var(--white);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
}
|
|
|
|
.history-head {
|
|
background: var(--theme-navy);
|
|
color: var(--white);
|
|
padding: 18px 25px;
|
|
}
|
|
|
|
.history-head h5 {
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.table th {
|
|
background: #f8fafc;
|
|
color: var(--theme-navy);
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
.table td {
|
|
vertical-align: middle;
|
|
padding: 14px 20px;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge-status {
|
|
padding: 6px 14px;
|
|
border-radius: 30px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
}
|
|
|
|
.pending {
|
|
background: rgba(255, 234, 133, 0.4);
|
|
color: #856404;
|
|
}
|
|
|
|
.resolved {
|
|
background: #d1e7dd;
|
|
color: #0f5132;
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.feedback-header, .feedback-card {
|
|
padding: 25px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-4">
|
|
|
|
<!-- Header -->
|
|
<div class="feedback-header">
|
|
<h2 class="mb-1"><i class="fas fa-comments me-2" style="color: var(--theme-yellow);"></i> Feedback & Complaint</h2>
|
|
<p>Share your suggestions, feedback, or complaints with the Automobile Engineering Academy management team.</p>
|
|
</div>
|
|
|
|
<!-- Alert Messages (Validation & Success) -->
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show rounded-3 mb-4" role="alert">
|
|
<i class="fas fa-check-circle me-2"></i>{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger rounded-3 mb-4">
|
|
<ul class="mb-0 ps-3">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<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>
|
|
<select class="form-select" id="feedbackType" name="feedback_type" required>
|
|
<option value=""> Select Type </option>
|
|
<option value="Course" {{ old('feedback_type') == 'Course' ? 'selected' : '' }}>Course</option>
|
|
<option value="Lecturer" {{ old('feedback_type') == 'Lecturer' ? 'selected' : '' }}>Lecturer </option>
|
|
<option value="Workshop" {{ old('feedback_type') == 'Workshop' ? 'selected' : '' }}>Workshop </option>
|
|
<option value="Facilities" {{ old('feedback_type') == 'Facilities' ? 'selected' : '' }}> Facilities </option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Subject </label>
|
|
<input type="text" class="form-control" id="feedbackSubject" name="subject" value="{{ old('subject') }}" placeholder="Enter subject" required>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">Your Feedback </label>
|
|
<textarea class="form-control" id="feedbackText" name="feedback_text" rows="5" placeholder="Write your feedback" required>{{ old('feedback_text') }}</textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn shadow-sm">
|
|
<i class="fas fa-paper-plane me-2"></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" action="{{ route('feedback.store') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="is_complaint" value="1"> <!-- IF NEEDED FOR BACKEND -->
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label"> Complaint Category</label>
|
|
<select class="form-select" id="complaintCategory" name="complaint_category" 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" name="complaint_title" placeholder="Enter complaint title" required>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label"> Complaint Details</label>
|
|
<textarea class="form-control" id="complaintDetails" name="complaint_details" rows="5" placeholder="Explain your complaint" required></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn shadow-sm">
|
|
<i class="fas fa-paper-plane me-2"></i>Submit Complaint
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Previous History Table -->
|
|
<div class="history-card">
|
|
<div class="history-head">
|
|
<h5><i class="fas fa-history me-2" style="color: var(--theme-yellow);"></i> Previous Requests</h5>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th> Type </th>
|
|
<th> Subject </th>
|
|
<th> Date </th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="historyTableBody">
|
|
<tr>
|
|
<td><span class="fw-semibold" style="color: var(--theme-navy);">Feedback</span></td>
|
|
<td>Workshop Equipment </td>
|
|
<td>10 July 2026</td>
|
|
<td><span class="badge-status resolved"><i class="fas fa-check me-1"></i> Resolved</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="fw-semibold" style="color: var(--theme-navy);">Complaint</span></td>
|
|
<td>Class Schedule Issue </td>
|
|
<td>05 July 2026 </td>
|
|
<td><span class="badge-status pending"><i class="fas fa-clock me-1"></i> Pending </span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection |