@extends('layouts.main_dashboard.app')

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

@php
    $isArabic = app()->getLocale() === 'ar';
    $oldChannels = collect(old('channels', ['in_app']));
    $oldAudiences = collect(old('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.Create Notification') }}
                </h2>
                <p class="max-w-2xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'أنشئ إشعارًا عامًا جديدًا وحدد القنوات والفئات المستهدفة قبل النشر.' : 'Create a new general notification and choose channels and target audiences before publishing.' }}
                </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.store') }}" method="POST" enctype="multipart/form-data" class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
        @csrf

        <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') }}" 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">
                        @error('title') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                    </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') }}</textarea>
                        @error('description') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                    </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" {{ $oldChannels->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" {{ $oldChannels->contains('email') ? 'checked' : '' }}>
                        <span>{{ $isArabic ? 'إرسال بريد إلكتروني' : 'Email Delivery' }}</span>
                    </label>
                </div>
                @error('channels') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
            </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" {{ $oldAudiences->contains($value) ? 'checked' : '' }}>
                            <span>{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
                @error('audience_types') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
            </section>

            <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
                <div>
                    <p class="text-xs font-black uppercase tracking-[0.28em] text-surface-400">{{ $isArabic ? 'فلترة ذكية' : 'Precision Filters' }}</p>
                    <h2 class="mt-2 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'الوصول الجراحي للمستلمين' : 'Surgical Recipient Precision' }}</h2>
                    <p class="mt-2 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'يمكنك الدمج بين المرحلة والصف والفصل والقسم والمادة أو اختيار مستخدمين محددين بالاسم.' : 'Combine stage, grade, class, department, subject, or pick explicit users by name.' }}</p>
                </div>

                <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(old('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(old('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(old('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(old('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(old('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(old('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 ? 'مرفق اختياري' : 'Optional Attachment' }}</h2>
                <div class="mt-4">
                    <input type="file" name="attachment" accept="image/*,.pdf" class="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">
                    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ __('dashboard.Supported formats: jpg, png, pdf. Max: 10MB') }}</p>
                    @error('attachment') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                </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 ? 'ملاحظات مهمة' : 'Important Rules' }}</h2>
                <ul class="mt-4 space-y-3 text-sm leading-7 text-surface-500 dark:text-surface-400">
                    <li>{{ $isArabic ? 'الإشعار داخل النظام يُرسل لكل المستخدمين المطابقين للاستهداف.' : 'In-app notification is delivered to all resolved recipients.' }}</li>
                    <li>{{ $isArabic ? 'البريد يُرسل فقط للبريد الرئيسي الموثق وأي عناوين إضافية موثقة ومفعلة للإشعارات.' : 'Email is sent only to verified primary emails and verified additional emails enabled for notifications.' }}</li>
                    <li>{{ $isArabic ? 'كلما زادت الفلاتر أصبحت النتيجة أدق.' : 'The more filters you apply, the more precise the audience becomes.' }}</li>
                </ul>
            </section>

            <div class="flex flex-col gap-3">
                {{-- Scheduled At --}}
                <div>
                    <label class="mb-1.5 block text-xs font-bold text-zinc-500 dark:text-zinc-400">
                        <i class="fa-solid fa-clock me-1"></i>
                        {{ app()->getLocale() === 'ar' ? 'جدولة الإرسال (اختياري)' : 'Schedule Send (optional)' }}
                    </label>
                    <input type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at') }}"
                           class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-white">
                    <p class="mt-1 text-xs text-zinc-400">{{ app()->getLocale() === 'ar' ? 'اتركه فارغاً للإرسال الفوري' : 'Leave empty to send immediately' }}</p>
                </div>
                <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-paper-plane"></i>
                    <span>{{ __('dashboard.Publish') }}</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