@extends('header')
@section('title', 'Manage Project')
@section('content')

{{-- <div class="main-content-inner"> --}}

    <!-- page title area end -->

    <div class="main-content-inner">
        <div class="row">
            <!-- data table start -->
            <div class="col-12 mt-5">
                <div class="card">


                    <div class="card-body">
                        <h4 class="header-title">Create New Role</h4>

                        <form action="{{ route('allRolesDetailsStore') }}" method="POST">

                            @csrf
                            <div class="form-group">
                                <label for="role">Role Name</label>
                                <input type="text" class="form-control" name="name" placeholder="Rolename">
                            </div>
                            @error('name')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror


                            <div class="form-group">
                                <label for="name">Permissions</label>

                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="checkPermissionAll" value="1">
                                    <label class="form-check-label" for="checkPermissionAll">All</label>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="1Management"
                                                value="user" name="groupname[]"
                                                onclick="checkPermissionByGroup('user', this)">
                                            <label class="form-check-label" for="checkPermission">user</label>
                                        </div>
                                    </div>

                                    <div class="col-9 user">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission8" value="user.create">
                                            <label class="form-check-label" for="checkPermission8">user.create</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission9" value="user.view">
                                            <label class="form-check-label" for="checkPermission9">user.view</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission10" value="user.edit">
                                            <label class="form-check-label" for="checkPermission10">user.edit</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission11" value="user.delete">
                                            <label class="form-check-label" for="checkPermission11">user.delete</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission12" value="user.approve">
                                            <label class="form-check-label" for="checkPermission12">user.approve</label>
                                        </div>
                                        <br>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="2Management"
                                                value="project" name="groupname[]"
                                                onclick="checkPermissionByGroup('project', this)">
                                            <label class="form-check-label" for="checkPermission">project</label>
                                        </div>
                                    </div>

                                    <div class="col-9 project">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission3" value="project.create">
                                            <label class="form-check-label"
                                                for="checkPermission3">project.create</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission4" value="project.view">
                                            <label class="form-check-label" for="checkPermission4">project.view</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission5" value="project.edit">
                                            <label class="form-check-label" for="checkPermission5">project.edit</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission6" value="project.delete">
                                            <label class="form-check-label"
                                                for="checkPermission6">project.delete</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission7" value="project.approve">
                                            <label class="form-check-label"
                                                for="checkPermission7">project.approve</label>
                                        </div>
                                        <br>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="3Management"
                                                value="dashboard" name="groupname[]"
                                                onclick="checkPermissionByGroup('dashboard', this)">
                                            <label class="form-check-label" for="checkPermission">dashboard</label>
                                        </div>
                                    </div>
                                
                                    <div class="col-9 dashboard">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]" 
                                                id="checkPermission1" value="dashboard.view">
                                            <label class="form-check-label"
                                                for="checkPermission1">dashboard.view</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]" 
                                                id="checkPermission2" value="dashboard.edit">
                                            <label class="form-check-label"
                                                for="checkPermission2">dashboard.edit</label>
                                        </div>
                                        <br>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="4Management"
                                                value="profile" name="groupname[]"
                                                onclick="checkPermissionByGroup('profile', this)">
                                            <label class="form-check-label" for="checkPermission">profile</label>
                                        </div>
                                    </div>
                                
                                    <div class="col-9 profile">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]" 
                                                id="checkPermission18" value="profile.view">
                                            <label class="form-check-label" for="checkPermission18">profile.view</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]" 
                                                id="checkPermission19" value="profile.edit">
                                            <label class="form-check-label" for="checkPermission19">profile.edit</label>
                                        </div>
                                        <br>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="5Management"
                                                value="role" name="groupname[]"
                                                onclick="checkPermissionByGroup('role', this)">
                                            <label class="form-check-label" for="checkPermission">role</label>
                                        </div>
                                    </div>

                                    <div class="col-9 role">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission13" value="role.create">
                                            <label class="form-check-label" for="checkPermission13">role.create</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission14" value="role.view">
                                            <label class="form-check-label" for="checkPermission14">role.view</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission15" value="role.edit">
                                            <label class="form-check-label" for="checkPermission15">role.edit</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission16" value="role.delete">
                                            <label class="form-check-label" for="checkPermission16">role.delete</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="permissions[]"
                                                id="checkPermission17" value="role.approve">
                                            <label class="form-check-label" for="checkPermission17">role.approve</label>
                                        </div>
                                        <br>
                                    </div>

                                </div>


                            </div>


                            <button type="submit" class="btn btn-primary mt-4 pr-4 pl-4">Save Role</button>
                        </form>

                        {{-- <script>
                            $(document).ready(function() {
                            $('#permissionSelect').select2();
                        });
                        </script>


                        <script>
                            // Handle dropdown change event
                     $('#permissionSelect').change(function() {
                         // Hide all forms initially
                         $('#adminCheckBox, #projectsCheckBox, #dashboardCheckBox,#profileCheckBox,#roleCheckBox').hide();
                 
                         // Get the selected value
                         var selectedValue = $(this).val();
                 
                         // Show the corresponding form based on the selection
                         if (selectedValue.includes('Admin')) {
                             $('#adminCheckBox').show();
                         }
                         if (selectedValue.includes('Project')) {
                             $('#projectsCheckBox').show();
                         }
                         if (selectedValue.includes('Dashboard')) {
                             $('#dashboardCheckBox').show();
                         }
                         if (selectedValue.includes('Profile')) {
                             $('#profileCheckBox').show();
                         }
                         
                         if (selectedValue.includes('Role')) {
                             $('#roleCheckBox').show();
                         }
                        
                         
                     }); --}}
                 
                     {{-- // Trigger change event for checkboxes to initialize their values
                    //  $('#createCheckbox, #invoicescreateCheckbox, #mildstonecreateCheckbox, #UpdateCheckbox, #invoicesUpdateCheckbox, #mildstoneupdateCheckbox, #DeleteCheckbox, #invoicesdeleteCheckbox, #mildstoneDeleteCheckbox, #viewCheckbox, #invoicesViewCheckbox, #roleViewCheckbox').change(); --}}
                 
                 
                 {{-- 
                        </script> --}}
<script>
                      
         $("#checkPermissionAll").click(function(){
             if($(this).is(':checked')){
                 // check all the checkbox
                 $('input[type=checkbox]').prop('checked', true);
             }else{
                 // un check all the checkbox
                 $('input[type=checkbox]').prop('checked', false);
             }
         });

         function checkPermissionByGroup(className, checkThis) {
    const groupIdName = $("#" + checkThis.id);
    const classCheckBox = $('.' + className + ' input');
    console.log(className);
    // Log the class name of the checkboxes
    console.log("Group Name:", className);

    if (groupIdName.is(':checked')) {
        classCheckBox.prop('checked', true);
    } else {
        classCheckBox.prop('checked', false);
    }
    implementAllChecked();
    }


         function checkSinglePermission(groupClassName, groupID, countTotalPermission) {
            const classCheckbox = $('.'+groupClassName+ ' input');
            const groupIDCheckBox = $("#"+groupID);

            // if there is any occurance where something is not selected then make selected = false
            if($('.'+groupClassName+ ' input:checked').length == countTotalPermission){
                groupIDCheckBox.prop('checked', true);
            }else{
                groupIDCheckBox.prop('checked', false);
            }
            implementAllChecked();
         }

         function implementAllChecked() {
             const countPermissions = 19;
             const countPermissionGroups = 5;

            //  console.log((countPermissions + countPermissionGroups));
            //  console.log($('input[type="checkbox"]:checked').length);

             if($('input[type="checkbox"]:checked').length >= (countPermissions + countPermissionGroups)){
                $("#checkPermissionAll").prop('checked', true);
            }else{
                $("#checkPermissionAll").prop('checked', false);
            }
         }
</script>
                        @endsection