@extends('admin.layouts.main')

@push('headerCustomCss')
    <style type="text/css" media="screen">
        .editor {
            width: 100%;
            height: 300px;
        }
    </style>
@endpush

@section('content')
    @section('panelTitle')
        {{ trans('ScriptsManage::admin/index.header.css') }}
    @overwrite
    @section('panelContent')
        {!! Form::open(['route' => ['admin::scriptsManage::save::css']]) !!}

        <div class="row">
            <div class="col-md-12">
                {!! Form::textarea('css_editor', $scripts->css, ['style' => 'display: none;']) !!}
                <div id="css_editor" class="editor">/* {{ trans('ScriptsManage::admin/index.texts.css_code_here') }} */</div>
            </div>
        </div>

        {!! Form::button(trans('global.save'), ['type' => 'button', 'style' => 'margin-top: 15px;', 'class' => 'btn btn-primary save-css-btn']) !!}
        {!! Form::close() !!}
    @overwrite
    @include('admin.layouts.includes.panel')

    @section('panelTitle')
        {{ trans('ScriptsManage::admin/index.header.head') }}
    @overwrite
    @section('panelContent')
        {!! Form::open(['route' => ['admin::scriptsManage::save::head']]) !!}
            <div class="row">
                <div class="col-md-6">
                    {!! Form::textarea('head_js_editor', $scripts->head_js, ['style' => 'display: none;']) !!}
                    <div id="head_js_editor" class="editor">/* {{ trans('ScriptsManage::admin/index.texts.js_code_here') }} */</div>
                </div>
                <div class="col-md-6">
                    {!! Form::textarea('head_html_editor', $scripts->head_html, ['style' => 'display: none;']) !!}
                    <div id="head_html_editor" class="editor">{{ '<!--' }} {{ trans('ScriptsManage::admin/index.texts.html_code_here') }} {{ '-->' }}</div>
                </div>
            </div>

            {!! Form::button(trans('global.save'), ['type' => 'button', 'style' => 'margin-top: 15px;', 'class' => 'btn btn-primary save-head-btn']) !!}
        {!! Form::close() !!}
    @overwrite
    @include('admin.layouts.includes.panel')

    @section('panelTitle')
        {{ trans('ScriptsManage::admin/index.header.body') }}
    @overwrite
    @section('panelContent')
        {!! Form::open(['route' => ['admin::scriptsManage::save::body']]) !!}

            <div class="row">
                <div class="col-md-6">
                    {!! Form::textarea('body_js_editor', $scripts->body_js, ['style' => 'display: none;']) !!}
                    <div id="body_js_editor" class="editor">/* {{ trans('ScriptsManage::admin/index.texts.js_code_here') }} */</div>
                </div>
                <div class="col-md-6">
                    {!! Form::textarea('body_html_editor', $scripts->body_html, ['style' => 'display: none;']) !!}
                    <div id="body_html_editor" class="editor">{{ '<!--' }} {{ trans('ScriptsManage::admin/index.texts.html_code_here') }} {{ '-->' }}</div>
                </div>
            </div>

            {!! Form::button(trans('global.save'), ['type' => 'button', 'style' => 'margin-top: 15px;', 'class' => 'btn btn-primary save-body-btn']) !!}
        {!! Form::close() !!}
    @overwrite
    @include('admin.layouts.includes.panel')

    @section('panelTitle')
        {{ trans('ScriptsManage::admin/index.header.order') }}
    @overwrite
    @section('panelContent')
        {{ trans('ScriptsManage::admin/index.texts.tags') }}<br><br>
        {!! Form::open(['route' => ['admin::scriptsManage::save::order']]) !!}

            <div class="row">
                <div class="col-md-12">
                    {!! Form::textarea('order_js_editor', $scripts->order_js, ['style' => 'display: none;']) !!}
                    <div id="order_js_editor" class="editor">/* {{ trans('ScriptsManage::admin/index.texts.js_code_here') }} */</div>
                </div>
            </div>

            {!! Form::button(trans('global.save'), ['type' => 'button', 'style' => 'margin-top: 15px;', 'class' => 'btn btn-primary save-order-btn']) !!}
        {!! Form::close() !!}
    @overwrite
    @include('admin.layouts.includes.panel')
@endsection

@push('footScripts')
    <script src="{{ asset('packages/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script>
    <script>
        (function() {
            var $this = this;

            $this.construct = function () {
                $this.CSSEditor = ace.edit('css_editor');
                $this.headJSEditor = ace.edit('head_js_editor');
                $this.headHTMLEditor = ace.edit('head_html_editor');
                $this.bodyJSEditor = ace.edit('body_js_editor');
                $this.bodyHTMLEditor = ace.edit('body_html_editor');
                $this.orderJSEditor = ace.edit('order_js_editor');
            }();

            $this.initCSS = function () {
                var $cssEditor = $('[name="css_editor"]');

                $this.CSSEditor.getSession().setMode("ace/mode/css");
                if ($cssEditor.val()) {
                    $this.CSSEditor.setValue($cssEditor.val());
                }

                $('.save-css-btn').click(function () {
                    $cssEditor.val($this.CSSEditor.getValue());
                    $(this).parents('form').submit();
                });
            }();

            $this.initHead = function () {
                var $jsEditor = $('[name="head_js_editor"]'),
                    $htmlEditor = $('[name="head_html_editor"]');

                $this.headJSEditor.getSession().setMode("ace/mode/javascript");
                if ($jsEditor.val()) {
                    $this.headJSEditor.setValue($jsEditor.val());
                }

                $this.headHTMLEditor.getSession().setMode("ace/mode/html");
                if ($htmlEditor.val()) {
                    $this.headHTMLEditor.setValue($htmlEditor.val());
                }

                $('.save-head-btn').click(function () {
                    $jsEditor.val($this.headJSEditor.getValue());
                    $htmlEditor.val($this.headHTMLEditor.getValue());

                    $(this).parents('form').submit();
                });
            }();

            $this.initBody = function () {
                var $jsEditor = $('[name="body_js_editor"]'),
                    $htmlEditor = $('[name="body_html_editor"]');

                $this.bodyJSEditor.getSession().setMode("ace/mode/javascript");
                if ($jsEditor.val()) {
                    $this.bodyJSEditor.setValue($jsEditor.val());
                }

                $this.bodyHTMLEditor.getSession().setMode("ace/mode/html");
                if ($htmlEditor.val()) {
                    $this.bodyHTMLEditor.setValue($htmlEditor.val());
                }

                $('.save-body-btn').click(function () {
                    $jsEditor.val($this.bodyJSEditor.getValue());
                    $htmlEditor.val($this.bodyHTMLEditor.getValue());

                    $(this).parents('form').submit();
                });
            }();

            $this.initOrder = function () {
                var $jsEditor = $('[name="order_js_editor"]');

                $this.orderJSEditor.getSession().setMode("ace/mode/javascript");
                if ($jsEditor.val()) {
                    $this.orderJSEditor.setValue($jsEditor.val());
                }

                $('.save-order-btn').click(function () {
                    $jsEditor.val($this.orderJSEditor.getValue());

                    $(this).parents('form').submit();
                });
            }();
        })();
    </script>
@endpush