@extends('layouts.main')

@section('main-content')

    <div class="nk-content-inner">
        <div class="nk-content-body">
            <div class="nk-block" style="margin-top: 20px">
                <div class="card card-bordered card-stretch">
                    <div class="card-inner-group">
                        <div class="card-inner position-relative card-tools-toggle">
                            <div class="card-title-group">
                                <div class="card-tools">
                                    <h6>Setup Ministry Change Request Workflow</h6>
                                    <p>Select roles that will handle change requests. You can change order by moving items up or down</p>
                                    <small><span class="text-danger">*</span> Please note that the permission to handle change requests must be assigned to the selected roles</small>
                                </div><!-- .card-tools -->

                            </div>
                        </div><!-- .card-inner -->
                        <form id="workflowCreate" action="{{ route('change_request.workflow.save') }}" method="POST">
                            @csrf
                            <div class="card-inner p-0">
                                <div class="card mt-2">
                                    <div class="col-lg-4 col-md-3 col-sm-12 m-auto">
                                        <div class="form-group w-100 float-left">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">Ministry</span>
                                                </div>
                                                <select required class="form-control" name="ministry">
                                                    <option value="">Select a ministry</option>
                                                    @foreach($ministries as $ministry)
                                                        <option value="{{ $ministry->id }}">{{ $ministry->display_name }}</option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="nk-tb-list nk-tb-ulist" id="roleDraggableDiv">

                                    <div class="nk-tb-item nk-tb-head">
                                        <div class="nk-tb-col nk-tb-col-check">
                                            <div class="custom-control custom-control-sm custom-checkbox notext">
                                            </div>
                                        </div>
                                        <div class="nk-tb-col tb-col-mb"><span class="sub-text">Role(s)</span></div>
                                        <div class="nk-tb-col"><span class="sub-text">Order</span></div>
                                        <div class="nk-tb-col tb-col-lg"><span class="sub-text">Remove</span></div>
                                    </div><!-- .nk-tb-item -->

                                    <div class="nk-tb-item office-draggable-list" draggable="true">
                                        <div class="nk-tb-col nk-tb-col-check">
                                            <div class="custom-control custom-control-sm custom-checkbox notext">
                                                <em class="icon ni ni-sort doc-list"></em>
                                            </div>
                                        </div>
                                        <div class="nk-tb-col tb-col-mb">
                                            <select class="form-select form-select-sm inserted-div role"  name="workflow[0][role]" required data-search="on" data-placeholder="Select a role">
                                                <option value=""></option>
                                                @foreach ($roles as $role)
                                                    <option value="{{$role->id}}">{{$role->display_name}}</option>
                                                @endforeach

                                            </select>
                                        </div>

                                        <div class="nk-tb-col">
                                            <div class="form-control-wrap">
                                                <input type="text" readonly value="1" name="workflow[0][sort_order]" class="form-control order" placeholder="">
                                            </div>
                                        </div>
                                        <div class="nk-tb-col nk-tb-col-check">
                                            <div class="custom-control custom-control-sm custom-checkbox notext">
                                                <em class="icon ni ni-cross-circle doc-list remove-process"></em>
                                            </div>
                                        </div>
                                    </div><!-- .nk-tb-item -->


                                </div><!-- .nk-tb-list -->
                                <div class="">
                                    <div class="nk-tb-col nk-tb-col-check">
                                        <div class="custom-control custom-control-sm custom-checkbox notext">
                                        </div>
                                    </div>
                                    <div class="nk-tb-col">
                                        <div class="user-card">
                                            <em class="icon ni ni-plus-circle doc-list"></em><a href="javascript:void(0)" class="primary-color" onclick="addNewRow()">Add Level</a>
                                        </div>
                                    </div>
                                </div><!-- .nk-tb-item -->

                                <div class="nk-tb-item">
                                    <div class="nk-tb-col nk-tb-col-check">
                                        <div class="custom-control custom-control-sm custom-checkbox notext">
                                        </div>
                                    </div>
                                    <div class="nk-tb-col">
                                        <button class="btn btn-lg bg-success text-white" type="submit" >Save Workflow</button>
                                        <div class="user-card">
                                        </div>
                                    </div>
                                </div><!-- .nk-tb-item -->
                            </div><!-- .card-inner -->
                        </form>

                    </div><!-- .card-inner-group -->
                </div><!-- .card -->
            </div><!-- .nk-block -->
        </div>
    </div>







    <script type="text/javascript">

        function addNewRow(){
            let theList = $('#roleDraggableDiv');
            //check current length of the list
            var currentLength = $('#roleDraggableDiv > div').length;
            let line = `
            <div class="nk-tb-item office-draggable-list" draggable="true">
                <div class="nk-tb-col nk-tb-col-check">
                    <div class="custom-control custom-control-sm custom-checkbox notext">
                        <em class="icon ni ni-sort doc-list"></em>
                    </div>
                </div>
                <div class="nk-tb-col tb-col-mb">
                    <select class="form-select form-select-sm inserted-div office" name="workflow[${currentLength - 1}][role]" required data-search="on" data-placeholder="Select a role">
                        <option value=""></option>
                        @foreach ($roles as $role)
                            <option value="{{$role->id}}">{{$role->display_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="nk-tb-col">
                    <div class="form-control-wrap">
                        <input type="text" readonly value="${currentLength}" name="workflow[${currentLength - 1}][sort_order]" class="form-control order" placeholder="">
                    </div>
                </div>
                <div class="nk-tb-col nk-tb-col-check">
                    <div class="custom-control custom-control-sm custom-checkbox notext">
                        <em class="icon ni ni-cross-circle doc-list remove-process"></em>
                    </div>
                </div>
            </div>`;
            theList.append(line);
            //re-enforce select2 on the element
            $('.inserted-div').select2();
            enableBtn();
        }


        $(function() {
            $( "#roleDraggableDiv" ).sortable({
                update: function(event, ui) {
                    //$(ui.item).find('.order').val(ui.item.index());
                    resortOrder();
                },
                start: function(event, ui) {

                },

            });
            $( "#sortable" ).disableSelection();
        });

        // remove an office process 
        $('#roleDraggableDiv').on('click', '.remove-process', function(){

            $(this).parents('.office-draggable-list').remove();
            resortOrder();
        });

        //resorting item order
        function resortOrder(){
            var listElements = $('#roleDraggableDiv').children();
            Array.from(listElements).forEach((element, index) => {
                //first element is the header
                if(index !== 0){
                    let officeItem = $(element);
                    officeItem.find('.order').val(index)
                }
            });
            if(listElements.length < 2){
                disableBtn();
            }
            else{
                enableBtn()
            }
        }

        //disable submit button
        function disableBtn(){
            $("#submitBtn").prop("disabled",true);
        }

        //enable submit button
        function enableBtn(){
            $("#submitBtn").prop("disabled",false);
        }

        //save workflow to database
        function saveWorkflow(){
            //let's retrieve all the children of #roleDraggableDiv
            //put in mind that the first child is the header, so we ignore
            var infoAreaElements = $('#roleDraggableDiv').children();
            let dataToSave = [];

            Array.from(infoAreaElements).forEach((element, index) => {
                //get detail of each office
                let eachOfficeDetail = {};
                //first element is the header
                if(index !== 0){
                    let officeItem = $(element);
                    eachOfficeDetail.order = officeItem.find('.order').val();
                    eachOfficeDetail.officeId = officeItem.find('.office').val();
                    eachOfficeDetail.statusId = officeItem.find('.status').val();
                    eachOfficeDetail.approval = officeItem.find('.approval-number').val();
                    eachOfficeDetail.serviceId = $('#serviceId').val();
                    //check if all forms are filled

                    // if(eachOfficeDetail.order == "" || eachOfficeDetail.officeId =="" || eachOfficeDetail.statusId == "" || eachOfficeDetail.approval ==""){
                    //     let errorMessage = "The details for order "+ index + " is not completely filled. All the fields are compulsory"; 
                    //     alert(errorMessage);
                    //     //return;
                    // }
                    dataToSave.push(eachOfficeDetail);

                }

            });
            console.log(dataToSave);
            let data = JSON.stringify(dataToSave);
            console.log(data);
            const requestUrl = "/services/workflow/save-workflow";
            //let's keep user inform while we make request
            $('#submitBtn').prop('disabled', true);
            $('#submitBtn').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span> Loading... </span>');
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                url: requestUrl,
                data: {
                    office_data: data,
                },
                success: function(data){

                    console.log("success",data);
                    window.location = "/services/list"
                },
                dataType: 'json'
            });

        }

        //form submission
        $(document).ready(function(){
            $("#submitBtn").click(function(event){
                //check if form validation is passed
                let passedValidity = $('#workflowCreate')[0].checkValidity();

                if(passedValidity){
                    event.preventDefault();
                    saveWorkflow();
                }

            });
        });




    </script>
@endsection