@model Rs_system.Models.ViewModels.ArticuloViewModel
@{
    ViewData["Title"] = "Ficha Técnica";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Ficha Técnica</h4>
        <p class="text-muted mb-0">Detalles del activo: @Model.Codigo</p>
    </div>
    <div>
        <a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-warning text-white me-2">
            <i class="bi bi-pencil me-1"></i> Editar
        </a>
        <a asp-action="Index" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Volver
        </a>
    </div>
</div>

<div class="row">
    <!-- Left Column: Image and Status -->
    <div class="col-md-4 mb-4">
        <div class="card-custom text-center mb-3">
            <div class="card-body">
                @if (!string.IsNullOrEmpty(Model.ImagenUrl))
                {
                    <img src="@Model.ImagenUrl" class="img-fluid rounded mb-3" style="max-height: 300px;" alt="Imagen del Artículo">
                }
                else
                {
                    <div class="bg-light rounded d-flex align-items-center justify-content-center mx-auto mb-3" style="height: 250px; width: 100%;">
                        <div class="text-center text-muted">
                            <i class="bi bi-image fs-1 d-block mb-2"></i>
                            <span>Sin Imagen</span>
                        </div>
                    </div>
                }

                <h5 class="card-title fw-bold text-primary">@Model.Nombre</h5>
                <p class="card-text text-muted mb-3">@Model.Codigo</p>

                <div class="d-flex justify-content-center gap-2">
                    <span class="badge bg-@(Model.EstadoColor ?? "secondary") fs-6 px-3 py-2">
                        Estado: @Model.EstadoNombre
                    </span>
                    @if (Model.Activo)
                    {
                        <span class="badge bg-success fs-6 px-3 py-2">Activo</span>
                    }
                    else
                    {
                        <span class="badge bg-danger fs-6 px-3 py-2">Inactivo</span>
                    }
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column: Details -->
    <div class="col-md-8">
        <div class="card-custom">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h5 class="card-title mb-0">Información Detallada</h5>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-sm-4 text-muted">Descripción</div>
                    <div class="col-sm-8 fw-semibold">
                        @(!string.IsNullOrEmpty(Model.Descripcion) ? Model.Descripcion : "-")
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-sm-4 text-muted">Ubicación Actual</div>
                    <div class="col-sm-8">
                        <span class="d-flex align-items-center">
                            <i class="bi bi-geo-alt-fill text-danger me-2"></i>
                            <span class="fw-bold">@Model.UbicacionNombre</span>
                        </span>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-sm-4 text-muted">Categoría</div>
                    <div class="col-sm-8 fw-semibold">@Model.CategoriaNombre</div>
                </div>

                <hr class="my-4 text-muted" />

                <div class="row mb-3">
                    <div class="col-sm-6">
                        <small class="text-muted d-block mb-1">Marca</small>
                        <span class="fs-5">@(!string.IsNullOrEmpty(Model.Marca) ? Model.Marca : "-")</span>
                    </div>
                    <div class="col-sm-6">
                        <small class="text-muted d-block mb-1">Modelo</small>
                        <span class="fs-5">@(!string.IsNullOrEmpty(Model.Modelo) ? Model.Modelo : "-")</span>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-sm-6">
                        <small class="text-muted d-block mb-1">Número de Serie</small>
                        <span class="font-monospace bg-light px-2 py-1 rounded">
                            @(!string.IsNullOrEmpty(Model.NumeroSerie) ? Model.NumeroSerie : "N/A")
                        </span>
                    </div>
                    <div class="col-sm-6">
                        <small class="text-muted d-block mb-1">Precio Estimado</small>
                        <span class="text-success fw-bold">
                            @Model.Precio.ToString("C")
                        </span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <small class="text-muted d-block mb-1">Fecha Adquisición</small>
                        <span>
                            @(Model.FechaAdquisicion.HasValue ? Model.FechaAdquisicion.Value.ToString("dd/MM/yyyy") : "-")
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>