@extends('admin')

@section('styles')
    <link href="/assets/global/plugins/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />

@endsection

@section('content')
    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
        <div class="col-md-6">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-bubble font-green"></i>
                        <span class="caption-subject font-green sbold uppercase">Danh sách danh mục</span>
                    </div>
                    <div class="actions">
                        <a class="btn btn-success" data-toggle="modal" href="#add-menu">Thêm danh mục mới</a>
                    </div>
                </div>
                <div class="portlet-body ">
                    <div class="dd" id="nestable_list_1">
                        <ol class="dd-list">
                            @foreach($categories as $menu)
                                <li class="dd-item" data-id="{{ $menu->id }}">
                                    <div class="dd-handle"> {{ $menu->name }}</div>
                                    @php  \App\Components\Functions::printMenu($menu); @endphp
                                </li>
                            @endforeach

                        </ol>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-6" id="detail-menu"></div>

    </div>


    <div class="modal fade" id="add-menu"  role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Thêm danh mục mới</h4>
                </div>
                <div class="modal-body">
                    <form role="form" class="form-horizontal" id="form-menu">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">Tên</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="category_name" placeholder="Điền tên" name="name">
                                </div>
                            </div>
                        </div>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">Chọn danh mục cha</label>
                                <div class="col-md-9">
                                    <select class="form-control select2" name="parent_id">
                                        <option value="">Không có danh mục cha</option>
                                        @php $categories = \App\Models\Category::all(); @endphp

                                        @foreach($categories as $menu)
                                            <option value="{{ $menu->id }}">
                                                {{ $menu->name }}
                                            </option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">Slug</label>
                                <div class="col-md-9">
                                    <input type="text" id="category_slug" class="form-control" placeholder="Slug" name="slug">
                                </div>
                            </div>
                        </div>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">Seo title</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="Seo title" name="meta_title">
                                </div>
                            </div>
                        </div>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label">Seo description</label>
                                <div class="col-md-9">
                                    <textarea type="text" class="form-control" placeholder="Seo description" name="meta_description"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal">Đóng</button>
                    <button type="button" class="btn green" id="btn-save">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@push('scripts')
{{--<script src="/assets/global/plugins/jquery-nestable/jquery.nestable.js" type="text/javascript"></script>--}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>
<script src="/assets/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>

{{--https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js--}}

{{--<script src="/assets/pages/scripts/ui-nestable.min.js" type="text/javascript"></script>--}}

<script>
    $("#category_name").on('keyup', function (e) {
        $("#category_slug").val(convertToSlug($(this).val()))
    });

    function convertToSlug(str) {
        str = str.replace(/^\s+|\s+$/g, ''); // trim
        str = str.toLowerCase();

        // remove accents, swap ñ for n, etc
        var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
        var to   = "aaaaaeeeeeiiiiooooouuuunc------";
        for (var i = 0, l = from.length; i < l; i++) {
            str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
        }

        str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
            .replace(/\s+/g, '-') // collapse whitespace and replace by -
            .replace(/-+/g, '-'); // collapse dashes

        return str;
    }

    $("#nestable_list_1").nestable({
        group: 1, beforeDragStop: function (l, e) {
            // l is the main container
            // e is the element that was moved

            $.ajax({
                url: '/admin/category/detail/' + e.attr('data-id'),
                type: 'get',
                success: function (response) {
                    $('#detail-menu').html(response);
                    $('.select2').select2();
                }
            });
        }
    }).on("change", function () {
        $.ajax({
            url: '/admin/category/update-state',
            data: {
                list: $(this).nestable('serialize')
            },
            type: 'post',
            success: function () {
                //$('#nestable_list_1').nestable('destroy');
            }
        });
    });


    $(document).on('click', '#btn-save', function (e) {
        e.preventDefault();

        var data = $('#form-menu').serialize();

        $.ajax({
            url: '{{ url('admin/category/store') }}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    location.reload();
                }

            }
        });

    });

    $(document).on('click', '#btn-save-2', function (e) {
        e.preventDefault();

        var data = $('#form-menu-2').serialize();

        $.ajax({
            url: '{{ url('admin/category/update') }}',
            data: data,
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    toastr.success('Cập nhật thành công');
                    setTimeout(function(){  location.reload(); }, 1200);

                }

            }
        });

    });

    $(document).on('click', '#btn-delete-2', function (e) {
        e.preventDefault();

        bootbox.confirm({
            message: "Bạn có chắc chắn muốn xóa",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {
                    var data = $('#form-menu-2').serialize();

                    $.ajax({
                        url: '{{ url('admin/category/delete') }}',
                        data: data,
                        type: 'post',
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                location.reload();
                            }

                        }
                    });

                }
            }
        });


    });


    $(document).ready(function () {
        $('.select2').select2();

    });

</script>
@endpush