@extends('layouts.main_dashboard.app')

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

@section('title', $isArabic ? 'إدارة استفسارات أولياء الأمور' : 'Parent Inquiries Management')
@section('page_heading', $isArabic ? 'إدارة استفسارات أولياء الأمور' : 'Parent Inquiries Management')
@section('page_subtitle', $isArabic ? 'عرض موحد لكل استفسارات أولياء الأمور المرسلة إلى المعلمين داخل النظام.' : 'A unified view for all parent inquiries sent to teachers across the system.')
@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 ? 'المعلمون الظاهرون' : 'Visible teachers' }}</p><p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ $teacherCount }}</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 ? 'كل استفسارات أولياء الأمور' : 'All parent inquiries' }}</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="overflow-x-auto">
                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                            <th class="px-6 py-4">{{ $isArabic ? 'العنوان' : 'Title' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'ولي الأمر' : 'Parent' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الابن' : 'Child' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'المعلم' : 'Teacher' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الحالة' : 'Status' }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                        @foreach($items as $inquiry)
                            <tr>
                                <td class="px-6 py-5 text-sm font-black text-surface-900 dark:text-white">{{ $inquiry->title }}</td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $inquiry->parentUser?->name ?? '—' }}</td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $inquiry->student?->name ?? '—' }}</td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $inquiry->teacher?->name ?? '—' }}</td>
                                <td class="px-6 py-5"><span class="rounded-full px-3 py-1 text-xs font-bold {{ filled($inquiry->teacher_reply) ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300' }}">{{ filled($inquiry->teacher_reply) ? ($isArabic ? 'تم الرد' : 'Answered') : ($isArabic ? 'بانتظار الرد' : 'Awaiting reply') }}</span></td>
                                <td class="px-6 py-5"><a href="{{ route('admin.parent-inquiries.show', $inquiry->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-700 dark:border-surface-700 dark:text-surface-200"><i class="fa-regular fa-eye text-xs"></i><span>{{ __('dashboard.View') }}</span></a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </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