@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<style>
    .panel-heading {
        background-color: #f1f1f1;
        border: 1px solid #e0dfe0;
        padding-left: 10px;
        padding-top: 6px;
        cursor: pointer;
    }
    .panel-default {
        padding-bottom: 4px;
    }
    label{
        font-size: 13px;
    }
    .post-approval-edit-container {
        position: relative;
    }
    .post-approval-edit-label {
        cursor: pointer;
        transition: color 0.3s ease;
    }
    .post-approval-edit-label.clickable {
        color: #007bff !important;
        cursor: pointer;
        text-decoration: underline;
    }
    .post-approval-edit-label.disabled {
        /* color: #999 !important; */
        cursor: default;
        text-decoration: none;
    }
</style>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Users
                </h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="{{ asset('/') }}" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="{{ asset('admin/users') }}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Users
                            </span>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Edit
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="flaticon-add"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Edit Users
                        </h3>
                    </div>
                </div>
            </div>
            <!--begin::Form-->
            <form action="{{ asset('admin/users/permission/add') }}" class="m-form m-form--fit m-form--label-align-right" method="POST">
                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        <input type="hidden" name="_token" value="{{csrf_token()}}" />

                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                User Type:
                            </label>
                            <div class="col-lg-6">
                                <select class="form-control m-input" name="user_type" id="exampleSelect1">
                                    <option value="">Select Type</option>
                                    @foreach($user_types as $_type_value)
                                        <option value="{!! $_type_value->id !!}">{!! $_type_value->name !!}</option>
                                    @endforeach
                                    <option value="new-type">Create New Type</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group m-form__group row new-user-type" style="display: none;">
                            <label class="col-lg-3 col-form-label">
                                Add New Type:
                            </label>
                            <div class="col-lg-6">
                                <input type="text" name="new_user_type" placeholder="Enter New User Type" class="form-control"/>
                            </div>
                        </div>
                        <?php $_d_sidebar = \Illuminate\Support\Facades\Config::get('constants.sidebar');
                              $_s_permissions = \Illuminate\Support\Facades\Config::get('constants.permissions');
                              $_s_sub_permissions = \Illuminate\Support\Facades\Config::get('constants.sub_permissions');
                              $_post_approval_edit_fields = \Illuminate\Support\Facades\Config::get('constants.post_approval_edit_fields');
                              $_s_tooltips = \Illuminate\Support\Facades\Config::get('constants.permission_tooltips');
                              $main_module = 0;
                        ?>
                        <div class="container">
                            <div class="row">
                                <div class="col-md-3">
                                    <label>Status</label>
                                    <select id="status-list" name="status-list[]" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="30">
                                        <?php $_status_index = 0; ?>
                                        @foreach($status as $statusItem)
                                            <option value="{!! str_replace(' ','_',$statusItem) !!}|#{!! $_status_index !!}">{!! ucwords(str_replace('_',' ',$statusItem)) !!}</option>
                                            <?php $_status_index++; ?>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label>Lenders</label>
                                    <select id="status-list" name="lender-list[]" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="30">
                                        <?php $_lender_index = 0; ?>
                                        @foreach($lenders as $lender)
                                            <option value="{!! str_replace(' ','_',$lender->name) !!}|*{!! $_lender_index !!}">{!! ucwords(str_replace('_',' ',$lender->name)) !!}</option>
                                            <?php $_lender_index++; ?>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label>Visible Status</label>
                                    <select id="visible-status-list" name="visible-status-list[]" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="30">
                                        <?php $_visible_status_index = 0; ?>
                                        @foreach($status as $visiblestatusItem)
                                            <option value="{!! str_replace(' ','_',$visiblestatusItem) !!}|%{!! $_visible_status_index !!}">{!! ucwords(str_replace('_',' ',$visiblestatusItem)) !!}</option>
                                            <?php $_visible_status_index++; ?>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3" id="auto_waive_amt" style="display: none;">
                                    <label>Auto Waive Amount</label>
                                    <input type="text" name="auto_waive_amt" value="{{isset($auto_waive_amount->waive_off_amt) ? $auto_waive_amount->waive_off_amt: ''}}" />
                                </div>
                            </div>
                            <hr>
                            <div class="col-md-12 row">
                                <?php $_permission_index = 0;?>
                                @foreach($_s_permissions as $permission => $permissionLinkArray)
                                    @if((isset($permissionLinkArray[0]) && $permissionLinkArray[0]) || !count($permissionLinkArray))
                                    <div class="col-md-3" @if((isset($permissionLinkArray[0]) && $permissionLinkArray[0] == 'disabled')) style="display:none;" @endif>
                                    @if($permission == 'Post Approval Edit')
                                        <div class="post-approval-edit-container">
                                            <label for="post-approval-edit-{!! $_permission_index !!}" class="post-approval-edit-label" id="post-approval-edit-label-{!! $_permission_index !!}" style="cursor: default;">
                                                {!! ucwords(str_replace('_',' ',$permission)) !!}
                                            </label>
                                            <input type="checkbox" name="{!! str_replace(' ','_',$permission) !!}|-{!! $_permission_index !!}" class="form-control post-approval-edit-checkbox" id="post-approval-edit-{!! $_permission_index !!}"/>
                                        </div>
                                    @else
                                        <div class="form-check" style="display: flex; align-items: center; margin-bottom: 10px;">
                                            <input type="checkbox" name="{!! str_replace(' ','_',$permission) !!}|-{!! $_permission_index !!}" class="form-check-input" style="margin-right: 8px; margin-top: 0;"/>
                                            <label class="form-check-label" data-toggle="tooltip" data-placement="top" title="{{ isset($_s_tooltips[$permission]) ? $_s_tooltips[$permission] : 'No description available' }}" style="margin-bottom: 0; cursor: pointer;">
                                                {!! ucwords(str_replace('_',' ',$permission)) !!}
                                                <i class="fa fa-info-circle" style="color: #007bff; margin-left: 5px;"></i>
                                            </label>
                                        </div>
                                    @endif
                                </div>
                                <?php $_permission_index++; ?>
                                @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="col-md-12">
                        <div class="row">
                            <?php $_sub_permission_group_index = 0; ?>
                            @foreach($_s_sub_permissions as $sub_permission_group => $sub_permission_items)
                                <div class="col-md-12" style="margin-bottom: 20px;">
                                    <h5 style="margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #ddd;">
                                        {!! ucwords(str_replace('_',' ',$sub_permission_group)) !!}
                                    </h5>
                                    <div class="row">
                                        <?php $_sub_permission_index = 0; ?>
                                        @foreach($sub_permission_items as $sub_permission_name => $sub_permission_links)
                                            <div class="col-md-3" style="margin-bottom: 10px;">
                                                <div class="form-check" style="display: flex; align-items: center;">
                                                    <input type="checkbox" 
                                                           name="{!! str_replace(' ','_',$sub_permission_name) !!}|-{!! $_sub_permission_group_index !!}-{!! $_sub_permission_index !!}" 
                                                           class="form-check-input" 
                                                           style="margin-right: 8px; margin-top: 0;"
                                                           id="sub_permission_{!! $_sub_permission_group_index !!}_{!! $_sub_permission_index !!}"/>
                                                    <label class="form-check-label" 
                                                           for="sub_permission_{!! $_sub_permission_group_index !!}_{!! $_sub_permission_index !!}"
                                                           data-toggle="tooltip" 
                                                           data-placement="top" 
                                                           title="{{ isset($_s_tooltips[$sub_permission_name]) ? $_s_tooltips[$sub_permission_name] : 'No description available' }}" 
                                                           style="margin-bottom: 0; cursor: pointer;">
                                                        {!! ucwords(str_replace('_',' ',$sub_permission_name)) !!}
                                                        <i class="fa fa-info-circle" style="color: #007bff; margin-left: 5px;"></i>
                                                    </label>
                                                </div>
                                            </div>
                                            <?php $_sub_permission_index++; ?>
                                        @endforeach
                                    </div>
                                </div>
                                <?php $_sub_permission_group_index++; ?>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="col-md-12">
                        <table class="table">
                            <tr>
                                <th>Module</th>
                                <th>Sub-Module</th>
                                <th>Access</th>
                            </tr>
                            @foreach($_d_sidebar as $_d_name => $_d_bar)
                            <?php $main_module = $_d_bar['id']; ?>
                            <tr>
                                <td>{!! $_d_name !!}</td>
                                <td>
                                    <table style="list-style: none;padding: 0;">
                                        @foreach($_d_bar['list'] as $_d_item_name => $_d_item)
                                            <tr><td style="border: none;">{!! $_d_item_name !!}</td></tr>
                                            @if(isset($_d_item['sub-module']))
                                                @foreach($_d_item['sub-module'] as $_d_item_m)
                                                    @if($_d_item_m['name'] == "Module")
                                                    <tr><td style="border: none;">Merchant Master Module</td></tr>
                                                    @else
                                                    <tr><td style="border: none;">{!! $_d_item_m['name'] !!}</td></tr>
                                                    @endif
                                                @endforeach
                                            @endif
                                        @endforeach
                                    </table>
                                </td>
                                <td>
                                    <table class="table">
                                        <?php $module_id = 0; ?>
                                        @foreach($_d_bar['list'] as $_d_item_name => $_d_item)
                                            @if(isset($_d_item['permission']))
                                                <tr>
                                                @foreach($_d_item['permission'] as $action_id => $_d_item_m)
                                                    <?php 
                                                        $unique_input_string = $_d_item_name.'_'.$_d_item_m['name'].'|'.$main_module.'-'.$module_id.'-'.$action_id;
                                                        $unique_input_string = str_replace(' ','_',$unique_input_string);
                                                        $tooltip_key = $_d_item_m['name'];
                                                        $tooltip_text = isset($_s_tooltips[$tooltip_key]) ? $_s_tooltips[$tooltip_key] : 'No description available';
                                                    ?>
                                                    <td style="border: none;">
                                                        <div style="display: flex; align-items: center;">
                                                            <input name="<?php echo $unique_input_string; ?>" @if(isset($permissions) && in_array($unique_input_string, $permissions)) checked="checked" @endif style="margin-right: 8px; margin-top: 0;" type="checkbox"/>
                                                            <span data-toggle="tooltip" data-placement="top" title="{{ $tooltip_text }}">
                                                                {!! $_d_item_m['name'] !!}
                                                                <i class="fa fa-info-circle" style="color: #007bff; margin-left: 5px; font-size: 12px;"></i>
                                                            </span>
                                                        </div>
                                                    </td>
                                                @endforeach
                                                </tr>
                                                    @if(isset($_d_item['sub-module']))
                                                    @foreach($_d_item['sub-module'] as $sub_module_id=>$_d_item_m)
                                                    <tr>
                                                        @foreach($_d_item_m['permission'] as $action_ms_id => $_d_item_ms)
                                                            <?php 
                                                                $unique_input_string = $_d_item_name.'_'.$_d_item_m['name'].'_'.$_d_item_ms['name'].'|'.$main_module.'-'.$module_id.'-'.$sub_module_id.'-'.$action_ms_id;
                                                                $unique_input_string = str_replace(' ','_',$unique_input_string);
                                                                $tooltip_key = $_d_item_m['name'];
                                                                $tooltip_text = isset($_s_tooltips[$tooltip_key]) ? $_s_tooltips[$tooltip_key] : 'No description available';
                                                            ?>
                                                        <td style="border: none;">
                                                            <div style="display: flex; align-items: center;">
                                                                <input name="<?php echo $unique_input_string; ?>" @if(isset($permissions) && in_array($unique_input_string, $permissions)) checked="checked" @endif style="margin-right: 8px; margin-top: 0;" type="checkbox"/>
                                                                <span data-toggle="tooltip" data-placement="top" title="{{ $tooltip_text }}">
                                                                    {!! $_d_item_ms['name'] !!}
                                                                    <i class="fa fa-info-circle" style="color: #007bff; margin-left: 5px; font-size: 12px;"></i>
                                                                </span>
                                                            </div>
                                                        </td>
                                                        @endforeach
                                                    </tr>
                                                    @endforeach
                                                    @endif
                                            @endif
                                            <?php $module_id++; ?>
                                        @endforeach
                                    </table>
                                </td>
                            </tr>
                             <?php $main_module++; ?>
                             @endforeach
                        </table>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions">
                        @if(\Illuminate\Support\Facades\Session::has('Users_User_Access_Management_Create|3-0-0-1') || \Illuminate\Support\Facades\Session::has('Users_User_Access_Management_Update|3-0-0-2'))
                        <button type="submit" class="btn btn-primary" style="display: {!! !\Illuminate\Support\Facades\Session::has('Users_User_Access_Management_Create|3-0-0-1') && \Illuminate\Support\Facades\Session::has('Users_User_Access_Management_Update|3-0-0-2') ? 'none' : 'inline' !!}">
                            Submit
                        </button>
                        @endif
                        <button type="reset" onclick="window.history.back()" class="btn btn-secondary">
                            Cancel
                        </button>
                    </div>
                </div>
            </form>
            <!--end::Form-->
        </div>
    </div>
</div>

<!-- Post Approval Edit Modal -->
<div class="modal fade" id="postApprovalEditModal" tabindex="-1" role="dialog" aria-labelledby="postApprovalEditModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="postApprovalEditModalLabel">Configure Post Approval Edit</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="postApprovalEditForm">
                    <div class="form-group">
                        <label for="editFields">Select Fields that can be edited:</label>
                        <div class="row">
                            <?php 
                            $totalFields = count($_post_approval_edit_fields);
                            $fieldsPerColumn = ceil($totalFields / 2);
                            ?>
                            <div class="col-md-6">
                                @foreach($_post_approval_edit_fields as $index => $field)
                                    @if($index < $fieldsPerColumn)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="{{ strtolower(str_replace(' ', '_', $field)) }}" id="edit_{{ strtolower(str_replace(' ', '_', $field)) }}">
                                        <label class="form-check-label" for="post_approval_edit_{{ strtolower(str_replace(' ', '_', $field)) }}|-{!! $index !!}">
                                            {{ $field }}
                                        </label>
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="col-md-6">
                                @foreach($_post_approval_edit_fields as $index => $field)
                                    @if($index >= $fieldsPerColumn)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="{{ strtolower(str_replace(' ', '_', $field)) }}" id="edit_{{ strtolower(str_replace(' ', '_', $field)) }}">
                                        <label class="form-check-label" for="post_approval_edit_{{ strtolower(str_replace(' ', '_', $field)) }}|-{!! $index !!}">
                                            {{ $field }}
                                        </label>
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="savePostApprovalEdit">Save Configuration</button>
            </div>
        </div>
    </div>
</div>

@include("admin.layouts.footer")
<script>
    var list = {};
    $("select[name='user_type']").change(function () {
        // Clear Post Approval Edit fields when user type changes
        clearPostApprovalEditFields();
        
        $("input[type='checkbox']").removeAttr('checked');
        $("select option").removeAttr('selected');
        $("select option").selectpicker('refresh');
        var type_id = $(this).find('option:selected').val();
        $(".options-c-d").remove();
        if(type_id == 'new-type'){
            $("div.new-user-type").css({'display':'flex'});
            let cr = <?php echo \Illuminate\Support\Facades\Session::has('Users_User_Access_Management_Create|3-0-0-1') ? 1 : 0; ?>;
            if (cr === 1){
                $("button[type='submit']").css('display','inline');
            }else{
                $("button[type='submit']").css('display','none');
            }
        }else if (type_id) {
            $("div.new-user-type").css({'display':'none'});
            getUserPermissions(type_id, function(response){
                $.each(response.data, function (item, key) {
                    if (key.includes("#") || key.includes("*") || key.includes("%")){
                        $("option[value='"+key+"']").attr('selected','selected');
                    } else{
                        $("input[name='"+key+"']").attr('checked','checked');
                    }
                });
                $("select").selectpicker('refresh');
                // Reinitialize tooltips for dynamically loaded content
                $('[data-toggle="tooltip"]').tooltip();
                $("select[name='user_type']").before('<div data-id="'+type_id+'" class="options-c-d" style="padding-top: 4px;"><div style="font-size: 12px;border-radius: 0;" data-action="1" class="options-c-d-m btn btn-primary">Clone</div><div data-action="2" style="font-size: 12px;border-radius: 0;" class="options-c-d-m btn btn-danger">Delete</div></div>');
                let up = <?php echo \Illuminate\Support\Facades\Session::has('Users_User_Access_Management_Update|3-0-0-2') ? 1 : 0; ?>;
                if (up === 1){
                    $("button[type='submit']").css('display','inline');
                }else{
                    $("button[type='submit']").css('display','none');
                }
                
                // Update Post Approval Edit label state after permissions are loaded
                $('.post-approval-edit-checkbox').each(function() {
                    var checkbox = $(this);
                    var labelId = checkbox.attr('id').replace('post-approval-edit-', 'post-approval-edit-label-');
                    var label = $('#' + labelId);
                    
                    if (checkbox.is(':checked')) {
                        label.removeClass('disabled').addClass('clickable');
                    } else {
                        label.removeClass('clickable').addClass('disabled');
                    }
                });
                checkPostApprovalEditFields(response);
            });
        }
    });

    function getUserPermissions(type_id, callback){
        var _token = '<?php echo csrf_token(); ?>';
        $(".init-loader").css({display:'block'});
        $.ajax({
            type: 'POST',
            url: "/admin/users/get-permission-by-id/"+type_id,
            data: {
                _token: _token
            },
            dataType: "JSON",
            success: function (response) {
                $(".init-loader").css({display:'none'});
                callback(response);
            }
        });
    }

    $(document).on("click", ".options-c-d-m", function () {
        if(window.confirm('Do you want to '+($(this).attr('data-action') == 1 ? 'Clone?' : 'Delete?'))){
            let type_id = $(this).parent().attr('data-id');
            if ($(this).attr('data-action') == 2) {
                var _token = '<?php echo csrf_token(); ?>';
                $(".init-loader").css({display: 'block'});
                $.ajax({
                    type: 'POST',
                    url: "/admin/users/action-permission-by-id/" + type_id,
                    data: {
                        _token: _token,
                        action: $(this).attr('data-action')
                    },
                    dataType: "JSON",
                    success: function (response) {
                        $(".init-loader").css({display: 'none'});
                        if (response.status === 'OK') {
                            alert('User type Deleted successfully!');
                            window.location.reload();
                        }else{
                            alert('Something went wrong!');
                        }
                    }
                });
            }else{
                window.open(
                    '/admin/users/types?clone=true&type_id='+type_id,
                    '_blank'
                );
            }
        }
    });

    $(document).ready(
        function(){
            // Initialize tooltips
            $('[data-toggle="tooltip"]').tooltip();
            
            let type_id = '<?php echo isset($_GET['type_id']) ? $_GET['type_id'] : ''; ?>';
            let isClone = '<?php echo isset($_GET['clone']) ? $_GET['clone'] : ''; ?>';
            if (type_id && isClone) {
                $('select[name="user_type"]').val(type_id)
                    .change();

                $('select[name="user_type"]').val('new-type')
                    .change();

                setTimeout(function(){ $(".options-c-d").remove(); }, 500);
            }
        });

        $('#exampleSelect1').change(function() {
            if ($(this).val() == 5){
                $('#auto_waive_amt').show();
            }else{
                $('#auto_waive_amt').hide();
            }
        });

        // Post Approval Edit functionality
        $(document).on('change', '.post-approval-edit-checkbox', function() {
            var checkbox = $(this);
            var labelId = checkbox.attr('id').replace('post-approval-edit-', 'post-approval-edit-label-');
            var label = $('#' + labelId);
            
            if (checkbox.is(':checked')) {
                label.removeClass('disabled').addClass('clickable');
            } else {
                label.removeClass('clickable').addClass('disabled');
                // Reset modal form when unchecked
                $('#postApprovalEditForm')[0].reset();
                // Reset the configured flag when manually unchecked
                postApprovalEditConfigured = false;
            }
        });

        // Handle label click to open modal
        $(document).on('click', '.post-approval-edit-label.clickable', function(e) {
            e.preventDefault(); // Prevent default label behavior (checkbox toggle)
            $('#postApprovalEditModal').modal('show');
        });

        // Handle mutual dependency between Tenure and Product Name checkboxes
        $(document).on('change', '#postApprovalEditForm input[value="tenure"]', function() {
            if ($(this).is(':checked')) {
                $('#postApprovalEditForm input[value="product_name"]').prop('checked', true);
            } else {
                $('#postApprovalEditForm input[value="product_name"]').prop('checked', false);
            }
        });

        $(document).on('change', '#postApprovalEditForm input[value="product_name"]', function() {
            if ($(this).is(':checked')) {
                $('#postApprovalEditForm input[value="tenure"]').prop('checked', true);
            } else {
                $('#postApprovalEditForm input[value="tenure"]').prop('checked', false);
            }
        });

        // Handle save button click in modal
        $('#savePostApprovalEdit').click(function() {
            var selectedFields = [];
            $('#postApprovalEditForm input[type="checkbox"]:checked').each(function() {
                selectedFields.push($(this).val());
            });
            
            // Store selected fields for form submission
            storePostApprovalEditFields(selectedFields);            
            $('#postApprovalEditModal').modal('hide');
        });

        // Function to store Post Approval Edit fields and add them to main form
        function storePostApprovalEditFields(selectedFields) {            
            // Remove any existing post approval edit hidden inputs
            $('input[name^="post_approval_edit_"]').remove();
            
            // Add new hidden inputs for selected fields
            selectedFields.forEach(function(field) {
                // Find the original index of this field in the $_post_approval_edit_fields array
                var originalIndex = -1;
                $('#postApprovalEditForm input[type="checkbox"]').each(function() {
                    if ($(this).val() === field) {
                        // Extract the original index from the label's for attribute
                        var labelFor = $(this).next('label').attr('for');
                        var indexMatch = labelFor.match(/\|-(\d+)$/);
                        if (indexMatch) {
                            originalIndex = parseInt(indexMatch[1]);
                        }
                    }
                });
                
                if (originalIndex !== -1) {
                    var hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'post_approval_edit_' + field + '|-' + originalIndex;
                    hiddenInput.value = 'on';
                    // Append to the main form
                    var mainForm = document.querySelector('form[action*="users/permission/add"]');
                    if (mainForm) {
                        mainForm.appendChild(hiddenInput);
                    }
                }
            });
        }

        // Function to clear Post Approval Edit fields from form
        function clearPostApprovalEditFields() {
            $('input[name^="post_approval_edit_"]').remove();
        }

        // Function to check Post Approval Edit modal checkboxes based on response
        function checkPostApprovalEditFields(responseData) {
            // Clear all Post Approval Edit modal checkboxes first
            $('#postApprovalEditForm input[type="checkbox"]').prop('checked', false);

            var selectedFields = [];

            if (responseData && responseData.data) {
                responseData.data.forEach(function(permission) {
                    if (typeof permission === 'string' && permission.indexOf('post_approval_edit_') === 0) {
                        // Extract field name from permission string
                        var fieldMatch = permission.match(/post_approval_edit_([^|]+)/);
                        if (fieldMatch) {
                            var fieldName = fieldMatch[1];
                            selectedFields.push(fieldName);
                            $('#postApprovalEditForm input[value="' + fieldName + '"]').prop('checked', true);
                        }
                    }
                });

                // Apply mutual dependency logic on loaded state
                applyTenureProductDependency();

                // hiding the modal fields so that they are submitted as unchecked when not opened
                if (selectedFields.length > 0) {
                    storePostApprovalEditFields(selectedFields);
                } else {
                    clearPostApprovalEditFields();
                }
            } else {
                clearPostApprovalEditFields();
            }
        }

        // Function to apply mutual dependency between Tenure and Product Name
        function applyTenureProductDependency() {
            var tenureChecked = $('#postApprovalEditForm input[value="tenure"]').is(':checked');
            var productChecked = $('#postApprovalEditForm input[value="product_name"]').is(':checked');
            
            // If either is checked, check both; if both are unchecked, keep both unchecked
            if (tenureChecked || productChecked) {
                $('#postApprovalEditForm input[value="tenure"]').prop('checked', true);
                $('#postApprovalEditForm input[value="product_name"]').prop('checked', true);
            } else {
                $('#postApprovalEditForm input[value="tenure"]').prop('checked', false);
                $('#postApprovalEditForm input[value="product_name"]').prop('checked', false);
            }
        }


</script>