@extends('layouts.app')

@section('title', 'Add Announcement')
@section('heading', 'Add Announcement')

@section('content')
@include('announcements.top-submenu')
    <x-card class="max-w-3xl">
        <form action="{{ route('announcements.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6" novalidate data-announcement-form="create">
            @csrf
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700">Title <span class="text-red-500">*</span></label>
                    <input type="text" name="title" value="{{ old('title') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
                    @error('title')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="title" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Status <span class="text-red-500">*</span></label>
                    <select name="is_active" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2" required>
                        <option value="">Select status</option>
                        <option value="1" @selected(old('is_active') === '1')>Active</option>
                        <option value="0" @selected(old('is_active') === '0')>Inactive</option>
                    </select>
                    @error('is_active')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-slate-700">Body</label>
                    <textarea id="announcement-body-editor" name="body" rows="6" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">{{ old('body') }}</textarea>
                    @error('body')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="body" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-slate-700">Files / Images</label>
                    <input
                        type="file"
                        name="attachments[]"
                        multiple
                        class="mt-1 block w-full text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200"
                        accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip"
                    >
                    @error('attachments')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    @error('attachments.*')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p class="mt-1 text-xs text-slate-500">You can upload up to 10 files. Max 20 MB each.</p>
                </div>
                <div class="sm:col-span-2 flex items-center gap-2">
                    <input type="hidden" name="is_pinned" value="0">
                    <input type="checkbox" name="is_pinned" value="1" id="is_pinned" {{ old('is_pinned') ? 'checked' : '' }} class="rounded border-slate-300">
                    <label for="is_pinned" class="text-sm font-medium text-slate-700">Pin announcement</label>
                </div>
            </div>
            <div class="flex gap-2">
                <x-button type="submit" variant="primary">Save</x-button>
                <a href="{{ route('announcements.index') }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Cancel</a>
            </div>
        </form>
    </x-card>
@endsection

@push('scripts')
    <script src="{{ asset('js/form-validation.js') }}"></script>
    <script src="{{ asset('js/form-text-rules.js') }}"></script>
    <script src="{{ asset('js/announcement-form-validation.js') }}"></script>
    <script src="{{ asset('vendor/ckeditor5/ckeditor.js') }}"></script>
    <style>
        .ck-editor__editable_inline {
            min-height: 360px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const editorElement = document.getElementById('announcement-body-editor');
            if (!editorElement || typeof ClassicEditor === 'undefined') {
                return;
            }

            ClassicEditor.create(editorElement, {
                toolbar: [
                    'heading', '|',
                    'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', '|',
                    'bold', 'italic', 'underline', 'strikethrough', 'removeFormat', '|',
                    'alignment', '|',
                    'bulletedList', 'numberedList', '|',
                    'outdent', 'indent', '|',
                    'blockQuote', 'insertTable', 'horizontalLine', '|',
                    'undo', 'redo'
                ],
                table: {
                    contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
                }
            }).then(function (editor) {
                window.kiyoAnnouncementEditor = editor;
            }).catch((error) => {
                console.error('Announcement editor init failed:', error);
            });
        });
    </script>
@endpush