<br>
<div class="form-group">

    <!----------------- TAB ----------------->
    <ul class="nav navtab-pills" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="navtab-link active" id="pills-personal-tab" data-bs-toggle="pill"
                data-bs-target="#pills-personal" type="button" role="tab" aria-controls="pills-personal"
                aria-selected="true"><i class="fas fa-user-alt"></i>
                ข้อมูลกลุ่มและสิทธิ์ผู้ใช้งาน
            </button>
        </li>
    </ul>
    <!----------------- Content Tab ----------------->
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-personal" role="tabpanel" aria-labelledby="pills-personal-tab">
            <div class="borders-green">
                <div class="container" style="padding-top: 1rem">
                    <form id="formAddRole" name="formAddRole" class="needs-validation" novalidate>
                        <div class="row justify-content-md-center">
                            <div class="col-md-12">
                                <?php if($role['status'] == true): ?>
                                <input type="hidden" id="role_id" value="<?php echo e($role['data'][0]['id']); ?>">
                                <input type="hidden" id="role_idstatus" value="<?php echo e($role['data'][0]['status']); ?>">
                                <?php
                                    $arrMenu = array();
                                    $arrContent = array();
                                    foreach ($role['data'][0]['permission'] as $item) {
                                        if($item['content'] == '0' ){
                                            array_push($arrMenu, $item['id']);
                                        }else {
                                            array_push($arrContent, $item['id']);
                                        }                        
                                    }
                                    $json_arrMenu = json_encode($arrMenu);
                                    $json_arrContent = json_encode($arrContent);
                                ?>
                                <input type="hidden" id="role_idmenu" value="<?php echo e($json_arrMenu); ?>">
                                <input type="hidden" id="role_idcontent" value="<?php echo e($json_arrContent); ?>">
                                <?php else: ?>
                                <input type="hidden" id="role_id">
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="row justify-content-md-center">
                            <div class="col-md-12">
                                <div class="mb-3 row">
                                    <label class="col-sm-2 col-form-label">ชื่อกลุ่มผู้ใช้งาน:</label>
                                    <div class="col-sm-10">
                                        <?php if($role['status'] == true): ?>
                                        <input type="text" class="form-control" id="role_name" value="<?php echo e($role['data'][0]['name']); ?>">
                                        <?php else: ?>
                                        <input type="text" class="form-control" id="role_name">
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row justify-content-md-center">
                            <div class="col-md-12">
                                <div class="kitem-1 ">
                                    <h5 class="txtorange-1">สิทธิ์การเข้าใช้เมนู</h5></strong>
                                </div>
                                <hr class="line1">
                                <div class="mb-3 row">
                                    <div class="table-responsive">
                                        <table class="table" id="table_menu">
                                            <thead>
                                                <tr class="bg-green">
                                                    <th width="10%" style="text-align: center;">
                                                        <input class="form-check-input" type="checkbox" id="menu-all" val="all">
                                                    </th>
                                                    <th width="90%">เมนู</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php if($menu['status'] == true): ?>
                                                <?php $__currentLoopData = $menu['data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <tr>
                                                    <td width="10%" style="text-align: center;">
                                                        <input class="form-check-input" type="checkbox" name="menu"
                                                            value="<?php echo e($item['id']); ?>">
                                                    </td>
                                                    <td width="90%"><?php echo e($item['name']); ?></td>
                                                </tr>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                <?php endif; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row justify-content-md-center">
                            <div class="col-md-12">
                                <div class="kitem-1 ">
                                    <h5 class="txtorange-1">สิทธิ์การสร้างเนื้อหาตามหมวดหมู่</h5></strong>
                                </div>
                                <hr class="line1">
                                <div class="mb-3 row">
                                    <div class="table-responsive">
                                        <table class="table" id="table_group">
                                            <thead>
                                                <tr class="bg-green">
                                                    <th width="10%" style="text-align: center;">
                                                        <input class="form-check-input" type="checkbox" id="content-all" val="all">
                                                    </th>
                                                    <th width="90%">หมวดหมู่เนื้อหา</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php if($content['status'] == true): ?>
                                                <?php $__currentLoopData = $content['data']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <tr>
                                                    <td width="10%" style="text-align: center;">
                                                        <input class="form-check-input" type="checkbox" name="content"
                                                            value="<?php echo e($item['id']); ?>">
                                                    </td>
                                                    <td width="90%"><?php echo e($item['name']); ?></td>
                                                </tr>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                <?php endif; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row justify-content-md-center">
                            <div class="col-md-12">
                                <div class="kitem-1 ">
                                    <h5 class="txtorange-1">สถานะการใช้งาน</h5></strong>
                                </div>
                                <hr class="line1">
                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-2 col-form-label">สถานะกลุ่มผู้ใช้งาน :</label>
                                    <div class="col-sm-10">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="role_status" value="1">
                                            <label class="form-check-label">ยังใช้งาน</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="role_status" value="2">
                                            <label class="form-check-label">เลิกใช้งาน</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row justify-content-md-center">
                            <div class="col-md-12">
                                <div class="mb-3 row">
                                    <div class="d-grid gap-2 col-md-2 mx-auto">
                                        <button class="btn btn-warning" type="submit">
                                            บันทึก <i class="fas fa-save"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function() {
    $(document).ready(function() {
        var role_id = $("#role_id").val();
        if (role_id != "") {
            var idmenu = $("#role_idmenu").val();
            var arr_menu = jQuery.parseJSON(idmenu);
            $.each(arr_menu, function(index, value) {
                $('input:checkbox[name="menu"]').filter('[value=' + value +
                    ']').attr('checked', true);
            });

            var idcontent = $("#role_idcontent").val();
            var arr_content = jQuery.parseJSON(idcontent);
            $.each(arr_content, function(index, value) {
                $('input:checkbox[name="content"]').filter('[value=' + value +
                    ']').attr('checked', true);
            });

            var role_idstatus = $("#role_idstatus").val();
            $('input:radio[name="role_status"]').filter('[value=' + role_idstatus + ']').attr('checked',
                true);
        }

        // $('#btn-save').on('click', function(e) {
        //     var myPermissions = {};

        //     var menu = [];
        //     $.each($("input[name='menu']:checked"), function() {
        //         menu.push($(this).val());
        //     });
        //     var menu_json = JSON.stringify(menu);

        //     alert(menu_json);
        //     return false;
        // });
    });

    $('#menu-all').click(function(e) {
        $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
    });

    $('#content-all').click(function(e) {
        $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
    });
});

var $saverole = $("#formAddRole");
$saverole.validate({
    rules: {
        role_name: {
            required: true,
        },
        menu: {
            required: true,
        },
        role_status: {
            required: true,
        }
    },
    messages: {
        role_name: {
            required: "กรุณาเลือกประเภทคู่มือ",
        },
        menu: {
            required: "กรุณาเลือกสิทธิ์การเข้าใช้เมนู",
        },
        role_status: {
            required: "กรุณาเลือกสถานะการใช้งาน",
        }
    },
    submitHandler: function() {
        // $(".loader").show();
        var role_id = $("#role_id").val();
        var role_name = $("#role_name").val();
        var role_status = $('input[name="role_status"]:checked').val();

        var role_type = [];
        $.each($("input[name='menu']:checked"), function() {
            role_type.push($(this).val());
        });

        $.each($("input[name='content']:checked"), function() {
            role_type.push($(this).val());
        });
        var type_json = JSON.stringify(role_type);


        var form_data = new FormData();
        form_data.append('role_name', role_name);
        form_data.append('role_status', role_status);
        form_data.append('type_json', type_json);

        if (role_id == '') {
            // add
            $.ajax({
                type: "post",
                url: 'roleManagement/add',
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    // $(".loader").hide();
                    // console.log(data.status);
                    if (data.status == true) {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                $(".loader").show();
                                window.location = "roleManagement";
                            }
                        })
                        return false;

                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                        return false;
                    }
                },
            });
        } else {
            // update
            $.ajax({
                type: "post",
                url: 'roleManagement/update/' + role_id,
                data: form_data,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
                    $(".loader").hide();
                    if (data.status == true) {
                        // location.reload();
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: '',
                            allowOutsideClick: false,
                            focusConfirm: true,
                            confirmButtonText: 'ตกลง',
                        }).then((result) => {
                            if (result.value) {
                                $(".loader").show();
                                window.location = "roleManagement";
                            }
                        })
                        return false;
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'คำเตือน',
                            text: JSON.stringify(data.message),
                        });
                        return false;
                    }
                },
            });
        }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
        // Add the `invalid-feedback` class to the error element
        error.addClass("invalid-feedback");

        // Add `has-feedback` class to the parent div.form-group
        // in order to add icons to inputs
        // element.parents(".col-sm-5").addClass("has-feedback");

        if (element.prop("type") === "checkbox") {
            error.insertAfter(element).addClass("invalid-feedback");
        } else {
            error.insertAfter(element);
        }

        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            element = $("#select2-" + elem.attr("id") + "-container").parent();
            error.insertAfter(element).addClass("invalid-feedback");
        } else {
            error.insertAfter(element);
        }

        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if (!element.next("span")[0]) {
            $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>")
                .insertAfter(element);
        }
    },
    success: function(label, element) {
        // Add the span element, if doesn't exists, and apply the icon classes to it.
        // console.log(element);
        if (!$(element).next("span")[0]) {
            $("<span class='glyphicon glyphicon-ok form-control-feedback'></span>")
                .insertAfter(
                    $(element));
        }
    },
    highlight: function(element, errorClass, validClass) {
        // $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
        // $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().addClass(
                errorClass);
        } else {
            elem.addClass(errorClass);
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        // $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
        // $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
        var elem = $(element);
        if (elem.hasClass("select2-hidden-accessible")) {
            $("#select2-" + elem.attr("id") + "-container").parent().removeClass(
                errorClass);
        } else {
            elem.removeClass(errorClass);
        }
    }
});
</script><?php /**PATH /var/www/html/km-web/resources/views/subpageBack/add_role.blade.php ENDPATH**/ ?>