{{-- CKEditor 5 Super Build init, Choices.js for category/subcategory, and "subcategory filters by category" wiring.
     Included from both create.blade.php and edit.blade.php inside @push('scripts'). --}}
<script>
document.addEventListener("DOMContentLoaded", function () {
	// --- CKEditor 5 (Super Build) ---
	// Super Build exposes CKEDITOR.{ClassicEditor, InlineEditor, BalloonEditor, DecoupledEditor}.
	// We use Classic — it auto-syncs back to the underlying <textarea> before form submit.
	//
	// The Super Build bundle includes premium plugins (AI, track changes, comments, pagination,
	// table-of-contents, etc.) that require a paid license key. We disable them via removePlugins
	// and only show free-tier features in the toolbar.
	if (typeof CKEDITOR !== 'undefined' && CKEDITOR.ClassicEditor) {
		CKEDITOR.ClassicEditor
			.create(document.getElementById('article-input'), {
				removePlugins: [
					// Premium / license-gated plugins — exclude so they don't try to initialise
					'AIAssistant', 'OpenAITextAdapter', 'AWSTextAdapter',
					'CKBox', 'CKBoxImageEdit', 'CKFinder', 'CKFinderUploadAdapter',
					'EasyImage', 'CloudServices',
					'Comments', 'CommentsAdapter', 'CommentsArchive', 'CommentsRepository',
					'TrackChanges', 'TrackChangesData', 'TrackChangesEditing',
					'RevisionHistory',
					'RealTimeCollaborativeEditing', 'RealTimeCollaborativeComments',
					'RealTimeCollaborativeTrackChanges', 'RealTimeCollaborativeRevisionHistory',
					'PresenceList',
					'Pagination', 'PaginationEditing', 'PaginationUI',
					'WProofreader',
					'TableOfContents', 'TableOfContentsEditing', 'TableOfContentsUI',
					'FormatPainter',
					'Template', 'TemplateEditing', 'TemplateUI',
					'CaseChange',
					'MultiLevelList',
					'ExportPdf', 'ExportWord', 'ImportWord',
					'PasteFromOfficeEnhanced',
					'SlashCommand',
					'DocumentOutline',
					'MathType',
					'WirisPlugin',
				],
				toolbar: {
					items: [
						'undo', 'redo', '|',
						'heading', 'style', '|',
						'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', '|',
						'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript', '|',
						'removeFormat', 'highlight', '|',
						'link', 'bulletedList', 'numberedList', 'todoList', '|',
						'alignment', 'outdent', 'indent', '|',
						'blockQuote', 'codeBlock', '|',
						'insertTable', 'mediaEmbed', 'horizontalLine', 'specialCharacters', 'pageBreak', '|',
						'sourceEditing', 'htmlEmbed', 'findAndReplace', '|',
						'uploadImage',
					],
					shouldNotGroupWhenFull: true,
				},
				image: {
					toolbar: [
						'imageTextAlternative', 'toggleImageCaption', '|',
						'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|',
						'resizeImage',
					],
					resizeOptions: [
						{ name: 'resizeImage:original', label: 'Original', value: null },
						{ name: 'resizeImage:50', label: '50%', value: '50' },
						{ name: 'resizeImage:75', label: '75%', value: '75' },
					],
				},
				table: {
					contentToolbar: [
						'tableColumn', 'tableRow', 'mergeTableCells',
						'tableProperties', 'tableCellProperties', 'toggleTableCaption',
					],
				},
				language: 'en',
				placeholder: 'Write the article body…',
			})
			.catch(err => {
				console.error('CKEditor 5 init failed:', err);
			});
	} else {
		console.warn('CKEditor 5 Super Build did not load — CDN failure or wrong global. Falling back to plain textarea.');
	}

	// --- Flatpickr datepicker on publish_date ---
	// Shows dd-mm-Y to the user via altInput; the underlying input still submits Y-m-d
	// so the controller's `date` validation rule keeps working unchanged.
	if (typeof flatpickr !== 'undefined') {
		flatpickr('#article-publish-date', {
			dateFormat: 'Y-m-d',
			altInput:   true,
			altFormat:  'd-m-Y',
			allowInput: true,
		});
	}

	// --- Choices.js on category + subcategory ---
	const categorySelect    = document.getElementById('article-category-id');
	const subcategorySelect = document.getElementById('article-subcategory-id');

	let subcategoryChoices = null;
	const originalSubOptions = Array.from(subcategorySelect.options).map(o => ({
		value:    o.value,
		label:    o.textContent,
		category: o.getAttribute('data-category') || '',
	}));

	function rebuildSubcategoryOptions(catId) {
		if (subcategoryChoices) { subcategoryChoices.destroy(); subcategoryChoices = null; }

		const prevValue = subcategorySelect.value;
		subcategorySelect.replaceChildren();

		// Show the "— None —" placeholder always; show real subcategories ONLY when a category is selected.
		originalSubOptions
			.filter(o => o.value === '' || (catId && o.category === String(catId)))
			.forEach(o => {
				const opt = document.createElement('option');
				opt.value = o.value;
				opt.textContent = o.label;
				opt.setAttribute('data-category', o.category);
				if (o.value === prevValue) opt.selected = true;
				subcategorySelect.appendChild(opt);
			});

		// If the previous selection got filtered out, fall back to "— None —".
		if (!Array.from(subcategorySelect.options).some(o => o.value === prevValue)) {
			subcategorySelect.value = '';
		}

		if (typeof Choices !== 'undefined') {
			subcategoryChoices = new Choices(subcategorySelect, {
				searchEnabled: true,
				searchPlaceholderValue: 'Search subcategories…',
				itemSelectText: '',
				shouldSort: false,
			});
		}
	}

	if (typeof Choices !== 'undefined') {
		new Choices(categorySelect, {
			searchEnabled: true,
			searchPlaceholderValue: 'Search categories…',
			itemSelectText: '',
			shouldSort: false,
		});
	}
	rebuildSubcategoryOptions(categorySelect.value);

	categorySelect.addEventListener('change', function () {
		rebuildSubcategoryOptions(this.value);
	});
});
</script>