@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