@extends("admin.layouts.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/jquery-nestable/jquery.nestable.css"
          rel="stylesheet" type="text/css"/>

@endsection
@section("content")
    <div class="row">
        <div class="col-md-8">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-list font-green"></i>
                        <span class="caption-subject font-green bold uppercase">Images</span>
                    </div>
                    <div class="actions">
                        <a href="{{route("admin.items.colors.images.create", [$item,$item_color])}}" class="btn btn-primary">
                            <i class="fa fa-plus"></i> Create </a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="table-scrollable">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th style="width: 100px;"> @lang("constants.thumbnail") </th>
                                <th style="width: 100px;"> @lang("constants.options") </th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($images as $image)
                                <tr>

                                    <td>
                                        <img width="200px" style="width: 200px"
                                             src="{{url("https://cdn.ihouse.ps/$image->name")}}"
                                             class="img-responsive"/>
                                    </td>


                                    <td>
                                        {{Form::open(['url'=>[route("admin.items.colors.images.destroy", [$item,$item_color, $image->id])],'method'=>"delete"])}}
                                        <button onclick="return confirm('are you sure?')" type="submit"
                                                class="btn btn-outline btn-sm red" title="Delete"><i
                                                class="fa fa-trash"></i> @lang("constants.delete")</button>
                                        {!! Form::close() !!}
                                    </td>
                                </tr>
                            @empty
                            @endforelse
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="8">
                                    {!! $images->links()!!}
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-list font-green"></i>
                        <span class="caption-subject font-green bold uppercase">Image Orders</span>
                    </div>
                </div>
                <div class="portlet-body">
                    {{ Form::open(['route' => ["admin.items.colors.images.order", $item,$item_color], 'class'=>"form-horizontal"]) }}
                    {{ Form::hidden('reorder',"",array('id'=>'reorder')) }}
                    <div class="dd" id="list">
                        <style>
                            .dd3-content {
                                height: 75px;
                            }
                            .dd-handle {
                                display: flex;
                                align-items: center;
                                height: 75px;
                            }

                            .dd3-handle:before {
                                top: auto;
                            }
                        </style>
                        <ol class="dd-list">
                            @foreach ($items as $item)
                                <li data-id="{{$item['id']}}" class="dd-item dd3-item">

                                    <div class="dd-handle dd3-handle"></div>
                                    <div class="dd3-content"><img
                                            src="{{ url("https://cdn.ihouse.ps/".$item['name']) }}"
                                            class="img-responsive" style="max-height:100%;"/></div>
                                </li>
                            @endforeach
                        </ol>
                    </div>
                </div>
                <div class="panel-footer">
                    {{ Form::submit('Update',array("class"=>"btn btn-primary btn-sm")) }}
                </div>
                {!! Form::close()!!}

            </div>
        </div>
        @endsection
        @section("scripts")
            <script src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/jquery-nestable/jquery.nestable.js"
                    type="text/javascript"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#list').nestable({maxDepth: 1});
                    update_out('#list', "#reorder");

                    $('#list').on('change', function () {
                        var out = $('#list').nestable('serialize');
                        $('#reorder').val(JSON.stringify(out));
                    });



                });

                function update_out(selector, sel2){
                    var out = $(selector).nestable('serialize');
                    $(sel2).val(JSON.stringify(out));
                }

            </script>
    @include("admin.layouts.update_attribute")
@endsection