@if($option->id > 0)
    <input type="hidden" name="type" value="{{ $option->type }}">
@else
    @if(count($types) == 1)
        <input type="hidden" name="type" value="Custom">
    @else
        <div class="form-group">
            {!! Form::label('type','Type') !!}
            {!! Form::select('type' , $types,$option->type , ['class' => 'form-control','placeholder' => 'Select','required' => true]) !!}
        </div>
    @endif
@endif
<div class="form-group">
    {!! Form::label('title','Display Name') !!}
    {!! Form::text('title' , $option->title , ['class' => 'form-control','placeholder' => 'Display Name','required' => true]) !!}
</div>
<div class="form-group attribute-form-field ">
    <div id="attribute-items-list" class="ui-sortable">
        {!! Form::label('options','Options',['class' => 'col-md-9 no-padding']) !!}
        {!! Form::label('options','SKU',['class' => 'col-md-2 no-padding']) !!}
        @if($option->id > 0)
            @foreach($option->item as $item)
                <div class="input-group attribute-item mt-1 sortable sortable-attribute">
                    <input type="hidden"  name="item_id[]" value="{!! $item->id !!}" />
                    <input type="text" class="form-control" name="item_title[]" value="{!! $item->title !!}" />
                    <input type="text" class="form-control col-md-2" name="item_sku[]" placeholder="SKU Extension" value="{!! $item->sku_prefix !!}" />
                    <input type="hidden" class="swatch_image" name="item_image[]" value="{!! $item->image !!}" />
                    <span class="input-group-btn">
                        <img src="{{ create_cloud_file_url($item->image) }}"  style="{{ ($item->image != '' && strpos($item->image,'#') === false ? '' :  'display:none;') }}" />
                        <span class="image_swatch_color" style="background-color: {{ $item->image }};{{ ($item->image != '' && strpos($item->image,'#') !== false ? '' :  'display:none;') }}"></span>
                        <a href="javascript:void(0);" class="btn btn-transparent upload_swatch" data-toggle="modal" data-target="#swatch_image"><i class="fa fa-upload"></i></a>
                    </span>
                    <span class="input-group-btn">
                        <a href="javascript:void(0);" class="btn btn-transparent delete-attribute-item"><i class="fa fa-trash-o"></i></a>
                    </span>
                </div>
            @endforeach
        @else
            <div class="input-group">
                <input type="text" class="form-control" name="list_item[]" id="tItem" placeholder="Option Name">
                <input type="text" class="form-control col-md-2" name="list_sku[]" id="tItem" placeholder="SKU Extension">
                <input type="hidden" class="swatch_image" name="list_image[]" />
            </div>
        @endif
    </div>

    <span class="input-group-btn pull-right" style="margin-top: 10px;">
            <button type="button" tabindex="-1" id="add-item" class="btn btn-success" onclick="return addNewItem('{{ ($option->id > 0) ? 'update_option' : 'create_option' }}')" ><i class="fa fa-plus"></i></button>
        </span>
    <div class="clearfix"></div>
</div>
@if($option->id > 0)
    <input type="hidden" name="option_id" value="{{ $option->id }}">
@endif
<div class="modal inmodal fade" id="swatch_image" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Color Swatch Image</h4>
            </div>
            <div class="modal-body" style="padding-right: 0px; padding-left: 0px;">

                <div class="tabs-container">
                    <ul class="nav nav-tabs" role="tablist">
                        <li><a class="nav-link active" id="btn-tab-color" data-toggle="tab" href="#tab-color"> Color</a></li>
                        <li><a class="nav-link" id="btn-tab-image" data-toggle="tab" href="#tab-image">Upload Image</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" id="tab-color" class="tab-pane active">
                            <div class="panel-body">
                                <div class="form-group color-select-group">
                                    <div class="row my-1 align-items-center">
                                        <div class="col-6">
                                            <label for="hexa_color">Color Code <br> <small>(Select or enter Hex Color)</small></label>

                                        </div>
                                        <div class="col-6 d-flex align-items-center">
                                            {!! Form::text('hexa_color' , $option->import_id , ['class' => 'form-control colorpicker']) !!}
                                            <a href="javascript:void(0);" class="btn btn-transparent m-0 ml-2"><i class="fa fa-eyedropper"></i></a>
                                        </div>
                                    </div>
                                    <div class="row my-1 align-items-center">
                                        <div class="col-6">
                                            <label>Preview</label>
                                        </div>
                                        <div class="col-6">
                                            <span class="image_swatch_color" style="background-color: #48C4A0;"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" id="tab-image" class="tab-pane">
                            <div class="panel-body">
                                <div action="#" class="dropzone custom-msg" id="dropzoneForm" style="min-height:130px">
                                    <div class="fallback">
                                        <input name="file[]" type="file" multiple />
                                    </div>
                                    <div class="dropzone-custom-message" style="pointer-events: none;">
                                        <div class="">

                                            <h5>Drop files to Upload <span class="small-text">&nbsp;or &nbsp; <span> click </span></span> </h5>
                                            <p>Image Size: 100x100px</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="clearfix"></div>
                                <div class="row my-1 align-items-center">
                                    <div class="col-6">
                                        <label>Preview</label>
                                    </div>
                                    <div class="col-6">
                                        <span class="image_swatch_image"><img src=""></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-white" data-dismiss="modal">Close</button> -->
                <button type="button" onclick="updateColor();" class="btn btn-success">Update</button>
            </div>
        </div>
    </div>
</div>
<style>
    .attribute-item img {
        width: 25px;
        margin-right: 5px;
        margin-left: 5px;
    }
    .attribute-item .image_swatch_color {
        width: 25px;
        margin-right: 5px;
        margin-left: 5px;
        height: 25px;
        display:inline-block;
        border: 1px solid #A3ADBE !important;
    }
    </style>