{% 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">Settings</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 active" aria-current="page">Setting</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>
                <!-- 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="sitetitle">Blog Title:</label>
                                <input type="text" class="form-control py-4" id="sitetitle" name="sitetitle" value="{{settings.sitename}}">
                            </div>
                            <div class="form-group">
                                <label for="sitename">Sitename:</label>
                                <input type="text" class="form-control py-4" id="sitename" name="sitename" value="{{settings.sitename}}">
                            </div>
                            <div class="form-group">
                                <label for="sitedescription">sitedesciption:</label>
                                <textarea class="form-control py-4" id="sitedescription" name="sitedescription">{{settings.sitedescription}}</textarea>
                            </div>
                            <div class="form-group">
                                <label class="d-block" for="sitelogo">sitelogo:</label>
                                <select name="sitelogo" id="sitelogo" class="image-picker show-html">                                    
                                    {%for media in medias%}{%if media.name starts with 'logo'%}<option data-img-src='{{media.src}}' value="{{media.src}}" {%if settings.sitelogo == media.src%}selected{%endif%}>{{media.name}}</option>{%endif%}
                                    {%endfor%}                                    
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="d-block" for="favicon">favicon:</label>
                                <select name="favicon" id="favicon" class="image-picker show-html">                                    
                                    {%for media in medias%}{%if media.name starts with 'favicon'%}<option data-img-src='{{media.favicon}}' value="{{media.favicon}}" {%if settings.favicon == media.favicon%}selected{%endif%}>{{media.name}}</option>{%endif%}
                                    {%endfor%}                                    
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="gtmcode">GTM Code ID:</label>
                                <input type="text" class="form-control py-4" id="gtmcode" name="gtmcode" value="{{settings.gtmcode}}">
                            </div>
                            <div class="form-group">
                                <label for="googlesiteverification">Google Site Verification:</label>
                                <input type="text" class="form-control py-4" id="googlesiteverification" name="googlesiteverification" value="{{settings.googlesiteverification}}">
                            </div>
                            <div class="form-group">
                                <label for="fbpixel">Pixel ID:</label>
                                <input type="text" class="form-control py-4" id="fbpixel" name="fbpixel" value="{{settings.fbpixel}}">
                            </div>
                            <div class="form-group">
                                <label for="fbsiteverification">Facebook Domain Verification:</label>
                                <input type="text" class="form-control py-4" id="fbsiteverification" name="fbsiteverification" value="{{settings.fbsiteverification}}">
                            </div>
                            <div class="form-group">
                                <label for="showbar">Show Navigation Bar: (0: not shot, 1: for show )</label>
                                <input type="text" class="form-control py-4" id="showbar" name="showbar" value="{{settings.showbar}}">
                            </div>
                            <div class="form-group">
                                <label for="cs">NO WA CS: </label>
                                <textarea class="form-control py-4" id="cs" name="cs">{{settings.cs}}</textarea><small>one number per line</small>
                            </div>
                            <div class="form-group">
                                <label for="greetings">Greeting WA: </label>
                                <textarea class="form-control py-4" id="greetings" name="greetings">{{settings.greetings}}</textarea><small>Please, adjust to form</small>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- END Main Content -->
        </div>
    </div>
    <!-- END Page Content -->
</main>
<!-- END Main Container -->


{% endblock %}
{% block script %}
<script>
    $("select").imagepicker();
    function savePage() {
        var sitetitle = $('#sitetitle').val();
        var sitename = $('#sitename').val();
        var sitedescription = $('#sitedescription').val();
        var sitelogo = $('#sitelogo').val();
        var gtmcode = $('#gtmcode').val();
        var googlesiteverification = $('#googlesiteverification').val();
        var fbpixel = $('#fbpixel').val();
        var fbsiteverification = $('#fbsiteverification').val();
        var showbar = $('#showbar').val();
        var cs = $('#cs').val();
        var favicon = $('#favicon').val();

        var jqxhr = $.post("/mlebet/settings/edit", {
                sitetitle: sitetitle,
                sitename: sitename,
                sitedescription: sitedescription,
                sitelogo: sitelogo,
                gtmcode: gtmcode,
                googlesiteverification: googlesiteverification,
                fbpixel: fbpixel,
                fbsiteverification: fbsiteverification,
                showbar: showbar,
                cs: cs,
                favicon: favicon
            })
            .done(function (data) {
                if (data == 'success') {
                    window.location.href = "/mlebet/settings";
                } else {
                    alert("Save Failed!");
                }
            })
            .fail(function () {
                alert("Save Failed!");
            });
            
    }
</script>
{% endblock %}