@extends('admin.layouts.master2')
@section('title', 'My Grievances')

@section('content')
<style>
    :root {
        --primary-emerald: #047857;
        --primary-hover: #065f46;
        --primary-light: #ecfdf5;
        --primary-border: #a7f3d0;
        --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-list-wrapper {
        padding: 2.5rem 0 4rem;
        background-color: #f8fafc;
        min-height: calc(100vh - 120px);
    }

    .grievance-card {
        background: #ffffff;
        border: 1px solid var(--slate-200);
        border-radius: 20px;
        box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.05);
        overflow: hidden;
    }

    .grievance-card-header {
        background: #ffffff;
        border-bottom: 1px solid var(--slate-200);
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .grievance-card-body {
        padding: 1.75rem 2rem;
    }

    .btn-create-grievance {
        background: linear-gradient(135deg, var(--primary-emerald) 0%, var(--primary-hover) 100%);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.875rem;
        padding: 0.65rem 1.25rem;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(4, 120, 87, 0.25);
    }

    .btn-create-grievance:hover {
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(4, 120, 87, 0.35);
    }

    .btn-view-details {
        background: #ffffff;
        border: 1.5px solid var(--primary-emerald);
        color: var(--primary-emerald);
        font-weight: 700;
        font-size: 0.825rem;
        padding: 0.45rem 1rem;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .btn-view-details:hover {
        background: var(--primary-emerald);
        color: #ffffff;
    }

    .empty-tickets {
        text-align: center;
        padding: 3.5rem 1.5rem;
    }

    .empty-tickets-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--slate-100);
        color: var(--slate-400);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin: 0 auto 1rem;
    }
</style>

<div class="grievance-list-wrapper">
    <div class="container">
        
        <!-- Header & Action -->
        <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;">
                    My Result Grievances
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">
                    Track and monitor the status of your submitted examination complaint tickets.
                </p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="{{ route('posts.create') }}" class="btn-create-grievance">
                    <i class="fas fa-plus"></i> Lodge New Grievance
                </a>
            </div>
        </div>

        <div class="grievance-card">
            <div class="grievance-card-header">
                <h3 style="font-size: 1.1rem; font-weight: 800; color: var(--slate-900); margin: 0; display: flex; align-items: center; gap: 0.5rem;">
                    <i class="fas fa-history text-success"></i> Submitted Complaint History
                </h3>
                <span class="badge badge-light" style="font-size: 0.85rem; font-weight: 700; padding: 0.4rem 0.75rem; border-radius: 9999px; border: 1px solid var(--slate-300);">
                    {{ count($posts) }} Ticket(s)
                </span>
            </div>

            <div class="grievance-card-body">
                @if(count($posts) > 0)
                    <div class="table-responsive">
                        <table class="table table-hover align-middle" style="border-collapse: separate; border-spacing: 0;">
                            <thead>
                                <tr style="background: var(--slate-50); color: var(--slate-700); font-size: 0.825rem; text-transform: uppercase; letter-spacing: 0.03em;">
                                    <th width="60px">#</th>
                                    <th>Category / Title</th>
                                    <th>Submission Date</th>
                                    <th>Status</th>
                                    <th width="140px" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($posts as $post)
                                    <tr>
                                        <td class="font-weight-bold text-muted">{{ $loop->index + 1 }}</td>
                                        <td>
                                            <span style="font-weight: 700; color: var(--slate-900); font-size: 0.95rem;">
                                                <i class="fas fa-file-alt text-success mr-2"></i>{{ $post->title }}
                                            </span>
                                        </td>
                                        <td class="text-muted" style="font-size: 0.875rem;">
                                            <i class="far fa-clock mr-1"></i>{{ $post->created_at ? $post->created_at->format('M d, Y h:i A') : 'N/A' }}
                                        </td>
                                        <td>
                                            <span class="badge badge-warning" style="font-weight: 700; font-size: 0.785rem; padding: 0.35rem 0.75rem; border-radius: 9999px;">
                                                <i class="fas fa-spinner fa-spin mr-1"></i> Pending Review
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ route('posts.show', $post->id) }}" class="btn-view-details">
                                                View <i class="fas fa-chevron-right ml-1"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-tickets">
                        <div class="empty-tickets-icon">
                            <i class="fas fa-ticket-alt"></i>
                        </div>
                        <h4 style="font-size: 1.2rem; font-weight: 800; color: var(--slate-900); margin-bottom: 0.35rem;">
                            No Grievances Submitted
                        </h4>
                        <p class="text-muted" style="font-size: 0.9rem; max-width: 420px; margin: 0 auto 1.5rem;">
                            You have not submitted any result complaint tickets yet. If you have missing or incomplete grades, you can lodge a ticket below.
                        </p>
                        <a href="{{ route('posts.create') }}" class="btn-create-grievance">
                            <i class="fas fa-plus"></i> Lodge New Grievance
                        </a>
                    </div>
                @endif
            </div>
        </div>

    </div>
</div>
@endsection