@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>
            </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> -->
    <form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
    @csrf

   
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
        </div>
    @endif
 
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <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-3">
        <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">
        <i class="fas fa-paper-plane"></i> Submit Feedback
    </button>
</form>

    <!-- 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>



@endsection