@extends('layouts.main_dashboard.app')

@php
    $isArabic = app()->getLocale() === 'ar';
    $items = $inquiries->getCollection();
@endphp

@section('title', $isArabic ? 'استفسارات أولياء الأمور' : 'Parent Inquiries')
@section('page_heading', $isArabic ? 'استفسارات أولياء الأمور' : 'Parent Inquiries')
@section('page_subtitle', $isArabic ? 'كل رسائل أولياء الأمور المرتبطة بمساقاتك مجمعة في شاشة مستقلة.' : 'All parent messages related to your courses gathered in one dedicated screen.')
@section('skip_page_hero', true)

@section('content')
<div class="space-y-6">
    <section class="grid gap-4 md:grid-cols-3">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المعروضة الآن' : 'Visible now' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ $items->count() }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'بانتظار الرد' : 'Awaiting reply' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ $openCount }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'آخر استفسار' : 'Latest inquiry' }}</p><p class="mt-2 text-lg font-black text-surface-900 dark:text-white">{{ $latestInquiry?->created_at?->format('Y-m-d') ?? '—' }}</p></article>
    </section>

    <section class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'رسائل أولياء الأمور' : 'Parent messages' }}</h2>
        </div>
        @if($items->isEmpty())
            <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'لا توجد استفسارات من أولياء الأمور حاليًا.' : 'There are no parent inquiries right now.' }}</div>
        @else
            <div class="space-y-4 p-6">
                @foreach($items as $inquiry)
                    <article class="rounded-xl border border-surface-200 bg-surface-50/60 p-5 dark:border-surface-800 dark:bg-surface-950/30">
                        <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h3 class="text-base font-black text-surface-900 dark:text-white">{{ $inquiry->title }}</h3>
                                    <span class="rounded-full px-3 py-1 text-xs font-black {{ filled($inquiry->teacher_reply) ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-orange-50 text-orange-700 dark:bg-orange-500/10 dark:text-orange-300' }}">{{ filled($inquiry->teacher_reply) ? ($isArabic ? 'تم الرد' : 'Answered') : ($isArabic ? 'بانتظار الرد' : 'Awaiting reply') }}</span>
                                </div>
                                <div class="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-xs text-surface-500 dark:text-surface-400">
                                    <span>{{ $isArabic ? 'ولي الأمر:' : 'Parent:' }} {{ $inquiry->parentUser?->name ?? '—' }}</span>
                                    <span>{{ $isArabic ? 'الابن:' : 'Child:' }} {{ $inquiry->student?->name ?? '—' }}</span>
                                    <span>{{ $isArabic ? 'المساق:' : 'Course:' }} {{ $inquiry->course?->name ?? '—' }}</span>
                                </div>
                                <p class="mt-4 text-sm leading-7 text-surface-600 dark:text-surface-300">{{ \Illuminate\Support\Str::limit($inquiry->message, 200) }}</p>
                            </div>
                            <a href="{{ route('teacher.parent-inquiries.show', $inquiry->id) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-brand-700"><i class="fa-solid fa-reply text-xs"></i><span>{{ __('dashboard.View & Reply') }}</span></a>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="border-t border-surface-200 px-6 py-5 dark:border-surface-800">{{ $inquiries->links('pagination::simple-tailwind') }}</div>
        @endif
    </section>
</div>
@endsection