@model Rs_system.Models.Permiso

@{
    ViewData["Title"] = "Nueva Opción de Menú";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Nueva Opción de Menú</h4>
        <p class="text-muted mb-0">Crear un nuevo permiso o menú</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="Create">
                        <div asp-validation-summary="ModelOnly" class="text-danger mb-3"></div>
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label asp-for="ModuloId" class="form-label">Módulo (Sección)</label>
                                <select asp-for="ModuloId" class="form-select" 
                                        asp-items="@(new SelectList(ViewBag.Modulos, "Id", "Nombre"))">
                                    <option value="">-- Seleccione un Módulo --</option>
                                </select>
                                <span asp-validation-for="ModuloId" class="text-danger small"></span>
                            </div>
                            
                            <div class="col-md-6">
                                <label asp-for="Codigo" class="form-label">Código Único (Controlador)</label>
                                <input asp-for="Codigo" class="form-control" placeholder="Ej: Expediente" />
                                <span asp-validation-for="Codigo" class="text-danger small"></span>
                            </div>
                            
                            <div class="col-md-8">
                                <label asp-for="Nombre" class="form-label">Nombre en Menú</label>
                                <input asp-for="Nombre" class="form-control" placeholder="Ej: Expedientes" />
                                <span asp-validation-for="Nombre" class="text-danger small"></span>
                            </div>

                            <div class="col-md-4">
                                <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 small"></span>
                            </div>
                            
                            <div class="col-md-8">
                                <label asp-for="Url" class="form-label">Ruta (URL)</label>
                                <input asp-for="Url" class="form-control" placeholder="Ej: /Expediente/Index" />
                                <span asp-validation-for="Url" class="text-danger small"></span>
                            </div>

                            <div class="col-md-4">
                                <label asp-for="Icono" class="form-label">Icono (Bootstrap Icons)</label>
                                <input asp-for="Icono" class="form-control" placeholder="Ej: bi-folder" />
                                <span asp-validation-for="Icono" class="text-danger small"></span>
                            </div>

                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" asp-for="EsMenu">
                                    <label class="form-check-label" asp-for="EsMenu">Mostrar en el menú lateral</label>
                                </div>
                            </div>
                            
                            <div class="col-12">
                                <label asp-for="Descripcion" class="form-label">Descripción</label>
                                <textarea asp-for="Descripcion" class="form-control" rows="2"></textarea>
                                <span asp-validation-for="Descripcion" class="text-danger small"></span>
                            </div>
                        </div>

                <div class="mt-4 text-end">
                    <a asp-action="Index" class="btn btn-outline-secondary me-2">Cancelar</a>
                    <button type="submit" class="btn btn-primary-custom px-4">
                        <i class="bi bi-save me-2"></i> Guardar Opción
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}