@extends('layouts.app')

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

@push('styles')
<style>
.permission-section {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #fff;
}

.permission-body {
    padding: 20px;
    overflow-y: auto;
    max-height: 60vh;
}
.permission-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    color: #2c3e50;
}

.module-section {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    background: #fff;
    margin-bottom: 15px;
}

.module-header {
    font-weight: 600;
    margin-bottom: 10px;
    color: #2c3e50;
    font-size: 0.95rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    padding: 4px 0;
}

.action-item input {
    margin-right: 8px;
}

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

.select-role-section {
    background: linear-gradient(135deg, #62afe9 0%, #336fda 100%);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.select-role-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.role-selector {
    flex: 1;
    min-width: 300px;
}

.role-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.role-action-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.role-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.role-label {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.role-select {
    border: none;
    border-radius: 8px;
    /* padding: 12px 15px; */
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.role-select:focus {
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.permissions-container {
    display: none;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.edit-controls {
    background: #f8f9fa;
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
    display: none;
}

/* 5 modules per row */
@media (min-width: 1200px) {
    .permission-body .row .col-xl-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.select-all-checkbox {
    transform: scale(0.8);
    margin-right: 5px;
}

.select-all-label {
    font-size: 0.8rem;
    margin-bottom: 0;
    cursor: pointer;
}

.permissions-container::-webkit-scrollbar {
    width: 8px;
}
.permissions-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
.permissions-container::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* Responsive design for role section */
@media (max-width: 768px) {
    .select-role-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .role-selector {
        min-width: 100%;
    }
    
    .role-actions {
        justify-content: center;
    }
}

/* Animation for buttons */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-btn {
    animation: pulse 2s infinite;
}

.pulse-btn:hover {
    animation: none;
}
</style>
@endpush

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Website Settings - Role Permissions</h5>
    </div>
    
    <div class="card-body">
        <!-- Enhanced Role Selection Section -->
        <div class="select-role-section">
            <div class="select-role-content">
                <div class="role-selector">
                    <label for="roleSelect" class="role-label">
                        <i class="fas fa-user-shield me-2"></i>Select Role
                    </label>
                    <select class="form-control role-select" id="roleSelect" name="role_id" required>
                        <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="role-actions">
                    <a href="{{route('settings.modules.index')}}" class="btn role-action-btn pulse-btn" id="btnAddModule">
                        <i class="fas fa-plus-circle"></i>
                        Add Module
                    </a>
                    <a href="{{route('settings.actions.index')}}" class="btn role-action-btn" id="btnAddAction">
                        <i class="fas fa-cog"></i>
                        Add Action
                    </a>
                    <button type="button" class="btn role-action-btn" id="btnRefresh">
                        <i class="fas fa-sync-alt"></i>
                        Refresh
                    </button>
                </div>
            </div>
        </div>

        <!-- Permissions Display Section -->
        <div id="permissionsContainer" class="permissions-container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6>Permissions for: <span id="selectedRoleName" class="text-primary"></span></h6>
                <a href="#" id="btnEditPermissions" class="btn btn-outline-primary btn-sm">
                    <i class="las la-edit me-1"></i> Edit Permissions
                </a>
                <div class="edit-controls" id="editControls">
                    <button type="button" class="btn btn-secondary btn-sm" id="btnCancelEdit">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary btn-sm" id="save_btn">
                        <i class="las la-save"></i> Save Changes
                    </button>
                </div>
            </div>

            <form id="permissionsForm">
                @csrf
                <input type="hidden" name="role_id" id="formRoleId">
                
                <div class="permission-section">
                    <div class="permission-header">
                        <i class="fas fa-key"></i> Module Permissions
                    </div>
                    
                    <div class="permission-body">
                        <div class="row">
                            @foreach($modules as $module)
                                <div class="col-xl-2-4 col-lg-4 col-md-6 mb-4">
                                    <div class="module-section">
                                        <div class="module-header">
                                            <span>{{ ucfirst($module->name) }}</span>
                                            <div class="form-check m-0 p-0">
                                                <input type="checkbox" class="form-check-input select-all-checkbox select-all" 
                                                       data-module="{{ $module->name }}" 
                                                       id="selectAll_{{ $module->name }}" 
                                                       disabled>
                                                <label class="form-check-label select-all-label" for="selectAll_{{ $module->name }}">
                                                    All
                                                </label>
                                            </div>
                                        </div>

                                        <div class="action-group">
                                            @foreach($allActions as $action)
                                                @php
                                                    $permissionName = strtolower($module->name . '.' . $action->name);
                                                @endphp
                                                <div class="action-item">
                                                    <input type="checkbox" name="permissions[]" 
                                                           value="{{ $permissionName }}" 
                                                           id="{{ $permissionName }}" 
                                                           class="permission-checkbox {{ $module->name }}-checkbox" 
                                                           disabled>
                                                    <label for="{{ $permissionName }}">
                                                        {{ ucfirst($action->name) }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Module Modal -->
<div class="modal fade" id="addModuleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Module</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addModuleForm">
                    @csrf
                    <div class="mb-3">
                        <label for="moduleName" class="form-label">Module Name</label>
                        <input type="text" class="form-control" id="moduleName" name="name" required 
                               placeholder="Enter module name (e.g., users, products)">
                    </div>
                    <div class="mb-3">
                        <label for="moduleDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="moduleDescription" name="description" 
                                  rows="3" placeholder="Optional description"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveModuleBtn">Save Module</button>
            </div>
        </div>
    </div>
</div>

<!-- Add Action Modal -->
<div class="modal fade" id="addActionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addActionForm">
                    @csrf
                    <div class="mb-3">
                        <label for="actionName" class="form-label">Action Name</label>
                        <input type="text" class="form-control" id="actionName" name="name" required 
                               placeholder="Enter action name (e.g., export, approve)">
                    </div>
                    <div class="mb-3">
                        <label for="actionDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="actionDescription" name="description" 
                                  rows="3" placeholder="Optional description"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveActionBtn">Save Action</button>
            </div>
        </div>
    </div>
</div>
@endsection

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

    // 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) {
        $('#loaderStatus').text('Starting loading...');
        $('#refreshLoader').removeClass('d-none');

        $.ajax({
            url: "{{ route('settings.permissions.get', ':id') }}".replace(':id', roleId),
            type: 'GET',
            beforeSend: function() {
                $('#permissionsContainer').hide();
                $('#loaderStatus').text('Fetching Permissions...');
            },
            success: function(response) {
                if (response.status) {
                    const roleName = $('#roleSelect option:selected').text();
                    $('#selectedRoleName').text(roleName);
                    $('#formRoleId').val(roleId);
                    
                    originalPermissions = response.permissions;
                    
                    $('.permission-checkbox').prop('checked', false);
                    $('.select-all').prop('checked', false);
                    
                    response.permissions.forEach(permission => {
                        $(`input[value="${permission}"]`).prop('checked', true);
                    });
                    
                    updateAllSelectAllCheckboxes();
                    
                    $('#permissionsContainer').show();
                    $('#btnEditPermissions').show();
                    exitEditMode();
               }
            },
            error: function(xhr) {
                toastr.error('Error loading permissions');
                $('#permissionsContainer').hide();
                $('#btnEditPermissions').hide();
            },
            complete: function() {
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 1000);
            }
        });
    }

    // 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);
        $('.permission-body').addClass('edit-mode');
        $('#editControls').show();
        $('#btnEditPermissions').hide();
    }

    function exitEditMode() {
        isEditMode = false;
        $('.permission-checkbox').prop('disabled', true);
        $('.select-all').prop('disabled', true);
        $('.permission-body').removeClass('edit-mode');
        $('#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
        };

        $('#loaderStatus').text('Starting saving...');
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('settings.permissions.update') }}",
            type: 'POST',
            data: formData,
            beforeSend: function() {
                $('#permissionsContainer').hide();
                $('#loaderStatus').text('Please wait...');
                $('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();
                }
            },
            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');
                }, 1000);
            }
        });
    });

    // 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-section').each(function() {
            const moduleName = $(this).find('.select-all').data('module');
            if (moduleName) {
                updateSelectAllCheckbox(moduleName);
            }
        });
    }

    // Load permissions if role is pre-selected on page load
    @if($selectedRole)
        setTimeout(() => {
            loadRolePermissions({{ $selectedRole->id }});
        }, 100);
    @endif
});
</script>
@endpush