<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header text-uppercase custom-header bg-primary text-bg-info fw-bold">
                        <i class="menu-icon ti ti-users-plus"></i> Create User Role
                    </div>
                    <div class="card-body">
                        <div class="row mt-3">

                            <!-- User Role Name Input -->
                            <div class="mb-6">
                                <label for="roleName" class="form-label fw-bold">User Role Name</label>
                                <input type="text" class="form-control" id="roleName" name="roleName"
                                    placeholder="Enter your user role name" autofocus />
                            </div>

                            <!-- Permissions Section -->
                            <div class="row mb-6">
                                <!-- Member Module -->
                                <div class="col-sm-12 col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="member" id="member"
                                            onchange="toggleSubPermissions(this, '#addMember, #viewMember, #ManageMember, #ManageMemberEdit, #ManageMemberDelete', '#importMember')">
                                        <label class="form-check-label" for="member">
                                            Member
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="addMember" id="addMember">
                                        <label class="form-check-label" for="addMember">
                                            Add Member
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="viewMember" id="viewMember">
                                        <label class="form-check-label" for="viewMember">
                                            View Member
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="importMember" id="importMember">
                                        <label class="form-check-label" for="importMember">
                                            Import Member
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="ManageMember" id="ManageMember">
                                        <label class="form-check-label" for="ManageMember">
                                            Manage Member
                                        </label>
                                    </div>
                                    <div class="form-check ms-6">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="ManageMemberEdit" id="ManageMemberEdit">
                                        <label class="form-check-label" for="ManageMemberEdit">
                                            Edit
                                        </label>
                                    </div>

                                </div>

                                <!-- Division Module -->
                                <div class="col-sm-12 col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="division" id="division"
                                            onchange="toggleSubPermissions(this, '#DivisionByVillage, #divisionByGn')">
                                        <label class="form-check-label" for="division">
                                            Division
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="DivisionByVillage" id="DivisionByVillage">
                                        <label class="form-check-label" for="DivisionByVillage">
                                            Division by village
                                        </label>
                                    </div>
                                    
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="divisionByGn" id="divisionByGn">
                                        <label class="form-check-label" for="divisionByGn">
                                            Division By GN
                                        </label>
                                    </div>
                                </div>

                                <!-- Account Module -->
                                <div class="col-sm-12 col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="account" id="account"
                                            onchange="toggleSubPermissions(this, '#addAccount, #viewAccount, #ManageAccount, #ManageAccountEdit, #ManageAccountDelete, #transferAccount, #addExpensiveIncome, #collectionTransfer')">
                                        <label class="form-check-label" for="account">
                                            Account
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="addAccount" id="addAccount">
                                        <label class="form-check-label" for="addAccount">
                                            Add Account
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="viewAccount" id="viewAccount">
                                        <label class="form-check-label" for="viewAccount">
                                            View Account
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="transferAccount" id="transferAccount">
                                        <label class="form-check-label" for="transferAccount">
                                            Transfer Account
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="addExpensiveIncome" id="addExpensiveIncome">
                                        <label class="form-check-label" for="addExpensiveIncome">
                                            Expensive Income
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="collectionTransfer" id="collectionTransfer">
                                        <label class="form-check-label" for="collectionTransfer">
                                            Collection Transfer
                                        </label>
                                    </div>
                                    <div class="form-check ms-4">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="ManageAccount" id="ManageAccount">
                                        <label class="form-check-label" for="ManageAccount">
                                            Manage Account
                                        </label>
                                    </div>
                                    <div class="form-check ms-6">
                                        <input class="form-check-input userPermissions" type="checkbox"
                                            name="permissions[]" value="ManageAccountEdit" id="ManageAccountEdit">
                                        <label class="form-check-label" for="ManageAccountEdit">
                                            Edit
                                        </label>
                                    </div>
                                </div>

                            </div>

                            <!-- Loan Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="loan" id="loan"
                                        onchange="toggleSubPermissions(this, '#addLoan, #loanCalculator, #loanProduct, #ManageLoan, #ManageLoanEdit, #ManageLoanDelete, #ManageLoanRquest, #addOldLoan')">
                                    <label class="form-check-label" for="loan">
                                        Loan
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="addLoan" id="addLoan">
                                    <label class="form-check-label" for="addLoan">
                                        Add Loan
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="addOldLoan" id="addOldLoan">
                                    <label class="form-check-label" for="addOldLoan">
                                        Add Old Loan
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ManageLoanRquest" id="ManageLoanRquest">
                                    <label class="form-check-label" for="ManageLoanRquest">
                                        Request of Loan
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="loanProduct" id="loanProduct">
                                    <label class="form-check-label" for="loanProduct">
                                        Loan Product
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="loanCalculator" id="loanCalculator">
                                    <label class="form-check-label" for="loanCalculator">
                                        Loan Calculator
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ManageLoan" id="ManageLoan">
                                    <label class="form-check-label" for="ManageLoan">
                                        Manage Loan
                                    </label>
                                </div>
                                <div class="form-check ms-6">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ManageLoanEdit" id="ManageLoanEdit">
                                    <label class="form-check-label" for="ManageLoanEdit">
                                        Edit
                                    </label>
                                </div>

                            </div>
                            <hr>
                            <!-- Savings Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="savings" id="savings"
                                        onchange="toggleSubPermissions(this, '#savingsSettings,#addSavings, #viewSavings, #ManageSavings, #ManageSavingsEdit, #ManageSavingsDelete, #Withdrawal, #ImportSavingHistory')">
                                    <label class="form-check-label" for="savings">
                                        Savings
                                    </label>
                                </div>

                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="viewSavings" id="viewSavings">
                                    <label class="form-check-label" for="viewSavings">
                                        View Savings
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ManageSavings" id="ManageSavings">
                                    <label class="form-check-label" for="ManageSavings">
                                        Manage Savings
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="Withdrawal" id="Withdrawal">
                                    <label class="form-check-label" for="Withdrawal">
                                        Withdrawal
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ImportSavingHistory" id="ImportSavingHistory">
                                    <label class="form-check-label" for="ImportSavingHistory">
                                        Import Saving History
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="transferSavings" id="ImportSavingHistory">
                                    <label class="form-check-label" for="transferSavings">
                                        Transfer Savings
                                    </label>
                                </div>
                            </div>

                            <!-- Death Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="death" id="death"
                                        onchange="toggleSubPermissions(this, '#addDeath, #viewDeath, #ManageDeath, #ManageDeathEdit, #ManageDeathDelete, #ImportDeathHistory')">
                                    <label class="form-check-label" for="death">
                                        Death
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="viewDeath" id="viewDeath">
                                    <label class="form-check-label" for="viewDeath">
                                        View Death
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ManageDeath" id="ManageDeath">
                                    <label class="form-check-label" for="ManageDeath">
                                        Manage Death
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ImportDeathHistory" id="ImportDeathHistory">
                                    <label class="form-check-label" for="ImportDeathHistory">
                                        Import Death History
                                    </label>
                                </div>
                            </div>


                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="deathDonation" id="deathDonation"
                                        onchange="toggleSubPermissions(this, '#manageDeathDonation')">
                                    <label class="form-check-label" for="deathDonation">
                                        Death Donation
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="manageDeathDonation" id="manageDeathDonation">
                                    <label class="form-check-label" for="manageDeathDonation">
                                        Manage Death Donation
                                    </label>
                                </div>
                            </div>



                            <!-- Other Income Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="otherIncome" id="otherIncome"
                                        onchange="toggleSubPermissions(this, '#manageIncome, #importOtherIncome')">
                                    <label class="form-check-label" for="otherIncome">
                                        Other Income
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="manageIncome" id="manageIncome">
                                    <label class="form-check-label" for="manageIncome">
                                        Manage Income
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="importOtherIncome" id="importOtherIncome">
                                    <label class="form-check-label" for="importOtherIncome">
                                        Import Income
                                    </label>
                                </div>
                            </div>

                            <!-- Repayment Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="repayment" id="repayment"
                                        onchange="toggleSubPermissions(this, '#directSavings, #loanRepayment, #openingBalance, #collectionDeposit')">
                                    <label class="form-check-label" for="repayment">
                                        Repayment
                                    </label>
                                </div>
                                
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="loanRepayment" id="loanRepayment">
                                    <label class="form-check-label" for="loanRepayment">
                                        Loan Repayment
                                    </label>
                                </div>
                                
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="collectionDeposit" id="collectionDeposit">
                                    <label class="form-check-label" for="collectionDeposit">
                                        Collection Deposit
                                    </label>
                                </div>
                            </div>

                            <!-- Meetings Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="meetings" id="meetings"
                                        onchange="toggleSubPermissions(this, '#addMeetings, #viewMeetings, #ManageMeetings, #ManageMeetingsEdit, #ManageMeetingsDelete')">
                                    <label class="form-check-label" for="meetings">
                                        Meetings
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="addMeetings" id="addMeetings">
                                    <label class="form-check-label" for="addMeetings">
                                        Add Meetings
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="viewMeetings" id="viewMeetings">
                                    <label class="form-check-label" for="viewMeetings">
                                        View Meetings
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ManageMeetings" id="ManageMeetings">
                                    <label class="form-check-label" for="ManageMeetings">
                                        Manage Meetings
                                    </label>
                                </div>
                                <div class="form-check ms-6">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="ManageMeetingsEdit" id="ManageMeetingsEdit">
                                    <label class="form-check-label" for="ManageMeetingsEdit">
                                        Edit
                                    </label>
                                </div>

                            </div>
                            <hr>
                            <!-- Reports Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="report" id="report"
                                        onchange="toggleSubPermissions(this, '#openingBalanceReport, #memberReport, #withdrawalReport, #collectionReport, #collectionvsdeposit, #loanReport, #loanArreasReport, #memberSavingsReport, #meetingReport')">
                                    <label class="form-check-label" for="report">
                                        Reports
                                    </label>
                                </div>
                                
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="memberReport" id="memberReport">
                                    <label class="form-check-label" for="memberReport">
                                        Member Report
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="withdrawalReport" id="withdrawalReport">
                                    <label class="form-check-label" for="withdrawalReport">
                                        Withdrawal Report
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="collectionReport" id="collectionReport">
                                    <label class="form-check-label" for="collectionReport">
                                        Collection Report
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="collectionvsdeposit" id="collectionvsdeposit">
                                    <label class="form-check-label" for="collectionvsdeposit">
                                        Collection VS Deposit Report
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="loanReport" id="loanReport">
                                    <label class="form-check-label" for="loanReport">
                                        Loan Report
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="loanArreasReport" id="loanArreasReport">
                                    <label class="form-check-label" for="loanArreasReport">
                                        Loan Arreas Report
                                    </label>

                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="memberSavingsReport" id="memberSavingsReport">
                                    <label class="form-check-label" for="memberSavingsReport">
                                        Member Saving Report
                                    </label>

                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="meetingReport" id="meetingReport">
                                    <label class="form-check-label" for="meetingReport">
                                        Meeting Report
                                    </label>

                                </div>
                            </div>

                            <!-- User Manage Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="userManage" id="userManage"
                                        onchange="toggleSubPermissions(this, '#addUsers, #manageUsers, #userRole')">
                                    <label class="form-check-label" for="userManage">
                                        User Manage
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="addUsers" id="addUsers">
                                    <label class="form-check-label" for="addUsers">
                                        Add Users
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="manageUsers" id="manageUsers">
                                    <label class="form-check-label" for="manageUsers">
                                        Manage Users
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="userRole" id="userRole">
                                    <label class="form-check-label" for="userRole">
                                        User Role
                                    </label>
                                </div>
                            </div>

                            <!-- Settings Module -->
                            <div class="col-sm-12 col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="settings" id="settings"
                                        onchange="toggleSubPermissions(this, '#manage, #activityLog')">
                                    <label class="form-check-label" for="settings">
                                        Settings
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="manage" id="manage">
                                    <label class="form-check-label" for="manage">
                                        Manage
                                    </label>
                                </div>
                                <div class="form-check ms-4">
                                    <input class="form-check-input userPermissions" type="checkbox"
                                        name="permissions[]" value="activityLog" id="activityLog">
                                    <label class="form-check-label" for="activityLog">
                                        activity Log
                                    </label>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="row">
                                <div class="col-12 mt-3 d-flex justify-content-end">
                                    <button class="btn btn-primary" id="btnCreateUserRole">Create Role</button>
                                </div>
                            </div>

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

    <script>
        function toggleSubPermissions(mainCheckbox, subPermissionIds) {
            const subMenuCheckboxes = document.querySelectorAll(subPermissionIds);
            subMenuCheckboxes.forEach(checkbox => {
                checkbox.checked = mainCheckbox.checked;
            });
        }

        function memberCheck(memberCheckBox) {
            toggleSubPermissions(memberCheckBox,
                '#addMember, #viewMember, #ManageMember, #ManageMemberEdit, #ManageMemberDelete');
        }

        function divisionCheck(divisionCheckBox) {
            toggleSubPermissions(divisionCheckBox, '#divisionByGn, #DivisionByVillage');
        }

        function accountCheck(accountCheckBox) {
            toggleSubPermissions(accountCheckBox,
                '#addAccount, #viewAccount, #ManageAccount, #ManageAccountEdit, #ManageAccountDelete');
        }

        function loanCheck(loanCheckBox) {
            toggleSubPermissions(loanCheckBox,
                '#ManageLoanRquest,#addLoan, #loanCalculator, #loanProduct, #ManageLoan, #ManageLoanEdit, #ManageLoanDelete'
            );
        }

        function savingsCheck(savingsCheckBox) {
            toggleSubPermissions(savingsCheckBox,
                '#savingsSettings,#addSavings, #viewSavings, #ManageSavings, #ManageSavingsEdit, #ManageSavingsDelete');
        }

        function deathCheck(deathCheckBox) {
            toggleSubPermissions(deathCheckBox,
                '#addDeath, #viewDeath, #ManageDeath, #ManageDeathEdit, #ManageDeathDelete');
        }

        function repaymentCheck(repaymentCheckBox) {
            toggleSubPermissions(repaymentCheckBox, '#directSavings, #loanRepayment, #openingBalance');

        }

        function meetingsCheck(meetingsCheckBox) {
            toggleSubPermissions(meetingsCheckBox,
                '#addMeetings, #viewMeetings, #ManageMeetings, #ManageMeetingsEdit, #ManageMeetingsDelete');
        }

        function reportCheck(reportCheckBox) {
            toggleSubPermissions(reportCheckBox, '#openingBalanceReport');
        }

        function userManageCheck(userManageCheckBox) {
            toggleSubPermissions(userManageCheckBox, '#addUsers, #manageUsers, #userRole');
        }

        function settingsCheck(settingsCheckBox) {
            toggleSubPermissions(settingsCheckBox, '#manage', '#activityLog');
        }
    </script>
<?php /**PATH /home/techhdyz/swd.technathi.cloud/resources/views/pages/admin/add_user_role.blade.php ENDPATH**/ ?>