@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'استدعاءات ولي الأمر' : 'Parent Requests')
@section('skip_page_hero', true)

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

@section('content')
<div class="space-y-6" x-data="{ openCreateModal: false }">
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div class="max-w-3xl">
            <p class="text-xs font-black uppercase tracking-[0.24em] text-sky-600">{{ $isArabic ? 'استدعاءات ولي الأمر' : 'Parent Requests' }}</p>
            <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $isArabic ? 'إدارة الطلبات والاستدعاءات الأسرية' : 'Manage family requests and summons' }}</h1>
            <p class="mt-3 text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'أنشئي استدعاءً رسميًا، أرسليه لولي الأمر، ثم تابعي حالته حتى الاكتمال أو الإغلاق.' : 'Create a formal request, send it to the parent, then track it until completion or closure.' }}</p>
            </div>
            <div class="flex justify-end">
                <button type="button" @click="openCreateModal = true" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl bg-sky-600 px-5 py-3 text-sm font-black text-white">
                    <i class="fa-solid fa-plus"></i>
                    <span>{{ $isArabic ? 'استدعاء جديد' : 'New Request' }}</span>
                </button>
            </div>
        </div>
    </section>

    <div x-cloak x-show="openCreateModal" class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/70 px-4 py-6">
        <div @click.away="openCreateModal = false" class="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-[1.75rem] border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-950">
            <div class="flex items-center justify-between border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'إنشاء استدعاء جديد' : 'Create new request' }}</h2>
                <button type="button" @click="openCreateModal = false" class="inline-flex items-center justify-center rounded-[1.75rem] border border-zinc-200 px-3 py-2 text-sm font-black text-zinc-700 dark:border-zinc-700 dark:text-zinc-200"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <form action="{{ route('social-worker.parent-requests.store') }}" method="POST" class="space-y-4 p-6">
                @csrf
                <select name="student_id" required class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <option value="">{{ $isArabic ? 'اختاري الطالب' : 'Select student' }}</option>
                    @foreach($students as $student)
                        <option value="{{ $student->id }}">{{ $student->name }}</option>
                    @endforeach
                </select>
                <select name="parent_user_id" required class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    <option value="">{{ $isArabic ? 'اختاري ولي الأمر' : 'Select parent' }}</option>
                    @foreach($linkedParents as $parent)
                        <option value="{{ $parent->id }}">{{ $parent->name }} - {{ $parent->email }}</option>
                    @endforeach
                </select>
                <div class="grid gap-4 md:grid-cols-2">
                    <select name="type" required class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                        @foreach($requestTypes as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <select name="priority" required class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                        @foreach($requestPriorities as $value => $label)
                            <option value="{{ $value }}" @selected($value === 'normal')>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <input type="text" name="title" required placeholder="{{ $isArabic ? 'عنوان الاستدعاء' : 'Request title' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                <textarea name="message" rows="5" required placeholder="{{ $isArabic ? 'تفاصيل الطلب أو سبب الاستدعاء' : 'Request details or summons reason' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"></textarea>
                <input type="datetime-local" name="meeting_at" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                <input type="datetime-local" name="response_deadline_at" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                <textarea name="internal_notes" rows="3" placeholder="{{ $isArabic ? 'ملاحظات داخلية' : 'Internal notes' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"></textarea>
                <div class="grid gap-3 sm:grid-cols-2">
                    <label class="flex items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-bold text-zinc-700 dark:border-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" name="delivery_channels[]" value="in_app" checked>
                        {{ $isArabic ? 'إشعار داخل النظام' : 'In-app notification' }}
                    </label>
                    <label class="flex items-center gap-3 rounded-2xl border border-zinc-200 px-4 py-3 text-sm font-bold text-zinc-700 dark:border-zinc-700 dark:text-zinc-200">
                        <input type="checkbox" name="delivery_channels[]" value="email" checked>
                        {{ $isArabic ? 'إرسال بالبريد' : 'Send by email' }}
                    </label>
                </div>
                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-sky-600 px-5 py-3 text-sm font-black text-white"><i class="fa-solid fa-paper-plane"></i>{{ $isArabic ? 'إنشاء وإرسال الاستدعاء' : 'Create and send request' }}</button>
            </form>
        </div>
    </div>

    <section class="rounded-[1.75rem] border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
        <div class="border-b border-zinc-200 px-6 py-5 dark:border-zinc-800">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'سجل الاستدعاءات' : 'Requests log' }}</h2>
        </div>
        <div class="space-y-4 p-6">
            @foreach($requests as $requestItem)
                <article class="rounded-2xl border border-zinc-200 p-5 dark:border-zinc-800">
                    <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-zinc-900 dark:text-white">{{ $requestItem->title }}</h3>
                                <span class="rounded-full bg-sky-100 px-3 py-1 text-xs font-black text-sky-700 dark:bg-sky-500/10 dark:text-sky-300">{{ $requestStatuses[$requestItem->status] ?? $requestItem->status }}</span>
                                <span class="rounded-full bg-zinc-100 px-3 py-1 text-xs font-black text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">{{ $requestPriorities[$requestItem->priority] ?? $requestItem->priority }}</span>
                            </div>
                            <div class="mt-2 flex flex-wrap gap-x-4 gap-y-2 text-xs text-zinc-500 dark:text-zinc-400">
                                <span>{{ $isArabic ? 'الطالب:' : 'Student:' }} {{ $requestItem->student?->name ?? '—' }}</span>
                                <span>{{ $isArabic ? 'ولي الأمر:' : 'Parent:' }} {{ $requestItem->parentUser?->name ?? '—' }}</span>
                                <span>{{ $isArabic ? 'موعد اللقاء:' : 'Meeting:' }} {{ $requestItem->meeting_at?->translatedFormat('Y/m/d h:i A') ?? '—' }}</span>
                            </div>
                            <p class="mt-4 text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $requestItem->message }}</p>
                        </div>
                        <div class="grid gap-3 sm:grid-cols-3 xl:w-[22rem]">
                            <form action="{{ route('social-worker.parent-requests.status', $requestItem) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="acknowledged">
                                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl border border-amber-200 px-4 py-3 text-xs font-black text-amber-700 dark:border-amber-500/30 dark:text-amber-300"><i class="fa-solid fa-eye"></i>{{ $isArabic ? 'تم الاطلاع' : 'Acknowledge' }}</button>
                            </form>
                            <form action="{{ route('social-worker.parent-requests.status', $requestItem) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="completed">
                                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl border border-emerald-200 px-4 py-3 text-xs font-black text-emerald-700 dark:border-emerald-500/30 dark:text-emerald-300"><i class="fa-solid fa-check-double"></i>{{ $isArabic ? 'مكتمل' : 'Complete' }}</button>
                            </form>
                            <form action="{{ route('social-worker.parent-requests.resend', $requestItem) }}" method="POST">
                                @csrf
                                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-zinc-900 px-4 py-3 text-xs font-black text-white dark:bg-white dark:text-zinc-900"><i class="fa-solid fa-rotate-right"></i>{{ $isArabic ? 'إعادة إرسال' : 'Resend' }}</button>
                            </form>
                        </div>
                    </div>
                </article>
            @endforeach
@if($requests->isEmpty())
                <div class="rounded-2xl border border-dashed border-zinc-300 p-10 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد استدعاءات حتى الآن.' : 'No parent requests yet.' }}</div>
            @endif
        </div>
        @if(method_exists($requests, 'links'))
            <div class="border-t border-zinc-200 px-6 py-4 dark:border-zinc-800">{{ $requests->links() }}</div>
        @endif
    </section>
</div>
@endsection