@model UserUpdateDto
@{
    ViewData["Title"] = "Edit User";
    var roles = ViewBag.Roles as List<string> ?? new List<string>();
    var schools = ViewBag.Schools as List<SchoolDto> ?? new List<SchoolDto>();
    var email = ViewBag.Email as string;
}

<h2 class="page-header">
    <i class="bi bi-pencil-square me-2"></i>Edit User
</h2>

<div class="row">
    <div class="col-lg-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <form asp-action="Edit" method="post">
                    @Html.AntiForgeryToken()
                    <input asp-for="Id" type="hidden" />
                    <div asp-validation-summary="All" class="text-danger mb-3"></div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input class="form-control" value="@email" disabled />
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label asp-for="FirstName" class="form-label">First Name</label>
                            <input asp-for="FirstName" class="form-control" required />
                            <span asp-validation-for="FirstName" class="text-danger"></span>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label asp-for="LastName" class="form-label">Last Name</label>
                            <input asp-for="LastName" class="form-control" required />
                            <span asp-validation-for="LastName" class="text-danger"></span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label asp-for="Role" class="form-label">Role</label>
                        <select asp-for="Role" class="form-select" id="roleSelect" required>
                            <option value="">Select a role</option>
                            @foreach (var r in roles)
                            {
                                <option value="@r">@r</option>
                            }
                        </select>
                        <span asp-validation-for="Role" class="text-danger"></span>
                    </div>

                    <div class="mb-3" id="schoolGroup" style="display: none;">
                        <label asp-for="SchoolId" class="form-label">School</label>
                        <select asp-for="SchoolId" class="form-select" id="schoolSelect">
                            <option value="">No school</option>
                            @foreach (var s in schools)
                            {
                                <option value="@s.SchoolId">@s.Name</option>
                            }
                        </select>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input asp-for="IsActive" class="form-check-input" type="checkbox" />
                            <label asp-for="IsActive" class="form-check-label">Active</label>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>Save Changes
                        </button>
                        <a asp-action="Index" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        document.getElementById('roleSelect').addEventListener('change', function () {
            var schoolRoles = ['Coach', 'Principal', 'Student'];
            var schoolGroup = document.getElementById('schoolGroup');
            schoolGroup.style.display = schoolRoles.includes(this.value) ? 'block' : 'none';
            if (!schoolRoles.includes(this.value)) {
                document.getElementById('schoolSelect').value = '';
            }
        });
        // Trigger on load to show/hide school based on current role
        document.getElementById('roleSelect').dispatchEvent(new Event('change'));
    </script>
}
