{% extends "/AdminTheme/base_admin.html" %}
{% block content %}
            <!-- Main Container -->
            <main id="main-container">

                <!-- Hero -->
                <div class="bg-body-light">
                    <div class="content content-full">
                        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                            <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">Edit Page</h1>
                            <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">Dashboard</li>
                                    <li class="breadcrumb-item" aria-current="page">Pages</li>
                                    <li class="breadcrumb-item active" aria-current="Edit">Edit</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <!-- END Hero -->

                <!-- Page Content -->
                <div class="row no-gutters flex-md-10-auto">
                    <div class="col-md-4 col-lg-5 col-xl-3 order-md-1 bg-white">
                        <div class="content p-0">
                            <!-- Toggle Settings -->
                            <div class="d-md-none p-3">
                                <!-- Class Toggle, functionality initialized in Helpers.coreToggleClass() -->
                                <button type="button" class="btn btn-block btn-alt-info" data-toggle="class-toggle" data-target="#side-content" data-class="d-none">
                                    Settings
                                </button>
                            </div>
                            <!-- END Toggle Settings -->

                            <!-- Settings -->
                            <div id="side-content" class="d-none d-md-block push">
                                <div class="block-content block-content-full d-flex justify-content-between border-bottom">
                                    <div>
                                        <!--<button type="button" class="btn btn-sm btn-light">
                                            <i class="fa fa-plus"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-light">
                                            <i class="fa fa-undo"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-light">
                                            <i class="fa fa-redo"></i>
                                        </button>-->
                                    </div>
                                    <div>
                                        <a class="btn btn-sm btn-info" onclick="savePage()">Save</a>
                                    </div>
                                </div>
                                <div id="settings-accordion" role="tablist" aria-multiselectable="true">
                                    <div class="block mb-0">
                                        <div class="block-header block-header-default p-0" role="tab" id="settings-accordion_h1">
                                            <a class="font-w600 d-block w-100 p-3" data-toggle="collapse" data-parent="#settings-accordion" href="#settings-accordion_s1" aria-expanded="true" aria-controls="settings-accordion_s1">Status &amp; Visibility</a>
                                        </div>
                                        
                                        <div id="settings-accordion_s1" class="collapse show" role="tabpanel" aria-labelledby="settings-accordion_h1" data-parent="#settings-accordion">
                                            <div class="block-content">
                                                <div class="form-group row">
                                                    <label class="col-sm-4 col-form-label" for="status">Visibility</label>
                                                    <div class="col-sm-8">
                                                        <select class="custom-select" id="status" name="status">
                                                            <option value="0" {% if page.status == 0 %} selected="selected" {% endif %}>draft</option>
                                                            <option value="1" {% if page.status == 1 %} selected="selected" {% endif %}>Publish</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END Settings -->
                        </div>
                    </div>
                    <div class="col-md-8 col-lg-7 col-xl-9 order-md-0 bg-body-dark">
                        <!-- Main Content -->
                        <div class="content">
                            <div class="block block-rounded">
                                <div class="block-content">
                                    <form action="db_wp_post.html" method="POST" onsubmit="return false;">
                                        <div class="form-group">
                                            <label for="title">Title:</label>
                                            <input type="text" class="form-control py-4" id="title" name="title" placeholder="Add Title.." value="{{ page.title }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="slug">Slug:</label>
                                            <input type="text" class="form-control py-4" id="slug" name="slug" placeholder="add-slug" value="{{ page.slug }}">
                                        </div> 
                                        <hr>                                      
                                        <div class="form-group">
                                            <label for="metatitle">Meta Title:</label>
                                            <input type="text" class="form-control py-4" id="metatitle" name="metatitle" placeholder="Meta Title.." value="{{ meta.metatitle }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="metatitle">Meta Description:</label>                                            
                                            <textarea class="form-control py-4" id="metadesc" name="metadesc" placeholder="Meta Description...">{{ meta.metadesc }}</textarea>
                                        </div>
                                        <hr>
                                        <div class="form-group">
                                            <label for="ogtitle">OpenGraph Title:</label>
                                            <input type="text" class="form-control py-4" id="ogtitle" name="ogtitle" placeholder="OpenGraph Title.." value="{{ meta.ogtitle }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="ogname">OpenGraph site name:</label>
                                            <input type="text" class="form-control py-4" id="ogname" name="ogname" placeholder="OpenGraph site name.." value="{{ meta.ogname }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="ogdesc">OpenGraph description:</label>
                                            <textarea class="form-control py-4" id="ogdesc" name="ogdesc" placeholder="OpenGraph Description...">{{ meta.ogdesc }}</textarea>
                                        </div>
                                        <div class="form-group">
                                            <label for="ogurl">OpenGraph Url:</label>
                                            <input type="text" class="form-control py-4" id="ogurl" name="ogurl" placeholder="OpenGraph Url.." value="{{ meta.ogurl }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="ogimage">OpenGraph image:</label>
                                            <input type="text" class="form-control py-4" id="ogimage" name="ogimage" placeholder="OpenGraph image.." value="{{ meta.ogimage }}">
                                        </div>
                                        <input type="hidden" name="id" id="id" value="{{ page.id }}" />
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!-- END Main Content -->
                    </div>
                </div>
                <!-- END Page Content -->
            </main>
            <!-- END Main Container -->


{% endblock %}
{% block script %}
<script>
    $("#title").keyup(function () {
        var title = $('#title').val();
        $('#slug').val(slugify(title));
    });

    function slugify(text) {
        return text.toString().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '');
    }

    function savePage() {
        var title = $('#title').val();
        var slug = $('#slug').val();
        var metatitle = $('#metatitle').val();
        var metadesc = $('#metadesc').val();
        var ogtitle = $('#ogtitle').val();
        var ogname = $('#ogname').val();
        var ogdesc = $('#ogdesc').val();
        var ogurl = $('#ogurl').val();
        var ogimage = $('#ogimage').val();
        var status1 = $('#status').val();
        var id = $('#id').val();

        var meta = {
            metatitle: metatitle,
            metadesc: metadesc,
            ogtitle: ogtitle,
            ogdesc: ogdesc,
            ogname: ogname,
            ogurl: ogurl,
            ogimage: ogimage
        };

        var jqxhr = $.post("/mlebet/page/update", {
                id: id,
                title: title,
                slug: slug,
                meta: JSON.stringify(meta),
                status: status1
            })
            .done(function (data) {
                if (data == 'success') {
                    window.location.href = "/mlebet/pages";
                } else {
                    alert("Save Failed!");
                }
            })
            .fail(function () {
                alert("Save Failed!");
            });
            
    }
</script>
{% endblock %}