@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'الملاحظات الاجتماعية' : 'Social Notes')
@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-rose-600">{{ $isArabic ? 'الملاحظات الاجتماعية' : 'Social Notes' }}</p>
            <h1 class="mt-3 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $isArabic ? 'توثيق الحالة وربطها بولي الأمر' : 'Document the case and connect it to the parent' }}</h1>
            <p class="mt-3 text-sm leading-7 text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'سجلي ملاحظات الحالة، حددي المتابعة المطلوبة، ثم شاركيها مع ولي الأمر عند الحاجة.' : 'Log the case, define the required follow-up, then share it with the parent when needed.' }}</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-rose-600 px-5 py-3 text-sm font-black text-white">
                    <i class="fa-solid fa-plus"></i>
                    <span>{{ $isArabic ? 'إضافة ملاحظة اجتماعية' : 'Add Social Note' }}</span>
                </button>
            </div>
        </div>

            <form method="GET" class="mt-5 grid gap-3 md:grid-cols-2">
                <select name="status" class="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 ? 'كل الحالات' : 'All statuses' }}</option>
                    @foreach($noteStatuses as $value => $label)
                        <option value="{{ $value }}" @selected(request('status') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <select name="priority" class="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 ? 'كل الأولويات' : 'All priorities' }}</option>
                    @foreach($notePriorities as $value => $label)
                        <option value="{{ $value }}" @selected(request('priority') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <button type="submit" class="md:col-span-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-zinc-900 px-5 py-3 text-sm font-black text-white dark:bg-white dark:text-zinc-900"><i class="fa-solid fa-filter"></i>{{ $isArabic ? 'تطبيق الفلاتر' : 'Apply filters' }}</button>
            </form>
    </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 ? 'إضافة ملاحظة جديدة' : 'Add new note' }}</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.notes.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" 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 ? 'بدون مشاركة مباشرة' : 'No direct sharing' }}</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="category" 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($noteCategories 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($notePriorities as $value => $label)
                            <option value="{{ $value }}" @selected($value === 'normal')>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <input type="text" name="title" required placeholder="{{ $isArabic ? 'عنوان الملاحظة' : 'Note 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="note" rows="5" required placeholder="{{ $isArabic ? 'تفاصيل الحالة أو التوصية' : 'Case details or recommendation' }}" 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="follow_up_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">
                <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="action_required" value="1">
                    {{ $isArabic ? 'تتطلب متابعة إلزامية' : 'Requires mandatory follow-up' }}
                </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="share_with_parent" value="1">
                    {{ $isArabic ? 'مشاركة مع ولي الأمر فورًا' : 'Share with parent immediately' }}
                </label>
                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-rose-600 px-5 py-3 text-sm font-black text-white"><i class="fa-solid fa-floppy-disk"></i>{{ $isArabic ? 'حفظ الملاحظة' : 'Save note' }}</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 ? 'سجل الملاحظات الاجتماعية' : 'Social notes log' }}</h2>
        </div>
        <div class="space-y-4 p-6">
            @foreach($notes as $note)
                <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">{{ $note->title }}</h3>
                                <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">{{ $noteStatuses[$note->status] ?? $note->status }}</span>
                                <span class="rounded-full bg-rose-100 px-3 py-1 text-xs font-black text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">{{ $notePriorities[$note->priority] ?? $note->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:' }} {{ $note->student?->name ?? '—' }}</span>
                                <span>{{ $isArabic ? 'ولي الأمر:' : 'Parent:' }} {{ $note->parentUser?->name ?? ($isArabic ? 'غير محدد' : 'Not assigned') }}</span>
                                <span>{{ $isArabic ? 'تمت المشاركة:' : 'Shared:' }} {{ $note->shared_with_parent_at ? ($isArabic ? 'نعم' : 'Yes') : ($isArabic ? 'لا' : 'No') }}</span>
                            </div>
                            <p class="mt-4 text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $note->note }}</p>
                        </div>
                        <div class="grid gap-3 sm:grid-cols-3 xl:w-[22rem]">
                            <form action="{{ route('social-worker.notes.status', $note) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="monitoring">
                                <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 ? 'قيد المتابعة' : 'Monitoring' }}</button>
                            </form>
                            <form action="{{ route('social-worker.notes.status', $note) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="resolved">
                                <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 ? 'إغلاق' : 'Resolve' }}</button>
                            </form>
                            <form action="{{ route('social-worker.notes.share-parent', $note) }}" method="POST">
                                @csrf
                                <button type="submit" class="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-2xl bg-sky-600 px-4 py-3 text-xs font-black text-white"><i class="fa-solid fa-paper-plane"></i>{{ $isArabic ? 'مشاركة' : 'Share' }}</button>
                            </form>
                        </div>
                    </div>
                </article>
            @endforeach
@if($notes->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 social notes yet.' }}</div>
            @endif
        </div>
        @if(method_exists($notes, 'links'))
            <div class="border-t border-zinc-200 px-6 py-4 dark:border-zinc-800">{{ $notes->links() }}</div>
        @endif
    </section>
</div>
@endsection