@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
@endsection
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3>Apps Promo New</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li><a href="{{ route('dashboard') }}">Home</a></li>
                        <li><a href="{{ route('apps_promo') }}">Apps promo</a></li>
                        <li class="active">New</li>
                    </ol>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>New apps promo</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <form id="form" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Title :</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="title" placeholder="Promo title" autocomplete="off" autofocus class="form-control">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Image (JPG 640x291) :</label>
                                    <div class="col-sm-10">
                                        <input type="file" name="image" class="form-control" >
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Content :</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control input-content" name="content" placeholder="Promo content"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Status :</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="status">
                                            <option value="">Select status</option>
                                            <option value="{{ \App\Models\Apps_promo_model::STATUS_ACTIVE }}">Active</option>
                                            <option value="{{ \App\Models\Apps_promo_model::STATUS_NONACTIVE }}">Non-active</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <div class="loading hidden"><i class="fa fa fa-spinner fa-pulse"></i></div>
                                        <div class="submit">
                                            <button type="submit" class="btn btn-default"><i class="fa fa-save" aria-hidden="true"></i> Save</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section('scripts')
<!-- <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script> -->
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script type="text/javascript">
    function save() {
        $("#form").find('.loading').removeClass('hidden');
        $("#form").find('.submit').addClass('hidden');

        var form = $("#form")[0];
        var formData = new FormData(form);

        $.ajax({
            url: 'new/save',
            method: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: formData,
            type : 'POST',
            contentType: false,
            processData: false,
            success: function(response) {
                alert("Data saved");
                location.href = '/';
            },
            error: function(response) {
                var data = response.responseJSON;
                alert(data.error);
                $("#form").find('.loading').addClass('hidden');
                $("#form").find('.submit').removeClass('hidden');
            }
        });
        return false;
    }

    // $(document).ready(function() {
    //     $(".input-content").summernote({
    //         "height":300,
    //         "toolbar":[
    //             ['style', ['bold', 'italic', 'underline', 'clear']],
    //             ['insert', ['link']],
    //             ['misc', ['fullscreen', 'codeview', 'undo', 'redo', 'help']]
    //         ]
    //     });
    //     $("#form").on("submit", save);
    // });

    $(document).ready(function() {
        ClassicEditor
            .create(document.querySelector('.input-content'), {
                toolbar: ['bold', 'italic', 'underline', '|', 'undo', 'redo'],
            })
            .then(newEditor => {
                editor = newEditor;
            const editableElement = editor.ui.view.editable.element;
            
            editableElement.style.height = '300px';  
            editableElement.style.maxHeight = '300px'; 
            editableElement.style.overflowY = 'auto';

            editor.ui.view.editable.element.addEventListener('input', () => {
                editableElement.style.height = '300px';
                editableElement.style.maxHeight = '300px';
                editableElement.style.overflowY = 'auto';
            });
            editor.ui.view.editable.element.addEventListener('click', () => {
                editableElement.style.height = '300px';
                editableElement.style.maxHeight = '300px';
                editableElement.style.overflowY = 'auto';
            });
            editor.editing.view.document.on('enter', (event, data) => {
                    editor.execute('shiftEnter');
                    data.preventDefault();
                    event.stop();
                });
            editor.keystrokes.set('Shift+Enter', (keyEvtData, cancel) => {
                    editor.model.change(writer => {
                        const paragraph = writer.createElement('paragraph');
                        editor.model.insertContent(paragraph);
                        writer.setSelection(paragraph, 'in');
                    });
                    cancel();
                });
            })
            .catch(error => {
                console.error('gagal load', error);
            });
        $("#form").on("submit", save);
    });
</script>
@endsection