@extends('layout.base')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h2 class="fw-bold">Form Schedule Info</h2>
            </div>
            <div class="card-toolbar">
                <a href="{{ route('schedule') }}" class="btn btn-outline btn-outline-secondary">
                    Back
                </a>
            </div>
        </div>
        <div class="card-body py-4">
            <form action="{{ $url }}" method="POST" class="row" id="formSchedule" enctype="multipart/form-data">
                @method($method ?? "POST")
                @csrf
                <div class="col-md-4">
                    <div class="card">
                        <div class="form-group p-5 text-center">
                            <img src="{{ isset($schedule) && !empty($schedule->urlCover) ? asset($schedule->urlCover) : '' }}" id="previewImage" class="img-fluid rounded mb-3">
                            <div class="d-flex justify-content-center gap-2 mb-2 mt-3">
                                <input type="file" id="cover_edisi" name="cover_image" class="form-control d-none" accept="image/*">
                                <label for="cover_edisi" class="btn btn-light-warning btn-sm w-100">Unggah Ulang</label>
                                <button type="button" id="removeImage" class="btn btn-light-danger btn-sm w-100">Hapus Sampul</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 row">
                    <div class="fv-row col-md-6 form-group mb-7">
                        <label class="required fw-semibold fs-6 mb-2">Title</label>
                        <input type="text" name="title" value="{{ $schedule->title ?? '' }}" oninput="createSlug(this)" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Title" autocomplete="off">
                    </div>
                    <div class="fv-row col-md-6 form-group mb-7">
                        <label class="required fw-semibold fs-6 mb-2">Slug</label>
                        <input type="text" name="slug" value="{{ $schedule->slug ?? '' }}" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Slug" autocomplete="off">
                    </div>
                    <div class="fv-row col-md-8 form-group mb-7">
                        <label class="required fw-semibold fs-6 mb-2">Location</label>
                        <input type="text" name="location" value="{{ $schedule->location ?? '' }}" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Location" autocomplete="off">
                    </div>
                    <div class="fv-row col-md-4 form-group mb-7">
                        <label class="required fw-semibold fs-6 mb-2">Date</label>
                        <input type="text" name="date" value="{{ $schedule->date ?? '' }}" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Date" autocomplete="off">
                    </div>
                    <div class="fv-row col-md-12 form-group mb-7">
                        <label class="required fw-semibold fs-6 mb-2">Content</label>
                        <textarea type="text" id="descEditor" name="content" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Content" autocomplete="off">{!! $schedule->content ?? '' !!}</textarea>
                    </div>
                    <div class="text-end">
                        <button class="btn btn-primary">
                            Submit
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/35.3.2/super-build/ckeditor.js"></script>
<script>
    const defaultDate = new Date("{{ $schedule->date ?? date('Y-m-d') }}");

    let descEditor,
        blockUI = new KTBlockUI(document.getElementById('kt_content'));

    CKEDITOR.ClassicEditor.create(document.getElementById("descEditor"), {
        toolbar: {
            items: [
                'exportPDF', 'exportWord', '|',
                'findAndReplace', 'selectAll', '|',
                'heading', '|',
                'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript',
                'removeFormat', '|',
                'bulletedList', 'numberedList', 'todoList', '|',
                'outdent', 'indent', '|',
                'undo', 'redo',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                'alignment', '|',
                'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed',

                'specialCharacters', 'horizontalLine', '|',
                'textPartLanguage', '|',
                // 'sourceEditing'
            ],
            shouldNotGroupWhenFull: true
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        },
        heading: {
            options: [{
                    model: 'paragraph',
                    title: 'Paragraph',
                    class: 'ck-heading_paragraph'
                },
                {
                    model: 'heading1',
                    view: 'h1',
                    title: 'Heading 1',
                    class: 'ck-heading_heading1'
                },
                {
                    model: 'heading2',
                    view: 'h2',
                    title: 'Heading 2',
                    class: 'ck-heading_heading2'
                },
                {
                    model: 'heading3',
                    view: 'h3',
                    title: 'Heading 3',
                    class: 'ck-heading_heading3'
                },
                {
                    model: 'heading4',
                    view: 'h4',
                    title: 'Heading 4',
                    class: 'ck-heading_heading4'
                },
                {
                    model: 'heading5',
                    view: 'h5',
                    title: 'Heading 5',
                    class: 'ck-heading_heading5'
                },
                {
                    model: 'heading6',
                    view: 'h6',
                    title: 'Heading 6',
                    class: 'ck-heading_heading6'
                }
            ]
        },
        placeholder: 'Masukan isi konten...',
        fontFamily: {
            options: [
                'default',
                'Arial, Helvetica, sans-serif',
                'Courier New, Courier, monospace',
                'Georgia, serif',
                'Lucida Sans Unicode, Lucida Grande, sans-serif',
                'Tahoma, Geneva, sans-serif',
                'Times New Roman, Times, serif',
                'Trebuchet MS, Helvetica, sans-serif',
                'Verdana, Geneva, sans-serif'
            ],
            supportAllValues: true
        },
        fontSize: {
            options: [10, 12, 14, 'default', 18, 20, 22],
            supportAllValues: true
        },
        htmlSupport: {
            allow: [{
                name: /.*/,
                attributes: true,
                classes: true,
                styles: true
            }]
        },
        htmlEmbed: {
            showPreviews: true
        },
        link: {
            decorators: {
                addTargetToExternalLinks: true,
                defaultProtocol: 'https://',
                toggleDownloadable: {
                    mode: 'manual',
                    label: 'Downloadable',
                    attributes: {
                        download: 'file'
                    }
                }
            }
        },
        mention: {
            feeds: [{
                marker: '@',
                feed: [
                    '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes',
                    '@chocolate', '@cookie', '@cotton', '@cream',
                    '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread',
                    '@gummi', '@ice', '@jelly-o',
                    '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding',
                    '@sesame', '@snaps', '@soufflé',
                    '@sugar', '@sweet', '@topping', '@wafer'
                ],
                minimumCharacters: 1
            }]
        },
        removePlugins: [
            // 'ExportPdf',
            // 'ExportWord',
            'CKBox',
            'CKFinder',
            // 'EasyImage',
            // 'Base64UploadAdapter',
            'RealTimeCollaborativeComments',
            'RealTimeCollaborativeTrackChanges',
            'RealTimeCollaborativeRevisionHistory',
            'PresenceList',
            'Comments',
            'TrackChanges',
            'TrackChangesData',
            'RevisionHistory',
            'Pagination',
            'WProofreader',
            'MathType'
        ]
    }).then(editor => {
        descEditor = editor;
    })

    function createSlug(element) {
        val = element.value.replaceAll(" ", "-").toLowerCase()
        val = val.replaceAll("/", "-")
        val = val.replaceAll("\\", "-")
        return $("[name='slug']").val(val)
    }

    // Preview Gambar
    const coverInput = document.getElementById('cover_edisi');
    const previewImage = document.getElementById('previewImage');
    const removeImage = document.getElementById('removeImage');

    coverInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImage.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    removeImage.addEventListener('click', () => {
        previewImage.src = ""; // Gambar default
        coverInput.value = ''; // Kosongkan input file
    });

    $(function() {
        $("[name='date']").flatpickr({
            enableTime: true,
            dateFormat: "d F Y H:i",
            defaultDate: defaultDate,
            time_24hr: true,
        })

        $(document).on('submit', '#formSchedule', function(e) {
            e.preventDefault()

            blockUI.block()

            url = $(this).attr('action')

            data = new FormData($(this)[0])

            $.ajax({
                type: "post",
                url: url,
                data: data,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function(response) {
                    window.location = "{{ route('schedule') }}"
                },
                error: function(response) {
                    if (response.status == 422 && response.responseJSON != null && response.responseJSON.errors != null)
                        validationServer(validator, "#formSchedule", response.responseJSON.errors)
                    else
                        Swal.fire("Ooops Something Went Wrong", "", "error")
                    
                    blockUI.release()
                }
            });
        })
    })
</script>
@endpush