@extends('backend.layouts.master')
@section('content')
    <style>
        .select2 .select2-selection .select2-selection--multiple{
            height: 70px;
        }
    </style>
    <div class="content-body">
        <!-- card actions section start -->
        <section id="card-actions">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header fix-header bottom-card">
                            <div class="row" style="align-items: baseline">
                                <h4 class="col-lg-3">1.2 Danh mục sản phẩm</h4>
                            </div>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-header fix-header"></div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6">
                                        {{--<div class="">--}}
                                            {{--<div class="pu-caption">Danh sách</div>--}}
                                        {{--</div>--}}
                                        <div class="tableFixHead table-bordered table-hover"
                                             style="width: 100%; overflow-x: auto;">
                                            <table class="table-sortable table table-custom">
                                                <thead>
                                                <tr>
                                                    <th class="text-center" style="width: 30px;">#</th>
                                                    <th class="text-center nowrap">Tên</th>
                                                    <th class="text-center nowrap">Mô tả</th>
                                                    <th class="text-center nowrap">
                                                        <a id="add_new_category" data-toggle="modal"
                                                           data-target="#add_new_form"><i
                                                                    class="fa fa-plus"></i> Thêm
                                                        </a>
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody id="sortable">
                                                @if(count($docs))
                                                    @foreach($docs as $key=>$item)
                                                        <tr data-id="{{$item->id}}">
                                                            <td class="text-center" data-position="{{$item->position}}">{{$key+1}}</td>
                                                            <td class="text-center">
                                                                <input type="text"
                                                                       class="txt-dotted height-30 name"
                                                                       value="{{$item->name}}">
                                                            </td>
                                                            {{--<td class="text-center skin skin-square"><input type="checkbox" {{$item->close_order ? 'checked' : ''}} class="closeOrder">--}}
                                                            {{--</td>--}}
                                                            <td class="text-center">
                                                                <input type="text"
                                                                       class="txt-dotted height-30 description"
                                                                       value="{{$item->description}}">
                                                            </td>
                                                            <td class="text-center">
                                                                <a class="action-control save-category" href="javascript:void(0)"
                                                                   data-id="{{$item->id}}">
                                                                    <i class="fa fa-save fa-2x"></i>
                                                                </a>
                                                                <a class="action-control delete-item" href="javascript:void(0)"
                                                                   data-id="{{$item->id}}"
                                                                   data-url="/product/category/"
                                                                >
                                                                    <i class="fa fa-trash fa-2x"></i>
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="mt-2">
                                            {{--{{$posts->links()}}--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
@endsection
@section('script')
    @include('backend.layouts.script')
    <script src="{{asset('js/jquery-ui.js')}}"></script>
    <script>
        $("body").on("click", ".delete-item", function () {

            var elt = $(this).parents('tr');
            var data_id = $(this).data('id');
            var data_url = $(this).data('url');
            swal({
                title: 'Bạn có chắc chắn xóa mục này?',
                type: 'error',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                showCloseButton: true,
            }).then(function () {
                $.ajax({
                    data: {id: data_id},
                    url: data_url + data_id,
                    method: 'delete',
                    success: function (data) {
                        if (data && data.success === false) {
                            swal({
                                title: data.message ? data.message : '',
                                type: 'warning'
                            })
                        } else {
                            swal({
                                title: 'Đã xóa thành công!',
                                type: 'success'
                            })
                            elt.remove();
                            setTimeout(function () {
                                // location.reload();
                            }, 1000);
                        }
                    }
                });
            }, function (dismiss) {
            });
        });

        // category
        $(document).on('click', '#add_new_category', function () {
            $.ajax({
                url: '/product/category',
                method: 'POST',
                success: function (data) {
                    if (data) {
                        window.location.reload();
                    }
                }
            })
        })
        $(document).on('click', '.save-category', function () {
            let id = $(this).data('id');
            let data = {
                name :$(this).closest('tr').find('.name').val(),
                description :$(this).closest('tr').find('.description').val()
            }
            $.ajax({
                url: '/product/category/'+id,
                data:data,
                method: 'PUT',
                success: function (data) {
                    if (data) {
                        alertify.success('Cập nhật thành công!');
                        // window.location.reload();
                    }
                }
            })
        })

        //sortable
        $(function () {
            $("#sortable").sortable({ //update trạng thái đơn hàng
                stop: function (event, ui) {
                    let rows = $('.table-sortable tbody tr');
                    let dataPosition = [];
                    console.log(rows.length)
                    for (let r = 0; r < rows.length; r++) {
                        $(rows[r]).attr('data-position', r)
                        dataPosition.push({
                            id: $(rows[r]).attr('data-id'),
                            position: r
                        })
                    }
                    swal({
                        title: 'Bạn có muộn cập nhật?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        showCloseButton: true,
                    }).then(function () {
                        $.ajax({
                            url: '/ajax/update-category-position',
                            method: 'put',
                            data: {
                                data: dataPosition
                            },
                            success: function (data) {
                                alertify.success('Cập nhật thành công !');
                            }
                        })
                    })
                }
            });
        });

    </script>
@endsection