<?php $__env->startSection('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" />

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <?php if(session()->has('error')): ?>
        <div class="alert alert-danger"><?php echo e(session()->get('error')); ?></div>
    <?php endif; ?>
    <?php if(session()->has('success')): ?>
        <div class="alert alert-success"><?php echo e(session()->get('success')); ?></div>
    <?php endif; ?>
    <?php if(count($errors) > 0): ?>
        <div class="alert alert-danger">
            <ul>
                <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li><?php echo e($error); ?></li>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>
        </div>
    <?php 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">
                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $menu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li class="dd-item" data-id="<?php echo e($menu->id); ?>">
                                    <div class="dd-handle"> <?php echo e($menu->name); ?></div>
                                    <?php  \App\Components\Functions::printMenu($menu); ?>
                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        </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(); ?>

                                        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $menu): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($menu->id); ?>">
                                                <?php echo e($menu->name); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                                    </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>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>


<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>





<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: '<?php echo e(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: '<?php echo e(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: '<?php echo e(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>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('admin', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>