@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;
    --theme-navy-dark: #1F2541;
    --theme-red: #822424;
    --theme-red-hover: #df2c3e;
    --theme-yellow: #FFEA85;
    --bg-light: #F6F6F6;
    --white: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
}

.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-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-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;
}

.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 {
    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;
}

.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;
}

.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;
}
</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 -->
    @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(session('error'))
        <div class="alert alert-danger alert-dismissible fade show rounded-3 mb-4" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <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">

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

    <!-- Dynamic History Table -->
    <div class="history-card">
        <div class="history-head">
            <h5 class="m-0"><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">
                    @forelse ($feedbacks as $item)
                        <tr>
                            <td>
                                <span class="fw-semibold" style="color: var(--theme-navy);">
                                    {{ $item->feedback_type }}
                                </span>
                            </td>
                            <td>{{ $item->subject }}</td>
                            <td>{{ \Carbon\Carbon::parse($item->created_at)->format('d M Y') }}</td>
                            <td>
                                @if(strtolower($item->status) == 'resolved')
                                    <span class="badge-status resolved"><i class="fas fa-check me-1"></i> Resolved</span>
                                @else
                                    <span class="badge-status pending"><i class="fas fa-clock me-1"></i> {{ $item->status ?? 'Pending' }}</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-4 text-muted">
                                <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                                No feedback or complaints submitted yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection