@model SkyArtShop.Models.AdminUser
@{
    ViewData["Title"] = "Create New User";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    var roles = ViewBag.Roles as List<string> ?? new List<string>();
}

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-user-plus"></i> Create New User</h2>
        <a href="/admin/users" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Users
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <form method="post" asp-action="Create">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Full Name *</label>
                                <input type="text" class="form-control" asp-for="Name" required />
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email Address *</label>
                                <input type="email" class="form-control" asp-for="Email" required />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Password *</label>
                                <input type="password" class="form-control" name="password" required minlength="6" />
                                <small class="text-muted">Minimum 6 characters</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Phone Number</label>
                                <input type="tel" class="form-control" asp-for="Phone" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Role *</label>
                                <select class="form-select" asp-for="Role" id="roleSelect" required>
                                    @foreach (var role in roles)
                                    {
                                        <option value="@role">@role</option>
                                    }
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" asp-for="IsActive">
                                    <option value="true">Active</option>
                                    <option value="false">Inactive</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" asp-for="Notes" rows="3" placeholder="Optional notes about this user..."></textarea>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="/admin/users" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Create User
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle"></i> Role Permissions</h5>
                </div>
                <div class="card-body">
                    <div id="rolePermissions">
                        <!-- Permissions will be displayed here based on selected role -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const rolePermissions = {
    'MasterAdmin': [
        'Manage Users',
        'Manage Products',
        'Manage Orders',
        'Manage Content',
        'Manage Settings',
        'View Reports',
        'Manage Finances',
        'Manage Inventory',
        'Manage Customers',
        'Manage Blog & Portfolio',
        'Full System Access'
    ],
    'Admin': [
        'Manage Products',
        'Manage Orders',
        'Manage Content',
        'View Reports',
        'Manage Inventory',
        'Manage Customers',
        'Manage Blog & Portfolio'
    ],
    'Cashier': [
        'View Products',
        'Manage Orders',
        'Process Payments',
        'View Customers'
    ],
    'Accountant': [
        'View Products',
        'View Orders',
        'View Reports',
        'Manage Finances',
        'View Customers',
        'Export Data'
    ]
};

function updateRolePermissions() {
    const role = document.getElementById('roleSelect').value;
    const permissions = rolePermissions[role] || [];
    const container = document.getElementById('rolePermissions');
    
    if (permissions.length > 0) {
        let html = '<ul class="list-unstyled mb-0">';
        permissions.forEach(perm => {
            html += '<li class="mb-2"><i class="fas fa-check text-success"></i> ' + perm + '</li>';
        });
        html += '</ul>';
        container.innerHTML = html;
    }
}

document.getElementById('roleSelect').addEventListener('change', updateRolePermissions);
updateRolePermissions(); // Initialize on page load
</script>