@extends('backend.layouts.master')
@section('content')
    <link href="{{url('css/jquery.nestable.css')}}" rel="stylesheet" type="text/css">

    <div class="content-body">
        <div class="row">
            <div class="col-12">

                <div class="card">
                    <div class="box-header" style="margin: 0">
                        <div class="box-tools" style="float: right;">
                            <button type="button" class="btn btn-info btn-flat" id="add">Thêm menu</button>
                            <button type="button" class="btn btn-primary btn-flat" id="expand-all">Mở rộng</button>
                            <button type="button" class="btn btn-danger btn-flat" id="collapse-all">Thu gọn</button>
                        </div>
                    </div>
                    <div class="card-header">
                        <h4 class="card-title">Danh sách danh mục</h4>
                    </div>
                    <div class="card-content">
                        <form action="{{route('admin.categories.store')}}" method="POST">
                            @csrf

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="hidden" name="id" class="id" value="">
                                        <!-- <input type="text" name="id" id="" style="display:none" class="id-update"> -->
                                        <div class="form-group required {{ $errors->has('title') ? 'has-error' : '' }}">
                                            <label for="projectinput1">Tên danh mục <span
                                                        class="text-danger">*</span></label>
                                            <input type="text" class="form-control title" placeholder="Tên danh mục"
                                                   name="title"
                                                   value="{{ $category->name ?? old('title')}}">
                                            <span class="help-block">{{ $errors->first('title', ':message') }}</span>
                                        </div>
                                        <div class="form-group required {{ $errors->has('description') ? 'has-error' : '' }}">
                                            <label for="text">Mô tả <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control description" placeholder="Mô tả"
                                                   name="description"
                                                   value="{{ $category->email ?? old('description') }}">
                                            <span class="help-block">{{ $errors->first('description', ':message') }}</span>
                                        </div>
                                        {{--<div class="form-group required {{ $errors->has('description') ? 'has-error' : '' }}">--}}
                                            {{--{!! Form::label('Danh mục cha') !!}--}}
                                            {{--{!! Form::select('parent_id', $parent,null,array('class' => 'form-control parent')) !!}--}}
                                            {{--<span class="help-block">{{ $errors->first('parent_id', ':message') }}</span>--}}
                                        {{--</div>--}}
                                        <input name="parent_id" type="hidden" value="0">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="control-label">Danh Sách</label>
                                        <div class="clear"></div>
                                        <div class="dd">
                                            {!! $nestable !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-right">
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-outline-primary mr-1 btn-update">
                                        <i class="ft-check"></i> Thêm mới
                                    </button>
                                    <button type="button" class="btn btn-outline-warning"
                                            onclick="location.href='';">
                                        <i class="ft-x"></i> Trở lại
                                    </button>
                                </div>
                            </div>
                        </form>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{{url('js/jquery.nestable.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function ($) {
            $('.dd').nestable();
            $('#expand-all').on('click', function () {
                $('.dd').nestable('expandAll');
            });
            $('#collapse-all').click(function () {
                $('.dd').nestable('collapseAll');
            })

            $('.edit').on('click', function () {
                const id = $(this).data("id");
                $.ajax({
                    url: `/admin/categories/${id}`,
                }).done(function (data) {
                    $('.id').val(data.id)
                    $('.title').val(data.title)
                    $('.description').val(data.description)
                    $('.parent').val(data.parent_id)
                    $('.btn-update').html('Lưu lại');
                });
            })
            $('.dd').nestable().on('change', function () {
                console.log($('.dd').nestable('serialize'), 'serialize')
                $.ajax({
                    url: '{{ url('admin/categories/serialize') }}',
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        data: $('.dd').nestable('serialize')
                    },
                    success: function (data) {
                        window.location.reload();
                    }
                });
            });
        })

    </script>
@endsection