@extends('admin.layouts.master2')
@section('title', 'Lodge Result Grievance')

@section('content')
<style>
    :root {
        --primary-emerald: #047857;
        --primary-hover: #065f46;
        --primary-light: #ecfdf5;
        --primary-border: #a7f3d0;
        --primary-ring: rgba(4, 120, 87, 0.15);
        --slate-900: #0f172a;
        --slate-800: #1e293b;
        --slate-700: #334155;
        --slate-600: #475569;
        --slate-500: #64748b;
        --slate-300: #cbd5e1;
        --slate-200: #e2e8f0;
        --slate-100: #f1f5f9;
        --slate-50:  #f8fafc;
    }

    .grievance-wrapper {
        padding: 2.5rem 0 4rem;
        background-color: #f8fafc;
        min-height: calc(100vh - 120px);
    }

    /* Form Container Card */
    .form-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 20px;
        box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    .form-card-header {
        background: #ffffff;
        border-bottom: 1px solid var(--slate-200);
        padding: 1.75rem 2.25rem;
    }

    .form-card-body {
        padding: 2.25rem;
    }

    .form-label-custom {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--slate-800);
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-control-custom {
        width: 100%;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--slate-900);
        background: #ffffff;
        border: 1.5px solid var(--slate-300);
        border-radius: 12px;
        padding: 0.75rem 1rem;
        transition: all 0.2s ease;
    }

    .form-control-custom:focus {
        outline: none;
        border-color: var(--primary-emerald);
        box-shadow: 0 0 0 4px var(--primary-ring);
    }

    /* Guidance Sidebar Card */
    .guidance-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.03);
    }

    .guidance-header {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--slate-900);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .guidance-list {
        padding-left: 1.2rem;
        margin: 0 0 1.5rem;
        color: var(--slate-600);
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .guidance-list li {
        margin-bottom: 0.6rem;
    }

    .guidance-badge {
        background: var(--primary-light);
        border: 1px solid var(--primary-border);
        border-radius: 12px;
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 0.85rem;
    }

    .guidance-badge i {
        font-size: 1.35rem;
        color: var(--primary-emerald);
    }

    .btn-submit-grievance {
        background: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-hover) 100%);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        font-size: 0.975rem;
        font-weight: 700;
        padding: 0.85rem 1.75rem;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(4, 120, 87, 0.25);
        transition: all 0.2s ease;
    }

    .btn-submit-grievance:hover {
        background: linear-gradient(135deg, var(--primary-hover) 0%, #034e38 100%);
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(4, 120, 87, 0.35);
        color: #ffffff;
    }

    .btn-cancel {
        background: #ffffff;
        border: 1.5px solid var(--slate-300);
        color: var(--slate-700);
        font-size: 0.95rem;
        font-weight: 700;
        border-radius: 12px;
        padding: 0.85rem 1.5rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .btn-cancel:hover {
        background: var(--slate-100);
        color: var(--slate-900);
    }
</style>

<div class="grievance-wrapper">
    <div class="container">
        
        <!-- Header & Breadcrumb -->
        <div class="row align-items-center mb-4">
            <div class="col-md-6 mb-2 mb-md-0">
                <h1 style="font-size: 1.75rem; font-weight: 800; color: var(--slate-900); margin: 0;">
                    Lodge Result Grievance
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">
                    Submit an official complaint regarding missing or incomplete examination results.
                </p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="{{ route('student.dashboard') }}" class="btn-cancel">
                    <i class="fas fa-arrow-left"></i> Back to Dashboard
                </a>
            </div>
        </div>

        <div class="row">
            <!-- Left Form Column -->
            <div class="col-lg-8 mb-4 mb-lg-0">
                <div class="form-card">
                    <div class="form-card-header">
                        <h3 style="font-size: 1.15rem; font-weight: 800; color: var(--slate-900); margin: 0; display: flex; align-items: center; gap: 0.6rem;">
                            <i class="fas fa-file-signature text-success"></i> Grievance Submission Form
                        </h3>
                    </div>

                    <div class="form-card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger border-0 rounded-lg mb-4" style="background: #fef2f2; color: #991b1b;">
                                <div class="font-weight-bold mb-1">
                                    <i class="fas fa-exclamation-circle mr-1"></i> Please resolve the following errors:
                                </div>
                                <ul class="mb-0 pl-3">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="post" action="{{ route('posts.store') }}">
                            @csrf

                            <div class="form-group mb-4">
                                <label for="title" class="form-label-custom">
                                    <i class="fas fa-list-alt text-success"></i> Complaint Category
                                </label>
                                <select name="title" id="title" class="form-control-custom" required>
                                    <option value="" selected disabled>Select the category of your complaint</option>
                                    <option value="Missing Result">Missing Result (Course result not shown)</option>
                                    <option value="Incomplete Result">Incomplete Result (Missing grades/CA marks)</option>
                                </select>
                            </div>

                            <div class="form-group mb-4">
                                <label for="body" class="form-label-custom">
                                    <i class="fas fa-align-left text-success"></i> Detailed Description & Course Info
                                </label>
                                <textarea name="body" 
                                          id="body" 
                                          rows="8" 
                                          class="form-control-custom" 
                                          placeholder="Please specify:&#10;1. Course Code(s) & Course Title(s)&#10;2. Session & Semester (e.g. 2019/2020 January Semester)&#10;3. Examination Centre / CBT Hall&#10;4. Detailed explanation of your issue..." 
                                          required></textarea>
                            </div>

                            <div class="d-flex align-items-center justify-content-between pt-2">
                                <a href="{{ route('student.dashboard') }}" class="btn-cancel">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                                <button type="submit" class="btn-submit-grievance">
                                    <i class="fas fa-paper-plane"></i> Submit Ticket
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Right Guidance Column -->
            <div class="col-lg-4">
                <div class="guidance-card">
                    <div class="guidance-header">
                        <i class="fas fa-lightbulb text-warning"></i>
                        <span>Submission Tips</span>
                    </div>

                    <ul class="guidance-list">
                        <li>Ensure you specify the exact <strong>Course Code</strong> (e.g., COSC 101, MATH 201).</li>
                        <li>Indicate the specific <strong>Academic Session</strong> & <strong>Semester</strong> in question.</li>
                        <li>Include any relevant details regarding your CBT exam center or attendance record.</li>
                        <li>Submissions are logged into the DLC Academic Complaints Registry for official audit.</li>
                    </ul>

                    <div class="guidance-badge">
                        <i class="fas fa-user-clock"></i>
                        <div>
                            <div style="font-size: 0.85rem; font-weight: 800; color: var(--slate-900);">Response Window</div>
                            <div style="font-size: 0.785rem; color: var(--slate-600);">Reviewed within 48–72 business hours</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection