@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">@lang("constants.colors")</span>
                </div>
                  <div class="actions">
                <a href="{{route("admin.colors.create")}}" 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> Color</th>
                                <th> @lang("constants.title") </th>
                                <th class="text-center"> @lang("constants.is_active") </th>
                                <th class="text-center">Is Published </th>
                                <th> @lang("constants.options") </th>
                            </tr>
                        </thead>
                        <tbody>
                        {!! Form::open(['route'=>"admin.colors.index",'method'=>"get"]) !!}
                        <tr>
                            <td></td>
                            <td>
                                {{Form::text("title",Request::get("title",null),['class'=>"form-control form-filter input-sm"])}}
                            </td>

                            <td>
                                {!! Form::select("is_active",["active"=>"Active","not-active"=>"Not Active"],Request::get("is_active",null),['class'=>"form-filter input-sm form-control","placeholder"=>"All"])!!}

                            </td>
                            <td>
                                {!! Form::select("is_published",["yes"=>"Yes","no"=>"No"],Request::get("is_published",null),['class'=>"form-filter input-sm form-control","placeholder"=>"All"])!!}

                            </td>

                            <td style="display: flex">
                                <button type="submit" class="btn btn-sm btn-success filter-submit margin-bottom">
                                    <i class="fa fa-search"></i> Search
                                </button>
                                <a href="{{route("admin.colors.index")}}"
                                   class="btn btn-sm btn-info filter-submit margin-bottom">
                                    <i class="fa fa-refresh"></i> Reset</a>
                            </td>
                        </tr>

                        {!! Form::close() !!}
                        @forelse($colors as $color)
                            <tr>
                                <td>
                                    <button type="button" style="background:{{$color->color}}" class="btn btn-circle">
                                        &nbsp;
                                    </button>
                                </td>
                                <td>
                                    {{$color->name}}
                                </td>

                                <td class="text-center">
                                    <a href="#" data-type="is_active" data-class="Color" data-id="{{$color->id}}"
                                       id="{{$color->id}}" class="attribute is-active">@if ($color->is_active)
                                            <i class="fa fa-check text-success fs15 pr5"></i>
                                        @else
                                            <i class="fa fa-times text-danger fs15 pr5"></i>
                                        @endif</a>
                                </td>
                                <td class="text-center">
                                    <a href="#" data-type="is_published" data-class="Color" data-id="{{$color->id}}"
                                       id="{{$color->id}}" class="attribute is-published">@if ($color->is_published)
                                            <i class="fa fa-check text-success fs15 pr5"></i>
                                        @else
                                            <i class="fa fa-times text-danger fs15 pr5"></i>
                                        @endif</a>
                                </td>

                                <td>
                                    {{Form::open(['route'=>["admin.colors.destroy",$color->id],'method'=>"delete"])}}
                                    <a href="{{route("admin.colors.edit",$color->id)}}"
                                       class="btn btn-outline btn-sm purple" title="Edit"><i
                                            class="fa fa-edit"></i> @lang("constants.edit")</a>
                                    <a href="{{route("admin.colors.clone",$color->id)}}"
                                       class="btn btn-outline btn-sm blue" title="Clone"><i class="fa fa-copy"></i>
                                        Clone</a>
                                    <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">
                                    {!! $colors->appends($appends)->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">@lang("constants.colors_order")</span>
                </div>
            </div>
            <div class="portlet-body">
                {{ Form::open(['route' => "admin.colors.order",'class'=>"form-horizontal"]) }}
                {{ Form::hidden('reorder',"",array('id'=>'reorder')) }}
                <div class="dd" id="list">
                    <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">
                                    <button class="btn"
                                            style="width: 20px; height: 20px; padding: 0px;border-radius:50%;background:{{$item['color']}}"></button>&nbsp;{{$item['title']}}
                                </div>
                                @if(count($item['childs']) > 0)
                                    <ol class="dd-list" style="">
                                        @foreach ($item['childs'] as $item2)
                                            <li data-id="{{$item2['id']}}" class="dd-item dd3-item">
                                                <div class="dd-handle dd3-handle"></div>
                                                <div class="dd3-content">{{$item2['title']}}</div>
                                                @if(count($item2['childs']) > 0)
                                                    <ol class="dd-list" style="">
                                                        @foreach($item2['childs'] as $item3)
                                                            <li data-id="{{$item3['id']}}" class="dd-item dd3-item">
                                                                <div class="dd-handle dd3-handle"></div>
                                                                <div class="dd3-content">{{ $item3['title'] }}</div>
                                            @if(count($item3['childs']) > 0)
                                                <ol class="dd-list" style="">
                                                    @foreach($item3['childs'] as $item4)
                                                        <li data-id="{{$item4['id']}}" class="dd-item dd3-item">
                                                            <div class="dd-handle dd3-handle"></div><div class="dd3-content">{{ $item4['title'] }}</div>
                                                        </li>
                                                    @endforeach
                                                </ol>
                                             @endif
                                        </li>
                                    @endforeach
                                </ol>
                                @endif
                            </li>
                            @endforeach
                        </ol>
                    @endif
                </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: 2});
                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