@extends('Layouts.admin')

@section('styles')
    <link href="{{asset('assets/css/codemirror.css')}}" rel="stylesheet">
@stop

@section('content')
    <div class="container-fluid">

        @if(\Session::has('info'))
            <div class="alert bg-green">
                {{\Session::get('info')}}
            </div>
        @endif


        @if(\Session::has('error2'))
            <div class="alert bg-red">
                {{\Session::get('error2')}}
            </div>
        @endif

        <div class="row clearfix">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Left sidebar</h2>
                        <ul class="header-dropdown m-r--5">
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="body">
                        <div class="the_sc">
                            <form method="post" action="{{route('AdminSidebarPost', 1)}}">
                                @csrf
                                <div class="form-group">
                                    <div class="form-line">
                                        <textarea rows="5" cols="80" id="editor" class="form-control no-resize" name="leftSidebar">
											@if($sidebar)
												{{old('leftSidebar') ? old('leftSidebar') : $sidebar->leftSidebar }}
											@endif
										</textarea>
                                    </div>


                                    @if($errors->has('leftSidebar'))
                                        <div class="er">
                                            {!!  $errors->get('leftSidebar')[0] !!}
                                        </div>
                                    @endif
                                </div>


                                <button type="submit" class="btn btn-primary m-t-15 waves-effect">Save</button>

                            </form>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="header">
                        <h2>Right Sidebar</h2>
                        <ul class="header-dropdown m-r--5">
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="body">
                        <div class="the_sc">
                            <form method="post" action="{{route('AdminSidebarPost', 2)}}">
                                @csrf

                                <div class="form-group">
                                    <div class="form-line">
                                        <textarea rows="5" cols="80" id="editor2" class="form-control no-resize" name="rightSidebar">
											@if($sidebar)
											{{ old('rightSidebar') ? old('rightSidebar') : $sidebar->rightSidebar }}
											@endif
										</textarea>
                                    </div>


                                    @if($errors->has('rightSidebar'))
                                        <div class="er">
                                            {!!  $errors->get('rightSidebar')[0] !!}
                                        </div>
                                    @endif
                                </div>


                                <button type="submit" class="btn btn-primary m-t-15 waves-effect">Save</button>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #END# Browser Usage -->
        </div>
    </div>
@stop

@section('scripts')

    <script src="{{asset('assets/js/codemirror.js')}}"></script>
    <script src="{{asset('assets/js/formating.js')}}"></script>
    <script src="{{asset('assets/js/htmlmixed.js')}}"></script>
    <script>


        /*var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
            mode: "htmlmixed",
            lineNumbers: true,
        });
        editor.save()*/

        var mixedMode = {
            name: "htmlmixed",
            scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
                mode: null},
                {matches: /(text|application)\/(x-)?vb(a|script)/i,
                    mode: "vbscript"}]
        };
        var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            mode: mixedMode,
            selectionPointer: true,
            lineNumbers: true,

        });


        function autoFormat() {
            editor.setCursor(0,0);
            CodeMirror.commands["selectAll"](editor);
            editor.autoFormatRange(editor.getCursor(true), editor.getCursor(false));
            editor.setCursor(0,0);
        }

        autoFormat();




        var mixedMode2 = {
            name: "htmlmixed",
            scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
                mode: null},
                {matches: /(text|application)\/(x-)?vb(a|script)/i,
                    mode: "vbscript"}]
        };
        var editor2 = CodeMirror.fromTextArea(document.getElementById("editor2"), {
            mode: mixedMode2,
            selectionPointer: true,
            lineNumbers: true,

        });


        function autoFormat2() {
            editor.setCursor(0,0);
            CodeMirror.commands["selectAll"](editor2);
            editor.autoFormatRange(editor2.getCursor(true), editor2.getCursor(false));
            editor.setCursor(0,0);
        }

        autoFormat2();




        //editor.autoFormatRange();
    </script>
@stop