@extends('layouts.main_dashboard.app')

@php
    $routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin';
    $isTeacherPortal = auth()->user()?->usesStaffPortal();
    $isArabic = app()->getLocale() === 'ar';
    $selectedCount = $notification->users->count();
@endphp

@section('title', $isTeacherPortal ? ($isArabic ? 'تعديل الإشعار' : 'Edit Notification')
@section('page_heading', $isTeacherPortal ? ($isArabic ? 'تعديل الإشعار' : 'Edit Notification') : __('dashboard.Edit Notification'))
@section('page_subtitle', $isArabic ? 'حدّث النطاق الأكاديمي أو قائمة الطلاب أو صياغة الرسالة من نفس مساحة العمل.' : 'Update the academic scope, recipient list, or message content from the same workspace.')
@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">
                <p class="text-[11px] font-black uppercase tracking-[0.24em] text-brand-600 dark:text-brand-300">{{ $isTeacherPortal ? ($isArabic ? 'إدارة الإشعارات' : 'Notification Management') : __('dashboard.Notifications') }}</p>
                <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">{{ $isArabic ? 'تحديث الرسالة الحالية' : 'Update the current message' }}</h2>
                <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'راجع المستلمين الحاليين، غيّر النطاق عند الحاجة، ثم عدّل العنوان والمحتوى قبل حفظ النسخة الجديدة.' : 'Review current recipients, change the scope if needed, then update the title and body before saving the new version.' }}</p>
            </div>

            <div class="flex flex-wrap gap-3">
                <a href="{{ route($routePrefix . '.notifications.show', $notification->id) }}" 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-regular fa-eye text-xs"></i>
                    <span>{{ __('dashboard.View') }}</span>
                </a>
                <a href="{{ route($routePrefix . '.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>{{ $isTeacherPortal ? ($isArabic ? 'إدارة الإشعارات' : 'Notification Management') : __('dashboard.View All Notifications') }}</span>
                </a>
            </div>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-3">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المستلمون الحاليون' : 'Current recipients' }}</p>
            <p class="mt-2 text-3xl font-black text-surface-900 dark:text-white">{{ number_format($selectedCount) }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'آخر تحديث' : 'Latest update' }}</p>
            <p class="mt-2 text-lg font-black text-surface-900 dark:text-white">{{ optional($notification->updated_at)->format('Y-m-d') ?? '—' }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-[11px] font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'حالة الإرسال' : 'Delivery state' }}</p>
            <p class="mt-2 text-lg font-black text-surface-900 dark:text-white">{{ $notification->is_draft ? __('dashboard.Draft') : __('dashboard.Sent') }}</p>
        </article>
    </section>

    <form id="edit_notification_form" action="{{ route($routePrefix . '.notifications.update', $notification->id) }}" method="POST" class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
        @csrf
        @method('PUT')

        <section 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="mb-5">
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'الخطوة 1' : 'Step 1' }}</p>
                    <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'إعادة تحديد النطاق الأكاديمي' : 'Re-select the academic scope' }}</h3>
                </div>

                <div class="grid gap-6 lg:grid-cols-2">
                    <div>
                        <label for="year-select" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Year') }}</label>
                        <select id="year-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900">
                            <option value="">{{ __('dashboard.Select Year') }}</option>
                            @foreach($years as $year)
                                <option value="{{ $year->id }}">{{ $year->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="term-select" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Term') }}</label>
                        <select id="term-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900">
                            <option value="">{{ __('dashboard.Select Term') }}</option>
                        </select>
                    </div>
                    <div>
                        <label for="stage-select" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Stage') }}</label>
                        <select id="stage-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900">
                            <option value="">{{ __('dashboard.Select Stage') }}</option>
                        </select>
                    </div>
                    <div>
                        <label for="grade-select" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Grade') }}</label>
                        <select id="grade-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900">
                            <option value="">{{ __('dashboard.Select Grade') }}</option>
                        </select>
                    </div>
                    <div class="lg:col-span-2">
                        <label for="school-class-select" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.School Class') }}</label>
                        <select id="school-class-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900">
                            <option value="">{{ __('dashboard.Select School Class') }}</option>
                        </select>
                    </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">
                <div class="mb-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'الخطوة 2' : 'Step 2' }}</p>
                        <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Users') }}</h3>
                    </div>
                    <label class="inline-flex items-center gap-3 text-sm font-bold text-surface-700 dark:text-surface-200">
                        <input class="h-4 w-4 rounded border-surface-300 text-brand-600 focus:ring-brand-500" type="checkbox" id="select-all-students">
                        <span>{{ __('dashboard.Select All Students') }}</span>
                    </label>
                </div>

                <div class="mt-4">
                    <input type="text" id="student-search" placeholder="{{ __('dashboard.Search for a student...') }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900">
                </div>

                <div id="student-select-list" class="mt-5 max-h-80 space-y-3 overflow-y-auto rounded-2xl border border-dashed border-surface-200 p-4 dark:border-surface-700">
                    @foreach($notification->users as $user)
                        <label class="flex items-center gap-3 rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-800/30 dark:text-surface-200">
                            <input class="student-checkbox h-4 w-4 rounded border-surface-300 text-brand-600 focus:ring-brand-500" type="checkbox" name="users[]" value="{{ $user->id }}" id="student-{{ $user->id }}" checked>
                            <span>{{ $user->first_name }} {{ $user->middle_name ?? '' }} {{ $user->last_name }}</span>
                        </label>
                    @endforeach
                </div>

                @error('users')
                    <p class="mt-2 text-sm font-medium text-red-600">{{ $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 class="mb-5">
                    <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'الخطوة 3' : 'Step 3' }}</p>
                    <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'تحديث صياغة الرسالة' : 'Update the message copy' }}</h3>
                </div>

                <div class="grid gap-6">
                    <div>
                        <label for="title" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Title') }}</label>
                        <input id="title" type="text" name="title" value="{{ old('title', $notification->title) }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900" required>
                    </div>
                    <div>
                        <label for="body" class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Body') }}</label>
                        <textarea id="body" name="body" rows="6" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-900" required>{{ old('body', $notification->body) }}</textarea>
                    </div>
                </div>
            </section>
        </section>

        <aside 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">
                <p class="text-[11px] font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'ملخص التعديل' : 'Edit summary' }}</p>
                <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'قبل الحفظ' : 'Before saving' }}</h3>
                <ul class="mt-4 space-y-3 text-sm leading-7 text-surface-500 dark:text-surface-400">
                    <li>{{ $isArabic ? 'إذا غيّرت الصف أو الشعبة فراجع قائمة الطلاب كاملة قبل الحفظ.' : 'If you change the class scope, review the full student list before saving.' }}</li>
                    <li>{{ $isArabic ? 'الطلاب المحددون حاليًا سيبقون ضمن الرسالة بعد التحديث.' : 'Currently checked students remain attached to the notification after update.' }}</li>
                    <li>{{ $isArabic ? 'حافظ على عنوان مباشر ومحتوى مختصر يسهل قراءته من الهاتف.' : 'Keep the title direct and the body concise enough for phone reading.' }}</li>
                </ul>
            </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="flex flex-wrap justify-end gap-3">
                    <a href="{{ route($routePrefix . '.notifications.index') }}" class="inline-flex items-center gap-2 rounded-2xl 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>
                    <button type="submit" class="inline-flex items-center gap-2 rounded-2xl 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 text-xs"></i>
                        <span>{{ __('dashboard.Save') }}</span>
                    </button>
                </div>
            </section>
        </aside>
    </form>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        const selectedUserIds = @json($selectedUserIds->all());
        const basePrefix = @json(url($routePrefix));

        function populateDropdown(selector, data, placeholder) {
            const dropdown = $(selector);
            dropdown.empty().append(`<option value="">${placeholder}</option>`);
            $.each(data, function(_, value) {
                dropdown.append($('<option>', { value: value.id, text: value.name }));
            });
        }

        $('#year-select').change(function() {
            if ($(this).val()) {
                $.get(basePrefix + '/years/' + $(this).val() + '/terms', function(data) {
                    populateDropdown('#term-select', data, '{{ __("dashboard.Select Term") }}');
                    $('#stage-select').empty().append('<option value="">{{ __("dashboard.Select Stage") }}</option>');
                    $('#grade-select').empty().append('<option value="">{{ __("dashboard.Select Grade") }}</option>');
                    $('#school-class-select').empty().append('<option value="">{{ __("dashboard.Select School Class") }}</option>');
                    $('#student-select-list').empty();
                });
            }
        });

        $('#term-select').change(function() {
            if ($(this).val()) {
                $.get(basePrefix + '/terms/' + $(this).val() + '/stages', function(data) {
                    populateDropdown('#stage-select', data, '{{ __("dashboard.Select Stage") }}');
                    $('#grade-select').empty().append('<option value="">{{ __("dashboard.Select Grade") }}</option>');
                    $('#school-class-select').empty().append('<option value="">{{ __("dashboard.Select School Class") }}</option>');
                    $('#student-select-list').empty();
                });
            }
        });

        $('#stage-select').change(function() {
            if ($(this).val()) {
                $.get(basePrefix + '/stages/' + $(this).val() + '/grades', function(data) {
                    populateDropdown('#grade-select', data, '{{ __("dashboard.Select Grade") }}');
                    $('#school-class-select').empty().append('<option value="">{{ __("dashboard.Select School Class") }}</option>');
                    $('#student-select-list').empty();
                });
            }
        });

        $('#grade-select').change(function() {
            if ($(this).val()) {
                $.get(basePrefix + '/get-school-classes-by-grade-id/' + $(this).val(), function(data) {
                    populateDropdown('#school-class-select', data, '{{ __("dashboard.Select School Class") }}');
                    $('#student-select-list').empty();
                });
            }
        });

        $('#school-class-select').change(function() {
            const studentList = $('#student-select-list');
            studentList.empty();
            $('#select-all-students').prop('checked', false);

            if ($(this).val()) {
                $.get(basePrefix + '/get-students-by-school-class-id/' + $(this).val(), function(data) {
                    if (data.length === 0) {
                        studentList.html(`<div class="rounded-2xl bg-surface-50 px-4 py-6 text-center text-sm text-surface-500 dark:bg-surface-800/40 dark:text-surface-400">{{ __('dashboard.No students found in this class.') }}</div>`);
                    } else {
                        $.each(data, function(_, value) {
                            const isChecked = selectedUserIds.includes(value.id) ? 'checked' : '';
                            studentList.append(`
                                <label class="flex items-center gap-3 rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-800/30 dark:text-surface-200">
                                    <input class="student-checkbox h-4 w-4 rounded border-surface-300 text-brand-600 focus:ring-brand-500" type="checkbox" name="users[]" value="${value.id}" id="student-${value.id}" ${isChecked}>
                                    <span>${value.first_name} ${value.middle_name || ''} ${value.last_name}</span>
                                </label>
                            `);
                        });
                    }
                });
            }
        });

        $('#select-all-students').on('click', function() {
            $('#student-select-list .student-checkbox').prop('checked', $(this).is(':checked'));
        });

        $('#student-search').on('keyup', function() {
            const searchTerm = $(this).val().toLowerCase();
            $('#student-select-list label').each(function() {
                $(this).toggle($(this).text().toLowerCase().includes(searchTerm));
            });
        });
    });
</script>
@endsection