@extends('core::layouts.master')
@section('breadcrumb')
    <a href="{{route('admin.landingpage.index')}}">Tạo trang mới</a>
@endsection
@section('head-action')
    @php(getUrlInAdmin('page', $page))
    {{ Form::bsNavButton('Cấu hình popup','#',['data-toggle' => 'modal', 'data-target' => '#landingpage-popup']) }}
    {{ Form::bsNavButton('Cấu hình giao diện','#',['data-toggle' => 'modal', 'data-target' => '#landingpage-setting']) }}
    {{ Form::bsNavButton('Cấu hình SEO','#',['data-toggle' => 'modal', 'data-target' => '#landingpage-seo']) }}
@endsection
@section('content')
    <style type="text/css">
        .sp-container.sp-light.sp-palette-buttons-disabled.sp-initial-disabled{
            z-index: 9999;
        }
        #landingpage-popup .bootstrap-switch .bootstrap-switch-handle-off, #landingpage-popup .bootstrap-switch .bootstrap-switch-handle-on, #landingpage-popup .bootstrap-switch .bootstrap-switch-label{
            height: auto;
        }
        #landingpage-setting .bootstrap-switch .bootstrap-switch-handle-off, #landingpage-setting .bootstrap-switch .bootstrap-switch-handle-on, #landingpage-setting .bootstrap-switch .bootstrap-switch-label{
            height: auto;
        }
        #landingpage-seo .bootstrap-switch .bootstrap-switch-handle-off, #landingpage-seo .bootstrap-switch .bootstrap-switch-handle-on, #landingpage-seo .bootstrap-switch .bootstrap-switch-label{
            height: auto;
        }

        #landingpage-setting .row{
            margin-bottom: 10px;
        }

        #landingpage-setting .background_select + a.btn{
            margin-top: 2px !important;
        }
        .icon-more2.rotate-90{line-height: 20px;}

    </style>
    @php($widgets_type = ['slider'=>'Slider', 'post'=>'Nhóm bài viết', 'product'=>'Nhóm sản phẩm'])
    <script type="text/javascript">
        var route_index = "{{ route('admin.landingpage.index') }}";
        var route_store = "{{ route('admin.landingpage.store', ['id' => $page->id]) }}";
        var route_order = "{{ route('admin.landingpage.order', ['id' => $page->id]) }}";
    </script>
    <div id="wrap-widgets">
        <div class="col-xs-4 col-md-3 widget-availables">
            <div class="content-group">
                <h6 class="text-semibold">Danh sách Widgets</h6>
                <p>Để kích hoạt widget kéo nó vào khung bên phải.</p>
            </div>
            <div class="col-xs-12 col-sm-12 no-padding-left">
                @php $items_left=[
                    ['view'=>'image'],
                    ['view'=>'youtube'],
                    ['view'=>'text_image'],
                    ['view'=>'text_editor'],
                    ['view'=>'image_text'],
                    ['view'=>'button'],
                    ['view'=>'form'],
                ];
                @endphp
                @foreach($items_left as $item)
                    @if ($item && !in_array(@$item['type'], config('theme.types')[$theme_active['type']]))
                        @include('landingpage::items.'.$item['view'])
                    @endif
                @endforeach
            </div>
        </div>
        <div class="col-xs-8 col-md-9" id="widgets-right">
            <div class="col-xs-12 col-sm-12">
                
                            <div class="panel panel-white">
                                <div class="panel-heading">
                                    <h4 class="panel-title">Nội dung</h4>
                                    <div class="heading-elements">
                                        <ul class="icons-list">
                                            <li>
                                                <a href="{{$page->url}}" target="_blank"><i class="icon-eye"></i> <span>Xem thử</span></a>   
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="panel-body widget-sidebar" data-pos="landingpage" data-block="1">
                                    @foreach ($layout_theme as $pos=> $blocks)
                        @foreach ($blocks as $block=>$element)
                                    @isset ($element['widgets'])
                                        @foreach ($element['widgets'] as $widget)
                                            @include('landingpage::items.'.$widget['widget_taxonomy'], ['data' => $widget,'class'=>'widget-item-exist'])
                                        @endforeach
                                    @endisset

                        @endforeach
                @endforeach
                                </div>
                            </div>
            </div>
        </div>
    </div>

    {{--Image preview--}}
    <div id="modal_default" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <img id="image_preview" src="http://placehold.it/450x350&text=Chưa%20có%20ảnh"
                         style="width: 100%; max-height: 100%">
                </div>
            </div>
        </div>
    </div>

    {{--Image popup--}}
    <div id="modal_image" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="modal_banner_select">
                        {{Form::bsLfFile(null, 'select_image', null, ['width' =>'300','height' =>'150'])}}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Đóng</button>
                    <button type="button" class="btn btn-info" id="btn_update_image">Cập nhật</button>
                </div>
            </div>
        </div>
    </div>
    {!! Form::open(['method' => 'POST','route'  => ['admin.landingpage.store.landingpage', $page->id],'id'=>'landingpage-form']) !!}
        <div id="landingpage-popup" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Cấu hình popup</h4>
                    </div>
                    <div class="modal-body">
                        {{ Form::bsBoxOpen() }}
                        <div class="form-group">
                            <label>Hiển thị</label>
                            <div class="checkbox checkbox-switch">
                                <label>
                                    <input hidden name="settings[popup][active]" value="0">
                                    <input class="form-control" bs-type="switch" data-on-text="Đang bật" data-off-text="Đang tắt" data-off-color="danger" data-on-color="primary" {{empty(@$settings['popup']['active'])? '':'checked'}} name="settings[popup][active]" type="checkbox" value="1">
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Thời gian chờ trước khi hiển thị</label>
                            <div class="input-group">
                                <input type="number" name="settings[popup][display_after]"
                                       class="form-control" min="0"
                                       value="{{@$settings['popup']['display_after']}}"
                                       required="required">
                                <span class="input-group-addon">giây</span>
                            </div>
                        </div>
                        {{ Form::bsTextAreaEditor('Nội dung', 'description', @$page['description']['description'], ['data-seo' => 'description']) }}
                        {{ Form::bsBoxClose() }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary submit-landingpage-form">Lưu</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal -->
        <div id="landingpage-setting" class="modal fade" role="dialog">
          <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Cấu hình giao diện</h4>
              </div>
              <div class="modal-body">
                {{ Form::bsBoxOpen() }}
                <fieldset>
                    <legend class="text-semibold">
                        <a style="color: black" onclick="$(this).next().trigger('click');">Cấu hình chung</a>
                    </legend>
                    <div class="background_config collapse on" aria-expanded="true" style="display: block;">
                        <div class="row">
                            <div class="col-md-3">
                                {{Form::bsSelectBackgroundImage('Hình nền trang', "settings[wb-body-background-image]", @$settings['wb-body-background-image'], ['width'=>37, 'height'=>37])}}
                            </div>
                            <div class="col-md-3">
                                <label class="display-block ontrol-label">Màu nền trang</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            @php if(empty(@$settings['wb-body-background-color'])) $settings['wb-body-background-color'] = '#ffffff'; @endphp
                                            <input type="text" class="form-control color_style" name="settings[wb-body-background-color]"
                                                   value="{{@$settings['wb-body-background-color']}}"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="display-block control-label">Khoảng cách giữa các khối nội dung (widget)</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            @php if(empty(@$settings['widget-padding'])) $settings['widget-padding'] = '80'; @endphp
                                            <input type="text" class="form-control" name="settings[widget-padding]"
                                                           value="{{@$settings['widget-padding']}}"/>
                                            <span class="input-group-addon">px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <label class="display-block ontrol-label">Hiện header</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group" style="margin-top: 8px;">
                                            <input name="settings[wb-header-display]" type="checkbox" value="1" {{@$settings['wb-header-display'] ? 'checked' : ''}}>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                {{Form::bsSelectBackgroundImage('Logo header', "settings[wb-header-logo]", @$settings['wb-header-logo'], ['width'=>37, 'height'=>37])}}
                            </div>
                            <div class="col-md-3">
                                <label class="display-block ontrol-label">Màu nền header</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            @php if(empty(@$settings['wb-header-background-color'])) $settings['wb-header-background-color'] = '#ffffff'; @endphp
                                            <input type="text" class="form-control color_style" name="settings[wb-header-background-color]"
                                                   value="{{@$settings['wb-header-background-color']}}"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="display-block control-label">Chọn menu</label>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="input-group">
                                            <select class="form-control" name="settings[wb-header-menu]">
                                                @foreach(Menu::getAllMenu(true) as $key=>$value)
                                                <option style="font-family: '{{$value}}', sans-serif;" value="{{$key}}" {{@$settings['wb-header-menu']==$key?'selected':''}}>{{$value}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="display-block ontrol-label">Màu nền menu</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            @php if(empty(@$settings['wb-header-menu-background'])) $settings['wb-header-menu-background'] = '#ffffff'; @endphp
                                            <input type="text" class="form-control color_style" name="settings[wb-header-menu-background]"
                                                   value="{{@$settings['wb-header-menu-background']}}"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 body-display">
                                <label class="display-block control-label">Kiểu hiển thị</label>
                                @php if(empty($settings['body-display'])) $settings['body-display'] = 'box'; @endphp
                                {{Form::bsRadio('', 'settings[body-display]', ['full' => 'Tràn màn hình', 'box' => 'Box'], @$settings['body-display'])}}
                            </div>
                        </div>
                    </div>
                    <div class="isBox" {{ @$settings['body-display'] == 'box' ? '' : 'style=display:none;'}}>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="form-group form-horizontal">
                                        <input hidden name="settings[body-border][active]" value="0">
                                        <label class="display-block col-md-6 control-label">Có khung viền</label>
                                        <div class="checkbox checkbox-switch col-md-6">
                                            <input class="form-control" bs-type="switch" data-on-text="Đang bật" data-off-text="Đang tắt" data-off-color="danger" data-on-color="primary" {{empty(@$settings['body-border']['active'])? '':'checked'}} name="settings[body-border][active]" type="checkbox" value="1">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="form-group form-horizontal">
                                        <label class="display-block col-md-6 control-label">Độ rộng của box</label>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                @php if(empty(@$settings['wb-body-width'])) $settings['wb-body-width'] = '800'; @endphp
                                                <input type="text" class="form-control" name="settings[wb-body-width]"
                                                               value="{{@$settings['wb-body-width']}}"/>
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="form-group form-horizontal">
                                        <label class="display-block col-md-6 control-label">Kích thước khung viền</label>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                @php if(empty(@$settings['wb-body-border-size'])) $settings['wb-body-border-size'] = '0'; @endphp
                                                <input type="text" class="form-control" name="settings[wb-body-border-size]"
                                                               value="{{@$settings['wb-body-border-size']}}"/>
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="form-group form-horizontal">
                                        <label class="display-block col-md-6 control-label">Màu khung viền</label>
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                @php if(empty(@$settings['wb-body-border-color'])) $settings['wb-body-border-color'] = '#999999'; @endphp
                                                <input type="text" class="form-control color_style" name="settings[wb-body-border-color]"
                                                       value="{{@$settings['wb-body-border-color']}}"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                 <label class="display-block control-label">Khoảng cách giữa khung viền và nội dung:</label>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <label class="display-block  control-label">Trên</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="settings[wb-box-padding-top]"
                                           value="{{@$settings['wb-box-padding-top']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <label class="display-block control-label">Dưới</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="settings[wb-box-padding-bottom]"
                                           value="{{@$settings['wb-box-padding-bottom']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <label class="display-block control-label">Trái</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="settings[wb-box-padding-left]"
                                           value="{{@$settings['wb-box-padding-left']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <label class="display-block control-label">Phải</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="settings[wb-box-padding-right]"
                                           value="{{@$settings['wb-box-padding-right']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                 <label class="display-block control-label">Khoảng cách giữa khung viền và màn hình:</label>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <label class="display-block  control-label">Trên</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="settings[wb-body-padding-top]"
                                           value="{{@$settings['wb-body-padding-top']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <label class="display-block control-label">Dưới</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="settings[wb-body-padding-bottom]"
                                           value="{{@$settings['wb-body-padding-bottom']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                </fieldset>
                <fieldset>
                    <legend class="text-semibold">
                        <a style="color: black" onclick="$(this).next().trigger('click');">Cấu hình nội dung</a>
                    </legend>
                    <div class="background_config collapse on" aria-expanded="true" style="display: block;">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="display-block control-label">Font chữ chung cho trang</label>
                                @php($all_fonts = '')
                                <select class="form-control" name="settings[body-font-family]">
                                    @foreach($fonts as $group=>$group_font)
                                    <optgroup label="{{$group}}">
                                        @foreach($group_font as $key=>$value)
                                        <option style="font-family: '{{$value}}', sans-serif;" value="{{$key}}" {{@$settings['body-font-family']==$key?'selected':''}}>{{$value}}</option>
                                        @endforeach
                                    </optgroup>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="display-block control-label">Cỡ chữ</label>
                                <div class="input-group">
                                    @php if(empty(@$settings['wb-body-font-size'])) $settings['wb-body-font-size'] = '16'; @endphp
                                    <input type="text" class="form-control" name="settings[wb-body-font-size]"
                                                   value="{{@$settings['wb-body-font-size']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="display-block control-label">Màu chữ</label>
                                <div class="input-group colorpicker-component">
                                    @php if(empty(@$settings['wb-body-font-color'])) $settings['wb-body-font-color'] = '#000000'; @endphp
                                    <input type="text" class="form-control color_style" name="settings[wb-body-font-color]"
                                           value="{{@$settings['wb-body-font-color']}}"/>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="display-block control-label">Khoảng cách giữa các dòng chữ</label>
                                <div class="input-group">
                                    @php if(empty(@$settings['wb-body-line-height'])) $settings['wb-body-line-height'] = '26'; @endphp
                                    <input type="text" class="form-control" name="settings[wb-body-line-height]"
                                                   value="{{@$settings['wb-body-line-height']}}"/>
                                    <span class="input-group-addon">px</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                {{ Form::bsBoxClose() }}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary submit-landingpage-form">Lưu</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
              </div>
            </div>

          </div>
        </div>
        <!-- Modal -->
        <div id="landingpage-seo" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
          <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Cấu hình SEO</h4>
              </div>
              <div class="modal-body">
                {{ Form::bsBoxOpen() }}
                    {{ Form::bsKeyword($page['seo']['meta_keyword'], [], 'required')}}
                    @include('core::partials.input_menu_name')
                    {{ Form::bsText('Tiêu đề ','title',$page['description']['title'], ['data-seo'=>'title'], 'required') }}
                    {{ Form::bsLfFile('Hình chia sẻ <br/><small>( Kích thước tối thiểu 200x200 )</small>','thumbnail',$page['thumbnail'],['width'=>150,'height'=>120]) }}
                {{ Form::bsBoxClose() }}
                {{ Form::bsSeo('title',$page['seo'], 'landingpage') }}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary submit-landingpage-form">Lưu</button>
                @if(!empty($page->url) && $page->url != '/.html')
                    <button type="button" class="btn btn-default btnCloseModal">Đóng</button>
                @endif
              </div>
            </div>

          </div>
        </div>
        <input name="taxonomy" type="hidden" value="page">
    {!! Form::close() !!}

    @if(empty($page->id))
        <!-- Modal -->
        <div id="landingpage-templates" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
          <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <a href="/admin/page" class="close" style="top: 15px;"><button type="button" class="btn btn-default">Hủy tạo landing page</button></a>
                <h4 class="modal-title">Chọn mẫu dựng sẵn</h4>
              </div>
              <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            @foreach($templates as $key => $template)
                            <div class="col-md-6">
                                {!! Form::open(['method' => 'POST','route'  => ['admin.landingpage.template', $key]]) !!}
                                <div class="thumbnail">
                                    <div class="thumb">
                                        <img src="{{$template['image']}}">
                                        <div class="caption-overflow">
                                            <span>
                                                <button class="btn border-white text-white btn-flat btn-icon btn-rounded"><i class="icon-check"></i></button>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="caption">
                                        <h6 class="no-margin">{{$template['name']}}</h6>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
              </div>
                <div class="modal-footer">
                    <a href="/admin/page"><button type="button" class="btn btn-default">Hủy tạo landing page</button></a>
                </div>
            </div>

          </div>
        </div>
    @endif

    <div id="css_editor" style="display: none;"></div>
    @if(empty($page->id))
        <script>
            $(window).on('load',function(){   
               $('#landingpage-templates').modal('show');
            });
        </script>
    @else
        @if(empty($page->url) || $page->url == '/.html')
            <script>
                $(window).on('load',function(){   
                   $('#landingpage-seo').modal('show');
                });
            </script>
        @endif
    @endif

    @section('scripts')
        @parent
        <!-- Theme JS files -->
        {{ Html::script(config('app.assets_url').'/backend/js/plugins/editors/ace/ace.js') }}
        {{ Html::script(config('app.assets_url').'/backend/js/plugins/pickers/color/spectrum.js') }}
        <script>
            var validateUrl = "{{route('admin.landingpage.beforestore.landingpage', ['id' => $page->id])}}";
            //editor
            var style_advance = $('textarea[name="style_advance"]').hide();
            var css_editor = ace.edit("css_editor");
            css_editor.setTheme("ace/theme/monokai");
            css_editor.getSession().setMode("ace/mode/css");
            css_editor.setShowPrintMargin(false);
            css_editor.getSession().setValue(style_advance.val());
            css_editor.getSession().on("change", function () {
                style_advance.val(css_editor.getSession().getValue());
            });
        </script>

        <script>
            $('.colorpicker-component').colorpicker();

            // Color palette
            var palette = [
                ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
                ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
                ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
                ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
                ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
                ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
                ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
                ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
            ];
            $(".color_style").spectrum({
                preferredFormat: "hex",
                showPalette: true,
                showInput: true,
                allowEmpty: true,
                cancelText: 'Hủy',
                chooseText: 'Chọn',
                clearText: "Trong suốt, không có màu",
                noColorSelectedText: "Không có màu nào được chọn",
                palette: palette
            });

            $('input[name="effect_loading[active]"]').on('switchChange.bootstrapSwitch', function (event, state) {
                if (state) {
                    $('.loading_effect').show();
                } else {
                    $('.loading_effect').hide();
                }
            });

            function validateSeoFrom(){
                if($('#landingpage-seo input[name=meta_keyword]').val().trim() == ''){
                    $('#landingpage-seo .selectize-control.multi + .help-block').text('Từ khóa trang không được để trống').addClass('text-danger seo_result');
                }else if($('#landingpage-seo input[name=title]').val().trim() == ''){
                    $('#landingpage-seo input[name=title] + .help-block').text('Tiêu đề không được để trống').addClass('text-danger seo_result');
                }else if($('#landingpage-seo input[name=slug]').val().trim() == ''){
                    $('#landingpage-seo input[name=slug] + .help-block').text('Đường dẫn không được để trống').addClass('text-danger seo_result');
                }else{
                    return true;
                }

                $('#landingpage-seo').animate({
                    scrollTop: $("#landingpage-seo").offset().top
                }, 500);

                return false;
            }

            $('#landingpage-form .btnCloseModal').on('click', function(e){
                e.preventDefault();
                if(validateSeoFrom()){
                    $('#landingpage-seo').modal('hide');
                }
            });

            $('#landingpage-form .submit-landingpage-form').on('click', function(e){
                e.preventDefault();
                if(validateSeoFrom()){
                    $('#landingpage-form').submit();
                }
            });

            $('#widgets-right input[type="checkbox"]').uniform();
            
            $('.body-display input[type=radio]').on('click', function(){
                if($(this).val() == 'box'){
                    $('.isBox').show();
                }else{
                    $('.isBox').hide();
                }
            });
        </script>
    @endsection
    <div id="modal-form-setting" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Cấu hình widget from</h4>
                </div>
                <div class="modal-body">
                    {{ Form::bsBoxOpen() }}
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Loại</th>
                                        <th width="30%" class="text-center">Sử dụng</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach(config('landingpage.widget_form_elements') as $key => $element)
                                    <tr>
                                        <td>{{$element['title']}}</td>
                                        <td class="text-center">
                                            <div class="input-group">
                                                <input class="form-element-use" name="{{$key}}" data-key="{{$key}}" data-title="{{$element['title']}}" data-type="{{$element['type']}}" type="checkbox" value="1">
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {{ Form::bsBoxClose() }}
                </div>
            </div>
        </div>
    </div>
    @include('landingpage::scripts')
@endsection