HOME

@include('admin.layouts.header')
@include('admin.layouts.sidebar')

<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles mx-0">
            <div class="col-sm-6 p-md-0">
                <div class="welcome-text">
                    <h4>Add User </h4>
                </div>
            </div>
            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                <ol class="breadcrumb">
                    <li><a href="{{ route('admin.create-user') }}" class="btn bg-blue-soft text-blue"><i
                                class="fa fa-angle-double-left"></i> Back</a></li>
                </ol>
            </div>
        </div>
        <!-- row -->

        <div class="row">
            <div class="col-xl-5 col-lg-5 col-md-5">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Select Modules</h4>
                    </div>

                    <div class="card-body account-profile">
                        <div id="mydivClass" class="divClass form-group col-md-12" style="overflow:auto">

                            <div id="jstree"></div>
                        </div>

                    </div>
                </div>
                <!--/ card -->
            </div>

            <div class="col-xl-7 col-lg-7 col-md-7">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">User Details</h4>
                    </div>
                    <div class="card-body">

                        <div class="basic-form form-own">
                            <form action="{{ route('admin.create-user.save') }}" method="POST" id="editor">
                                @csrf

                            <input type="hidden" name="selectedItems" id="selectedItems">

                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>Name</label>
                                        <input type="text" class="form-control" placeholder="Enter your name" name="user_name" value="{{ old('user_name') }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>Email address</label>
                                        <input type="email" class="form-control" placeholder="Enter your email address" name="user_email" value="{{ old('user_email') }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label>User Role</label>
                                        <select name="user_role" id="user_role" class="form-control">
                                            <option value="">--Select Role--</option>
                                            <option value="editor">Editor</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Date of Joining</label>
                                        <input type="date" name="joining_date" id="joining_date" class="form-control" value="@php echo date('Y-m-d'); @endphp">
                                    </div>
                                </div>
                                <!--/ form-row -->
                                <div class="profile-tab-btn text-left">
                                        <button type="submit" class="btn btn-primary" id="submitButton"> Update <span class="kt-spinner kt-spinner--sm kt-spinner--right kt-spinner--light"></span></button>
                                </div>

                                <div class="mt-3">
                                    <div id="message"></div>
                                </div>

                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!--/ row -->

    </div>
</div>

@include('admin.layouts.footer')
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(document).ready(function() {
    $("#editor").submit(function(e) {
        e.preventDefault();

        // Disable the submit button
        $('#submitButton').prop('disabled', true);
        $('.kt-spinner').show();

        $("input,select,textarea").css('border', '1px solid green');
        $('.mes').remove();
        var url = $(this).attr('action');
        var formData = new FormData($(this)[0]);

        if ($('#selectedItems').val() === '') {
            alert('Please select at least one module.');
            $('.kt-spinner').hide();
            $('#submitButton').prop('disabled', false);
        } else {
            $.ajax({
                type: "POST",
                url: url,
                data: formData,
                processData: false,
                dataType: 'json',
                contentType: false,
                success: function(data) {

                    if (data.status == false) {

                        $('#message').html(data.message);
                        $('.kt-spinner').hide();
                        $('#submitButton').prop('disabled', false);

                        var a = data['errors'];
                        $.each(data.errors, function(key, value) {
                            $("input[name='" + key + "'],select[name='" + key +
                                "'],textarea[name='" + key + "']").css('border',
                                '2px solid red');
                            $("input[name='" + key + "'],select[name='" + key +
                                "'],textarea[name='" + key + "']").after("<small class='mes'>" +
                                value + "</small>");
                        });
                    }
                    if (data.status == true) {

                        $("input,select,textarea").css('border', '1px solid #1abb9c').delay(
                            2000).css('border', '1px solid #e2e2e4');
                        $('#message').html(data.message);
                        $("#message").fadeIn(100);
                        $("html, body").animate({
                            scrollTop: $("#message").offset().top - 100
                        }, 1000);
                        $("#message").delay(3000);
                        $("#message").fadeOut(100);
                        $('.kt-spinner').hide();
                        $('#submitButton').prop('disabled', false);
                        setTimeout(function() {
                            window.location.href = "{{ route("admin.create-user") }}";
                        }, 2000);
                    }
                }
            });
        }

    });
});

// jsTree selected
$.ajax({
    url: "{{ route('admin.create-user.tree') }}",
    dataType: "json",
    success: function (data) {
        var treeData = [];

        // create a map of the items
        var map = {};
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            map[item.id] = item;
            item.children = [];
        }

        // add the items to their parent
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            if (item.parent_id in map) {
                map[item.parent_id].children.push(item);
            } else {
                treeData.push(item);
            }
        }

        // display the data
        $('#jstree').jstree({
            "core": {
                "themes": {
                    "variant": "large"
                },
                "data": treeData
            },
            "checkbox": {
                "keep_selected_style": false
            },
            "plugins": ["wholerow", "checkbox"],
        }).on('changed.jstree', function (e, data) {
            var selectedNodes = data.selected.sort().join(',');
            $('#selectedItems').val(selectedNodes);
        });
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(thrownError);
    }
});


</script>