@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="row g-4">
                {{-- Header Section --}}
                <div class="col-12">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
                        <div>
                            <h2 class="dashTitle mb-1">
                                {{ isset($announcement) ? 'Edit Announcement' : 'Create New Announcement' }}
                            </h2>
                            <p class="dashText mb-0">
                                Compose your message, target your audience, and manage publication settings.
                            </p>
                        </div>
                        <a href="{{ route('announcements.index') }}" class="btn-back">
                            <iconify-icon icon="ion:arrow-back-outline"></iconify-icon>
                            <span>Back to Announcements</span>
                        </a>
                    </div>
                </div>

                <div class="col-12">
                    <form
                        action="{{ isset($announcement) ? route('announcements.update', $announcement->id) : route('announcements.store') }}"
                        method="POST" enctype="multipart/form-data" id="announcementForm" class="announcement-form">
                        @csrf
                        @if (isset($announcement))
                            @method('PUT')
                        @endif

                        <div class="row g-4">
                            {{-- Main Content Column --}}
                            <div class="col-lg-8">
                                <div class="glass-card mb-4 animate-in-up">
                                    <div class="card-header-premium">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="icon-box-sm">
                                                <iconify-icon icon="mdi:text-box-outline"></iconify-icon>
                                            </div>
                                            <h5 class="m-0">Announcement Content</h5>
                                        </div>
                                    </div>
                                    <div class="card-body-premium">
                                        <div class="form-group mb-4">
                                            <label for="title" class="premium-label">
                                                Title <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-modern-wrapper">
                                                <input type="text" name="title" id="title"
                                                    class="input-modern @error('title') is-invalid @enderror"
                                                    value="{{ old('title', isset($announcement) ? $announcement->title : '') }}"
                                                    required placeholder="e.g., Monthly Performance Review Update">
                                                <div class="input-focus-line"></div>
                                            </div>
                                            @error('title')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-0">
                                            <label class="premium-label">
                                                Message <span class="text-danger">*</span>
                                            </label>
                                            <div class="quill-premium-wrapper @error('message') quill-invalid @enderror">
                                                <div id="quill-editor">
                                                    {!! old('message', isset($announcement) ? $announcement->message : '') !!}
                                                </div>
                                            </div>
                                            <textarea name="message" id="message-textarea" class="d-none">{{ old('message', isset($announcement) ? $announcement->message : '') }}</textarea>
                                            @error('message')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="glass-card animate-in-up" style="animation-delay: 0.1s;">
                                    <div class="card-header-premium">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="icon-box-sm">
                                                <iconify-icon icon="mdi:account-group-outline"></iconify-icon>
                                            </div>
                                            <h5 class="m-0">Audience & Targeting</h5>
                                        </div>
                                    </div>

                                    <div class="card-body-premium">
                                        <label class="premium-label mb-3">Privacy & Visibility</label>

                                        <div class="visibility-premium-grid mb-4">
                                            <label
                                                class="visibility-premium-option {{ old('visibility', isset($announcement) ? $announcement->visibility : 'public') === 'private' ? 'active' : '' }}"
                                                for="visibilityPrivate">
                                                <input type="radio" name="visibility" id="visibilityPrivate"
                                                    value="private" class="d-none"
                                                    {{ old('visibility', isset($announcement) ? $announcement->visibility : 'public') === 'private' ? 'checked' : '' }}>

                                                <div class="option-icon">
                                                    <iconify-icon icon="mdi:lock"></iconify-icon>
                                                </div>

                                                <div class="option-content">
                                                    <span class="option-title">Private</span>
                                                    <span class="option-desc">Limited to your department</span>
                                                </div>

                                                <div class="option-check">
                                                    <iconify-icon icon="mdi:check-circle"></iconify-icon>
                                                </div>
                                            </label>

                                            <label
                                                class="visibility-premium-option {{ old('visibility', isset($announcement) ? $announcement->visibility : 'public') === 'public' ? 'active' : '' }}"
                                                for="visibilityPublic">
                                                <input type="radio" name="visibility" id="visibilityPublic" value="public"
                                                    class="d-none"
                                                    {{ old('visibility', isset($announcement) ? $announcement->visibility : 'public') === 'public' ? 'checked' : '' }}>

                                                <div class="option-icon">
                                                    <iconify-icon icon="mdi:earth"></iconify-icon>
                                                </div>

                                                <div class="option-content">
                                                    <span class="option-title">Public</span>
                                                    <span class="option-desc">Target specific audiences</span>
                                                </div>

                                                <div class="option-check">
                                                    <iconify-icon icon="mdi:check-circle"></iconify-icon>
                                                </div>
                                            </label>
                                        </div>

                                        <div id="publicOptions" class="targeting-settings" style="display: none;">

                                            {{-- Students Only --}}
                                            <div class="notify-all-box mb-4">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="d-flex align-items-center gap-3">
                                                        <div class="notify-icon">
                                                            <iconify-icon icon="mdi:school-outline"></iconify-icon>
                                                        </div>

                                                        <div>
                                                            <span class="fw-bold d-block">Students Only</span>
                                                            <small class="text-muted">Show this announcement only to
                                                                students</small>
                                                        </div>
                                                    </div>

                                                    <div class="form-check form-switch custom-switch-lg">
                                                        <input type="hidden" name="students_only" value="0">

                                                        <input class="form-check-input" type="checkbox"
                                                            name="students_only" id="studentsOnlySwitch" value="1"
                                                            {{ old('students_only', isset($announcement) ? $announcement->students_only : false) ? 'checked' : '' }}>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Everything below Students Only --}}
                                            <div id="belowStudentsOnlyOptions">

                                                {{-- Global Broadcast --}}
                                                <div class="notify-all-box mb-4">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="d-flex align-items-center gap-3">
                                                            <div class="notify-icon">
                                                                <iconify-icon icon="mdi:bullhorn-variant"></iconify-icon>
                                                            </div>

                                                            <div>
                                                                <span class="fw-bold d-block">Global Broadcast</span>
                                                                <small class="text-muted">Notify every employee in the
                                                                    organization</small>
                                                            </div>
                                                        </div>

                                                        <div class="form-check form-switch custom-switch-lg">
                                                            <input type="hidden" name="notify_all" id="notifyAllHidden"
                                                                value="0">

                                                            <input class="form-check-input" type="checkbox"
                                                                name="notify_all" id="notifyAllSwitch" value="1"
                                                                {{ old('notify_all', isset($announcement) ? $announcement->notify_all : false) ? 'checked' : '' }}>
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Departments + Staffs --}}
                                                <div id="specificTargeting" class="row g-3" style="display: none;">
                                                    <div class="col-md-6">
                                                        <label class="premium-label">Select Departments</label>

                                                        <div class="select2-modern-wrapper">
                                                            <select name="departments[]" id="departmentSelect"
                                                                class="general-select" multiple
                                                                data-placeholder="Choose departments...">
                                                                @foreach ($departments as $department)
                                                                    <option value="{{ $department->id }}"
                                                                        {{ in_array($department->id, old('departments', isset($announcement) ? $announcement->departments->pluck('id')->toArray() : [])) ? 'selected' : '' }}>
                                                                        {{ $department->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <label class="premium-label">Select Specific Employees</label>

                                                        <div class="select2-modern-wrapper">
                                                            <select name="staffs[]" id="staffSelect"
                                                                class="general-select" multiple
                                                                data-placeholder="Choose employees...">
                                                                @if (isset($announcement))
                                                                    @foreach ($staffs as $staff)
                                                                        <option value="{{ $staff->id }}"
                                                                            {{ in_array($staff->id, old('staffs', $announcement->individualRecipients->pluck('id')->toArray())) ? 'selected' : '' }}>
                                                                            {{ $staff->first_name }}
                                                                            {{ $staff->last_name }}
                                                                        </option>
                                                                    @endforeach
                                                                @else
                                                                    @foreach ($staffs as $staff)
                                                                        <option value="{{ $staff->id }}"
                                                                            {{ in_array($staff->id, old('staffs', [])) ? 'selected' : '' }}>
                                                                            {{ $staff->first_name }}
                                                                            {{ $staff->last_name }}
                                                                        </option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Sidebar Settings Column --}}
                            <div class="col-lg-4">
                                <div class="glass-card mb-4 animate-in-up" style="animation-delay: 0.2s;">
                                    <div class="card-header-premium">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="icon-box-sm">
                                                <iconify-icon icon="mdi:cog-outline"></iconify-icon>
                                            </div>
                                            <h5 class="m-0">Settings & Meta</h5>
                                        </div>
                                    </div>
                                    <div class="card-body-premium">
                                        <div class="form-group mb-4">
                                            <label for="category" class="premium-label">Category</label>
                                            <div class="input-modern-wrapper">
                                                <input type="text" name="category" id="category"
                                                    class="input-modern"
                                                    value="{{ old('category', isset($announcement) ? $announcement->category : '') }}"
                                                    placeholder="e.g., General, HR, IT">
                                                <div class="input-focus-line"></div>
                                            </div>
                                        </div>

                                        <div class="form-group mb-4">
                                            <label for="expiry_date" class="premium-label">Expiry Date</label>
                                            <div class="input-modern-wrapper">
                                                <input type="date" name="expiry_date" id="expiry_date"
                                                    class="input-modern"
                                                    value="{{ old('expiry_date', isset($announcement) ? $announcement->expiry_date : '') }}"
                                                    min="{{ date('Y-m-d') }}">
                                                <div class="input-focus-line"></div>
                                            </div>
                                            <small class="text-muted">Announcement will be hidden after this date</small>
                                        </div>

                                        <div class="form-group mb-0">
                                            <label for="location" class="premium-label">Target Location</label>
                                            <div class="input-modern-wrapper">
                                                <input type="text" name="location" id="location"
                                                    class="input-modern"
                                                    value="{{ old('location', isset($announcement) ? $announcement->location : '') }}"
                                                    placeholder="All Branches, Main Office...">
                                                <div class="input-focus-line"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="glass-card mb-4 animate-in-up" style="animation-delay: 0.3s;">
                                    <div class="card-header-premium">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="icon-box-sm">
                                                <iconify-icon icon="mdi:paperclip"></iconify-icon>
                                            </div>
                                            <h5 class="m-0">Attachments</h5>
                                        </div>
                                    </div>
                                    <div class="card-body-premium">
                                        <div class="file-upload-premium">
                                            <input type="file" name="attachments[]" id="attachments" multiple
                                                class="d-none"
                                                accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png,.gif">
                                            <label for="attachments" class="upload-zone" id="dropZone">
                                                <iconify-icon icon="mdi:cloud-upload-outline"
                                                    class="upload-icon"></iconify-icon>
                                                <span class="upload-title">Drop files or click to upload</span>
                                                <span class="upload-sub">PDF, Word, Images (Max 10MB)</span>
                                            </label>
                                        </div>

                                        <div id="fileList" class="mt-3"></div>

                                        @if (isset($announcement) && $announcement->attachments->count() > 0)
                                            <div class="existing-files mt-4">
                                                <span class="fw-bold d-block mb-2 text-sm">Current Attachments</span>
                                                @foreach ($announcement->attachments as $attachment)
                                                    <div class="file-item-premium">
                                                        <div class="d-flex align-items-center gap-2 overflow-hidden">
                                                            <iconify-icon icon="mdi:file-document-outline"
                                                                class="text-primary"></iconify-icon>
                                                            <span
                                                                class="text-truncate">{{ $attachment->original_name }}</span>
                                                        </div>
                                                        <a href="{{ asset($attachment->file_path) }}" target="_blank"
                                                            class="btn-icon-sm">
                                                            <iconify-icon icon="mdi:eye-outline"></iconify-icon>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- Actions --}}
                                <div class="actions-premium animate-in-up" style="animation-delay: 0.4s;">
                                    <button type="submit" name="status" value="draft"
                                        class="btn-premium btn-premium--secondary w-100 mb-2">
                                        <iconify-icon icon="mdi:content-save-outline"></iconify-icon>
                                        <span>Save as Draft</span>
                                    </button>
                                    <button type="submit" name="status" value="published"
                                        class="btn-premium btn-premium--primary w-100">
                                        <iconify-icon icon="mdi:send-outline"></iconify-icon>
                                        <span>Publish Announcement</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        :root {
            --premium-primary: #111827;
            --premium-secondary: #4b5563;
            --premium-accent: #3b82f6;
            --premium-bg: #f3f4f6;
            --premium-card-bg: #ffffff;
            --premium-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --premium-border: #e5e7eb;
        }

        .animate-in-up {
            animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .glass-card {
            background: var(--premium-card-bg);
            border-radius: 20px;
            border: 1px solid var(--premium-border);
            box-shadow: var(--premium-shadow);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .glass-card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .card-header-premium {
            padding: 1.25rem 1.5rem;
            background: linear-gradient(to right, #f9fafb, #ffffff);
            border-bottom: 1px solid var(--premium-border);
        }

        .card-header-premium h5 {
            font-weight: 700;
            color: var(--premium-primary);
            font-size: 1rem !important;
        }

        .card-body-premium {
            padding: 1.5rem;
        }

        .icon-box-sm {
            width: 32px;
            height: 32px;
            background: #f3f4f6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--premium-primary);
            font-size: 1.2rem;
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            background: #ffffff;
            border: 1px solid var(--premium-border);
            border-radius: 12px;
            color: var(--premium-secondary);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s;
        }

        .btn-back:hover {
            background: #f9fafb;
            color: var(--premium-primary);
            transform: translateX(-5px);
        }

        .premium-label {
            display: block;
            font-weight: 600;
            color: var(--premium-primary);
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .input-modern-wrapper {
            position: relative;
        }

        .input-modern {
            width: 100%;
            padding: 0.75rem 1rem;
            background: #f9fafb;
            border: 1px solid var(--premium-border);
            border-radius: 12px;
            transition: all 0.3s;
            font-size: 0.95rem;
        }

        .input-modern:focus {
            outline: none;
            background: #ffffff;
            border-color: var(--premium-accent);
        }

        .input-focus-line {
            position: absolute;
            bottom: 0;
            left: 50%;
            height: 2px;
            width: 0;
            background: var(--premium-accent);
            transition: all 0.3s;
            transform: translateX(-50%);
        }

        .input-modern:focus+.input-focus-line {
            width: 60%;
        }

        /* Quill Premium Styling */
        .quill-premium-wrapper {
            border: 1px solid var(--premium-border);
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
        }

        .quill-invalid {
            border-color: #ef4444;
        }

        #quill-editor {
            height: 180px;
        }

        .ql-editor {
            min-height: 180px !important;
        }

        .ql-toolbar.ql-snow {
            border: none;
            border-bottom: 1px solid #f3f4f6;
            background: #f9fafb;
            padding: 0.75rem !important;
        }

        .ql-container.ql-snow {
            border: none;
            height: calc(100% - 42px);
        }

        /* Visibility Premium Grid */
        .visibility-premium-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .visibility-premium-option {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.5rem;
            background: #ffffff;
            border: 2px solid #f3f4f6;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .visibility-premium-option:hover {
            border-color: #e5e7eb;
            background: #f9fafb;
            transform: translateY(-2px);
        }

        .visibility-premium-option.active {
            border-color: var(--premium-accent);
            background: #eff6ff;
        }

        .option-icon {
            font-size: 1.75rem;
            color: var(--premium-secondary);
            margin-bottom: 0.75rem;
            transition: all 0.3s;
        }

        .visibility-premium-option.active .option-icon {
            color: var(--premium-accent);
            transform: scale(1.1);
        }

        .option-title {
            display: block;
            font-weight: 700;
            color: var(--premium-primary);
            margin-bottom: 0.25rem;
        }

        .option-desc {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .option-check {
            position: absolute;
            top: 10px;
            right: 10px;
            color: var(--premium-accent);
            font-size: 1.25rem;
            opacity: 0;
            transition: 0.3s;
        }

        .visibility-premium-option.active .option-check {
            opacity: 1;
        }

        /* Custom Switch */
        .custom-switch-lg .form-check-input {
            width: 3rem;
            height: 1.5rem;
            cursor: pointer;
        }

        .notify-all-box {
            background: #f8fafc;
            border: 1px dashed var(--premium-border);
            border-radius: 16px;
            padding: 1rem;
        }

        .notify-icon {
            width: 44px;
            height: 44px;
            background: #e0f2fe;
            color: #0369a1;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
        }

        /* File Upload Zone */
        .upload-zone {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
            background: #f9fafb;
            border: 2px dashed var(--premium-border);
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .upload-zone:hover,
        .upload-zone.dragover {
            border-color: var(--premium-accent);
            background: #eff6ff;
        }

        .upload-icon {
            font-size: 2.5rem;
            color: var(--premium-secondary);
            margin-bottom: 1rem;
        }

        .upload-title {
            font-weight: 700;
            color: var(--premium-primary);
            margin-bottom: 0.25rem;
        }

        .upload-sub {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .file-item-premium {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #ffffff;
            border: 1px solid var(--premium-border);
            border-radius: 12px;
            padding: 0.6rem 1rem;
            margin-bottom: 0.5rem;
            font-size: 0.85rem;
        }

        .btn-icon-sm {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            color: var(--premium-secondary);
            border-radius: 6px;
            transition: all 0.2s;
            text-decoration: none;
        }

        .btn-icon-sm:hover {
            background: #e5e7eb;
            color: var(--premium-primary);
        }

        /* Premium Buttons */
        .btn-premium {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 0.9rem 1.5rem;
            border-radius: 14px;
            font-weight: 700;
            transition: all 0.3s;
            border: none;
        }

        .btn-premium--primary {
            background: var(--premium-primary);
            color: #ffffff;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-premium--primary:hover {
            background: #000000;
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .btn-premium--secondary {
            background: #ffffff;
            color: var(--premium-primary);
            border: 1px solid var(--premium-border);
        }

        .btn-premium--secondary:hover {
            background: #f9fafb;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .visibility-premium-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="{{ asset('assets/js/editor.quill.js') }}"></script>
    <script>
        $(document).ready(function() {
            var quill = new Quill('#quill-editor', {
                modules: {
                    toolbar: [
                        [{
                            header: [1, 2, 3, false]
                        }],
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'image', 'link'],
                        [{
                            'list': 'ordered'
                        }, {
                            'list': 'bullet'
                        }],
                        [{
                            'align': []
                        }],
                        ['clean']
                    ]
                },
                placeholder: 'Write something impactful...',
                theme: 'snow'
            });

            $('#announcementForm').on('submit', function(e) {
                var content = quill.root.innerHTML;
                $('#message-textarea').val(content);

                if (quill.getText().trim().length === 0) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Wait!',
                        text: 'Please enter a message for the announcement.',
                        confirmButtonColor: '#111827'
                    });
                    return false;
                }
            });

            $('.general-select').select2({
                width: '100%',
                placeholder: function() {
                    return $(this).data('placeholder') || 'Select';
                },
                allowClear: true,
                dropdownCssClass: 'modern-dropdown'
            });

            function resetSpecificTargeting() {
                $('#departmentSelect').val(null).trigger('change');
                $('#staffSelect').val(null).trigger('change');
            }

            function forceNotifyAllOff() {
                $('#notifyAllHidden').val('0');

                $('#notifyAllSwitch')
                    .prop('checked', false)
                    .prop('disabled', true)
                    .removeAttr('checked');

                $('#specificTargeting').stop(true, true).slideUp(300);

                $('#departmentSelect')
                    .val(null)
                    .prop('disabled', true)
                    .trigger('change');

                $('#staffSelect')
                    .val(null)
                    .prop('disabled', true)
                    .trigger('change');
            }

            function enableNotifyAll() {
                $('#notifyAllHidden').val('0');

                $('#notifyAllSwitch')
                    .prop('disabled', false);
            }

            function updateVisibilityOptions() {
                var selectedVisibility = $('input[name="visibility"]:checked').val();

                if (selectedVisibility === 'public') {
                    $('#publicOptions').stop(true, true).slideDown(400);
                    updateStudentsOnlyOptions();
                } else {
                    $('#publicOptions').stop(true, true).slideUp(400);

                    $('#studentsOnlySwitch')
                        .prop('checked', false)
                        .removeAttr('checked');

                    forceNotifyAllOff();
                }
            }

            function updateStudentsOnlyOptions() {
                if ($('#studentsOnlySwitch').is(':checked')) {
                    $('#belowStudentsOnlyOptions').stop(true, true).slideUp(300);

                    forceNotifyAllOff();

                    return;
                }

                $('#belowStudentsOnlyOptions').stop(true, true).slideDown(300);

                enableNotifyAll();
                updateNotifyAllOptions();
            }

            function updateNotifyAllOptions() {
                if ($('#studentsOnlySwitch').is(':checked')) {
                    forceNotifyAllOff();
                    return;
                }

                if ($('#notifyAllSwitch').is(':checked')) {
                    $('#notifyAllHidden').val('0');

                    $('#specificTargeting').stop(true, true).slideUp(300);

                    $('#departmentSelect')
                        .val(null)
                        .prop('disabled', true)
                        .trigger('change');

                    $('#staffSelect')
                        .val(null)
                        .prop('disabled', true)
                        .trigger('change');
                } else {
                    $('#notifyAllHidden').val('0');

                    $('#specificTargeting').stop(true, true).slideDown(300);

                    $('#departmentSelect')
                        .prop('disabled', false)
                        .trigger('change');

                    $('#staffSelect')
                        .prop('disabled', false)
                        .trigger('change');
                }
            }

            $('input[name="visibility"]').on('change', function() {
                $('.visibility-premium-option').removeClass('active');
                $(this).closest('.visibility-premium-option').addClass('active');

                updateVisibilityOptions();
            });

            $('#studentsOnlySwitch').on('change', function() {
                updateStudentsOnlyOptions();
            });

            $('#notifyAllSwitch').on('change', function() {
                updateNotifyAllOptions();
            });

            updateVisibilityOptions();

            // Drag and Drop Logic
            const dropZone = document.getElementById('dropZone');
            const fileInput = document.getElementById('attachments');
            const fileList = document.getElementById('fileList');

            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, preventDefaults, false);
            });

            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }

            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone.addEventListener(eventName, () => dropZone.classList.add('dragover'), false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, () => dropZone.classList.remove('dragover'), false);
            });

            dropZone.addEventListener('drop', handleDrop, false);

            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                fileInput.files = files;
                updateFileList(files);
            }

            fileInput.addEventListener('change', function() {
                updateFileList(this.files);
            });

            function updateFileList(files) {
                fileList.innerHTML = '';
                if (files.length > 0) {
                    const title = document.createElement('span');
                    title.className = 'fw-bold d-block mb-2 text-sm';
                    title.textContent = 'Selected Files:';
                    fileList.appendChild(title);

                    Array.from(files).forEach(file => {
                        const item = document.createElement('div');
                        item.className = 'file-item-premium animate-in-up';
                        item.innerHTML = `
                            <div class="d-flex align-items-center gap-2 overflow-hidden">
                                <iconify-icon icon="mdi:file-outline" class="text-secondary"></iconify-icon>
                                <span class="text-truncate">${file.name}</span>
                            </div>
                            <span class="text-muted text-xs">${(file.size / 1024 / 1024).toFixed(2)} MB</span>
                        `;
                        fileList.appendChild(item);
                    });
                }
            }

            $('#departmentSelect').on('change', function() {
                const selectedDepartments = $(this).val();

                if (selectedDepartments && selectedDepartments.length > 0) {
                    $.ajax({
                        url: '{{ route('announcements.get-staff-by-departments') }}',
                        method: 'POST',
                        data: {
                            department_ids: selectedDepartments,
                            _token: '{{ csrf_token() }}'
                        },
                        beforeSend: function() {
                            $('#staffSelect').prop('disabled', true);
                        },
                        success: function(response) {
                            updateStaffSelect(response);
                            $('#staffSelect').prop('disabled', false);
                        },
                        error: function(xhr, status, error) {
                            console.error('Error fetching staff data:', error);
                            $('#staffSelect').prop('disabled', false);
                        }
                    });
                } else {
                    $('#staffSelect').empty().trigger('change');
                }
            });

            function updateStaffSelect(staffByDepartment) {
                const staffSelect = $('#staffSelect');
                staffSelect.empty();

                const currentlySelected = @json(old('staffs', isset($announcement) ? $announcement->individualRecipients->pluck('id')->toArray() : []));

                Object.keys(staffByDepartment).forEach(function(departmentId) {
                    const staffList = staffByDepartment[departmentId];

                    if (staffList.length > 0) {
                        const departmentName = staffList[0].department ? staffList[0].department.name :
                            'Department ' + departmentId;
                        const optgroup = $('<optgroup></optgroup>').attr('label', departmentName);

                        staffList.forEach(function(staff) {
                            const isSelected = currentlySelected.includes(staff.id);
                            const option = $('<option></option>')
                                .val(staff.id)
                                .text(staff.first_name + ' ' + staff.last_name)
                                .prop('selected', isSelected);

                            optgroup.append(option);
                        });

                        staffSelect.append(optgroup);
                    }
                });

                staffSelect.trigger('change');
            }

            updateVisibilityOptions();

            const initialDepartments = $('#departmentSelect').val();
            if (initialDepartments && initialDepartments.length > 0) {
                $('#departmentSelect').trigger('change');
            }
        });
    </script>
@endpush