@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<main>
    <div style="padding: 11px;">
        <div style="padding-bottom: 20px;" class="row">
            <div class="col-md-4">
                <input type="text" class="form-control" data-slug="{!! $staticPage->url !!}" name="title" value="{!! $staticPage->title or '' !!}" placeholder="Page Title"/>
            </div>
            <div>
                <div class="btn btn-success publish-page" data-is-published="0">Save Draft</div>
                <div class="btn btn-primary publish-page" data-is-published="1">Publish Page</div>
                <div class="btn btn-primary preview-page">Preview Page</div>
            </div>
        </div>
        <div>
            <?php $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === 0 ? 'https://' : 'http://';?>
            <?php $url = isset($staticPage->url) ?$protocol.$_SERVER['HTTP_HOST'].'/page/'.$staticPage->url :  $protocol.$_SERVER['HTTP_HOST'].'/page/' ; ?>
            <input type="text" class="form-control" readonly value="{!! $url !!}" data-base-url="{!! $protocol !!}{!! $_SERVER['HTTP_HOST'] !!}/page/" name="url" placeholder="Page URL"/>
        </div>
        <div style="padding-top: 5px;padding-bottom: 5px;"><code>Image functionality won't work</code></div>
        <div id="editor">
            {!! $staticPage->html or '' !!}
        </div>
    </div>
</main>
@include("admin.layouts.footer")
<div class="modal fade" id="preview-page-view" role="dialog">
    <div class="modal-dialog modal-lg" style="max-width: 100% !important;;">
        <div class="modal-content">
            <div class="modal-header" style="display: block;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Preview Page</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script src="/static-page/ckeditor.js"></script>

<script>

    $(".preview-page").click(function(){
        let event = $("#preview-page-view");
        event.modal('show');

        event.find(".modal-body").html($("#editor").html());
    });

    let selectedDom = null;
    $(".publish-page").click(function(){
        var _token = '<?php echo csrf_token(); ?>';
        var page_id = '<?php echo $id; ?>';
        var user_id = '<?php echo \Illuminate\Support\Facades\Auth::user()->id; ?>';
        let title = $("input[name='title']").val();
        let slug = $("input[name='title']").attr('data-slug');
        let is_published = $(this).attr('data-is-published');
        let editor = $(".ck-editor__editable").html();
        if(title.length == 0 || typeof slug === 'undefined' || slug.length == 0){
            alert('Please enter page title');
            return false;
        }

        if(window.confirm('Are you sure?')){
            $(".init-loader").css({display:'block'});
            $.ajax({
                url: "/admin/static-page/publish",
                method: 'POST',
                data: {_token:_token, title:title, html:editor, url:slug, is_published: is_published, user_id: user_id, page_id:page_id}
            }).done(function(response) {
                alert(response.message);
                if(response.status == 'OK'){
                    location.reload();
                }
                $(".init-loader").css({display:'none'});
            });
        }
    });

    $("input[name='title']").keyup(function(){
        let slug = $(this).val().toLowerCase();
        let event = $("input[name='url']");
        let base_url = event.attr('data-base-url');
        slug = slug.replace(/ /g, '-');
        let url = base_url+slug;
        $(this).attr('data-slug',slug);
        event.val(url);
    });

    ClassicEditor
        .create( document.querySelector( '#editor' ), {

        } )
        .then( editor => {
            window.editor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );

    $(document).ready(function () {
        $(".ck-toolbar__items").append('<span class="ck ck-toolbar__separator"></span><div data-hide="0" class="ck ck-dropdown ck-toolbar-dropdown ck-alignment-dropdown"><button class="ck ck-button ck-dropdown__button" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_e5541e21f17ab5036a926227d6362e37a" aria-haspopup="true"><svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20"><path d="M18 3.75a.75.75 0 0 1-.75.75H2.75a.75.75 0 1 1 0-1.5h14.5a.75.75 0 0 1 .75.75zm0 8a.75.75 0 0 1-.75.75H2.75a.75.75 0 1 1 0-1.5h14.5a.75.75 0 0 1 .75.75zm0 4a.75.75 0 0 1-.75.75H7.321a.75.75 0 1 1 0-1.5h9.929a.75.75 0 0 1 .75.75zm0-8a.75.75 0 0 1-.75.75H7.321a.75.75 0 1 1 0-1.5h9.929a.75.75 0 0 1 .75.75z"></path></svg><span class="ck ck-tooltip ck-tooltip_s"><span class="ck ck-tooltip__text">Text alignment</span></span><span class="ck ck-button__label" id="ck-editor__aria-label_e5541e21f17ab5036a926227d6362e37a">Text alignment</span><svg class="ck ck-icon ck-dropdown__arrow" viewBox="0 0 10 10"><path d="M.941 4.523a.75.75 0 1 1 1.06-1.06l3.006 3.005 3.005-3.005a.75.75 0 1 1 1.06 1.06l-3.549 3.55a.75.75 0 0 1-1.168-.136L.941 4.523z"></path></svg></button><div class="ck ck-reset ck-dropdown__panel ck-dropdown__panel_ne ck-dropdown__panel-visible"><div class="ck ck-toolbar ck-toolbar_vertical" style="display: none;" role="toolbar" aria-label="Text alignment toolbar"><div class="ck ck-toolbar__items"><button class="ck ck-button ck-off" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_ef672f450f82c604d4d070abbe0ce0b86" aria-pressed="false"><svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 4c0 .414.336.75.75.75h9.929a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0-8c0 .414.336.75.75.75h9.929a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75z"></path></svg><span class="ck ck-tooltip ck-tooltip_s"><span class="ck ck-tooltip__text">Align left</span></span><span class="ck ck-button__label" id="ck-editor__aria-label_ef672f450f82c604d4d070abbe0ce0b86">Align left</span></button><button class="ck ck-button ck-off" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_e20a8790568f05f5f65d0c3682a70e822" aria-pressed="true"><svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20"><path d="M18 3.75a.75.75 0 0 1-.75.75H2.75a.75.75 0 1 1 0-1.5h14.5a.75.75 0 0 1 .75.75zm0 8a.75.75 0 0 1-.75.75H2.75a.75.75 0 1 1 0-1.5h14.5a.75.75 0 0 1 .75.75zm0 4a.75.75 0 0 1-.75.75H7.321a.75.75 0 1 1 0-1.5h9.929a.75.75 0 0 1 .75.75zm0-8a.75.75 0 0 1-.75.75H7.321a.75.75 0 1 1 0-1.5h9.929a.75.75 0 0 1 .75.75z"></path></svg><span class="ck ck-tooltip ck-tooltip_s"><span class="ck ck-tooltip__text">Align right</span></span><span class="ck ck-button__label" id="ck-editor__aria-label_e20a8790568f05f5f65d0c3682a70e822">Align right</span></button><button class="ck ck-button ck-off" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_e95148261a2e62a8928d4cafc5233ffdc" aria-pressed="false"><svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm2.286 4c0 .414.336.75.75.75h9.928a.75.75 0 1 0 0-1.5H5.036a.75.75 0 0 0-.75.75zm0-8c0 .414.336.75.75.75h9.928a.75.75 0 1 0 0-1.5H5.036a.75.75 0 0 0-.75.75z"></path></svg><span class="ck ck-tooltip ck-tooltip_s"><span class="ck ck-tooltip__text">Align center</span></span><span class="ck ck-button__label" id="ck-editor__aria-label_e95148261a2e62a8928d4cafc5233ffdc">Align center</span></button><button class="ck ck-button ck-off" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_eef39ef27c689a4c71aa5366db71e3df1" aria-pressed="false"><svg class="ck ck-icon ck-button__icon" viewBox="0 0 20 20"><path d="M2 3.75c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0 4c0 .414.336.75.75.75h9.929a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75zm0-8c0 .414.336.75.75.75h14.5a.75.75 0 1 0 0-1.5H2.75a.75.75 0 0 0-.75.75z"></path></svg><span class="ck ck-tooltip ck-tooltip_s"><span class="ck ck-tooltip__text">Justify</span></span><span class="ck ck-button__label" id="ck-editor__aria-label_eef39ef27c689a4c71aa5366db71e3df1">Justify</span></button></div></div></div></div>');
        $(".ck-editor__editable_inline").html($("#editor").html());
    });

    $(document).on('click', '.ck-alignment-dropdown', function(){
        if($(this).attr('data-hide') === "1"){
            $(this).attr('data-hide', 0);
            $(".ck-toolbar_vertical").css({'display':'none'});
        }else{
            $(".ck-toolbar_vertical").css({'display':'block'});
            $(this).attr('data-hide', 1);
        }
    });
    $(document).on('click', '.ck-alignment-dropdown > button.ck-button', function(){
        $(".ck-alignment-dropdown").attr('data-hide', 0);
        $(".ck-toolbar_vertical").css({'display':'none'});
    });

    $(document).on('click', '.ck-toolbar__items > button.ck-button', function(){
        if($(this).find('span.ck-button__label').html() == 'Align center'){
            $(selectedDom).parent().css({'text-align':'center'});
            $(selectedDom).parent().addClass('center');
        }else if($(this).find('span.ck-button__label').html() == 'Align right'){
            $(selectedDom).parent().css({'text-align':'right'});
        }else if($(this).find('span.ck-button__label').html() == 'Align left'){
            $(selectedDom).parent().css({'text-align':'left'});
        }else if($(this).find('span.ck-button__label').html() == 'Justify'){
            $(selectedDom).parent().css({'text-align':'justify'});
        }
    });

    function getSelectionText() {
        if (document.selection)
            return document.selection.createRange().parentElement();
        else
        {
            var selection = window.getSelection();
            if (selection.rangeCount > 0)
                return selection.getRangeAt(0).startContainer.parentNode;
        }
    }

    document.onmouseup = document.onkeyup = document.onselectionchange = function() {
        selectedDom = getSelectionText();
    };

</script>

</body>
</html>