@extends('layout.main', [
    'secondarySidebar' => false,
    'activeRouteOverride' => 'widget.index'
])

@section('page_styles')
    {{--CUSTOM STYLES HERE--}}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css">
    <link
        rel="stylesheet"
        href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
    />
    <style type='text/css'>
        .hljs-copy-button {
            background-color:red !important;
        }
    </style>
@stop

@section('content')
    <div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
        <!--begin::Content-->
        <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
            <div class="subheader py-3 py-lg-8 subheader-transparent" id="kt_subheader">
                <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                    <div class="d-flex align-items-center mr-1">
                        <div class="d-flex align-items-baseline flex-wrap mr-5">
                            <h2 class="d-flex align-items-center text-dark font-weight-bold my-1 mr-3">Manage Widget</h2>
                        </div>
                    </div>
                    <div class="d-flex align-items-center flex-wrap">
                        {{--toolbar buttons--}}
                    </div>
                </div>
            </div>
            <!--begin::Entry-->
            <div class="d-flex flex-column-fluid">
                <!--begin::Container-->
                <div class="container-fluid">
{{--                    <div class="row">--}}
{{--                        <div class="col-md-6">--}}
{{--                            {{p($categories)}}--}}
{{--                        </div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            {{p($iconsArray)}}--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="row">
                        <div class="col-md-6">
                            @include('widgets.form')
                        </div>

                        <div class="col-md-6">
                            <button type="button" id="preview-loader" class="btn btn-primary spinner spinner-white spinner-right" style="display:none;">
                                Processing
                            </button>


                            <div id="iframe-holder">
                                <iframe id="preview-iframe" class="preview-iframe" src="{{route('widget.preview_iframe')}}"
                                        style="width: 100%;" frameborder="0" scrolling="no"
                                        onload="resizeIframe(this)"></iframe>
                            </div>

                            <hr />

                            <pre style="overflow: hidden;background: #191b1f;"><code id="embed-code-holder" class="language-html">{{$widgetCode ?? ''}}</code></pre>

                        </div>
                    </div>
                </div>
                <!--end::Container-->
            </div>
            <!--end::Entry-->
        </div>
        <!--end::Content-->
        <!--begin::Footer-->
        @include('layout.footer')
    </div>


@stop


@section('page_modals')
    {{--Page modals--}}
@stop
@section('page_scripts')
    <!--CUSTOM SCRIPTS-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
    <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
    <script src="{{asset('assets/js/pages/crud/forms/widgets/input-mask.js')}}"></script>
    <script>
        $(function (){
            hljs.highlightAll();
            hljs.addPlugin(new CopyButtonPlugin());
        });
        function resizeIframe(obj){
            setTimeout(function(){
                obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
            }, 400);
        }
    </script>
@stop