209 lines
11 KiB
Plaintext
209 lines
11 KiB
Plaintext
@model Rs_system.Models.ViewModels.ArticuloViewModel
|
|
@{
|
|
ViewData["Title"] = "Nuevo Artículo";
|
|
}
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="mb-1">Nuevo Artículo</h4>
|
|
<p class="text-muted mb-0">Registrar un nuevo activo en el inventario</p>
|
|
</div>
|
|
<a asp-action="Index" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left me-1"></i> Volver a la lista
|
|
</a>
|
|
</div>
|
|
|
|
<form asp-action="Create" method="post" enctype="multipart/form-data">
|
|
<div class="row">
|
|
<!-- Left Column: Basic Info -->
|
|
<div class="col-lg-8">
|
|
<div class="card-custom mb-4">
|
|
<div class="card-header bg-transparent py-3">
|
|
<h5 class="card-title mb-0 ps-2 border-start border-4 border-primary">Información General</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div asp-validation-summary="ModelOnly" class="alert alert-danger"></div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<label asp-for="Codigo" class="form-label">Código <span class="text-danger">*</span></label>
|
|
<input asp-for="Codigo" class="form-control" placeholder="Ej: SILLA-001" autofocus />
|
|
<span asp-validation-for="Codigo" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<label asp-for="Nombre" class="form-label">Nombre del Artículo <span class="text-danger">*</span></label>
|
|
<input asp-for="Nombre" class="form-control" placeholder="Ej: Guitarra Acustica Yamaha" />
|
|
<span asp-validation-for="Nombre" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label asp-for="Descripcion" class="form-label">Descripción</label>
|
|
<textarea asp-for="Descripcion" class="form-control" rows="3" placeholder="Detalles adicionales, características, color..."></textarea>
|
|
<span asp-validation-for="Descripcion" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label asp-for="Marca" class="form-label">Marca</label>
|
|
<input asp-for="Marca" class="form-control" placeholder="Ej: Yamaha, Sony" />
|
|
<span asp-validation-for="Marca" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="Modelo" class="form-label">Modelo</label>
|
|
<input asp-for="Modelo" class="form-control" placeholder="Ej: C-40" />
|
|
<span asp-validation-for="Modelo" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-custom">
|
|
<div class="card-header bg-transparent py-3">
|
|
<h5 class="card-title mb-0 ps-2 border-start border-4 border-info">Detalles del Activo</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label asp-for="NumeroSerie" class="form-label">Número de Serie</label>
|
|
<input asp-for="NumeroSerie" class="form-control" placeholder="S/N..." />
|
|
<span asp-validation-for="NumeroSerie" class="text-danger"></span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label asp-for="Precio" class="form-label">Valor Estimado (Moneda)</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">$</span>
|
|
<input asp-for="Precio" class="form-control" type="number" step="0.01" />
|
|
</div>
|
|
<span asp-validation-for="Precio" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label asp-for="FechaAdquisicion" class="form-label">Fecha de Adquisición</label>
|
|
<input asp-for="FechaAdquisicion" type="date" class="form-control" />
|
|
<span asp-validation-for="FechaAdquisicion" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Classification & Image -->
|
|
<div class="col-lg-4">
|
|
<div class="card-custom mb-4">
|
|
<div class="card-header bg-transparent py-3">
|
|
<h5 class="card-title mb-0 ps-2 border-start border-4 border-warning">Clasificación</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label asp-for="TipoControl" class="form-label fw-bold">Tipo de Inventario <span class="text-danger">*</span></label>
|
|
<select asp-for="TipoControl" class="form-select" id="tipoControlSelect">
|
|
<option value="UNITARIO">Unitario (Laptops, Proyectores)</option>
|
|
<option value="LOTE">Por Lote (Sillas, Cables)</option>
|
|
</select>
|
|
<div class="form-text">Unitario: Control 1 a 1 por Serie. Lote: Control por Cantidad.</div>
|
|
<span asp-validation-for="TipoControl" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="mb-3" id="cantidadContainer" style="display:none;">
|
|
<label asp-for="CantidadInicial" class="form-label fw-bold text-primary">Cantidad Inicial <span class="text-danger">*</span></label>
|
|
<input asp-for="CantidadInicial" class="form-control" type="number" min="1" value="1" />
|
|
<span asp-validation-for="CantidadInicial" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label asp-for="CategoriaId" class="form-label">Categoría <span class="text-danger">*</span></label>
|
|
<select asp-for="CategoriaId" class="form-select" asp-items="ViewBag.Categorias">
|
|
<option value="">-- Seleccionar --</option>
|
|
</select>
|
|
<span asp-validation-for="CategoriaId" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label asp-for="UbicacionId" class="form-label">Ubicación Inicial <span class="text-danger">*</span></label>
|
|
<select asp-for="UbicacionId" class="form-select" asp-items="ViewBag.Ubicaciones">
|
|
<option value="">-- Seleccionar --</option>
|
|
</select>
|
|
<span asp-validation-for="UbicacionId" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label asp-for="EstadoId" class="form-label">Estado Físico <span class="text-danger">*</span></label>
|
|
<select asp-for="EstadoId" class="form-select" asp-items="ViewBag.Estados">
|
|
<option value="">-- Seleccionar --</option>
|
|
</select>
|
|
<span asp-validation-for="EstadoId" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input asp-for="Activo" class="form-check-input" type="checkbox" role="switch" checked />
|
|
<label asp-for="Activo" class="form-check-label">Artículo Activo</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-custom">
|
|
<div class="card-header bg-transparent py-3">
|
|
<h5 class="card-title mb-0 ps-2 border-start border-4 border-secondary">Imagen</h5>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<div class="image-preview-container bg-light rounded d-flex align-items-center justify-content-center mb-2" style="height: 200px; border: 2px dashed #ccc;">
|
|
<img id="imagePreview" src="#" alt="Vista Previa" style="max-height: 100%; max-width: 100%; display: none;" />
|
|
<span id="placeholderText" class="text-muted">Sin Imagen</span>
|
|
</div>
|
|
<input asp-for="ImagenFile" class="form-control" type="file" accept="image/*" onchange="previewImage(this)" />
|
|
<span asp-validation-for="ImagenFile" class="text-danger"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 mt-4">
|
|
<button type="submit" class="btn btn-primary-custom btn-lg">
|
|
<i class="bi bi-save me-2"></i> Guardar Artículo
|
|
</button>
|
|
<a asp-action="Index" class="btn btn-light border">Cancelar</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
@section Scripts {
|
|
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
|
|
<script>
|
|
function previewImage(input) {
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
$('#imagePreview').attr('src', e.target.result).show();
|
|
$('#placeholderText').hide();
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
} else {
|
|
$('#imagePreview').hide();
|
|
$('#placeholderText').show();
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
function toggleFields() {
|
|
var tipo = $('#tipoControlSelect').val();
|
|
if (tipo === 'LOTE') {
|
|
$('#cantidadContainer').show();
|
|
$('#NumeroSerie').parent().hide(); // Hide Serial for Lote
|
|
$('#NumeroSerie').val('');
|
|
} else {
|
|
$('#cantidadContainer').hide();
|
|
$('#NumeroSerie').parent().show(); // Show Serial for Unitario
|
|
$('#CantidadInicial').val(1);
|
|
}
|
|
}
|
|
|
|
$('#tipoControlSelect').change(toggleFields);
|
|
toggleFields(); // Init
|
|
});
|
|
</script>
|
|
}
|