@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/ws/editor.js"></script>
<script>
    $(document).ready(function() {
        $("#txtEditor").Editor();
    });
</script>
<link href="/ws/editor.css" type="text/css" rel="stylesheet"/>
<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 or '' !!}" name="title" value="{!! $staticPage->title or '' !!}" placeholder="Page Title"/>
            </div>
            <div>
                @if(\Illuminate\Support\Facades\Session::has('Create_Pages_Create|10-1-1') || (isset($staticPage->id) && \Illuminate\Support\Facades\Session::has('Create_Pages_Update|10-1-2')))
                <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>
                @endif
                <div class="btn btn-primary preview-page">Preview Page</div>
            </div>
        </div>
        <div style="padding: 5px;" class="row">
            <div class="col-md-4">
                <input type="text" class="form-control" name="meta_desc" value='<?php echo isset($meta_desc) ? str_replace("'", "&#39;", $meta_desc) : ''?>' placeholder="Meta description"/>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="meta_keywords" value='<?php echo isset($meta_keywords) ? str_replace("'", "&#39;", $meta_keywords) : ''?>' placeholder="Meta keywords"/>
            </div>
        </div>
        <div style="padding: 10px;" class="row">
            <div class="col-md-4">
                <label>Cover Image Text </label>
                <input type="text" size="80" id="cover_image_text" name="cover_image_text" value='<?php echo isset($staticPage->cover_image_text) ? $staticPage->cover_image_text : ''?>'/>
            </div>
        </div>
        <div style="padding: 10px;" class="row">
            <div class="col-md-4">
                <label>Web Notice @if(isset($disabled) && $disabled) <span style="color: red;">(to use show web notice please disable previous)</span> @endif</label>
                <input type="chseckbox" @if(isset($disabled) && $disabled) disabled="disabled" readonly="readonly" @endif name="web_notice" @if(isset($staticPage->web_notice) && $staticPage->web_notice) checked="checked" @endif/>
            </div>
        </div>
        <div style="padding: 5px;" class="row">
            <div class="col-md-6">
                <label>Cover Image( Max size 1 MB)</label>
                <input type="file" id="cover_image" name="cover_image" accept="image/png, image/jpeg"/>
            </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="{!! $staticPage->url or '' !!}" data-og-link="{!! $staticPage->url or '' !!}" data-base-url="{!! $protocol or '' !!}{!! $_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 class="container-fluid">
            <div class="row">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 nopadding main-editor">
                            <textarea id="txtEditor"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </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>

    let image_1 = '';

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

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

    $('#cover_image').change(function(){
        readURL(this);
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

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

            reader.readAsDataURL(input.files[0]);
        }
    }

    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 meta = $("input[name='meta']").val();
        let slug = $("input[name='title']").attr('data-slug');
        // var cover_image_text = $("input[name=']")


        let meta = '';
        let cover_image_text = '';

        if($("input[name='meta_desc']").val() !== ''){
            meta = '<meta name="description" content="'+ $("input[name='meta_desc']").val() +'"> \n'
        }
        if($("input[name='meta_keywords']").val() !== ''){
            meta += '<meta name="keywords" content="'+ $("input[name='meta_keywords']").val() + '">';
        }
        if($("input[name='cover_image_text']").val() !== ''){
            cover_image_text = $("input[name='cover_image_text']").val();
        }

        let cover = image_1;

        let is_published = $(this).attr('data-is-published');
        let editor = $(".Editor-editor").html();
        if(title.length == 0 || typeof slug === 'undefined' || slug.length == 0){
            alert('Please enter page title');
            return false;
        }

        let Api_data = '';
        if(image_1 !== ''){
            Api_data = {_token:_token, title:title, html:editor, url:slug, is_published: is_published, user_id: user_id, page_id:page_id, meta: meta, cover_image: cover, cover_image_text: cover_image_text};
        }else{
            Api_data = {_token:_token, title:title, html:editor, url:slug, is_published: is_published, user_id: user_id, page_id:page_id, meta: meta, cover_image_text: cover_image_text};
        }

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

    $("input[name='title']").keyup(function(){
        if($("input[name='url']").attr('data-og-link') === ''){
            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);
        }
    });

    $(document).ready(function () {
        let dic_c = 0;
        $(".main-editor > div").each(function(){
            if($(this).hasClass('Editor-container') && dic_c){
                $(this).remove();
            }
            dic_c++;
        });


        $(".Editor-editor").html('<?php echo isset($staticPage->id) ? str_replace('\'','&apos;',$staticPage->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>