{% extends "base.html" %}

{% block title %}Detalles del Pedido #{{ payment.PagoID }} - TallArt{% endblock %}

{% block content %}
<style>
    .order-details-container {
        min-height: 70vh;
        padding: 2rem 0;
        background: #F9FAFB;
    }
    
    .receipt-wrapper {
        max-width: 850px;
        margin: 0 auto;
        background: white;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .receipt-header {
        background: #1F2937;
        color: white;
        padding: 2rem 2.5rem;
        border-bottom: 3px solid #8B5CF6;
        position: relative;
    }
    
    .receipt-header::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
    }
    
    .receipt-title {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: 2px;
        margin: 0 0 1.25rem 0;
        text-transform: uppercase;
        text-align: center;
    }
    
    .receipt-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 2px dashed rgba(255, 255, 255, 0.25);
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .meta-item {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
    }
    
    .meta-label {
        font-weight: 600;
        opacity: 0.75;
        font-size: 0.85rem;
    }
    
    .meta-value {
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.5px;
    }
    
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: white;
        text-decoration: none;
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        transition: all 0.3s ease;
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }
    
    .back-link:hover {
        background: rgba(255, 255, 255, 0.25);
        color: white;
    }
    
    .receipt-body {
        padding: 2rem 2.5rem;
    }
    
    .status-section {
        background: #F9FAFB;
        border: 2px solid #E5E7EB;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 6px;
    }
    
    .status-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }
    
    .status-row:last-child {
        margin-bottom: 0;
    }
    
    .status-badge {
        display: inline-block;
        padding: 0.4rem 1.25rem;
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: 2px solid;
    }
    
    .status-badge.completado {
        background: #D1FAE5;
        color: #065F46;
        border-color: #059669;
    }
    
    .status-badge.pendiente {
        background: #FEF3C7;
        color: #92400E;
        border-color: #D97706;
    }
    
    .status-badge.procesando {
        background: #DBEAFE;
        color: #1E40AF;
        border-color: #3B82F6;
    }
    
    .status-badge.cancelado {
        background: #FEE2E2;
        color: #991B1B;
        border-color: #DC2626;
    }
    
    .section-title {
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 2rem 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #1F2937;
        color: #1F2937;
    }
    
    .section-title:first-child {
        margin-top: 0;
    }
    
    .products-table {
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .table-header {
        display: grid;
        grid-template-columns: 70px 1fr auto;
        gap: 1.25rem;
        padding: 0.75rem 0;
        border-bottom: 2px solid #1F2937;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #1F2937;
    }
    
    .product-row {
        display: grid;
        grid-template-columns: 70px 1fr auto;
        gap: 1.25rem;
        padding: 1.25rem 0;
        border-bottom: 1px dashed #D1D5DB;
        align-items: center;
    }
    
    .product-row:last-child {
        border-bottom: none;
    }
    
    .product-image {
        width: 60px;
        height: 60px;
        border-radius: 6px;
        object-fit: cover;
        border: 2px solid #E5E7EB;
    }
    
    .product-details {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .product-name {
        font-weight: 600;
        color: #1F2937;
        font-size: 0.95rem;
    }
    
    .product-meta {
        color: #6B7280;
        font-size: 0.85rem;
    }
    
    .product-quantity {
        font-weight: 600;
        color: #1F2937;
    }
    
    .product-price {
        font-weight: 700;
        color: #1F2937;
        font-size: 1rem;
        text-align: right;
        font-family: 'Courier New', monospace;
    }
    
    .summary-section {
        background: #F9FAFB;
        border: 2px solid #E5E7EB;
        padding: 1.5rem;
        margin-top: 1.5rem;
        border-radius: 6px;
    }
    
    .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.65rem 0;
        border-bottom: 1px dashed #D1D5DB;
    }
    
    .summary-row:last-child {
        border-bottom: none;
    }
    
    .summary-label {
        font-weight: 600;
        color: #4B5563;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
    }
    
    .summary-value {
        font-weight: 700;
        color: #1F2937;
        font-size: 0.95rem;
        font-family: 'Courier New', monospace;
    }
    
    .total-row {
        background: #1F2937;
        color: white;
        padding: 1.25rem 1.5rem;
        margin: 1.25rem -1.5rem -1.5rem -1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 3px solid #8B5CF6;
    }
    
    .total-label {
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .total-value {
        font-size: 1.75rem;
        font-weight: 800;
        font-family: 'Courier New', monospace;
    }
    
    .info-grid {
        display: grid;
        grid-1.5rem;
        margin-top: 1.5rem;
    }
    
    @media (max-width: 768px) {
        .info-grid {
            grid-template-columns: 1fr;
        }
        .receipt-body {
            padding: 1.5rem;
        }
        .receipt-header {
            padding: 1.5rem;
        }
    }
    
    .info-box {
        background: #F9FAFB;
        border: 2px solid #E5E7EB;
        padding: 1.25rem;
        border-radius: 6px;
    }
    
    .info-box-title {
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #1F2937;
        margin-bottom: 0.875rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #D1D5DB;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        font-size: 0.87m 0;
        font-size: 0.95rem;
    }
    
    .info-label {
        color: #6B7280;
        font-weight: 600;
    }
    
    .info-value {
        color: #1F2937;
        font-weight: 600;
        text-align: right;
        max-width: 60%;
        word-break: break-word;
    }
    
    .timeline {
        margin-top: 1rem;
        position: relative;
        padding-left: 2rem;
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        left: 0.5rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #E5E7EB;
    }
    
    .timeline-item {
        position: relative;
        padding-bottom: 1.5rem;
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -1.5rem;
        top: 0.25rem;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #8B5CF6;
        border: 3px solid white;
        box-shadow: 0 0 0 2px #8B5CF6;
        z-index: 1;
    }
    
    .timeline-item.inactive::before {
        background: white;
        border-color: #D1D5DB;
        box-shadow: 0 0 0 2px #D1D5DB;
    }
    
    .timeline-date {
        font-size: 0.8rem;
        color: #6B7280;
        font-weight: 600;
        margin-bottom: 0.25rem;
        font-family: 'Courier New', monospace;
    }
    
    .timeline-title {
        font-weight: 700;
        color: #1F2937;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
        margin-bottom: 0.25rem;
    }
    
    .timeline-desc {
        font-size: 0.85rem;
        color: #6B7280;
    }
    
    .action-buttons {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 2px solid #E5E7EB;
    }
    
    .btn-action {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 1.25rem;
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        border: 2px solid;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.85rem;
    }
    
    .btn-primary {
        background: #1F2937;
        color: white;
        border-color: #1F2937;
    }
    
    .btn-primary:hover {
        background: #8B5CF6;
        border-color: #8B5CF6;
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(139, 92, 246, 0.25);
        color: white;
    }
    
    .btn-secondary {
        background: white;
        color: #1F2937;
        border-color: #D1D5DB;
    }
    
    .btn-secondary:hover {
        border-color: #8B5CF6;
        color: #8B5CF6;
        transform: translateY(-1px);
    }
    
    @media print {
        .back-link,
        .action-buttons {
            display: none;
        }
        .receipt-wrapper {
            box-shadow: none;
        }
        .order-details-container {
            background: white;
        }
    }
</style>

<div class="order-details-container">
    <div class="receipt-wrapper">
        <!-- Header tipo Ticket -->
        <div class="receipt-header">
            <a href="{{ url_for('payments.history') }}" class="back-link">
                ← Volver a Mis Pedidos
            </a>
            <div class="receipt-title">PEDIDO</div>
            <div class="receipt-meta">
                <div class="meta-item">
                    <span class="meta-label">Pedido No.</span>
                    <span class="meta-value">{{ payment.PagoID }}</span>
                </div>
                <div class="meta-item">
                    <span class="meta-label">Fecha</span>
                    <span class="meta-value">{{ payment.FechaCreacion.strftime('%d/%m/%Y %H:%M') if payment.FechaCreacion else 'N/A' }}</span>
                </div>
            </div>
        </div>

        <!-- Body del Recibo -->
        <div class="receipt-body">
            <!-- Estado -->
            <div class="status-section">
                <div class="status-row">
                    <span class="info-label">Estado del Pedido:</span>
                    <span class="status-badge {{ payment.Estado|lower }}">{{ payment.Estado }}</span>
                </div>
                <div class="status-row">
                    <span class="info-label">Método de Pago:</span>
                    <span class="info-value">
                        {% if payment.MetodoPago == 'card' %}
                            💳 TARJETA
                        {% elif payment.MetodoPago == 'yape' %}
                            📱 YAPE/PLIN
                        {% elif payment.MetodoPago == 'transfer' %}
                            🏦 TRANSFERENCIA
                        {% else %}
                            {{ payment.MetodoPago|upper }}
                        {% endif %}
                    </span>
                </div>
            </div>

            <!-- Tabla de Productos -->
            <div class="section-title">Productos</div>
            <div class="products-table">
                <div class="table-header">
                    <div>QTY</div>
                    <div>ITEM</div>
                    <div>TOTAL</div>
                </div>
                {% for item in details %}
                <div class="product-row">
                    <div style="text-align: center;">
                        {% if item.ImagenPrincipal %}
                        <img src="/static/{{ item.ImagenPrincipal }}" 
                             alt="{{ item.ProductoNombre }}" 
                             class="product-image"
                             onerror="this.onerror=null; this.src='{{ url_for('static', filename='graficos/Logo.png') }}'">
                        {% else %}
                        <img src="{{ url_for('static', filename='graficos/Logo.png') }}" 
                             alt="{{ item.ProductoNombre }}" 
                             class="product-image">
                        {% endif %}
                    </div>
                    <div class="product-details">
                        <div class="product-name">{{ item.ProductoNombre }}</div>
                        {% if item.EmpresaNombre %}
                        <div class="product-meta">Artesano: {{ item.EmpresaNombre }}</div>
                        {% endif %}
                        <div class="product-meta product-quantity">{{ item.Cantidad }} × ${{ "%.2f"|format(item.PrecioUnitario) }}</div>
                    </div>
                    <div class="product-price">${{ "%.2f"|format(item.Subtotal) }}</div>
                </div>
                {% endfor %}
            </div>

            <!-- Resumen de Pago -->
            <div class="summary-section">
                <div class="summary-row">
                    <span class="summary-label">Subtotal</span>
                    <span class="summary-value">${{ "%.2f"|format(details|sum(attribute='Subtotal') if details else 0) }}</span>
                </div>
                {% if pedido and pedido.Impuestos > 0 %}
                <div class="summary-row">
                    <span class="summary-label">IVA (16%)</span>
                    <span class="summary-value">${{ "%.2f"|format(pedido.Impuestos) }}</span>
                </div>
                {% endif %}
                {% if pedido and pedido.Envio > 0 %}
                <div class="summary-row">
                    <span class="summary-label">Envío</span>
                    <span class="summary-value">${{ "%.2f"|format(pedido.Envio) }}</span>
                </div>
                {% endif %}
                {% if pedido and pedido.Descuento > 0 %}
                <div class="summary-row">
                    <span class="summary-label">Descuento</span>
                    <span class="summary-value">-${{ "%.2f"|format(pedido.Descuento) }}</span>
                </div>
                {% endif %}
                <div class="total-row">
                    <span class="total-label">Total</span>
                    <span class="total-value">${{ "%.2f"|format(payment.Monto) }}</span>
                </div>
            </div>

            <!-- Grid de Información -->
            <div class="info-grid">
                <!-- Cliente -->
                <div class="info-box">
                    <div class="info-box-title">Cliente</div>
                    <div class="info-item">
                        <span class="info-label">Nombre:</span>
                        <span class="info-value">{{ payment.NombreCompleto }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Email:</span>
                        <span class="info-value">{{ payment.Email }}</span>
                    </div>
                    {% if payment.Telefono %}
                    <div class="info-item">
                        <span class="info-label">Teléfono:</span>
                        <span class="info-value">{{ payment.Telefono }}</span>
                    </div>
                    {% endif %}
                </div>

                <!-- Envío -->
                {% if pedido %}
                <div class="info-box">
                    <div class="info-box-title">Información de Envío</div>
                    {% if pedido.DireccionEnvio %}
                    <div class="info-item">
                        <span class="info-label">Dirección:</span>
                        <span class="info-value">{{ pedido.DireccionEnvio }}</span>
                    </div>
                    {% endif %}
                    {% if pedido.CiudadEnvio %}
                    <div class="info-item">
                        <span class="info-label">Ciudad:</span>
                        <span class="info-value">{{ pedido.CiudadEnvio }}</span>
                    </div>
                    {% endif %}
                    {% if pedido.CodigoPostalEnvio %}
                    <div class="info-item">
                        <span class="info-label">CP:</span>
                        <span class="info-value">{{ pedido.CodigoPostalEnvio }}</span>
                    </div>
                    {% endif %}
                    {% if pedido.TelefonoContacto %}
                    <div class="info-item">
                        <span class="info-label">Contacto:</span>
                        <span class="info-value">{{ pedido.TelefonoContacto }}</span>
                    </div>
                    {% endif %}
                    {% if pedido.Notas %}
                    <div class="info-item" style="display: block;">
                        <span class="info-label">Notas:</span>
                        <span class="info-value" style="display: block; margin-top: 0.5rem; max-width: 100%;">{{ pedido.Notas }}</span>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>

            <!-- Timeline -->
            <div class="section-title">Historial del Pedido</div>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-date">{{ payment.FechaCreacion.strftime('%d/%m/%Y %H:%M') if payment.FechaCreacion else 'N/A' }}</div>
                    <div class="timeline-title">Pedido Creado</div>
                    <div class="timeline-desc">Tu pedido ha sido registrado exitosamente</div>
                </div>
                
                {% if payment.FechaProcesamiento %}
                <div class="timeline-item">
                    <div class="timeline-date">{{ payment.FechaProcesamiento.strftime('%d/%m/%Y %H:%M') }}</div>
                    <div class="timeline-title">Pago Procesado</div>
                    <div class="timeline-desc">Tu pago ha sido confirmado</div>
                </div>
                {% endif %}
                
                {% if payment.Estado == 'Completado' %}
                <div class="timeline-item">
                    <div class="timeline-title">Pedido Completado</div>
                    <div class="timeline-desc">Tu pedido ha sido completado exitosamente</div>
                </div>
                {% elif payment.Estado == 'Procesando' %}
                <div class="timeline-item">
                    <div class="timeline-title">En Proceso</div>
                    <div class="timeline-desc">Tu pedido está siendo preparado</div>
                </div>
                <div class="timeline-item inactive">
                    <div class="timeline-title">Pendiente de Entrega</div>
                    <div class="timeline-desc">Tu pedido será enviado pronto</div>
                </div>
                {% else %}
                <div class="timeline-item inactive">
                    <div class="timeline-title">Pendiente de Confirmación</div>
                    <div class="timeline-desc">Esperando confirmación del pago</div>
                </div>
                {% endif %}
            </div>

            <!-- Botones de Acción -->
            <div class="action-buttons">
                <button class="btn-action btn-primary" onclick="window.print()">
                    🖨️ Imprimir Recibo
                </button>
                <a href="{{ url_for('main.productos') }}" class="btn-action btn-secondary">
                    🛒 Seguir Comprando
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}