@push('link_script')
    <script src="{{ asset('assets/js/plugins/choices.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/flatpickr.min.js') }}"></script>
@endpush

@push('script')
    <script src="{{ asset('assets/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('packages/barryvdh/elfinder/js/standalonepopup.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
    @include('admin.apps.partials.ckeditor_js')

    <script>
        CKEDITOR.replace('content', {
            editorplaceholder: 'Mulai menulis disini...',
            height: 300, // Mengatur tinggi editor
            toolbar: option,
            language: 'id' // Set language to Indonesian
        });

        var tags = @json($tags);
        var inputElement = $('#tagId');
        var $tagInput = inputElement.selectize({
            maxItems: 5, // Batasi maksimal 5 item
            persist: false, // Jangan simpan item yang sudah dipilih
            create: true, // Nonaktifkan penambahan item baru
            allowEmptyOption: true,
            plugins: ['remove_button'],
            options: tags.map(tag => ({
                value: tag,
                text: tag
            })),
            render: {
                option: function(data, escape) {
                    return '<div class="option">' + escape(data.text) + '</div>';
                }
            }
        });

        var selectize = $tagInput[0].selectize;
        $(selectize.$control).addClass('form-control');

        var ckategori = new Choices('#categoryId', {
            searchPlaceholderValue: 'Cari nama kategori',
            placeholder: true,
            placeholderValue: 'Pilih kategori',
            removeItemButton: true,
        })

        document.querySelector('#published_at').flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i",
        });

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-danger',
                cancelButton: 'btn btn-secondary'
            },
            buttonsStyling: false
        });

        $('.formSubmit').on('submit', async function(e) {
            e.preventDefault()
            var content = CKEDITOR.instances['content'].getData();
            var formData = new FormData(this)
            formData.append('content', content);
            var formUrl = $(this).attr('action')
            try {
                Swal.showLoading();
                const response = await $.ajax({
                    url: formUrl,
                    type: 'POST',
                    dataType: "JSON",
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formData,
                })
                Swal.close();

                swalWithBootstrapButtons.fire('Sukses!', response.message,
                    'success');
                window.location.href = response.redirect;
            } catch (xhr) {
                Swal.close();
                console.log(xhr.responseJSON?.errors);
                generateErrorResponse(xhr.responseJSON?.errors);
            }
        })

        const fileInput = document.getElementById('image');
        const userImage = document.getElementById('img-post');

        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    userImage.src = e.target.result;
                };

                reader.readAsDataURL(file);
            }
        });

        $('input[name="title"]').on('keyup', function(e) {
            var title = $(this).val();
            $('input[name="keywords"]').val(title);
        })

        CKEDITOR.instances['content'].on('change', function() {
            var content = CKEDITOR.instances['content'].getData();

            var tempDiv = document.createElement("DIV");
            tempDiv.innerHTML = content;

            var allText = tempDiv.textContent || tempDiv.innerText;
            var trimmedText = allText.substring(0, 200); // Ambil hanya 200 karakter pertama

            document.querySelector('textarea[name="description"]').value = trimmedText + "...";
        });

        const uploadTypeCheckbox = document.getElementById('uploadTypeCheckbox');
        const uploadTypeInput = document.getElementById('uploadType');
        const uploadImageContainer = document.getElementById('uploadImageContainer');
        const ImageUrlContainer = document.getElementById('ImageUrlContainer');

        function toggleUploadType() {
            if (uploadTypeCheckbox.checked) {
                uploadImageContainer.style.display = 'block';
                ImageUrlContainer.style.display = 'none';
                uploadTypeInput.value = 'file';
            } else {
                uploadImageContainer.style.display = 'none';
                ImageUrlContainer.style.display = 'block';
                uploadTypeInput.value = 'url';
            }
        };
        toggleUploadType();
        uploadTypeCheckbox.addEventListener('change', toggleUploadType);
    </script>
@endpush