@extends('layouts.user')

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

@section('content')
<div class="content" style="height: calc(100vh - 4.2rem); overflow-y: auto; overflow-x: hidden; padding: 1.5rem;">
    <div class="pb-5">
        <!-- Page Header with Welcome Message -->
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="card border-0 bg-gradient" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <div class="card-body text-white py-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h2 class="mb-2 text-white">Role Management</h2>
                                <p class="mb-0 text-white-50">
                                    Switch between your assigned roles and manage your access permissions
                                </p>
                            </div>
                            <div class="text-end d-none d-md-block">
                                <span data-feather="shield" style="width: 64px; height: 64px; opacity: 0.3;"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- Current Active Role - Large Display -->
            <div class="col-md-5">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-body-highlight border-0">
                        <h5 class="card-title mb-0 d-flex align-items-center">
                            <span data-feather="user-check" style="width: 20px; height: 20px;" class="text-primary me-2"></span>
                            Current Role
                        </h5>
                    </div>
                    <div class="card-body text-center py-5">
                        @if($currentRole)
                            <div class="mb-4">
                                <div class="avatar-xl mx-auto mb-3">
                                    <div class="avatar-title bg-primary-subtle text-primary rounded-circle" style="width: 80px; height: 80px;">
                                        <span data-feather="shield" style="width: 40px; height: 40px;"></span>
                                    </div>
                                </div>
                                <h3 class="mb-2">{{ $currentRole->display_name }}</h3>
                                <p class="text-body-tertiary mb-4">{{ $currentRole->description }}</p>
                                <span class="badge badge-phoenix badge-phoenix-success fs-9">ACTIVE</span>
                            </div>
                            
                            <div class="row text-start mt-4 pt-4 border-top">
                                <div class="col-6">
                                    <small class="text-body-tertiary d-block mb-1">Role Type</small>
                                    <strong class="text-capitalize">{{ $currentRole->name }}</strong>
                                </div>
                                <div class="col-6">
                                    <small class="text-body-tertiary d-block mb-1">Access Level</small>
                                    <strong>{{ $currentRole->id === 1 ? 'Primary' : 'Secondary' }}</strong>
                                </div>
                            </div>
                        @else
                            <div class="py-5">
                                <span data-feather="alert-circle" style="width: 48px; height: 48px;" class="text-warning mb-3"></span>
                                <h5 class="text-warning">No Active Role</h5>
                                <p class="text-body-tertiary mb-0">Please select a role from the available roles</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Available Roles List -->
            <div class="col-md-7">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-body-highlight border-0">
                        <h5 class="card-title mb-0 d-flex align-items-center">
                            <span data-feather="users" style="width: 20px; height: 20px;" class="text-info me-2"></span>
                            Available Roles ({{ $availableRoles->count() }})
                        </h5>
                    </div>
                    <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                        @if($availableRoles->count() > 0)
                            <div class="role-list">
                                @foreach($availableRoles as $role)
                                    <div class="card border mb-3 {{ $currentRole && $currentRole->id === $role->id ? 'border-success bg-success-subtle' : '' }}">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center flex-grow-1">
                                                    <div class="me-3">
                                                        <div class="avatar-md">
                                                            <div class="avatar-title bg-{{ $currentRole && $currentRole->id === $role->id ? 'success' : 'secondary' }}-subtle text-{{ $currentRole && $currentRole->id === $role->id ? 'success' : 'secondary' }} rounded">
                                                                <span data-feather="{{ $currentRole && $currentRole->id === $role->id ? 'check-circle' : 'user' }}" style="width: 24px; height: 24px;"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <h6 class="mb-1">{{ $role->display_name }}</h6>
                                                        <p class="text-body-tertiary mb-0 small">{{ $role->description }}</p>
                                                    </div>
                                                </div>
                                                <div class="ms-3">
                                                    @if(!$currentRole || $currentRole->id !== $role->id)
                                                        <button type="button" 
                                                                class="btn btn-phoenix-primary btn-sm switch-role-btn" 
                                                                data-role-id="{{ $role->id }}" 
                                                                data-role-name="{{ $role->display_name }}">
                                                            <span data-feather="refresh-cw" style="width: 14px; height: 14px;" class="me-1"></span>
                                                            Switch
                                                        </button>
                                                    @else
                                                        <span class="badge badge-phoenix badge-phoenix-success">
                                                            <span data-feather="check" style="width: 12px; height: 12px;" class="me-1"></span>
                                                            Active
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <span data-feather="inbox" style="width: 48px; height: 48px;" class="text-body-tertiary mb-3"></span>
                                <h6 class="text-body-tertiary">No Roles Assigned</h6>
                                <p class="text-body-tertiary small mb-0">Please contact administrator to assign roles</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Role Information Cards -->
        <div class="row g-4 mt-2">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <span data-feather="info" style="width: 48px; height: 48px;" class="text-info"></span>
                        </div>
                        <h6 class="mb-2">About Roles</h6>
                        <p class="text-body-tertiary small mb-0">
                            Roles determine your access level and permissions within the India Taekwondo Portal. 
                            You can switch between your assigned roles at any time.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <span data-feather="zap" style="width: 48px; height: 48px;" class="text-warning"></span>
                        </div>
                        <h6 class="mb-2">Role Switching</h6>
                        <p class="text-body-tertiary small mb-0">
                            When you switch roles, your dashboard and available features will update automatically 
                            to match your selected role's permissions and capabilities.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <span data-feather="lock" style="width: 48px; height: 48px;" class="text-success"></span>
                        </div>
                        <h6 class="mb-2">Secure Access</h6>
                        <p class="text-body-tertiary small mb-0">
                            Each role has specific permissions and access controls to ensure data security 
                            and maintain proper workflow within the system.
                        </p>
                    </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
        @if(auth()->check() && auth()->user()->currentRole)
        fetch('{{ route("user.roles.switch", ["role" => auth()->user()->currentRole->name]) }}', {
        @else
        fetch('{{ route("switch-role") }}', {
        @endif
            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);
                
                // Redirect to dashboard with new role parameter to force full page reload
                setTimeout(() => {
                    if (data.redirect_url) {
                        window.location.href = data.redirect_url;
                    } else {
                        window.location.reload();
                    }
                }, 800);
            } else {
                showAlert('error', data.message || 'Failed to switch role');
                modal.hide();
                // Reset button
                document.getElementById('confirmRoleSwitch').disabled = false;
                document.getElementById('confirmRoleSwitch').innerHTML = 'Switch Role';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', 'An error occurred while switching roles');
            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