@extends('core::layouts.master')
@section('stylesheet')
@endsection
@section('breadcrumb','Tùy chỉnh giao diện')
@section('head-action')
    {{ Form::bsNavBtnSubmit('Lưu thay đổi','style-form') }}
@endsection
@section('content')
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-body">
                {!! Form::open([
            'method' => 'POST',
            'url'  => route('admin.setting.style.store'),
            'files'  => true,
            'id' => 'style-form'
        ]) !!}
                <fieldset class="content-group">
                    <legend class="text-bold">Cấu hình cơ bản</legend>
                    <div class="row">
                        <div class="form-group form-horizontal">
                            <label class="display-block col-md-3 control-label">Chọn Màu Chính Của Webite</label>
                            <div class="col-md-9" style="margin-bottom: 10px">
                                <input type="text" class="form-control color_style" name="main_color"
                                       value="{{@$settings['main_color']}}">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group form-horizontal">
                            <label class="display-block col-md-3 control-label">Chọn Font chữ Webite</label>
                            <div class="col-md-9">
                                @php($all_fonts = '')
                                <select class="form-control" name="font">
                                    @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['font']==$key?'selected':''}}>{{$value}}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 form-horizontal">
                            <div class="form-group">
                                <input hidden name="effect_loading[active]" value="0">
                                <label class="display-block col-md-3 control-label">Hiệu ứng loading khi truy cập
                                    website</label>
                                <div class="checkbox checkbox-switch col-md-9">
                                    <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"
                                           {{@$settings['effect_loading']['active']?'checked':''}} name="effect_loading[active]"
                                           type="checkbox" value="1">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="loading_effect">
                            <div class="col-md-3"></div>
                            <div class="form-group col-md-2">
                                <input hidden name="effect_loading[type]" value="0">
                                {{ Form::bsSelect('Loại hiệu ứng', 'effect_loading[type]', config('setting.loading_effect'), @$settings['effect_loading']['type']?true:false) }}
                            </div>
                            <div class="form-group col-md-2">
                                <label>Màu nền hiệu ứng</label>
                                <div class="input-group colorpicker-component">
                                    <input  type="text" class="form-control color_style" name="effect_loading[bg-color]"
                                           value="{{@$settings['effect_loading']['bg-color']}}"/>
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <label>Màu hiệu ứng</label>
                                <div class="input-group colorpicker-component">
                                    <input  type="text" class="form-control color_style" name="effect_loading[color]"
                                           value="{{@$settings['effect_loading']['color']}}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset class="content-group">
                    <legend class="text-bold">
                        <a data-toggle="collapse" href="#style_advance">Cấu hình nâng cao</a>
                    </legend>
                </fieldset>

                <div id="style_advance" class="form-group collapse">
                    <fieldset class="content-group">
                        <legend class="text-bold">Giao diện chung
                            <button class="btn btn-xs btn-default" type="button" id="wb-body_reset">
                                <i class="fa fa-refresh" aria-hidden="true"></i> Mặc định
                            </button>
                        </legend>

                        <div class="form-group row">
                            <div class="col-sm-2">
                                {{Form::bsSelectBackgroundImage('Ảnh nền', 'wb-body-background-image', @$settings['style']['wb-body-background-image'], ['width'=>45, 'height'=>45])}}
                            </div>

                            <div class="col-sm-2">
                                <label>Màu nền</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-body-background-color"
                                           value="{{@$settings['style']['wb-body-background-color']}}"/>
                                </div>
                            </div>

                            <div class="col-sm-2">
                                <label>Màu link</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-link-color"
                                           value="{{@$settings['style']['wb-link-color']}}"/>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <label>Màu link active</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-link-color-active"
                                           value="{{@$settings['style']['wb-link-color-active']}}"/>
                                </div>
                            </div>
                            @if(!in_array('product', config('theme.types')[$theme_active['type']]))
                                <div class="col-sm-2">
                                    <label>Màu giá sản phẩm</label>
                                    <div class="input-group colorpicker-component">
                                        <input type="text" class="form-control color_style" name="wb-price-color"
                                               value="{{@$settings['style']['wb-price-color']}}"/>

                                    </div>
                                </div>
                            @endif
                        </div>

                    </fieldset>

                    <fieldset class="content-group">
                        <legend class="text-bold">Giao diện header
                            <button class="btn btn-xs btn-default" type="button" id="wb-header_reset">
                                <i class="fa fa-refresh" aria-hidden="true"></i> Mặc định
                            </button>
                        </legend>

                        <div class="form-group row">
                            <div class="col-sm-2">
                                {{Form::bsSelectBackgroundImage('Ảnh nền header phụ', 'wb-header-top-background-image', @$settings['style']['wb-header-top-background-image'], ['width'=>45, 'height'=>45])}}
                            </div>
                            <div class="col-sm-2">
                                <label>Màu nền header phụ</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-header-top-background-color"
                                           value="{{@$settings['style']['wb-header-top-background-color']}}"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-2">
                                {{Form::bsSelectBackgroundImage('Ảnh nền header chính', 'wb-header-main-background-image', @$settings['style']['wb-header-main-background-image'], ['width'=>45, 'height'=>45])}}
                            </div>

                            <div class="col-sm-2">
                                <label>Màu nền header chính</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-header-main-background-color"
                                           value="{{@$settings['style']['wb-header-main-background-color']}}"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-2">
                                {{Form::bsSelectBackgroundImage('Ảnh nền menu', 'wb-header-menu-background-image', @$settings['style']['wb-header-menu-background-image'], ['width'=>45, 'height'=>45])}}
                            </div>

                            <div class="col-sm-2">
                                <label>Màu nền menu</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-header-menu-background-color"
                                           value="{{@$settings['style']['wb-header-menu-background-color']}}"/>
                                </div>
                            </div>

                            <div class="col-sm-2">
                                <label>Màu chữ menu</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-header-menu-item-color"
                                           value="{{@$settings['style']['wb-header-menu-item-color']}}"/>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <label>Màu nền active</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style"
                                           name="wb-header-menu-item-active-background-color"
                                           value="{{@$settings['style']['wb-header-menu-item-active-background-color']}}"/>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <label>Màu chữ active</label>
                                <div id="menu_color_active" class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-header-menu-item-active-color"
                                           value="{{@$settings['style']['wb-header-menu-item-active-color']}}"/>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset class="content-group">
                        <legend class="text-bold">Giao diện footer
                            <button class="btn btn-xs btn-default" type="button" id="footer_reset">
                                <i class="fa fa-refresh" aria-hidden="true"></i> Mặc định
                            </button>
                        </legend>
                        <div class="form-group row">
                            <div class="col-sm-2">
                                {{Form::bsSelectBackgroundImage('Ảnh nền footer chính', 'wb-footer-main-background-image', @$settings['style']['wb-footer-main-background-image'], ['width'=>45, 'height'=>45])}}
                            </div>
                            <div class="col-sm-2">
                                <label>Màu nền footer chính</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-footer-main-background-color"
                                           value="{{@$settings['style']['wb-footer-main-background-color']}}"/>
                                </div>
                            </div>

                            <div class="col-sm-2">
                                <label>Màu chữ tiêu đề footer</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-footer-main-title-color"
                                           value="{{@$settings['style']['wb-footer-main-title-color']}}"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-2">
                                {{Form::bsSelectBackgroundImage('Ảnh nền footer phụ', 'wb-footer-bottom-background-image', @$settings['style']['wb-footer-bottom-background-image'], ['width'=>45, 'height'=>45])}}
                            </div>

                            <div class="col-sm-2">
                                <label>Màu nền footer phụ</label>
                                <div class="input-group colorpicker-component">
                                    <input type="text" class="form-control color_style" name="wb-footer-bottom-background-color"
                                           value="{{@$settings['style']['wb-footer-bottom-background-color']}}"/>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset class="content-group">
                        <legend class="text-bold">Tùy chỉnh css</legend>

                        <div class="form-group">
                            <div id="css_editor"></div>
                            <textarea name="style_advance">{{@$settings['style']['style_advance']}}</textarea>
                        </div>
                    </fieldset>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@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>
        //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>
        WB.chooseColor('.color_style');
         // WB.chooseColor('.colorpicker-component');

        $('#wb-body_reset').click(function () {
            $("input[name='wb-body-background-color']").val('');
            $("input[name='wb-body-background-image']").val('');
            $("#holder_wb-body-background-image").attr('src', 'http://placehold.it/45x45');
            $("input[name='wb-link-color']").val('');
            $("input[name='wb-link-color-active']").val('');
            $("input[name='wb-price-color']").val('');
        });
        $('#wb-header_reset').click(function () {
            $("input[name='wb-header-main-background-color").val('');
            $("input[name='wb-header-main-background-image").val('');
            $("#holder_wb-header-main-background-image").attr('src', 'http://placehold.it/45x45');
            $("input[name='wb-header-main-color']").val('');

            $("input[name='wb-header-top-background-color']").val('');
            $("input[name='wb-header-top-background-image']").val('');
            $("#holder_wb-header-top-background-image").attr('src', 'http://placehold.it/45x45');

            $("input[name='wb-header-menu-background-color").val('');
            $("input[name='wb-header-menu-background-image']").val('');
            $("#holder_wb-header-menu-background-image").attr('src', 'http://placehold.it/45x45');
            $("input[name='wb-header-menu-item-color']").val('');
            $("input[name='wb-header-menu-item-active-background-color']").val('');
            $("input[name='wb-header-menu-item-active-color']").val('');
        });
        $('#footer_reset').click(function () {
            $("input[name='wb-footer-main-background-color']").val('');
            $("input[name='wb-footer-main-background-image']").val('');
            $("#holder_wb-footer-main-background-image").attr('src', 'http://placehold.it/45x45');
            $("input[name='wb-footer-main-title-color']").val('');

            $("input[name='wb-footer-bottom-background-color']").val('');
            $("input[name='wb-footer-bottom-background-image']").val('');
            $("#holder_wb-footer-bottom-background-image").attr('src', 'http://placehold.it/45x45');
        });

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

    </script>
@endsection