@extends('layouts.app')

@section('title', 'Role Permissions')

@push('styles')
<style>
/* ------------------------------ */
/*   GENERAL LAYOUT STYLING       */
/* ------------------------------ */

.permissions-wrapper {
    padding: 20px;
    min-height: calc(100vh - 150px); /* Ensure minimum height */
}

.role-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}

.role-section h5 {
    font-weight: 600;
    margin-bottom: 15px;
}

.role-header-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buttons match mailbox page */
.role-header-buttons .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    color: white !important;
    text-decoration: none;
}

.btn-blue  { background:#0078d4; }
.btn-orange { background:orange; }
.btn-green  { background:#1eae1e; }

/* Permissions container */
.permissions-container {
    display: none;
    background: #fff;
    padding-bottom: 50px;
    overflow: visible !important; /* FIX: Allow scrolling */
}

/* CRITICAL FIXES FOR SCROLLING */
.loadPages01 {
    height: auto !important;
    min-height: 100vh !important; /* Ensure it takes full viewport */
    overflow: visible !important;
    position: relative;
}

/* Fix for all parent containers */
.main-content-body,
.content-body,
.main-content,
.main-wrapper,
.main-body,
.app-content,
.content {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

/* Fix for app container */
#app,
.app,
.wrapper,
body,
html {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important; /* Enable vertical scroll */
}

/* Make sure body can scroll */
body {
    overflow-y: auto !important;
    position: relative;
}

/* ------------------------------ */
/*  DENSE TWO-COLUMN CARD GRID    */
/* ------------------------------ */

.module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.module-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 14px 18px;
}

.module-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
}

.module-title small {
    font-size: 12px;
    color: #6c757d;
}

/* Select All */
.module-title .select-all-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.action-item label {
    margin: 0;
    cursor: pointer;
}

/* Edit controls (like mailbox edit UI) */
.edit-controls-bar {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    padding: 12px 15px;
    margin-bottom: 20px;
    display: none;
    border-radius: 6px;
    text-align: right;
}

/* Loading overlay */
#refreshLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* responsive */
@media (max-width: 992px) {
    .module-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .permissions-wrapper {
        padding: 10px;
    }
    
    .role-section {
        padding: 15px;
    }
}
</style>
@endpush


@section('content')
<div class="loadPages01">

<div class="permissions-wrapper">

    <!-- ROLE SELECT AREA (matches mailbox UI formatting) -->
    <div class="role-section">
        <div class="row">
            <div class="col-lg-4">
                <h5>Select Role</h5>
                <select class="form-control" id="roleSelect" name="role_id">
                    <option value="">-- Choose a Role --</option>
                    @foreach($roles as $role)
                        <option value="{{ $role->id }}" 
                            {{ $selectedRole && $selectedRole->id == $role->id ? 'selected' : '' }}>
                            {{ ucfirst($role->name) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-lg-8 d-flex justify-content-end align-items-end">
                <div class="role-header-buttons">
                    <a href="{{route('settings.modules.index')}}" class="btn-action btn-blue">
                        <i class="las la-plus-circle"></i> Add Module
                    </a>
                    <a href="{{route('settings.actions.index')}}" class="btn-action btn-orange">
                        <i class="las la-cog"></i> Add Action
                    </a>
                    <button class="btn-action btn-green" id="btnRefresh">
                        <i class="las la-sync"></i> Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!-- EDIT BAR -->
    <div class="edit-controls-bar" id="editControls">
        <button class="btn btn-secondary btn-sm" id="btnCancelEdit">Cancel</button>
        <button class="btn btn-primary btn-sm" id="save_btn">
            <i class="las la-save"></i> Save Changes
        </button>
    </div>


    <!-- PERMISSIONS CONTAINER -->
    <div id="permissionsContainer" class="permissions-container">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="text-primary">Permissions for: <span id="selectedRoleName"></span></h5>

            <a href="#" id="btnEditPermissions" class="btn btn-outline-primary btn-sm">
                <i class="las la-edit"></i> Edit Permissions
            </a>
        </div>


        <form id="permissionsForm">
            @csrf
            <input type="hidden" id="formRoleId" name="role_id">

            <div class="module-grid">

                @foreach($modules as $module)
                <div class="module-card">

                    <div class="module-title">
                        <span>{{ ucfirst($module->name) }}</span>

                        <div class="select-all-container">
                            <input type="checkbox" class="select-all" 
                                   data-module="{{ $module->name }}"
                                   id="selectAll_{{ $module->name }}" disabled>
                            <label for="selectAll_{{ $module->name }}">All</label>
                        </div>
                    </div>

                    <div class="action-list">
                        @foreach($allActions as $action)
                        @php $permissionName = strtolower($module->name.'.'.$action->name); @endphp

                        <div class="action-item">
                            <input type="checkbox" 
                                class="permission-checkbox {{ $module->name }}-checkbox"
                                value="{{ $permissionName }}"
                                id="{{ $permissionName }}" disabled>

                            <label for="{{ $permissionName }}">
                                {{ ucfirst($action->name) }}
                            </label>
                        </div>
                        @endforeach
                    </div>

                </div>
                @endforeach

            </div>

        </form>
    </div>

</div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let isEditMode = false;
    let originalPermissions = [];

    // FIX: Force body to be scrollable on page load
    $('body, html').css({
        'overflow-y': 'auto',
        'height': 'auto',
        'min-height': '100vh'
    });

    // Load permissions when role changes
    $('#roleSelect').on('change', function() {
        const roleId = $(this).val();
        
        if (!roleId) {
            $('#permissionsContainer').hide();
            $('#btnEditPermissions').hide();
            return;
        }

        loadRolePermissions(roleId);
    });

    // Refresh button handler
    $('#btnRefresh').on('click', function() {
        const roleId = $('#roleSelect').val();
        if (roleId) {
            loadRolePermissions(roleId);
            toastr.info('Permissions refreshed');
        } else {
            toastr.warning('Please select a role first');
        }
    });

    // Load permissions for selected role
    function loadRolePermissions(roleId) {
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('settings.permissions.get', ':id') }}".replace(':id', roleId),
            type: 'GET',
            beforeSend: function() {
                $('#permissionsContainer').hide();
            },
            success: function(response) {
                if (response.status) {
                    const roleName = $('#roleSelect option:selected').text();
                    $('#selectedRoleName').text(roleName);
                    $('#formRoleId').val(roleId);
                    
                    originalPermissions = response.permissions;
                    
                    // Reset all checkboxes
                    $('.permission-checkbox').prop('checked', false);
                    $('.select-all').prop('checked', false);
                    
                    // Check the ones that have permission
                    response.permissions.forEach(permission => {
                        $(`input[value="${permission}"]`).prop('checked', true);
                    });
                    
                    updateAllSelectAllCheckboxes();
                    
                    // Show the container
                    $('#permissionsContainer').show();
                    $('#btnEditPermissions').show();
                    exitEditMode();
                    
                    // FIX: Trigger resize and scroll update after content loads
                    setTimeout(function() {
                        fixScrollAfterAjax();
                    }, 100);
                }
            },
            error: function(xhr) {
                toastr.error('Error loading permissions');
                $('#permissionsContainer').hide();
                $('#btnEditPermissions').hide();
            },
            complete: function() {
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 500);
            }
        });
    }

    // FIX: Function to fix scrolling after AJAX
    function fixScrollAfterAjax() {
        // Reset all container heights
        $('.loadPages01, .main-content, .content-body, .main-content-body, .main-wrapper, .main-body')
            .css({
                'height': 'auto',
                'min-height': '100vh',
                'overflow': 'visible'
            });
        
        // Force body to be scrollable
        $('body, html').css({
            'overflow-y': 'auto',
            'height': 'auto'
        });
        
        // Trigger window resize event
        $(window).trigger('resize');
        
        // Scroll to top if needed
        if ($(window).scrollTop() > 0) {
            $('html, body').animate({ scrollTop: 0 }, 100);
        }
    }

    // Enter edit mode
    $('#btnEditPermissions').on('click', function(e) {
        e.preventDefault();
        enterEditMode();
    });

    // Cancel edit
    $('#btnCancelEdit').on('click', function() {
        $('.permission-checkbox').prop('checked', false);
        originalPermissions.forEach(permission => {
            $(`input[value="${permission}"]`).prop('checked', true);
        });
        
        updateAllSelectAllCheckboxes();
        exitEditMode();
    });

    function enterEditMode() {
        isEditMode = true;
        $('.permission-checkbox').prop('disabled', false);
        $('.select-all').prop('disabled', false);
        
        $('#editControls').show();
        $('#btnEditPermissions').hide();
    }

    function exitEditMode() {
        isEditMode = false;
        $('.permission-checkbox').prop('disabled', true);
        $('.select-all').prop('disabled', true);
        
        $('#editControls').hide();
        $('#btnEditPermissions').show();
    }

    // Save permissions
    $('#save_btn').on('click', function(e) {
        e.preventDefault();
        
        const allPermissions = {};
        $('.permission-checkbox').each(function() {
            allPermissions[$(this).val()] = $(this).is(':checked');
        });
         
        const formData = {
            _token: "{{ csrf_token() }}",
            role_id: $('#formRoleId').val(),
            all_permissions: allPermissions
        };

        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('settings.permissions.update') }}",
            type: 'POST',
            data: formData,
            beforeSend: function() {
                $('button[type="submit"]').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
            },
            success: function(response) {
                if (response.status) {
                    toastr.success(response.message);
                    loadRolePermissions($('#roleSelect').val());
                    originalPermissions = $('.permission-checkbox:checked').map(function() {
                        return this.value;
                    }).get();
                    
                    // FIX: Fix scrolling after save
                    setTimeout(function() {
                        fixScrollAfterAjax();
                    }, 100);
                }
            },
            error: function(xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    Object.values(xhr.responseJSON.errors).forEach(error => {
                        toastr.error(error[0]);
                    });
                } else {
                    toastr.error('Error updating permissions');
                }
            },
            complete: function() {
                $('button[type="submit"]').prop('disabled', false).html('<i class="las la-save"></i> Save Changes');
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 500);
            }
        });
    });

    // Select all toggle for each module
    $(document).on('change', '.select-all', function() {
        const module = $(this).data('module');
        const isChecked = $(this).prop('checked');
        $(`.${module}-checkbox`).prop('checked', isChecked);
    });

    // When any permission checkbox changes, update the corresponding Select All checkbox
    $(document).on('change', '.permission-checkbox', function() {
        const classList = $(this).attr('class').split(' ');
        const moduleClass = classList.find(cls => cls.includes('-checkbox') && cls !== 'permission-checkbox');
        
        if (moduleClass) {
            const moduleName = moduleClass.replace('-checkbox', '');
            updateSelectAllCheckbox(moduleName);
        }
    });

    // Update a specific module's Select All checkbox
    function updateSelectAllCheckbox(moduleName) {
        const moduleCheckboxes = $(`.${moduleName}-checkbox`);
        const allChecked = moduleCheckboxes.length === moduleCheckboxes.filter(':checked').length;
        const someChecked = moduleCheckboxes.filter(':checked').length > 0;
        
        $(`#selectAll_${moduleName}`).prop('checked', allChecked);
    }

    // Update all Select All checkboxes
    function updateAllSelectAllCheckboxes() {
        $('.module-card').each(function() {
            const moduleName = $(this).find('.select-all').data('module');
            if (moduleName) {
                updateSelectAllCheckbox(moduleName);
            }
        });
    }

    // FIX: Handle window resize
    $(window).on('resize', function() {
        // Ensure containers are properly sized
        $('.loadPages01').css('height', 'auto');
    });

    // FIX: Initialize scroll on page load
    setTimeout(function() {
        fixScrollAfterAjax();
    }, 500);

    // Load permissions if role is pre-selected on page load
    @if($selectedRole)
        setTimeout(() => {
            loadRolePermissions({{ $selectedRole->id }});
            
            // FIX: Additional scroll fix after initial load
            setTimeout(function() {
                fixScrollAfterAjax();
            }, 300);
        }, 100);
    @endif
    
    // FIX: Make sure Enter key doesn't submit form
    $(document).on('keydown', 'input[type="checkbox"]', function(e) {
        if (e.keyCode === 13) {
            e.preventDefault();
            $(this).trigger('click');
        }
    });
});
</script>
@endpush