{% 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">New 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="New">New</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" selected>draft</option>
                                                <option value="1">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="/mlebet/page/add" method="POST">
                            <div class="form-group">
                                <label for="title">Title:</label>
                                <input type="text" class="form-control py-4" id="title" name="title"
                                    placeholder="Add 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">
                            </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..">
                            </div>
                            <div class="form-group">
                                <label for="metadesc">Meta Description:</label>
                                <textarea class="form-control py-4" id="metadesc" name="metadesc"
                                    placeholder="Meta Description..."></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..">
                            </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..">
                            </div>
                            <div class="form-group">
                                <label for="ogdesc">OpenGraph description:</label>
                                <textarea class="form-control py-4" id="ogdesc" name="ogdesc"
                                    placeholder="OpenGraph Description..."></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..">
                            </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..">
                            </div>
                        </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 meta = {
            metatitle: metatitle,
            metadesc: metadesc,
            ogtitle: ogtitle,
            ogdesc: ogdesc,
            ogname: ogname,
            ogurl: ogurl,
            ogimage: ogimage
        };

        var jqxhr = $.post("/mlebet/page/add", {
                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 %}