@extends('core::layouts.master')
@section('breadcrumb','Chỉnh sửa html')
@section('content')
<style type="text/css">
#edit-template .panel-body{min-height: 550px;overflow: auto;padding:0px;}
.ace_editor{height: 700px}
.sidebar-edit-template .navigation>li>a {
padding: 8px 8px;
min-height: 22px;
font-weight: 400;
overflow: hidden;
}
.sidebar-edit-template .navigation>li>a>i {
margin-right: 5px;
}
.sidebar-edit-template.sidebar-opposite{display: table-cell}
#edit-template:parent{padding: 0px;}
</style>
<div id="edit-template">
    <div class="panel panel-default">
        @if(!request()->get('key'))
        <div class="panel-body" id="template-editor">
            <div id="no-template" class="text-center" style="padding-top: 25%">
                <i class="icon-redo2 text-muted valign-middle" style="font-size: 50px"></i>
                <h6 class="text-muted">Chọn một tệp tin ở cột bên phải để bắt đầu chỉnh sửa</h6>
            </div>
        </div>
        @else
        <div class="panel-heading">
            <h6 class="panel-title">{{ request()->get('key') }}
            <small><a href="{{ route('admin.theme.update_active',@$template_custom->id) }}" style="text-decoration: underline;">
                @if($template_custom->is_active==1) Khôi phục phiên bản gốc @endif
                @if($template_custom->is_active==0) Sử dụng phiên bản sửa gần nhất @endif
            </a></small>
            </h6>
            <div class="heading-elements">
                <div class="heading-btn">
                    <button type="button" id="save_template" class="btn btn-xs btn-default">Lưu</button>
                </div>
            </div>
        </div>
        <div class="panel-body" id="template-editor">
            <div id="template-content" style="display: none">{{ $template_custom->value }}</div>
        </div>
        @endif
    </div>
    <div class="sidebar-edit-template sidebar sidebar-opposite sidebar-default">
        <div class="sidebar-content">
            @foreach($template_files as $name=>$items)
            <div class="sidebar-category">
                <div class="category-title category-collapsed pointer">
                    <span>{{ $name }}</span>
                    <ul class="icons-list">
                        <li><a href="javascript:void(0)" data-action="collapse"></a></li>
                    </ul>
                </div>
                <div class="category-content no-padding" style="display: none;">
                    <ul class="navigation navigation-alt navigation-accordion">
                        @foreach($items as $file)
                        <li><a @if(in_array(str_replace('.blade.php', '', $file), $all_template_customs)) style="font-weight:bold" @endif href="{{ route('admin.theme.show',$theme_id) }}?type={{ $name }}&key={{ $file }}"><i class="icon-html5"></i> {{ $file }}</a></li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
    @endsection
    @section('scripts')
    @parent
    {{ Html::script(config('app.assets_url').'/backend/js/plugins/editors/ace/ace.js') }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.8.0-rc4/beautify-html.min.js"></script>
    <script>
    if($('#template-content').length){
    var editor = ace.edit("template-content");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/html");
    // editor.session.setUseWrapMode(true);
    editor.setShowPrintMargin(false);
    $('#template-content').show();
    $('#save_template').click(function(){
    $(this).attr('disabled','');
    $.post("{{ route('admin.theme.storetemplate', $theme_id ) }}", {_token: _token,value: editor.getValue(),key:"{{ request()->get('key') }}",type:"{{ request()->get('type') }}" }, function(data) {
    if(data.result==true){
    location.reload();
    }
    });
    })
    }

     $('.category-collapsed').on('click', function (e) {
            e.preventDefault();
            let collapse = $(this).find('[data-action=collapse]');
            var $categoryCollapse = collapse.parent().parent().parent().nextAll();
            collapse.parents('.category-title').toggleClass('category-collapsed');
            collapse.toggleClass('rotate-180');
            // containerHeight(); // adjust page height
            $categoryCollapse.slideToggle(150);
    });
     $('.category-collapsed:first').click();
    </script>
    @endsection