@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Edit Notification'))
@section('page_heading', __('dashboard.Edit Notification'))

@php
    $isArabic = app()->getLocale() === 'ar';
    $filters = old() ? [
        'stage_ids' => old('stage_ids', []),
        'grade_ids' => old('grade_ids', []),
        'class_ids' => old('class_ids', []),
        'department_ids' => old('department_ids', []),
        'subject_ids' => old('subject_ids', []),
        'user_ids' => old('user_ids', []),
    ] : ($generalNotification->target_filters ?? []);
    $selectedChannels = collect(old('channels', $generalNotification->channels ?? ['in_app']));
    $selectedAudiences = collect(old('audience_types', $generalNotification->audience_types ?? ['students']));
@endphp

@section('skip_page_hero', true)

@section('content')
<div class="space-y-6">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-2">
                <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">
                    {{ __('dashboard.Edit Notification') }}
                </h2>
                <p class="max-w-2xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'حدّث محتوى الإشعار العام أو القنوات أو الفئات المستهدفة قبل إعادة النشر.' : 'Update the broadcast notification content, channels, or target audiences before republishing.' }}
                </p>
            </div>

            <div class="flex flex-wrap gap-3">
                <a href="{{ route('admin.general_notifications.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
                    <i class="fa-solid fa-list text-xs"></i>
                    <span>{{ __('dashboard.General Notifications') }}</span>
                </a>
            </div>
        </div>
    </section>

    <form action="{{ route('admin.general_notifications.update', $generalNotification) }}" method="POST" enctype="multipart/form-data" class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
        @csrf
        @method('PUT')

        <div class="space-y-6">
            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <div class="grid gap-5">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Title') }}</label>
                        <input type="text" name="title" value="{{ old('title', $generalNotification->title) }}" required class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-sky-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Message') }}</label>
                        <textarea name="description" rows="6" required class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-sky-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">{{ old('description', $generalNotification->description) }}</textarea>
                    </div>
                </div>
            </section>

            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'قنوات الإرسال' : 'Delivery Channels' }}</h2>
                <div class="mt-4 grid gap-3 md:grid-cols-2">
                    <label class="flex items-center gap-3 rounded-2xl border border-surface-200 px-4 py-4 text-sm font-bold dark:border-surface-700 dark:text-surface-200">
                        <input type="checkbox" name="channels[]" value="in_app" class="h-4 w-4" {{ $selectedChannels->contains('in_app') ? 'checked' : '' }}>
                        <span>{{ $isArabic ? 'إشعار داخل النظام' : 'In-App Notification' }}</span>
                    </label>
                    <label class="flex items-center gap-3 rounded-2xl border border-surface-200 px-4 py-4 text-sm font-bold dark:border-surface-700 dark:text-surface-200">
                        <input type="checkbox" name="channels[]" value="email" class="h-4 w-4" {{ $selectedChannels->contains('email') ? 'checked' : '' }}>
                        <span>{{ $isArabic ? 'إرسال بريد إلكتروني' : 'Email Delivery' }}</span>
                    </label>
                </div>
            </section>

            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'الفئات المستهدفة' : 'Target Audiences' }}</h2>
                <div class="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                    @foreach([
                        'students' => $isArabic ? 'الطلاب' : 'Students',
                        'teachers' => $isArabic ? 'المدرسون' : 'Teachers',
                        'subject_heads' => $isArabic ? 'رؤساء الأقسام' : 'Subject Heads',
                        'social_workers' => $isArabic ? 'الأخصائيون الاجتماعيون' : 'Social Workers',
                        'health_visitors' => $isArabic ? 'الأخصائيون الصحيون' : 'Health Visitors',
                    ] as $value => $label)
                        <label class="flex items-center gap-3 rounded-2xl border border-surface-200 px-4 py-4 text-sm font-bold dark:border-surface-700 dark:text-surface-200">
                            <input type="checkbox" name="audience_types[]" value="{{ $value }}" class="h-4 w-4" {{ $selectedAudiences->contains($value) ? 'checked' : '' }}>
                            <span>{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
            </section>

            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <div class="mt-5 grid gap-5 lg:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'المراحل' : 'Stages' }}</label>
                        <select name="stage_ids[]" multiple class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            @foreach($stages as $stage)
                                <option value="{{ $stage->id }}" @selected(collect($filters['stage_ids'] ?? [])->contains($stage->id))>{{ $stage->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'الصفوف' : 'Grades' }}</label>
                        <select name="grade_ids[]" multiple class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            @foreach($grades as $grade)
                                <option value="{{ $grade->id }}" @selected(collect($filters['grade_ids'] ?? [])->contains($grade->id))>{{ $grade->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'الفصول' : 'Classes' }}</label>
                        <select name="class_ids[]" multiple class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            @foreach($schoolClasses as $class)
                                <option value="{{ $class->id }}" @selected(collect($filters['class_ids'] ?? [])->contains($class->id))>{{ $class->grade->name ?? '' }} - {{ $class->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'الأقسام' : 'Departments' }}</label>
                        <select name="department_ids[]" multiple class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}" @selected(collect($filters['department_ids'] ?? [])->contains($department->id))>{{ $department->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="lg:col-span-2">
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'المواد' : 'Subjects' }}</label>
                        <select name="subject_ids[]" multiple class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            @foreach($subjects as $subject)
                                <option value="{{ $subject->id }}" @selected(collect($filters['subject_ids'] ?? [])->contains($subject->id))>{{ $subject->name }}{{ $subject->department ? ' - ' . $subject->department->name : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="lg:col-span-2">
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'مستخدمون محددون' : 'Specific Users' }}</label>
                        <select name="user_ids[]" multiple class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            @foreach($users as $user)
                                <option value="{{ $user->id }}" @selected(collect($filters['user_ids'] ?? [])->contains($user->id))>{{ $user->name }} - {{ $user->email }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </section>
        </div>

        <div class="space-y-6">
            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'المرفق الحالي' : 'Current Attachment' }}</h2>
                @if($generalNotification->attachment)
                    <a href="{{ $generalNotification->attachment_url }}" target="_blank" class="mt-4 inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-700 dark:border-surface-700 dark:text-surface-200">
                        <i class="fa-solid {{ $generalNotification->is_image ? 'fa-image' : 'fa-file-pdf' }}"></i>
                        <span>{{ __('dashboard.View') }}</span>
                    </a>
                @endif
                <input type="file" name="attachment" accept="image/*,.pdf" class="mt-4 block w-full rounded-2xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3 text-sm text-surface-600 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-300">
            </section>

            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'ملخص آخر إرسال' : 'Last Delivery Summary' }}</h2>
                <div class="mt-4 space-y-2 text-sm text-surface-600 dark:text-surface-300">
                    <p>{{ $isArabic ? 'المستلمون الحاليون:' : 'Current resolved recipients:' }} {{ data_get($generalNotification->delivery_stats, 'resolved_users', 0) }}</p>
                    <p>{{ $isArabic ? 'داخل النظام:' : 'In-app delivered:' }} {{ data_get($generalNotification->delivery_stats, 'in_app_delivered', 0) }}</p>
                    <p>{{ $isArabic ? 'بريد مرسل:' : 'Emails sent:' }} {{ data_get($generalNotification->delivery_stats, 'email_sent', 0) }}</p>
                    <p>{{ $isArabic ? 'بريد متخطى:' : 'Emails skipped:' }} {{ data_get($generalNotification->delivery_stats, 'email_skipped', 0) }}</p>
                    <p>{{ $isArabic ? 'آخر تحديث:' : 'Last dispatch:' }} {{ $generalNotification->last_dispatched_at?->diffForHumans() ?? ($isArabic ? 'غير متاح' : 'N/A') }}</p>
                </div>
            </section>

            <div class="flex flex-col gap-3">
                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ __('dashboard.Update') }}</span>
                </button>
                <a href="{{ route('admin.general_notifications.index') }}" class="inline-flex items-center justify-center gap-2 rounded-xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:text-surface-200 dark:hover:bg-surface-800">
                    {{ __('dashboard.Cancel') }}
                </a>
            </div>
        </div>
    </form>
</div>
@endsection