@include('Website::web-builder.widget._back_title',compact('title'))
<style>
    .config-body.listing {
        padding: 0;
    }
    .card {
        border: none;
        width: 100%;
    }
    .card-header {
        padding: 0;
        border: none !important;
        width: 100%;
    }
    .card-header .btn.btn-link {
        border: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        color: #000 !important;
    }
    .card-body form {
        padding: 15px;
    }
    .config-body.listing .section-item {
        padding-left: 15px;
        padding-right: 15px;
    }
</style>
<section class="image-text-overlay" id="widget-image-with-text-overlay">
    <form method="post" onsubmit="return false;">
        <div class="config-box">
            <div class="config-heading">
                Settings
            </div>
            <div class="config-body">
                <div class="form-group">
                    <label for="heading">Section Label</label>
                    <input type="text" name="widget[widget_label]"  class="form-control" placeholder="{{ $title }}"  value="{{  optional($settings)['widget_label'] ?? $title }}" />
                </div>
                <input type="hidden" name="widget[type]" value="{{ $widget->type }}">
                <input type="hidden" name="widget[id]" value="{{ $widget->id }}">

                <div class="form-group">
                    <label id="heading-label" for="heading">Image</label>
                    <div class="image-upload-box selected_image_with_text_overlay" style="background-image:url({{url($image_url)}}); background-repeat:
                        no-repeat;background-size: cover">
                        <button class="btn-primary" type="button" href="javascript:void(0);" onclick="openGallery('image_with_text_overlay_section')">
                            Select Image
                        </button>
                        @if(isset($settings['media_id']))
                            <input type="hidden" id="media_id" name="widget[media_id]" value="{{ $settings['media_id'] }}">
                        @endif
                    </div>
                </div>

                <div class="form-group">
                    <label id="heading-label" for="heading">Image Alt</label>
                    {!! Form::text('widget[image_alt]',(isset($settings['image_alt'])) ? $settings['image_alt'] : '',['class' => 'form-control', 'placeholder' => 'Image Alt']) !!}
                </div>


                <div class="form-group">
                    <div class="config-dropdown">
                        <label>Heading</label>
                        <input name="widget[section_title]" id="heading" type="text" class="form-control" value="{{ (isset($settings['section_title'])) ? $settings['section_title'] : '' }}">
                    </div>
                </div>
{{--                <div class="config-dropdown">--}}
{{--                    <label for="heading">Mobile Heading Font Size</label>--}}
{{--                    <div class="input-group mb-3">--}}
{{--                        {!! Form::text('widget[mobile_heading_font_size]', (isset($settings['mobile_heading_font_size'])) ? $settings['mobile_heading_font_size'] : '' ,['class' => 'form-control']) !!}--}}
{{--                        <div class="input-group-append">--}}
{{--                            <span class="input-group-text" id="basic-addon2">px</span>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
                <div class="form-group">
                    <a class="float-right builder_content_popup mb-2 mr-1" href="javascript:void(0);" data-toggle="modal" data-target="#builder_popup">
                        <i class="fa fa-expand" style="color: #B283C7"></i>
                    </a>
                    <div class="config-dropdown">
                        <label>Text</label>
                        {{--                        <textarea style="display: none;" class="form-control" name="widget[text]">{!! (isset($settings['text'])) ? $settings['text'] : '' !!}</textarea>--}}
                        {{--                        <div class="summernote">{!! (isset($settings['text'])) ? $settings['text'] : '' !!}</div>--}}
                        {!! RTEForm::rte('widget[text]', @$settings['text'], ['isSmall' => true]) !!}
                    </div>
                </div>
                <div class="form-group">
                    <a class="float-right builder_content_popup mb-2 mr-1" href="javascript:void(0);" data-toggle="modal" data-target="#builder_popup">
                        <i class="fa fa-expand" style="color: #B283C7"></i>
                    </a>
                    <div class="config-dropdown">
                        <label>Mobile Text</label>
                        {!! RTEForm::rte('widget[mobile_text]', @$settings['mobile_text'], ['isSmall' => true]) !!}
                    </div>
                </div>
                <div class="form-group">
                    <div class="config-dropdown">
                        <label>Button alignment</label>
                        {!! Form::select('widget[button_alignment]',['left' => 'Left','center' => 'Center','right' => 'Right'],(isset($settings['button_alignment'])) ? $settings['button_alignment'] : null,['class' => 'form-control custom-select']) !!}
                    </div>
                </div>
                <div class="form-group">
                    <label for="button_label">Button label</label>
                    <input name="widget[button_label]" id="button_label" type="text" class="form-control" value="{{ (isset($settings['button_label'])) ? $settings['button_label'] : '' }}" />
                </div>
                <div class="form-group">
                    <label for="button_link">Button link</label>
                    <input name="widget[button_link]" id="button_link" type="text" class="form-control" value="{{ (isset($settings['button_link'])) ? $settings['button_link'] : '' }}" />
                </div>
                <div class="form-check">
                    <div class="custom-control custom-checkbox loop-inside-checkbox">
                        <input  {{ (isset($link_new_window) and $link_new_window) ? 'checked' : '' }}  class="custom-control-input" type="checkbox" value="1" id="openInNewWindow" />
                        <input type="hidden" name="widget[content_link_new_window]" value="{{ (isset($link_new_window) and $link_new_window) ? 1 : 0 }}">
                        <label class="custom-control-label" for="openInNewWindow">
                            Open in New Window
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="config-dropdown">
                        <label>Content alignment</label >
                        {!! Form::select('widget[content_alignment]',['left' => 'Left','center' => 'Center','right' => 'Right'],(isset($settings['content_alignment'])) ? $settings['content_alignment'] : 'left' ,['class' => 'form-control custom-select']) !!}
                    </div>
                </div>
                <div class="form-group">
                    <div class="config-dropdown">
                        <label>Layout</label>
                        {!! Form::select('widget[hero_layout]',['full_width' => 'Full width','fixed_width' => 'Fixed Width'],(isset($settings['hero_layout'])) ? $settings['hero_layout'] : null,['class' => 'form-control custom-select']) !!}
                    </div>
                </div>
                <div class="form-group">
                    <div class="config-dropdown">
                        <label>Section height</label>
                        {!! Form::select('widget[hero_size]',['adapt' => 'Adapt to image','x-small' => 'Extra Small','small' => 'Small','medium' => 'Medium','large' => 'Large','x-large' => 'Extra Large','auto' => 'Auto'],(isset($settings['hero_size'])) ? $settings['hero_size'] : null,['class' => 'form-control custom-select']) !!}
                    </div>
                </div>

{{--                <div class="form-group">--}}
{{--                    <div class="config-dropdown">--}}
{{--                        <label>Image Size</label>--}}
{{--                        {!! Form::select('widget[image_size]',['cover' => 'Cover','contain' => 'Contain','auto' => 'Auto'], optional($settings)['image_size'] ?? 'cover',['class' => 'form-control custom-select']) !!}--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="form-group">--}}
{{--                    {!! Form::label('widget[mobile_text_overly_width]','Mobile Overlay Text Width') !!}--}}
{{--                    {!! Form::select('widget[mobile_text_overly_width]', ['25%' => '25%', '50%' => '50%', '75%' => '75%','100%' => '100%'], @$settings['mobile_text_overly_width'] ?? '100%',['class' => 'form-control']) !!}--}}
{{--                </div>--}}
{{--                <div class="form-group">--}}
{{--                    <div class="config-dropdown">--}}
{{--                        <label>Text Size</label>--}}
{{--                        {!! Form::select('widget[text_size]',['medium' => 'Medium','large' => 'Large'],(isset($settings['text_size'])) ? $settings['text_size'] : null,['class' => 'form-control custom-select']) !!}--}}
{{--                    </div>--}}
{{--                </div>--}}


{{--                <div class="form-group">--}}
{{--                    {!! Form::label('widget[overlay_heading_color]','Text Color') !!}--}}
{{--                    {!! Form::text('widget[overlay_heading_color]', optional($settings)['overlay_heading_color'] ,['class' => 'form-control colorPicker']) !!}--}}
{{--                </div>--}}
{{--                <div class="form-group">--}}
{{--                    {!! Form::label('widget[overlay_body_color]','Body Color') !!}--}}
{{--                    {!! Form::text('widget[overlay_body_color]', optional($settings)['overlay_body_color'] ,['class' => 'form-control colorPicker']) !!}--}}
{{--                </div>--}}
{{--                <div class="form-group">--}}
{{--                    {!! Form::label('widget[button_bg_color]','Button Background') !!}--}}
{{--                    {!! Form::text('widget[button_bg_color]', optional($settings)['button_bg_color'] ,['class' => 'form-control colorPicker']) !!}--}}
{{--                </div>--}}
{{--                <div class="form-group">--}}
{{--                    {!! Form::label('widget[button_text_color]','Button Text Color') !!}--}}
{{--                    {!! Form::text('widget[button_text_color]', optional($settings)['button_text_color'] ,['class' => 'form-control colorPicker']) !!}--}}
{{--                </div>--}}

            </div>
            {{--            @include('Website::web-builder.widget._advance_setting')--}}
        </div>
        <div class="config-body listing">
            <div id="accordion" class="testimonials-listing">
                <div class="card widget-accordion-card" id="card-settings">
                    <div class="card-header" id="heading-settings">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-settings" aria-expanded="true" aria-controls="collapse-settings">
                                <div class="section-item">
                                    <img src="{{ asset('/assets/images/sidebar-icons/add-title-taline.svg') }}" alt="" />
                                    <p>Design</p>
                                    <div class="right-icons">
                                        <div class="view-icon">
                                            <i class="fa fa-caret-right" style="color: #8F8F8F"></i>
                                        </div>
                                    </div>
                                </div>
                            </button>
                        </h5>
                    </div>
                    <div id="collapse-settings" class="collapse" aria-labelledby="heading-settings" data-parent="#accordion">
                        <div class="card-body">
                            <div class="wrapper-list">
                                <div class="config-heading">
                                    Image
                                </div>
                                <div class="config-body">
                                    <div class="form-group">
                                        <div class="config-dropdown">
                                            <label>Image alignment</label>
                                            {!! Form::select('widget[image_alignment]',['top left' => 'Top left','top center' => 'Top center','top right' => 'Top right','center left' => 'Middle left','center center' => 'Middle center','center right' => 'Middle right','bottom left' => 'Bottom left','bottom center' => 'Bottom center','bottom right' => 'Bottom right'],(isset($settings['image_alignment'])) ? $settings['image_alignment'] : null,['class' => 'form-control custom-select']) !!}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="config-dropdown">
                                            <label>Image Size</label>
                                            {!! Form::select('widget[image_size]',['cover' => 'Cover','contain' => 'Contain','auto' => 'Auto'], optional($settings)['image_size'] ?? 'cover',['class' => 'form-control custom-select']) !!}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Mobile Image position</label>
                                        <div id="slider">
                                            <input
                                                class="bar"
                                                type="range"
                                                id="rangeinput"
                                                name="widget[mb_img_position]"
                                                value="{{ optional($settings)['mb_img_position'] ?? '0' }}"
                                                step="10"
                                                min="0" max="100"
                                                data-content="mb_image_position_speed"
                                            />
                                            <span class="highlight"></span>
                                            <output id="mb_image_position_speed">{{ optional($settings)['mb_img_position'] ?? '0' }}</output>
                                        </div>
                                        <span
                                            class="font-weight-bold text-primary ml-2 mt-1 valueSpan"
                                        ></span>
                                    </div>
                                </div>
                                <div class="config-heading">
                                    Heading
                                </div>
                                <div class="config-body">
                                    @include('Website::web-builder.widget.settings.section_heading_setting')
                                </div>
                                <div class="config-heading">
                                    Mobile Heading
                                </div>
                                <div class="config-body">
                                    @include('Website::web-builder.widget.settings.section_mobile_heading_setting')
                                </div>
                                <div class="config-heading">
                                    Overlay Text
                                </div>
                                <div class="config-body">
                                    <div class="form-group">
                                        {!! Form::label('widget[overlay_width]','Text Width') !!}
                                        {!! Form::select('widget[overlay_width]', ['25%' => '25%', '50%' => '50%', '75%' => '75%','100%' => '100%'], @$settings['overlay_width'] ?? '100%',['class' => 'form-control']) !!}
                                    </div>
                                    <div class="form-group">
                                        {!! Form::label('widget[mobile_text_overly_width]','Mobile Text Width') !!}
                                        {!! Form::select('widget[mobile_text_overly_width]', ['25%' => '25%', '50%' => '50%', '75%' => '75%','100%' => '100%'], @$settings['mobile_text_overly_width'] ?? '100%',['class' => 'form-control']) !!}
                                    </div>
                                    <div class="form-group">
                                        <label>Padding Top</label>
                                        <div class="input-group">
                                            {!! Form::text('widget[preview_text_top_padding]', optional($settings)['preview_text_top_padding'] ?? '' ,['class' => 'form-control']) !!}
                                            <div class="input-group-append">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Padding Bottom</label>
                                        <div class="input-group">
                                            {!! Form::text('widget[preview_text_bottom_padding]', optional($settings)['preview_text_bottom_padding'] ?? '' ,['class' => 'form-control']) !!}
                                            <div class="input-group-append">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="config-heading">
                                    Overlay
                                </div>
                                <div class="config-body">
                                    <div class="form-group">
                                        <label id="heading-label" for="heading">OverLay Opacity</label>
                                        <div id="slider">
                                            <input
                                                class="bar"
                                                type="range"
                                                id="rangeinput"
                                                name="widget[overlay_opacity]"
                                                value="{{ (isset($settings['overlay_opacity'])) ? $settings['overlay_opacity'] : 1 }}"
                                                step="0.1"
                                                min="0" max="1"
                                                data-content="image_overlay_opacity"
                                            />
                                            <span class="highlight"></span>
                                            <output id="products_post_limit">{{ (isset($settings['overlay_opacity'])) ? $settings['overlay_opacity'] : 1 }}</output>
                                        </div>
                                        <span
                                            class="font-weight-bold text-primary ml-2 mt-1 valueSpan"
                                        ></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    {!! Form::label('widget[overlay_color]','Overlay Color') !!}
                                    {!! Form::text('widget[overlay_color]', optional($settings)['overlay_color'] ,['class' => 'form-control colorPicker']) !!}
                                </div>
                                <div class="config-heading">
                                    Button
                                </div>
                                <div class="config-body">
                                    <div class="form-group">
                                        <label>Font Family</label>
                                        {!! Form::select('widget[button_font_family]', getFontFamilies() ,optional($settings)['button_font_family'] ?? '', ['class' => 'form-control custom-select']) !!}
                                    </div>
                                    <div class="form-group">
                                        <label>Font Size</label>
                                        <div class="input-group">
                                            {!! Form::text('widget[button_font_size]', optional($settings)['button_font_size'] ?? '' ,['class' => 'form-control']) !!}
                                            <div class="input-group-append">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Background color</label>
                                        {!! Form::text('widget[button_bg_color]' , optional($settings)['button_bg_color'] ?? '' , ['class' => 'form-control colorPicker']) !!}
                                    </div>
                                    <div class="form-group">
                                        <label>Font color</label>
                                        {!! Form::text('widget[button_font_color]' , optional($settings)['button_font_color'] ?? '' , ['class' => 'form-control colorPicker']) !!}
                                    </div>
                                    <div class="form-group">
                                        <label>Border Color</label>
                                        {!! Form::text('widget[button_border_color]' , optional($settings)['button_border_color'] ?? '' , ['class' => 'form-control colorPicker']) !!}
                                    </div>
                                    <div class="form-group">
                                        <label>Border Width</label>
                                        <div class="input-group">
                                            {!! Form::text('widget[button_border_width]', optional($settings)['button_border_width'] ?? '' ,['class' => 'form-control']) !!}
                                            <div class="input-group-append">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Border Radius</label>
                                        <div class="input-group">
                                            {!! Form::text('widget[button_border_radius]', optional($settings)['button_border_radius'] ?? '' ,['class' => 'form-control']) !!}
                                            <div class="input-group-append">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Padding above button</label>
                                        <div class="input-group">
                                            {!! Form::text('widget[button_top_padding]', optional($settings)['button_top_padding'] ?? '' ,['class' => 'form-control']) !!}
                                            <div class="input-group-append">
                                                <span class="input-group-text">px</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @include('Website::web-builder.widget.settings.index')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('Website::web-builder.widget._remove_section')
        </div>
    </form>
</section>