{% extends 'base.html' %}

{% block title %}Detalle de {{ equipo.nombre }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4>Hoja de Vida: {{ equipo.nombre }}</h4>
        <div>
            {% if user.is_superuser %}
            <a href="{% url 'gestion_equipos:editar_equipo' equipo.pk %}" class="btn btn-warning">Editar</a>
            {% endif %}
            <a href="{% url 'gestion_equipos:lista_equipos' %}" class="btn btn-secondary">Volver a la lista</a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Información General y Custodio -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Información General</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>N° Serie:</strong> {{ equipo.numero_serie|default:"N/A" }}</p>
                            <p><strong>Marca:</strong> {{ equipo.marca|default:"N/A" }}</p>
                            <p><strong>Modelo:</strong> {{ equipo.modelo|default:"N/A" }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Estado:</strong> <span class="badge text-bg-primary">{{ equipo.get_estado_display }}</span></p>
                            <p><strong>Categoría:</strong> {{ equipo.categoria.nombre|default:"N/A" }}</p>
                            <p><strong>Ubicación:</strong> {{ equipo.Ubicacion.nombre|default:"N/A" }}</p>
                            <p><strong>Fecha de Adquisición:</strong> {{ equipo.fecha_adquisicion|date:"d/m/Y"|default:"N/A" }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Especificaciones de Hardware -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Especificaciones de Hardware</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Procesador:</strong> {{ equipo.procesador_marca|default:"" }} {{ equipo.procesador_tipo|default:"" }} @ {{ equipo.procesador_velocidad_ghz|default:"N/A" }} GHz</p>
                            <p><strong>Memoria RAM:</strong> {{ equipo.ram_cantidad_gb|default:"N/A" }} GB {{ equipo.ram_tipo|default:"" }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Disco Duro:</strong> {{ equipo.disco_duro_capacidad_gb|default:"N/A" }} GB {{ equipo.disco_duro_tipo|default:"" }}</p>
                        </div>
                    </div>
                </div>
            </div>

             <!-- Periféricos Asociados -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Periféricos Asociados</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Monitor:</strong> {{ equipo.monitor_marca|default:"" }} - {{ equipo.monitor_modelo|default:"N/A" }}</p> - {{ equipo.monitor_serial|default:"N/A" }}</p>
                            <p><strong>Teclado:</strong> {{ equipo.teclado_marca|default:"" }} (S/N: {{ equipo.teclado_serial|default:"N/A" }})</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Mouse:</strong> {{ equipo.mouse_marca|default:"" }} (S/N: {{ equipo.mouse_serial|default:"N/A" }})</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-4">
            <!-- Custodio Actual y Acciones -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Custodio y Acciones</h6>
                </div>
                <div class="card-body">
                    {% if asignacion_actual %}
                        <p><strong>Usuario:</strong>
                            <a href="{% url 'gestion_usuarios:detalle_usuario' asignacion_actual.usuario.pk %}">
                                {{ asignacion_actual.usuario.nombre }} {{ asignacion_actual.usuario.apellido }}
                            </a>
                        </p>
                        <p><strong>Fecha de Asignación:</strong> {{ asignacion_actual.fecha_asignacion|date:"d/m/Y" }}</p>
                        
                        {# El botón solo se muestra si el usuario tiene permiso para cambiar asignaciones #}
                        {% if perms.gestion_equipos.change_asignacion %}
                            <form action="{% url 'gestion_equipos:devolver_equipo' asignacion_actual.id %}" method="POST" onsubmit="return confirm('¿Estás seguro de que deseas registrar la devolución de este equipo?');">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-success w-100">Registrar Devolución</button>
                            </form>
                        {% endif %}

                    {% else %}
                        <p class="text-muted">Este equipo no está asignado actualmente.</p>
                        {% if equipo.estado == 'DI' %}
                            {# El botón solo se muestra si el usuario tiene permiso para añadir asignaciones #}
                            {% if perms.gestion_equipos.add_asignacion %}
                                <a href="{% url 'gestion_equipos:asignar_equipo' equipo.pk %}" class="btn btn-primary w-100">Asignar Equipo</a>
                            {% endif %}
                        {% else %}
                            <p class="text-danger small mt-2">El equipo no se puede asignar porque su estado no es 'Disponible'.</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            <!-- Notas -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Notas</h6>
                </div>
                <div class="card-body">
                    <p>{{ equipo.notas|linebreaksbr|default:"No hay notas para este equipo." }}</p>
                </div>
            </div>
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">Último Mantenimiento</h6>
                    <a href="{% url 'gestion_equipos:listar_mantenimientos' %}" class="btn btn-sm btn-outline-secondary">Ver Historial</a>
                </div>
                <div class="card-body">
                    {% if ultimo_mantenimiento %}
                        <p class="mb-1"><strong>Tipo:</strong> {{ ultimo_mantenimiento.tipo_mantenimiento }}</p>
                        <p class="mb-1"><strong>Fecha:</strong> {{ ultimo_mantenimiento.fecha_mantenimiento|date:"d/m/Y" }}</p>
                        <p class="mb-1"><strong>Descripción:</strong> {{ ultimo_mantenimiento.descripcion|truncatewords:15 }}</p>
                    {% else %}
                        <p class="text-muted mb-0">No se han registrado mantenimientos para este equipo.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h5 class="m-0 font-weight-bold text-primary"><i class="fas fa-shield-alt me-2"></i>Garantía y Documentación</h5>
        </div>
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-6 border-end">
                    <div class="text-center p-3">
                        <h6 class="text-muted text-uppercase">Fin de Garantía</h6>
                        {% if equipo.garantia_fin %}
                            {# Lógica de colores para resaltar la fecha #}
                            {% if equipo.garantia_fin < today %}
                                <h4 class="display-6 text-danger">{{ equipo.garantia_fin|date:"d M, Y" }}</h4>
                                <p class="mb-0"><span class="badge bg-danger">Expirada</span></p>
                            {% elif equipo.garantia_fin < thirty_days_from_now %}
                                <h4 class="display-6 text-warning">{{ equipo.garantia_fin|date:"d M, Y" }}</h4>
                                <p class="mb-0"><span class="badge bg-warning text-dark">Expira pronto</span></p>
                            {% else %}
                                <h4 class="display-6 text-success">{{ equipo.garantia_fin|date:"d M, Y" }}</h4>
                                <p class="mb-0"><span class="badge bg-success">Vigente</span></p>
                            {% endif %}
                        {% else %}
                            <h4 class="display-6 text-muted">N/A</h4>
                            <p class="mb-0"><span class="badge bg-secondary">No especificada</span></p>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-center p-3">
                        <h6 class="text-muted text-uppercase">Factura</h6>
                        {% if equipo.factura %}
                            <a href="{{ equipo.factura.url }}" target="_blank" class="btn btn-lg btn-outline-primary mt-2">
                                <i class="fas fa-file-download me-2"></i> Ver Factura
                            </a>
                        {% else %}
                            <p class="text-muted mt-2">No se ha subido un archivo.</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Historial de Asignaciones -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Historial de Asignaciones</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>Usuario Asignado</th>
                            <th>Fecha de Asignación</th>
                            <th>Fecha de Devolución</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for asignacion in historial_asignaciones %}
                            <tr>
                                <td>
                                    <a href="{% url 'gestion_usuarios:detalle_usuario' asignacion.usuario.pk %}">{{ asignacion.usuario.nombre }} {{ asignacion.usuario.apellido }}</a>
                                </td>
                                <td>{{ asignacion.fecha_asignacion|date:"d/m/Y" }}</td>
                                <td>{{ asignacion.fecha_devolucion|date:"d/m/Y"|default:"-" }}</td>
                                <td>
                                    {% if asignacion.activa %}
                                        <span class="badge text-bg-success">Asignado</span>
                                    {% else %}
                                        <span class="badge text-bg-secondary">Histórico</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">Este equipo no tiene historial de asignaciones.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}
