@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"/>
    <link
        href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2.min.css"
        rel="stylesheet" type="text/css"/>
    <link
        href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2-bootstrap.min.css"
        rel="stylesheet" type="text/css"/>

    <link
        href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"
        rel="stylesheet" type="text/css"/>
    <style>
        .select2.select2-container {
            width: 450px !important;
        }
    </style>
@endsection
@section("content")
    @php
        $model = ($model ?? 'accessory');
    @endphp

    <div class="row">
        <div class="col-md-8">
            <div class="portlet light bordered">
                <div class="portlet-body">
                    {{Form::open(['route'=>["admin.model-images.store-images", ['id' => $model_id, 'model' => $model]],'role'=>"form", 'files' => true])}}
                    <div class="form-body">
                        <div class="form-body">
                            <div class="row">
                                <div class="form-group">
                                    <div class="col-md-6">
                                        <input hidden name="model" value="{{ $model }}"/>
                                        <label class="control-label col-md-3">Images</label>
                                        <div class="col-md-9">
                                            {{Form::file("images[]",["multiple"=>"multiple",'class'=>"form-control"])}}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="form-actions noborder">
                            <button type="submit" class="btn blue">Upload</button>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <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">
                            @if($model == 'item')
                                @lang("constants.item_images")
                            @elseif($model == 'used_items')
                                @lang('constants.used_item_images')
                            @else
                                @lang("constants.accessory_images")
                            @endif
                        </span>
                    </div>
                    <div class="actions">
                        {{--                        <a href="{{route("admin.model-images.create", ['id' => $model_id, 'model' => $model])}}"--}}
                        {{--                           class="btn btn-primary">--}}
                        {{--                            <i class="fa fa-plus"></i> Create </a>--}}
                        @if($with_colors)
                            <button class="btn btn-info" onclick="submitFormWithAction('update')">
                                <i class="fa fa-edit"></i> Update
                            </button>
                        @endif
                        <button class="btn btn-danger" onclick="submitFormWithAction('delete')">
                            <i class="fa fa-trash"></i> Delete
                        </button>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="table-scrollable">
                        <form id="model_form"
                              action="{{route("admin.model-images.action",['id' => $model_id, 'model' => $model])}}"
                              method="post">
                            @php
                                $model_color_ids = [];
                                if($with_colors) {
                                    $model_color_ids = $related_model->colors->pluck('color.id')->toArray();
                                }
                            @endphp

                            @csrf
                            <input hidden id="form_action_type" name="action_type" value="delete">

                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th style="width: 50px;"><input type="checkbox" id="checkAll"></th>
                                    <th style="width: 140px;"> @lang("constants.thumbnail") </th>
                                    <th class="text-center" style="width: 140px;"> @lang("constants.is_base") </th>
                                    @if($with_colors)
                                        <th>With Colors</th>
                                    @endif
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($model_images as $index => $model_image)
                                    <tr>
                                        <td>
                                            <input type="checkbox" name="items[]" value="{{$model_image->id}}"
                                                   class="checkbox-items">
                                        </td>
                                        <td>
                                            <img
                                                src="{{url("https://cdn.ihouse.ps/" . ($model_image->name?:$model_image->image))}}"
                                                class="img-responsive max-with-100px"/>
                                        </td>
                                        <td class="text-center">
                                            <a href="#" data-type="is_base"
                                               data-class="{{ $model == 'item' ? 'ItemImage' : ( $model == 'used_items' ? 'UsedItemImage' : 'AccessoryImage') }}"
                                               data-id="{{$model_image->id}}" id="{{$model_image->id}}"
                                               class="attribute is-base">@if ($model_image->is_base)
                                                    <i
                                                        class="fa fa-check text-success fs15 pr5"></i>
                                                @else
                                                    <i
                                                        class="fa fa-times text-danger fs15 pr5"></i>
                                                @endif</a>
                                        </td>
                                        @if($with_colors)
                                            <td>
                                                {{Form::select("model_colors[$model_image->id][]", \IHouse::getColorsList(true, $model_color_ids), $model_image->with_colors, ['class' => 'select2-multiple color_changeable', 'multiple' => 'multiple']) }}
                                            </td>
                                        @endif
                                    </tr>
                                @empty
                                @endforelse
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="8">
                                        {!! $model_images->links()!!}
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </form>
                    </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">
                            @if($model == 'item')
                                @lang("constants.item_images_order")
                            @elseif($model == 'used_items')
                                @lang("constants.used_item_images_order")
                            @else
                                @lang("constants.accessory_images_order")
                            @endif
                        </span>
                    </div>
                </div>
                <div class="portlet-body">
                    {{ Form::open(['route' => ["admin.model-images.order", ['id' => $model_id, 'model' => $model]], '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>
        </form>
    </div>
@endsection
@section("scripts")
    <script
        src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/js/select2.full.min.js"
        type="text/javascript"></script>

    <script
        src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        type="text/javascript"></script>

    <script
        src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/plupload/js/plupload.full.min.js"
        type="text/javascript"></script>

    <script
        src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/jquery-repeater/jquery.repeater.js"
        type="text/javascript"></script>
    <script
        src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/jquery-nestable/jquery.nestable.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        let set_is_as_multi = true;

        function submitFormWithAction(action) {
            document.getElementById('form_action_type').value = action;
            document.getElementById('model_form').submit();
        }

        $(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));
            });
        });

        $("#checkAll").click(function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });

        function update_out(selector, sel2) {
            var out = $(selector).nestable('serialize');
            $(sel2).val(JSON.stringify(out));
        }
    </script>
    @include("admin.layouts.update_attribute")
    @include('admin.partials.select_colors_script')
@endsection