@extends('layouts.index')
@section('title')
    Role
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/prism/prism.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" />

    <link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
    <link
        href="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css"
        rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css"
        integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{ url('/') }}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Role
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Role</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <h4>Role</h4>
                            <div class="ms-auto p-3">
                                <a href="javascript:void(0)" id="tambahRole" onclick="tambahData()" class="btn btn-info" aria-controls="editHariLibur">
                                    <i data-feather="edit" class="feather-sm fill-white me-1">
                                    </i>
                                    Add Role</a>
                            </div>
                        </div>
                        <div class="card">
                            <div class="border-bottom title-part-padding">
                                <h4 class="card-title mb-0">List of Role</h4>
                            </div>
                            <div class="card-body" id="tableLoad">
                                @csrf
                                @include('role.table_load')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================= -->
        <!-- End PAge Content -->
        <!-- ============================================================= -->
    </div>

    <!-- Tambah -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="tambahData" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Add Data
            </h5>
            <hr>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-3">Add Role</h4>
                        <form class="form" id="tambah">
                            <div class="mb-3 mt-3">
                                <label for="role_name">Name</label>
                                <input type="text" class="form-control" name="name" id="name_tambah"
                                    placeholder="Name">
                                <small id="name_tambah_validation" class="text-danger"></small>
                            </div>
                            <div class="mb-3 mt-3">
                                <label for="permission_name">Permission</label>
                                @foreach ($permission as $item)
                                    <div class="custom-control custom-checkbox">
                                        <input class="custom-control-input" name="permission" id="permission_tambah" type="checkbox" value="{{$item->name}}" id="permission_{{$item->id}}">
                                        <label class="custom-control-label" for="permission_{{$item->id}}">
                                            {{$item->name}}
                                        </label>
                                    </div>
                                @endforeach
                                <small id="permission_tambah_validation" class="text-danger"></small>
                            </div>
                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button"
                                        class="btn btn-outline-secondary rounded-pill px-4 ms-2"
                                        data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

                                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                                        <div class="d-flex align-items-center">

                                            Save
                                        </div>
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="editData" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Edit Data
            </h5>
            <hr>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-3">Edit Role</h4>

                        <form class="form" id="edit">
                            <input type="hidden" name="id" id="id_edit" value="">
                            <div class="mb-3 mt-3">
                                <label for="fullname">Name</label>
                                <input type="text" class="form-control" name="edit_name" id="edit_name"
                                    placeholder="Name">
                                <small id="edit_name_validation" class="text-danger"></small>
                            </div>
                            <div class="mb-3 mt-3">
                                <label for="fullname">Permission</label>
                                @foreach ($permission as $item)
                                    <div class="custom-control custom-checkbox">
                                        <input class="custom-control-input permission_edit" name="edit_permission" type="checkbox" value="{{$item->name}}" id="edit_permission_{{$item->name}}">
                                        <label class="custom-control-label" for="edit_permission_{{$item->name}}">
                                            {{$item->name}}
                                        </label>
                                    </div>
                                @endforeach
                                <small id="edit_permission_validation" class="text-danger"></small>
                            </div>
                            
                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button"
                                        class="btn btn-outline-secondary rounded-pill px-4 ms-2"
                                        data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

                                    <button type="submit" class="btn btn-primary rounded-pill px-4">
                                        <div class="d-flex align-items-center">
                                            Save
                                        </div>
                                    </button>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    @endsection
    @section('js')
        <!--This page plugins -->
        <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
        <!-- start - This is for export functionality only -->
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"
                integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw=="
                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

        <script src="{{ asset('back') }}/extra-libs/prism/prism.js"></script>
        <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
        <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
        <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>

        <script src="{{ asset('back') }}/libs/nestable/jquery.nestable.js"></script>
        <script>
            // function checkMoreThanOne() {
            //     var sama = document.getElementById('sama');

            //     if (sama.checked) {
            //         $('#jam_pulang').show();
            //     } else {
            //         $('#jam_pulang').hide();
            //     }
            // }

            // Pagintaion

            $(document).ready(function(){
               
                $(document).on('click', '.page-link', function(event){
                    event.preventDefault(); 
                    var page = $(this).attr('href').split('page=')[1];
                    loadTable(page);
                });
                
                function loadTable(page) {
                    var _token = "{{ csrf_token() }}";
                    $.ajax({
                        url:"{{ route('role.load-table') }}",
                        method:"POST",
                        data:{_token:_token, page:page},
                        success:function(data) {
                                $('#tableLoad').html(data);
                        }
                    });
                }

            });

            //Aksi Tambah

            var offCanvasTambahData = document.getElementById("tambahData");
            var offCanvasTambah = new bootstrap.Offcanvas(offCanvasTambahData, {
                backdrop: true
            });
               
            function tambahData() {
                offCanvasTambah.show()
            }

            const tambah = document.getElementById('tambah');

            tambah.addEventListener('submit', async (e) => {
                e.preventDefault();
                
                const name = tambah.name.value;
                var permission = new Array();
                $("input:checkbox[name=permission]:checked").each(function(){
                    permission.push($(this).val());
                });
                const _token = "{{ csrf_token() }}";

                // if(permission) {
                //     $("#permission_tambah_validation").text('Pilih permission terlebih dahulu!');
                // } else {
                    
                // }
                let formData = new FormData();
                formData.append("name", name);
                formData.append("permission", permission);

                try {
                    let response = await fetch("{{ route('role.store-modal') }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            "X-CSRF-TOKEN": _token
                        }
                    });
                    var datasend = await response.json();

                    if (datasend.status == 'success') {

                        var role_id = datasend.data.id;
                        var role_name = datasend.data.name;
                        var role_permission = datasend.permission;

                        // if(datasend.countrowstatus == '1') {
                            var last_count = datasend.countrow;
                        // }
                        
                        var number = last_count + 1;

                        var row = '<tr id="list_' + role_id + '"><td>' + number + '</td> <td>' + role_name + '</td>';
                        row +=
                            '<td> <a href="javascript:void(0)" id="btn-add-contact" onclick="editData(' + role_id +
                            ')" aria-controls="editRole">';
                        row +=
                            '<i class="fa fa-edit text-info"></i></a><a href="javascript:void(0)"  onclick="deleteData(' +
                            role_id + ')">';
                        row +=
                            ' <i class="fa fa-trash text-danger"> </i> </a> </td> </tr>';

                        $('#name_tambah').val("");  
                        $('#permission_tambah').val(""); 

                        // var currentRecord = {{ $role->count() }};

                        // if(currentRecord < 8) {
                            $('#list').append(row);
                        // }

                        offCanvasTambah.hide()
                        Swal.fire('Role has been changed successfully', '', 'success')
                       
                        // if(datasend.countrow == 8) {
                        //     location.reload();
                        // } 

                    }else if(datasend.status == 'error'){
                        if (datasend.data) {
                            var error = Object.entries(datasend.data);

                            $('#name_tambah_validation').hide();
                            $('#permission_tambah_validation').hide();
                            
                            error.forEach((key,value) => {
                                $('#'+key[0]+'_tambah_validation').show();
                                $('#'+key[0]+'_tambah_validation').html(key[1]);
                            });
                        }
                    }

                } catch (err) {
                    console.log(err);
                }

                return false;
            });

            //Aksi Edit

            var offCanvasEditData = document.getElementById("editData");
            var offCanvasEdit = new bootstrap.Offcanvas(offCanvasEditData, {
                backdrop: true
            });

            async function editData(id) {
                const _token = "{{ csrf_token() }}";

                fetch("{{ url('role-detail') }}/" + id).then(function(response) {
                    response.json().then(function(resp) {
                        var res = resp;
                        var name = res.data.name;
                        

                        $('#id_edit').val(id);
                        $('#edit_name').val(name);
                        var permissionValue = $('input[name=edit_permission]');
                        for (const [key, value] of Object.entries(permissionValue)) {
                            
                            if (value.value !== undefined) {
                                document.getElementById('edit_permission_'+value.value).checked = false;
                            }
                        }

                    });
                });

                
                try {
                    
                    let response = await fetch("{{ url('role-has-permissions') }}/" + id, {
                        method: "GET",
                        headers: {
                            "X-CSRF-TOKEN": _token,
                            "X-Requested-With": "XMLHttpRequest"
                        }
                    });

                    var datasend = await response.json();

                    for (const [key, value] of Object.entries(datasend.data)) {
                        obj = document.getElementById('edit_permission_'+value.name);
                        obj.checked = true;
                    }

                } catch (err) {
                    console.log(err);
                }
                offCanvasEdit.show();
            }

            const edit = document.getElementById('edit');

            edit.addEventListener('submit', async (e) => {
                e.preventDefault();

                const id = edit.id.value;
                const name = edit.edit_name.value;

                var permission = new Array();
                $("input:checkbox[name=edit_permission]:checked").each(function(){
                    permission.push($(this).val());
                });

                const _token = "{{ csrf_token() }}";

                let formData = new FormData();
                formData.append("id", id);
                formData.append("edit_name", name);
                formData.append("edit_permission", permission);
        

                try {
                    let response = await fetch("{{ route('role.update-modal') }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            "X-CSRF-TOKEN": _token
                        }
                    });
                    var datasend = await response.json();

                    if (datasend.status == 'success') {

                        var role_id = datasend.data.id;
                        var role_name = datasend.data.name;
                        var role_permission = datasend.data.permission;

                        var last_count = $('#lastCount').text() ? $('#lastCount').text() : 0;
                        var number = parseInt(last_count) + 1;

                        var row = '<tr id="list_' + role_id + '"><td>' + number + '</td> <td>' + role_name + '</td>';
                        row +=
                            '<td> <a href="javascript:void(0)" id="editRole" onclick="editData(' + role_id +')" aria-controls="editRole">';
                        row +=
                            '<i class="fa fa-edit text-info"></i></a><a href="javascript:void(0)"  onclick="deleteData(' +
                            role_id + ')">';
                        row +=
                            ' <i class="fa fa-trash text-danger"> </i> </a> </td> </tr>';

                        $('#edit_name').val("");
                        $('#list_' + role_id).replaceWith(row);
                        offCanvasEdit.hide()
                        Swal.fire('Role has been changed successfully', '', 'success')
                    }else if(datasend.status == 'error'){
                        if (datasend.data) {
                            var error = Object.entries(datasend.data);

                            $('#edit_name_validation').hide();
                            
                            error.forEach((key,value) => {
                                $('#'+key[0]+'_edit_validation').show();
                                $('#'+key[0]+'_edit_validation').html(key[1]);
                            });
                        }
                    }

                } catch (err) {
                    console.log(err);
                }

                return false;
            });

            function deleteData(id) {
                Swal.fire({
                    icon: 'info',
                    title: 'Are you sure to delete this role?',
                    confirmButtonText: `Yes, delete it !`,
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('role.delete-modal') }}",
                            method: "POST",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                "id": id
                            },

                            success: function(result) {
                                Swal.fire('Role has been successfully deleted', '', 'success')
                                $('#list_' + id).remove();
                            }
                        });
                    } else {

                    }
                });
            }

            jQuery('.timepicker').datetimepicker({
                datepicker: false,
                format: 'H:i'
            });
        </script>


    @endsection