@extends('layouts.main_dashboard.app')
@section('title', app()->getLocale() === 'ar' ? 'الاتصال الخاص' : 'Private Communication')
@section('skip_page_hero', true)
@php($isArabic = app()->getLocale() === 'ar')
@section('content')
<div class="space-y-6">
    <section class="grid gap-6 xl:grid-cols-2">
        <form action="{{ route('social-worker.communication.threads.store') }}" method="POST" class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">@csrf
            <p class="text-xs font-black uppercase tracking-[0.24em] text-sky-600">{{ $isArabic ? 'رسالة خاصة' : 'Private message' }}</p>
            <div class="mt-5 space-y-3">
                <select name="participant_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-950 dark:text-white"><option value="">{{ $isArabic ? 'المستلم' : 'Recipient' }}</option>@foreach($participants as $participant)<option value="{{ $participant->id }}">{{ $participant->name }} ({{ $participant->type }})</option>@endforeach</select>
                <select name="student_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-950 dark:text-white"><option value="">{{ $isArabic ? 'الطالب المرتبط' : 'Related student' }}</option>@foreach($students as $student)<option value="{{ $student->id }}">{{ $student->name }}</option>@endforeach</select>
                <input type="text" name="subject" placeholder="{{ $isArabic ? 'موضوع الرسالة' : 'Subject' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
                <textarea name="message" rows="4" placeholder="{{ $isArabic ? 'نص الرسالة' : 'Message body' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"></textarea>
                <button class="inline-flex w-full items-center justify-center rounded-2xl bg-sky-600 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'بدء المحادثة' : 'Start conversation' }}</button>
            </div>
        </form>
        <form action="{{ route('social-worker.communication.campaigns.store') }}" method="POST" class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">@csrf
            <p class="text-xs font-black uppercase tracking-[0.24em] text-brand-600">{{ $isArabic ? 'حملة توجيهية' : 'Outreach campaign' }}</p>
            <div class="mt-5 space-y-3">
                <input type="text" name="title" placeholder="{{ $isArabic ? 'عنوان الحملة' : 'Campaign 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-950 dark:text-white">
                <textarea name="message" rows="4" placeholder="{{ $isArabic ? 'نص التوجيه أو الإشعار' : 'Outreach message' }}" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"></textarea>
                <div class="grid gap-3 md:grid-cols-2">
                    <select name="audience" class="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"><option value="parent">{{ $isArabic ? 'أولياء الأمور' : 'Parents' }}</option><option value="student">{{ $isArabic ? 'الطلاب' : 'Students' }}</option><option value="both">{{ $isArabic ? 'الطرفان' : 'Both' }}</option></select>
                    <select name="school_class_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-950 dark:text-white"><option value="">{{ $isArabic ? 'كل الفصول' : 'All classes' }}</option>@foreach($students->flatMap->schoolClass as $class)<option value="{{ $class->id }}">{{ $class->name }}</option>@endforeach</select>
                </div>
                <button class="inline-flex w-full items-center justify-center rounded-2xl bg-brand-600 px-4 py-3 text-sm font-black text-white">{{ $isArabic ? 'إرسال الحملة' : 'Send campaign' }}</button>
            </div>
        </form>
    </section>
    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(22rem,0.9fr)]">
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'المحادثات' : 'Conversations' }}</h2>
            <div class="mt-5 space-y-3">
                @if($threads->count() > 0)
                    @foreach($threads as $thread)
                        <a href="{{ route('social-worker.communication.threads.show', $thread) }}" class="block rounded-2xl border border-zinc-200 p-4 transition hover:border-brand-200 dark:border-zinc-800 dark:hover:border-brand-500/30">
                            <p class="text-sm font-black text-zinc-900 dark:text-white">{{ $thread->subject }}</p>
                            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $thread->participantUser?->name ?? '—' }}{{ $thread->student?->name ? ' • ' . $thread->student->name : '' }}</p>
                        </a>
                    @endforeach
                @else
                    <div class="rounded-2xl border border-dashed border-zinc-300 p-6 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">{{ $isArabic ? 'لا توجد محادثات خاصة بعد.' : 'No private conversations yet.' }}</div>
                @endif
            </div>
        </div>
        <div class="rounded-[1.75rem] border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'آخر الحملات' : 'Recent campaigns' }}</h2>
            <div class="mt-5 space-y-3">
                @if($campaigns->count() > 0)
                    @foreach($campaigns as $campaign)
                        <article class="rounded-2xl border border-zinc-200 p-4 dark:border-zinc-800">
                            <p class="text-sm font-black text-zinc-900 dark:text-white">{{ $campaign->title }}</p>
                            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $campaign->audience }} • {{ $campaign->sent_at?->format('Y-m-d') ?? '—' }}</p>
                        </article>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <section class="rounded-[1.75rem] border border-zinc-200 bg-white px-6 py-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">{{ $threads->links('pagination::simple-tailwind') }}</section>
</div>
@endsection