@extends('layouts.modern')

@section('title', $pageTitle)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="background-color: var(--card-bg); border-bottom: 1px solid var(--border-color);">
                    <h5 class="mb-0" style="color: var(--text-primary);">
                        <i class="fas fa-users-cog" style="color: var(--primary-color);"></i>
                        {{ $pageTitle }}
                    </h5>
                    <small style="color: var(--text-muted);">Assign roles to {{ $user->name }}</small>
                </div>
                <div class="card-body" style="background-color: var(--card-bg);">
                    <form id="userRolesForm" method="POST" action="{{ url('users/' . $user->id . '/roles') }}">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <h6 style="color: var(--text-primary); margin-bottom: 1rem;">User Information</h6>
                                <div class="user-info p-3 rounded" style="background-color: var(--card-bg); border: 1px solid var(--border-color);">
                                    <p><strong style="color: var(--text-primary);">Name:</strong> <span style="color: var(--text-muted);">{{ $user->name }}</span></p>
                                    <p><strong style="color: var(--text-primary);">Email:</strong> <span style="color: var(--text-muted);">{{ $user->email }}</span></p>
                                    <p><strong style="color: var(--text-primary);">Status:</strong> 
                                        @if($user->is_active)
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-danger">Inactive</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <h6 style="color: var(--text-primary); margin-bottom: 1rem;">Available Roles</h6>
                                <div class="roles-container">
                                    @foreach($roles as $role)
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="roles[]" 
                                                   value="{{ $role->id }}" id="role_{{ $role->id }}"
                                                   {{ in_array($role->id, $userRoles) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="role_{{ $role->id }}" style="color: var(--text-primary);">
                                                <strong>{{ $role->name }}</strong>
                                                @if($role->description)
                                                    <br><small style="color: var(--text-muted);">{{ $role->description }}</small>
                                                @endif
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update Roles
                            </button>
                            <a href="{{ url('users') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Users
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.roles-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

.form-check {
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

.form-check:hover {
    background-color: var(--hover-bg);
}

.user-info p {
    margin-bottom: 0.5rem;
}

.user-info p:last-child {
    margin-bottom: 0;
}
</style>

<script>
document.getElementById('userRolesForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Roles updated successfully!');
            if (window.parent && window.parent.refreshPage) {
                window.parent.refreshPage();
            }
        } else {
            alert('Error updating roles. Please try again.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error updating roles. Please try again.');
    });
});
</script>
@endsection