@extends('layouts.main_dashboard.app')

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

@section('title', $isTeacherPortal ? ($isArabic ? 'إنشاء إشعار' : 'Create Notification')
@section('page_heading', $isTeacherPortal ? ($isArabic ? 'إنشاء إشعار' : 'Create Notification') : __('dashboard.Add New Notification'))
@section('page_subtitle', $isArabic ? 'حدّد النطاق الأكاديمي، اختر الطلاب، ثم حرّر عنوان الرسالة ومحتواها من واجهة أوضح.' : 'Set the academic scope, choose the students, then write the notification title and body from a clearer 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 ? 'بناء الرسالة قبل الإرسال' : 'Build the message before sending' }}</h2>
                <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'قسّم العمل إلى ثلاث خطوات: اختر النطاق، حدّد المستلمين، ثم اكتب الرسالة النهائية.' : 'Split the task into three steps: select the scope, choose recipients, then write the final message.' }}</p>
            </div>

            <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>
    </section>

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

        <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 ? 'تحديد النطاق الأكاديمي' : '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 name="year_id" 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" required>
                            <option value="">{{ __('dashboard.Select Year') }}</option>
                            @foreach($years as $year)
                                <option value="{{ $year->id }}" @selected(old('year_id', $currentYear->id ?? null) == $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 name="term_id" 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" required data-old-value="{{ old('term_id', $currentTerm->id ?? '') }}">
                            <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 name="stage_id" 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" required>
                            <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 name="grade_id" 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" required>
                            <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 name="school_class_id" 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" required>
                            <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"></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 ? 'صياغة الرسالة' : 'Write the message' }}</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') }}" 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') }}</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 ? 'ملخص العمل' : 'Workflow summary' }}</p>
                <h3 class="mt-1 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'قبل الإرسال' : 'Before sending' }}</h3>
                <ul class="mt-4 space-y-3 text-sm leading-7 text-surface-500 dark:text-surface-400">
                    <li>{{ $isArabic ? 'اختر السنة والفصل والصف قبل البحث عن الطلاب.' : 'Choose year, term, and class before loading students.' }}</li>
                    <li>{{ $isArabic ? 'استخدم البحث لتصفية قائمة الطلاب بسرعة.' : 'Use search to filter the student list quickly.' }}</li>
                    <li>{{ $isArabic ? 'اكتب عنوانًا مختصرًا ومحتوى واضحًا قابلًا للقراءة على الجوال.' : 'Write a short title and a mobile-friendly message body.' }}</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 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() {
            const yearId = $(this).val();
            const termSelect = $('#term-select');
            const oldValue = termSelect.attr('data-old-value');

            if (yearId) {
                $.get(basePrefix + '/years/' + yearId + '/terms', function(data) {
                    populateDropdown('#term-select', data, '{{ __("dashboard.Select Term") }}');
                    if (oldValue) {
                        termSelect.val(oldValue).trigger('change');
                        termSelect.attr('data-old-value', '');
                    }
                    $('#stage-select, #grade-select, #school-class-select').empty();
                    $('#stage-select').append('<option value="">{{ __("dashboard.Select Stage") }}</option>');
                    $('#grade-select').append('<option value="">{{ __("dashboard.Select Grade") }}</option>');
                    $('#school-class-select').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) {
                            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}">
                                    <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));
            });
        });

        if ($('#year-select').val()) {
            $('#year-select').trigger('change');
        }
    });
</script>
@endsection