@extends('user.layouts.template')

@section('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- DateTime picker CSS CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
    #assign-role_paginate {
        margin-top: 15px!important;
    }
    .form-check .form-check-input{
        border:1px solid grey;
    }
    .dataTables_wrapper .dataTables_info{
        top:40%!important;
    }
</style>
@endsection

@section('content')
<!-- Content Start -->
		 
         <div class="content__boxed">
            <div class="content__wrap">

               <div id="page-tit">


               </div>

               <div class="card">

                  <!-- Custom style form wizard -->
                     <div class="card-body">

                                        <div class="row">

                                            <div class="col-lg-12">
                                            <div class="row mb-3 d-flex align-items-center">
                                                <div class="col-2">
                                                    <h4 class="fs-16 fw-semibold mb-0" style="float:left;">Assign Roles</h4>
                                                </div>
                                                <div class="col-5"></div>
                                                <div class="col-3">
                                                    <select class="form-select" id="role" style="float:right; position:relative;left:25%; font-size:15px;">
                                                        <option value="" selected>Select Role name</option>
                                                        @foreach($roles as $role)
                                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-success creat_role" style="position:relative;left:33%;">Assign new role</button>
                                                </div>
                                            </div>

                                            <table class="table table-hover align-middle" id="assign-role">
                                            <thead>
                                                <tr>

                                                    <th scope="col">Permission</th>
                                                    <th scope="col">View</th>
                                                    <th scope="col">View(Own)</th>
                                                    <th scope="col">Create</th>
                                                    <th scope="col">Edit</th>
                                                    <th scope="col">Delete</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($modules as $module)
                                                @php
                                                $permissions = array('view', 'view_own', 'creat', 'edit', 'delet');
                                                foreach($permissions as $permission) {
                                                $stat[$permission] = DB::table('assign_roles')
                                                                        ->where('module_id', $module->id)
                                                                        ->where($permission,1)
                                                                        ->get();
                                                $val[$permission] = ($stat[$permission]->isNotEmpty()) ? $stat[$permission][0]->$permission : 0;                     
                                                }
                                                @endphp
                                                <tr>
                                                    <td scope="row">{{ $module->name }}</td>

                                                    <td>
                                                        @if($module->view==1)
                                                        <div class="form-check">
                                                            <input class="form-check-input permisn" type="checkbox" data-module="{{ $module->id }}" data-type="view" name="permission_view[]" value="{{ $val['view'] }}"
                                                                id="flexCheckDefault">

                                                        </div>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($module->view_own==1)
                                                        <div class="form-check">
                                                            <input class="form-check-input permisn" type="checkbox" data-module="{{ $module->id }}" data-type="view_own" name="permission_view_own[]" value="{{ $val['view_own'] }}"
                                                                id="flexCheckDefault">

                                                        </div>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($module->creat==1)
                                                        <div class="form-check">
                                                            <input class="form-check-input permisn" type="checkbox" data-module="{{ $module->id }}" data-type="creat" name="permission_creat[]" value="{{ $val['creat'] }}"
                                                                id="flexCheckDefault">

                                                        </div>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($module->edit==1)
                                                        <div class="form-check">
                                                            <input class="form-check-input permisn" type="checkbox" data-module="{{ $module->id }}" data-type="edit" name="permission_edit[]" value="{{ $val['edit'] }}"
                                                                id="flexCheckDefault">

                                                        </div>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($module->delet==1)
                                                        <div class="form-check">
                                                            <input class="form-check-input permisn" type="checkbox" data-module="{{ $module->id }}" data-type="delet" name="permission_delet[]" value="{{ $val['delet'] }}"
                                                                id="flexCheckDefault">

                                                        </div>
                                                        @endif
                                                    </td>

                                                </tr>
                                                @endforeach

                                            </tbody>
                                        </table>

                                            </div>
                                        </div> <!-- end #horizontalwizard-->
                        <!-- END : Form sections -->


                     </div>
                  <!-- END : Custom style form wizard -->

               </div>




            </div>
         </div>
<!-- Content End -->
@endsection

@section('script')
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script type="text/javascript">
   $(document).ready(function () {
    var myTable =  $('#assign-role').DataTable({
              "paging": true,             // Enable pagination
              "searching": true,          // Enable search box
              "ordering": false,           // Enable sorting
              "info": true,               // Show table info
              "lengthMenu": [11],  // Page size options
              "pageLength": 11           // Default page size
           });

    var allPages = myTable.rows().nodes().to$();

    $('#role').change(function () {
        $('.permisn').prop('checked',false);
        var role = $('#role').val();
        if(role != '') {
            $.ajax({
                url: '{{ route("getModuleRoles") }}',
                type: 'POST',
                data: {
                    role: role,
                },
                success: function (data) {
                    //console.log(data);
                    for(let i = 0; i < data.length; i++) {
                        let module = `${data[i].module_id}`;
                        if(data[i].view==1) {
                        $('.permisn[data-module='+module+'][data-type="view"]').prop('checked', true)
                        }
                        if(data[i].view_own==1) {
                        $('.permisn[data-module='+module+'][data-type="view_own"]').prop('checked', true)
                        }
                        if(data[i].creat==1) {
                        $('.permisn[data-module='+module+'][data-type="creat"]').prop('checked', true)
                        }
                        if(data[i].edit==1) {
                        $('.permisn[data-module='+module+'][data-type="edit"]').prop('checked', true)
                        }
                        if(data[i].delet==1) {
                        $('.permisn[data-module='+module+'][data-type="delet"]').prop('checked', true)
                        }
                    }
                }
            });
        }
    });

    $('.creat_role').click(function () {
        var permission_view = {};
        var permission_view_own = {};
        var permission_creat = {};
        var permission_edit = {};
        var permission_delet = {};
        var role = $('#role').val();
        
        $('.permisn', allPages).each(function () {
            let module = $(this).data('module');
            let mod = `${module}`;

            if($(this).is(':checked')) {
                var modval = 1;
            } else {
                var modval = 0;
            }
                if($(this).data('type') == 'view') {
                    permission_view[mod] = modval;
                }
                if($(this).data('type') == 'view_own') {
                    permission_view_own[mod] = modval;
                }
                if($(this).data('type') == 'creat') {
                    permission_creat[mod] = modval;
                }
                if($(this).data('type') == 'edit') {
                    permission_edit[mod] = modval;
                }
                if($(this).data('type') == 'delet') {
                    permission_delet[mod] = modval;
                }
        });

        if(role != '') {
            Swal.fire({  
            title: 'Warning',
            text: 'Are you sure to update?',
            icon: 'warning',
            showCancelButton: true,
            customClass: {
                confirmButton: 'btn btn-danger',
                cancelButton: 'btn btn-secondary'
            },
            confirmButtonText: 'Yes'
            }).then((result) => { 
            if (result.isConfirmed) {
        
                $.ajax({
                    url: '{{ route("assignRolePermission") }}',
                    type: 'POST',
                    data: {
                        permission_view: permission_view,
                        permission_view_own: permission_view_own,
                        permission_creat: permission_creat,
                        permission_edit: permission_edit,
                        permission_delet: permission_delet,
                        role: role,
                    },
                    success: function (response) {
                        console.log(response);
                        Swal.fire('Role Assigned Successfully');
                        // location.reload();
                    }
                });
            }
          });
        } else {
            Swal.fire('Please select a role');
        }
    });

    $('.permisn').click(function () {
        if($(this).is(':checked')){
            $(this).val(1);
        } else {
            $(this).val(0);
        }
    });  
   });
</script>
@endsection