@model Rs_system.Models.Modulo

@{
    ViewData["Title"] = "Editar Módulo";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Editar Módulo</h4>
        <p class="text-muted mb-0">Modificar módulo existente</p>
    </div>
    <a asp-action="Index" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Volver
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card-custom">
            <form asp-action="Edit">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <input type="hidden" asp-for="Id" />
                        <input type="hidden" asp-for="CreadoEn" />
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label asp-for="Nombre" class="form-label">Nombre del Módulo</label>
                                <input asp-for="Nombre" class="form-control" />
                                <span asp-validation-for="Nombre" class="text-danger"></span>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label asp-for="ParentId" class="form-label">Módulo Padre (Opcional)</label>
                                <select asp-for="ParentId" class="form-select">
                                    <option value="">-- Ninguno (Módulo Raíz) --</option>
                                    @foreach (var modulo in (IEnumerable<Rs_system.Models.Modulo>)ViewBag.ModulosPadre)
                                    {
                                        <option value="@modulo.Id">@modulo.Nombre</option>
                                    }
                                </select>
                                <small class="text-muted">Si se selecciona, este será un sub-módulo</small>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label asp-for="Orden" class="form-label">Orden</label>
                                <input asp-for="Orden" class="form-control" type="number" />
                                <span asp-validation-for="Orden" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label asp-for="Icono" class="form-label">Icono (Bootstrap Icons)</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i id="iconPreview" class="bi @(Model.Icono ?? "bi-question-circle")"></i></span>
                                    <input asp-for="Icono" class="form-control" oninput="updateIconPreview(this.value)" />
                                </div>
                                <small class="text-muted">Use nombres de <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a></small>
                                <span asp-validation-for="Icono" class="text-danger"></span>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label d-block">Estado</label>
                                <div class="form-check form-switch mt-2">
                                    <input class="form-check-input" type="checkbox" asp-for="Activo">
                                    <label class="form-check-label" asp-for="Activo">Activo</label>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 text-end">
                            <button type="submit" class="btn btn-primary-custom px-4">
                                <i class="bi bi-save me-2"></i>Guardar Cambios
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        function updateIconPreview(iconName) {
            const preview = document.getElementById('iconPreview');
            preview.className = 'bi ' + (iconName || 'bi-question-circle');
        }
    </script>
}