@extends('layouts.main_dashboard.app')

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

@section('title', __('dashboard.View Inquiry') . ' | ' . $inquiry->title)
@section('skip_page_hero', true)

@section('content')
<div class="space-y-6">
    <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.24em] text-amber-600">{{ $isArabic ? 'تفاصيل الاستفسار' : 'Inquiry details' }}</p>
                <h1 class="mt-3 text-3xl font-black text-zinc-900 dark:text-white">{{ $inquiry->title }}</h1>
                <p class="mt-3 max-w-3xl text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'راجع الرسالة المرسلة والمرفقات وحالة الرد من المعلم.' : 'Review the sent message, its attachments, and the teacher response state.' }}</p>
            </div>
            <a href="{{ route('parent.inquiries.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-5 py-3 text-sm font-black text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800">
                <i class="fa-solid fa-list text-xs"></i>
                <span>{{ __('dashboard.Back to Inquiries') }}</span>
            </a>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-[1.5rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"><p class="text-xs font-black uppercase tracking-[0.2em] text-zinc-400">{{ $isArabic ? 'الابن' : 'Child' }}</p><p class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ $inquiry->student?->name ?? '—' }}</p></article>
        <article class="rounded-[1.5rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"><p class="text-xs font-black uppercase tracking-[0.2em] text-zinc-400">{{ $isArabic ? 'المعلم' : 'Teacher' }}</p><p class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ $inquiry->teacher?->name ?? '—' }}</p></article>
        <article class="rounded-[1.5rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"><p class="text-xs font-black uppercase tracking-[0.2em] text-zinc-400">{{ $isArabic ? 'المساق' : 'Course' }}</p><p class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ $inquiry->course?->name ?? '—' }}</p></article>
        <article class="rounded-[1.5rem] border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"><p class="text-xs font-black uppercase tracking-[0.2em] text-zinc-400">{{ $isArabic ? 'الحالة' : 'Status' }}</p><p class="mt-3 text-lg font-black text-zinc-900 dark:text-white">{{ filled($inquiry->teacher_reply) ? ($isArabic ? 'تم الرد' : 'Answered') : ($isArabic ? 'بانتظار الرد' : 'Awaiting reply') }}</p></article>
    </section>

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
        <section class="space-y-6">
            <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الرسالة المرسلة' : 'Sent message' }}</h2>
                <div class="mt-4 rounded-[1.5rem] bg-zinc-50 p-5 text-sm leading-8 text-zinc-700 dark:bg-zinc-800/30 dark:text-zinc-200">{!! nl2br(e($inquiry->message)) !!}</div>

                @if($inquiry->parentFiles->isNotEmpty())
                    <div class="mt-6 flex flex-col gap-3">
                        @foreach($inquiry->parentFiles as $file)
                            <a href="{{ \Illuminate\Support\Facades\Storage::url($file->file_path) }}" target="_blank" class="inline-flex items-center gap-3 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm font-semibold text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800/30 dark:text-zinc-200">
                                <i class="fa-solid fa-paperclip text-xs"></i>
                                <span>{{ $file->file_name }}</span>
                            </a>
                        @endforeach
                    </div>
                @endif
            </section>

            @if(filled($inquiry->teacher_reply))
                <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ __('dashboard.Your Reply') }}</h2>
                    <div class="mt-4 rounded-[1.5rem] bg-emerald-50 p-5 text-sm leading-8 text-zinc-700 dark:bg-emerald-500/10 dark:text-zinc-200">{!! nl2br(e($inquiry->teacher_reply)) !!}</div>

                    @if($inquiry->teacherFiles->isNotEmpty())
                        <div class="mt-6 flex flex-col gap-3">
                            @foreach($inquiry->teacherFiles as $file)
                                <a href="{{ \Illuminate\Support\Facades\Storage::url($file->file_path) }}" target="_blank" class="inline-flex items-center gap-3 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm font-semibold text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800/30 dark:text-zinc-200">
                                    <i class="fa-solid fa-paperclip text-xs"></i>
                                    <span>{{ $file->file_name }}</span>
                                </a>
                            @endforeach
                        </div>
                    @endif
                </section>
            @endif
        </section>

        <aside class="space-y-6">
            <section class="rounded-[2rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                <p class="text-xs font-black uppercase tracking-[0.2em] text-zinc-400">{{ $isArabic ? 'السياق الأكاديمي' : 'Academic context' }}</p>
                <ul class="mt-4 space-y-4 text-sm text-zinc-600 dark:text-zinc-300">
                    <li class="flex items-center justify-between gap-4"><span>{{ $isArabic ? 'المادة' : 'Subject' }}</span><span class="font-bold text-zinc-900 dark:text-white">{{ $inquiry->course?->subject?->name ?? '—' }}</span></li>
                    <li class="flex items-center justify-between gap-4"><span>{{ $isArabic ? 'الصف' : 'Class' }}</span><span class="font-bold text-zinc-900 dark:text-white">{{ $inquiry->course?->schoolClass?->name ?? '—' }}</span></li>
                    <li class="flex items-center justify-between gap-4"><span>{{ $isArabic ? 'تاريخ الإرسال' : 'Created at' }}</span><span class="font-bold text-zinc-900 dark:text-white">{{ optional($inquiry->created_at)->format('Y-m-d') ?? '—' }}</span></li>
                </ul>
            </section>
        </aside>
    </section>
</div>
@endsection