@extends('layouts.user')

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

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Role Management</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Role Management</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Current Role Card -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="uil uil-user-check me-2"></i>Current Role
                    </h5>
                </div>
                <div class="card-body">
                    @if($currentRole)
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm me-3">
                                <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                    <i class="uil uil-user-check font-size-18"></i>
                                </div>
                            </div>
                            <div>
                                <h6 class="mb-1">{{ $currentRole->display_name }}</h6>
                                <p class="text-muted mb-0">{{ $currentRole->description }}</p>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-3">
                            <i class="uil uil-user-exclamation text-warning font-size-24 mb-2"></i>
                            <p class="text-muted mb-0">No current role selected</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Available Roles Card -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="uil uil-users-alt me-2"></i>Available Roles
                    </h5>
                </div>
                <div class="card-body">
                    @if($availableRoles->count() > 0)
                        <div class="role-list">
                            @foreach($availableRoles as $role)
                                <div class="d-flex align-items-center justify-content-between mb-3 {{ $currentRole && $currentRole->id === $role->id ? 'bg-light p-2 rounded' : '' }}">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-xs me-2">
                                            <div class="avatar-title bg-{{ $currentRole && $currentRole->id === $role->id ? 'success' : 'secondary' }}-subtle text-{{ $currentRole && $currentRole->id === $role->id ? 'success' : 'secondary' }} rounded-circle">
                                                <i class="uil uil-{{ $currentRole && $currentRole->id === $role->id ? 'check' : 'user' }} font-size-14"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ $role->display_name }}</h6>
                                            <small class="text-muted">{{ Str::limit($role->description, 30) }}</small>
                                        </div>
                                    </div>
                                    @if(!$currentRole || $currentRole->id !== $role->id)
                                        <button type="button" 
                                                class="btn btn-sm btn-outline-primary switch-role-btn" 
                                                data-role-id="{{ $role->id }}" 
                                                data-role-name="{{ $role->display_name }}">
                                            Switch
                                        </button>
                                    @else
                                        <span class="badge bg-success">Active</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-3">
                            <i class="uil uil-user-times text-muted font-size-24 mb-2"></i>
                            <p class="text-muted mb-0">No roles assigned</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Role Information Card -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="uil uil-info-circle me-2"></i>Role Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>About Roles</h6>
                            <p class="text-muted">
                                Roles determine your access level and permissions within the system. 
                                You can switch between your assigned roles at any time.
                            </p>
                        </div>
                        <div class="col-md-6">
                            <h6>Role Switching</h6>
                            <p class="text-muted">
                                When you switch roles, your dashboard and available features will update 
                                to match your selected role's permissions.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Role Switch Modal -->
<div class="modal fade" id="roleSwitchModal" tabindex="-1" aria-labelledby="roleSwitchModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="roleSwitchModalLabel">Switch Role</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to switch to <strong id="roleNameDisplay"></strong> role?</p>
                <p class="text-muted small">This will change your dashboard and available features.</p>
            </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="confirmRoleSwitch">Switch Role</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let selectedRoleId = null;
    let selectedRoleName = null;
    const modal = new bootstrap.Modal(document.getElementById('roleSwitchModal'));

    // Handle role switch button clicks
    document.querySelectorAll('.switch-role-btn').forEach(button => {
        button.addEventListener('click', function() {
            selectedRoleId = this.dataset.roleId;
            selectedRoleName = this.dataset.roleName;
            
            document.getElementById('roleNameDisplay').textContent = selectedRoleName;
            modal.show();
        });
    });

    // Handle role switch confirmation
    document.getElementById('confirmRoleSwitch').addEventListener('click', function() {
        if (!selectedRoleId) return;

        // Show loading state
        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Switching...';

        // Send role switch request
        fetch('{{ route("user.roles.switch") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                role_id: selectedRoleId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show success message
                showAlert('success', data.message);
                
                // Reload page after short delay to update UI
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                showAlert('error', data.message || 'Failed to switch role');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', 'An error occurred while switching roles');
        })
        .finally(() => {
            modal.hide();
            // Reset button
            document.getElementById('confirmRoleSwitch').disabled = false;
            document.getElementById('confirmRoleSwitch').innerHTML = 'Switch Role';
        });
    });

    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;
        
        // Insert alert at the top of the container
        const container = document.querySelector('.container-fluid');
        container.insertAdjacentHTML('afterbegin', alertHtml);
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            const alert = container.querySelector('.alert');
            if (alert) {
                alert.remove();
            }
        }, 5000);
    }
});
</script>
@endpush