@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="card-header">
                        <h4 class="card-title">Danh sách step theo phòng ban</h4>
                    </div>
                    <div class="card-content">
                        <form action="{{route('admin.steps.store')}}" method="POST">
                        @csrf
                        
                        <div class="card-body">
                            <div class="row mb-1">
                                <div class="col-12 form-group required {{ $errors->has('department_id') ? 'has-error' : '' }}">
                                    <label for="projectinput1">Chọn phòng ban<span
                                                    class="text-danger">*</span></label>
                                    <select name="department_id" id="departmentChange" class="form-control" >
                                        <option value="" selected disabled>Chọn phòng ban</option>
                                        @foreach($departments as $item)
                                            <option data-id="{{$item->id}}" value="{{$item->id}}">{{$item->name}}</option>
                                        @endforeach
                                    </select>
                                    <span class="help-block">{{ $errors->first('department_id', ':message') }}</span>
                                </div>
                                <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">Chọn lộ trình học tập<span
                                                    class="text-danger">*</span></label>
                                        <select name="role_id[]" id="" class="form-control select2" multiple >
                                            @foreach($roles as $item)
                                                <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        </select>
                                        <!-- <input type="text" class="form-control title select2" placeholder="Tên thể loại"
                                               name="title"
                                               value="{{ $category->name ?? old('title')}}"> -->
                                        <span class="help-block">{{ $errors->first('title', ':message') }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                
                                <div class="col-md-6">
                                    <label class="control-label">Danh sách lộ trình</label>
                                    
                                    <div class="clear"></div>
                                        <div class="dd">
                                            <ol class="dd-list">

                                            </ol>
                                        </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 ($) {
            $('#expand-all').on('click',function () {
                $('.dd').nestable('expandAll');
            });
            $('#collapse-all').click(function () {
                $('.dd').nestable('collapseAll');
            })

            $('.dd').nestable().on('change',function(e){
                $.ajax({
                    url: '{{ url('admin/steps/serialize') }}',
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        data: $('.dd').nestable('serialize')
                    },
                    success: function (data) {
                        // window.location.reload();
                    }
                });
            });


            $('.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');
                });
            })

            $('#departmentChange').on('change',function(){
                const id = $(this).find(":selected").val();
                getDepartment(id);
            })

            @if(session('department_id'))
                getDepartment("{{session('department_id')}}");
                $('#departmentChange').val("{{session('department_id')}}").change();
            @endif

            function getDepartment(id) {
                let html = '';
                var row = $('body').find('.dd-list');
                row.empty();
                $.ajax({
                    url: `/admin/steps`,
                    data: {id: id},
                }).done(function(data) {
                    let abc = data.data;
                    if(abc.length) {
                        abc.forEach(element => {
                            if(element.id && (element.role && element.role.name)) {
                                html+=`
                                <li class="dd-item dd3-item" data-id="` + element.id + `">
                                    <div class="dd-handle dd3-handle"></div>
                                    <div class="dd3-content">
                                        <span class="name">` +(element.role.name ?? '')+`</span>
                                        <a href="javascript:void(0)" class="pull-right danger delete-item" title="{{trans('table.delete')}}" data-id="`+element.id+`"><i class="fa fa-times"></i></a>
                                    </div>
                                </li>
                            `;
                            }
                        });
                        row.html(html);
                    }else {
                        row.empty();
                    }
                });
            }
        })

    </script>
@endsection