@extends('student.layouts.app')

@section('title', $course->name . ' | ' . __('dashboard.Inquiries'))

@section('content')
@php($isArabic = app()->getLocale() === 'ar')

<div class="space-y-6">
    @include('student.courses.inc.overview', ['course' => $course])
    @include('student.courses.inc.tabs', ['course' => $course])

    <section class="student-card overflow-hidden">
        <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
            <div>
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الاستفسارات' : 'Inquiries' }}</h2>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'سجل رسائلك داخل هذا المقرر مع متابعة واضحة لحالة كل استفسار.' : 'Your messages inside this course with a clear status for each inquiry.' }}</p>
            </div>
            <a href="{{ route('student.courses.inquiries.create', $course->id) }}" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl bg-primary px-4 py-2 text-sm font-black text-white text-decoration-none">
                <i class="fa-solid fa-plus text-xs"></i>
                {{ $isArabic ? 'استفسار جديد' : 'New inquiry' }}
            </a>
        </div>

        <div class="grid gap-4 p-6 md:grid-cols-2 xl:grid-cols-3">
            @foreach($inquiries as $inquiry)
                <article class="rounded-3xl border border-zinc-200 bg-zinc-50/70 p-5 transition hover:border-primary/30 dark:border-zinc-800 dark:bg-zinc-950/60">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-start gap-4">
                            <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-light text-primary dark:bg-primary/10 dark:text-primary-container">
                                <i class="fa-solid fa-comments text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $inquiry->title }}</h3>
                                <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $inquiry->created_at->format('d M, Y') }}</p>
                            </div>
                        </div>
                        <span class="rounded-full px-3 py-1 text-xs font-black {{ $inquiry->status === 'replied' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300' }}">
                            {{ $inquiry->status === 'replied' ? ($isArabic ? 'تم الرد' : 'Replied') : ($isArabic ? 'جديد' : 'New') }}
                        </span>
                    </div>

                    <div class="mt-5 flex items-center justify-between gap-3">
                        <span class="rounded-full bg-white px-3 py-2 text-xs font-black text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">{{ $inquiry->created_at?->diffForHumans() }}</span>
                        <a href="{{ route('student.courses.inquiries.show', ['course' => $course->id, 'inquiry' => $inquiry->id]) }}" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl bg-white px-4 py-2 text-sm font-black text-zinc-700 ring-1 ring-zinc-200 dark:bg-zinc-900 dark:text-zinc-200 dark:ring-zinc-800 text-decoration-none">
                            <i class="fa-solid fa-eye text-xs"></i>
                            {{ $isArabic ? 'عرض التفاصيل' : 'View details' }}
                        </a>
                    </div>
                </article>
            @endforeach
@if(($inquiries)->isEmpty())
                <div class="col-span-full rounded-3xl border border-dashed border-zinc-300 p-10 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                    {{ $isArabic ? 'لم تقم بإرسال أي استفسارات بعد.' : 'You have not sent any inquiries yet.' }}
                </div>
            @endif
        </div>
    </section>
</div>
@endsection