@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 {
        padding: 15px;
    }
    .config-body.listing .section-item {
        padding-left: 15px;
        padding-right: 15px;
    }
</style>
<section class="image">
    <form action="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 }}">
                <input type="hidden" name="widget[media_id]" value="{{ isset($settings['media_id']) ? $settings['media_id'] : "" }}">
                <div class="form-group">
                    <label id="heading-label" for="heading">Image</label>
                    <div class="image-upload-box selected_widget_image" 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_widget')">
                            Select Image
                        </button>
                    </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">
                    <label id="heading-label" for="heading">Image alignment</label>
                    {!! Form::select('widget[image_alignment]',['left' => 'Left', 'center' => 'Center', 'right' => 'Right'],(isset($settings['image_alignment'])) ? $settings['image_alignment'] : 'center',['class' => 'form-control custom-select']) !!}
                </div>
                <div class="form-group">
                    <label id="heading-label" for="image_height">Height</label>
                    <input type="text" class="form-control"  name="widget[image_height]" value="{{ (isset($settings['image_height'])) ? $settings['image_height'] : '' }}">
                </div>
                <div class="form-group">
                    <label id="heading-label" for="image_width">Width</label>
                    <input type="text" class="form-control"  name="widget[image_width]" value="{{ (isset($settings['image_width'])) ? $settings['image_width'] : '' }}">
                </div>
                <div class="form-group">
                    <label id="heading-label" for="image_link">Link</label>
                    <input type="text" class="form-control"  name="widget[image_link]" value="{{ (isset($settings['image_link'])) ? $settings['image_link'] : '' }}">
                </div>
                <div class="form-check">
                    <div class="custom-control custom-checkbox loop-inside-checkbox">
                        <input  {{ $isNewWindowLink ? 'checked' : '' }}  class="custom-control-input" type="checkbox" value="1" id="openInNewWindow" />
                        <input type="hidden" name="widget[link_new_window]" value="{{ $isNewWindowLink ? 1 : 0 }}">
                        <label class="custom-control-label" for="openInNewWindow">
                            Open in New Window
                        </label>
                    </div>
                </div>
            </div>

            <div class="config-heading">
                Design
            </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">
                                    @include('Website::web-builder.widget.settings.index')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

{{--            @include('Website::web-builder.widget._advance_setting')--}}
            @include('Website::web-builder.widget._remove_section')
        </div>
    </form>
</section>