@extends('core::layouts.master')
@section('breadcrumb','Tùy chỉnh giao diện')
@section('head-action')
    {{ Form::bsNavBtnSubmit('Lưu thay đổi','customCss-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.custom_css.store'),
            'files'  => true,
            'id' => 'customCss-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 Font chữ Webite</label>
                            <div class="col-md-4">
                                @php($fonts = config('setting.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}}" {{@$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" {{@$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'), @$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">
                                    <input type="text" class="form-control color_select" name="effect_loading[bg-color]"
                                           value="{{@$effect_loading['bg-color']}}">
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <label>Màu hiệu ứng</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="effect_loading[color]"
                                           value="{{@$effect_loading['color']}}">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @if(@\WbTheme::getConfig('breadcrumb')['background'])
                    <div class="row">
                       <div class="col-md-12">
                            <div class="form-group">
                                {{Form::bsSelectBackgroundImage('Hình nền tiêu đề chính', 'breadcrumb[background]', @$custom_css['breadcrumb']['background'], ['width'=>45, 'height'=>45])}}
                            </div>
                        </div>
                    </div>
                    @endif
                </fieldset>

                @if(@$active_layout['layout_style'] == 'w1000px' && intval(\Theme::info('version')) > 1.0)
                    <fieldset class="content-group">
                        <legend class="text-bold">Cấu hình banner trượt 2 bên</legend>
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    {{Form::bsSelectBackgroundImage('Hình Banner Trái', 'banner_layout[left_image]', @$custom_css['banner_layout']['left_image'], ['width'=>45, 'height'=>45])}}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    {{Form::bsText('Link banner trái', 'banner_layout[left_url]', @$custom_css['banner_layout']['left_url'], ['placeholder' => 'https://...'])}}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    {{Form::bsSelectBackgroundImage('Hình Banner Phải', 'banner_layout[right_image]', @$custom_css['banner_layout']['right_image'], ['width'=>45, 'height'=>45])}}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    {{Form::bsText('Link banner phải', 'banner_layout[right_url]', @$custom_css['banner_layout']['right_url'], ['placeholder' => 'https://...'])}}
                                </div>
                            </div>
                        </div>
                    </fieldset>
                @endif

                <fieldset class="content-group">
                    <legend class="text-bold">Giao diện chung
                        <button class="btn btn-xs btn-default wb-reset" type="button">
                            <i class="fa fa-refresh" aria-hidden="true"></i> Mặc định
                        </button>
                    </legend>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu chính</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[primary-color]"
                                           value="{{@$custom_css['color_css']['primary-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu phụ</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[sub-color]"
                                           value="{{@$custom_css['color_css']['sub-color']}}">
                                </div>
                            </div>
                        </div>
                         <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu chữ mặc định</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[base-color]"
                                           value="{{@$custom_css['color_css']['base-color']}}">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu chữ liên kết</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[link-color]"
                                           value="{{@$custom_css['color_css']['link-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu giá sản phẩm</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[price-color]"
                                           value="{{@$custom_css['color_css']['price-color']}}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                {{Form::bsSelectBackgroundImage('Ảnh nền website', 'bg_image[body]', @$custom_css['bg_image']['body'], ['width'=>45, 'height'=>45])}}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu nền</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[bg-color]"
                                           value="{{@$custom_css['color_css']['bg-color']}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset class="content-group">
                    <legend class="text-bold">Giao diện header
                        <button class="btn btn-xs btn-default wb-reset" type="button">
                            <i class="fa fa-refresh" aria-hidden="true"></i> Mặc định
                        </button>
                    </legend>
                      <div class="row">
                        <!-- <div class="col-md-3">
                            <div class="form-group">
                                {{Form::bsSelectBackgroundImage('Ảnh nền header phụ', 'bg_image[.h-bot-part]', @$custom_css['bg_image']['.h-bot-part'], ['width'=>45, 'height'=>45])}}
                            </div>
                        </div> -->
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu nền header top</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[header-bgsub-color]"
                                           value="{{@$custom_css['color_css']['header-bgsub-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu chữ header top</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[header-txt-color]"
                                           value="{{@$custom_css['color_css']['header-txt-color']}}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                      {{--   <div class="col-md-3">
                            <div class="form-group">
                                {{Form::bsSelectBackgroundImage('Ảnh nền header chính', 'bg_image[.h-top-part]', @$custom_css['bg_image']['.h-top-part'], ['width'=>45, 'height'=>45])}}
                            </div>
                        </div> --}}

                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu nền header chính</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[header-bg-color]"
                                           value="{{@$custom_css['color_css']['header-bg-color']}}">
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <!-- <div class="col-md-3">
                            <div class="form-group">
                                {{Form::bsSelectBackgroundImage('Ảnh nền Menu', 'bg_image[.menu-wrap]', @$custom_css['bg_image']['.menu-wrap'], ['width'=>45, 'height'=>45])}}
                            </div>
                        </div> -->
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu nền Menu</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[menu-bg-color]"
                                           value="{{@$custom_css['color_css']['menu-bg-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu chữ Menu</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[menu-txt-color]"
                                           value="{{@$custom_css['color_css']['menu-txt-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>Màu chữ Menu Active</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[menu-txt-active-color]"
                                           value="{{@$custom_css['color_css']['menu-txt-active-color']}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

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

                    <div class="row">
                       <div class="col-md-3">
                            <div class="form-group">
                                {{Form::bsSelectBackgroundImage('Ảnh nền footer chính', 'bg_image[footer-bg-img]', @$custom_css['bg_image']['footer-bg-img'], ['width'=>45, 'height'=>45])}}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Màu nền footer chính</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[footer-bg-color]"
                                           value="{{@$custom_css['color_css']['footer-bg-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Màu chữ tiêu đề chính</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[footer-title-color]"
                                           value="{{@$custom_css['color_css']['footer-title-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Màu chữ footer chính</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[footer-txt-color]" value="{{@$custom_css['color_css']['footer-txt-color']}}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                {{Form::bsSelectBackgroundImage('Ảnh nền footer phụ', 'bg_image[footer-bgsub-img]', @$custom_css['bg_image']['footer-bgsub-img'], ['width'=>45, 'height'=>45])}}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Màu nền footer phụ</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[footer-bgsub-color]"
                                           value="{{@$custom_css['color_css']['footer-bgsub-color']}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Màu chữ footer phụ</label>
                                <div class="input-group">
                                    <input type="text" class="form-control color_select" name="color_css[footer-txtsub-color]"
                                           value="{{@$custom_css['color_css']['footer-txtsub-color']}}">
                                </div>
                            </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="custom_css_editor">{{@$custom_css['custom_css_editor']}}</textarea>
                    </div>
                </fieldset>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @parent
    {{ 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 custom_css_editor = $('textarea[name="custom_css_editor"]').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(custom_css_editor.val());
        css_editor.getSession().on("change", function () {
            custom_css_editor.val(css_editor.getSession().getValue());
        });
    </script>
    <script>
        WB.chooseColor('.color_select');
        $('.wb-reset').click(function () {
            $fieldset = $(this).parents('fieldset:first');
            $fieldset.find('input').val('');
            $fieldset.find('img.img-thumbnail').attr('src', 'http://placehold.it/45x45');
            WB.chooseColor('.color_select');
        });

    </script>
@endsection