<?php
session_start();
require_once 'includes/db.php';

$db = new Database();
$configQuery = $db->query("SELECT * FROM configuracion")->fetch(PDO::FETCH_ASSOC);

// Obtener ID del pedido
$pedido_id = $_GET['id'] ?? null;

if (!$pedido_id) {
    header('Location: index.php');
    exit();
}

// Buscar el pedido
$stmt = $db->prepare("SELECT * FROM pedidos_pagopar WHERE id = ?");
$stmt->execute([$pedido_id]);
$pedido = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$pedido) {
    header('Location: index.php');
    exit();
}

// Decodificar datos JSON
$datos_comprador = json_decode($pedido['datos_comprador'], true);
$datos_productos = json_decode($pedido['datos_productos'], true);

?>
<!DOCTYPE html>
<html lang="es">
<head>
    <?php
    // Modo oscuro
    require_once 'includes/dark_mode.php';
    ?>
    <meta name="color-scheme" content="light dark">
    <?php echo getDarkModeStyles(); ?>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detalles del Pedido - <?= htmlspecialchars($configQuery['sitio_web'] ?? 'JK Electronic') ?></title>
    <link rel="icon" type="image/x-icon" href="uploads/config/<?php echo $configQuery['favicon']; ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f8f9fa;
            color: #212529;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 300;
        }
        .status-badge {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            margin-top: 10px;
        }
        .status-pagado {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status-pendiente {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        .status-cancelado {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .content {
            padding: 30px;
        }
        .section {
            margin-bottom: 30px;
        }
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #495057;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e9ecef;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #e9ecef;
        }
        .detail-item:last-child {
            border-bottom: none;
        }
        .detail-label {
            font-weight: 500;
            color: #6c757d;
        }
        .detail-value {
            color: #212529;
            font-weight: 400;
        }
        .productos-list {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
        }
        .producto-item {
            background: white;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 4px solid #007bff;
        }
        .producto-item:last-child {
            margin-bottom: 0;
        }
        .producto-nombre {
            font-weight: 600;
            color: #212529;
            margin-bottom: 8px;
        }
        .producto-details {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #6c757d;
        }
        .monto-total {
            background: #e8f5e8;
            border: 2px solid #28a745;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin: 20px 0;
        }
        .monto-total .amount {
            font-size: 32px;
            font-weight: bold;
            color: #28a745;
        }
        .btn-container {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }
        .btn {
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 5px;
        }
        .btn-primary {
            background: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background: #0056b3;
            color: white;
        }
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        .btn-secondary:hover {
            background: #545b62;
            color: white;
        }
        
        /* Dark mode styles */
        [data-theme="dark"] body {
            background: #1a1a1a;
            color: #e9ecef;
        }
        [data-theme="dark"] .container {
            background: #2d3748;
        }
        [data-theme="dark"] .detail-item {
            border-bottom-color: #4a5568;
        }
        [data-theme="dark"] .section-title {
            border-bottom-color: #4a5568;
            color: #e9ecef;
        }
        [data-theme="dark"] .productos-list {
            background: #2d3748;
        }
        [data-theme="dark"] .producto-item {
            background: #4a5568;
            color: #e9ecef;
        }
        [data-theme="dark"] .detail-value {
            color: #e9ecef;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-receipt"></i> Detalles del Pedido</h1>
            <div class="status-badge status-<?= strtolower($pedido['estado']) ?>">
                <?= ucfirst($pedido['estado']) ?>
            </div>
        </div>
        
        <div class="content">
            <!-- Información del Pedido -->
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-info-circle"></i>
                    Información del Pedido
                </h2>
                <div class="detail-grid">
                    <div>
                        <div class="detail-item">
                            <span class="detail-label">ID Pedido:</span>
                            <span class="detail-value"><?= htmlspecialchars($pedido['id_pedido_comercio']) ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Estado:</span>
                            <span class="detail-value"><?= ucfirst($pedido['estado']) ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Fecha de Creación:</span>
                            <span class="detail-value"><?= date('d/m/Y H:i', strtotime($pedido['fecha_creacion'])) ?></span>
                        </div>
                        <?php if ($pedido['fecha_pago']): ?>
                        <div class="detail-item">
                            <span class="detail-label">Fecha de Pago:</span>
                            <span class="detail-value"><?= date('d/m/Y H:i', strtotime($pedido['fecha_pago'])) ?></span>
                        </div>
                        <?php endif; ?>
                    </div>
                    <div>
                        <div class="detail-item">
                            <span class="detail-label">Hash Pagopar:</span>
                            <span class="detail-value"><?= htmlspecialchars(substr($pedido['hash_pagopar'], 0, 20)) ?>...</span>
                        </div>
                        <?php if ($pedido['pedido_pagopar_id']): ?>
                        <div class="detail-item">
                            <span class="detail-label">ID Pagopar:</span>
                            <span class="detail-value"><?= htmlspecialchars($pedido['pedido_pagopar_id']) ?></span>
                        </div>
                        <?php endif; ?>
                        <?php if ($pedido['fecha_maxima_pago']): ?>
                        <div class="detail-item">
                            <span class="detail-label">Fecha Máxima Pago:</span>
                            <span class="detail-value"><?= date('d/m/Y H:i', strtotime($pedido['fecha_maxima_pago'])) ?></span>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

            <!-- Información del Cliente -->
            <?php if ($datos_comprador): ?>
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-user"></i>
                    Datos del Cliente
                </h2>
                <div class="detail-grid">
                    <div>
                        <div class="detail-item">
                            <span class="detail-label">Nombre:</span>
                            <span class="detail-value"><?= htmlspecialchars($datos_comprador['nombre'] ?? 'No especificado') ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Email:</span>
                            <span class="detail-value"><?= htmlspecialchars($datos_comprador['email'] ?? 'No especificado') ?></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">Teléfono:</span>
                            <span class="detail-value"><?= htmlspecialchars($datos_comprador['telefono'] ?? 'No especificado') ?></span>
                        </div>
                    </div>
                    <div>
                        <div class="detail-item">
                            <span class="detail-label">Documento:</span>
                            <span class="detail-value"><?= htmlspecialchars($datos_comprador['documento'] ?? 'No especificado') ?></span>
                        </div>
                        <?php if (!empty($datos_comprador['ruc'])): ?>
                        <div class="detail-item">
                            <span class="detail-label">RUC:</span>
                            <span class="detail-value"><?= htmlspecialchars($datos_comprador['ruc']) ?></span>
                        </div>
                        <?php endif; ?>
                        <?php if (!empty($datos_comprador['direccion'])): ?>
                        <div class="detail-item">
                            <span class="detail-label">Dirección:</span>
                            <span class="detail-value"><?= htmlspecialchars($datos_comprador['direccion']) ?></span>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- Productos -->
            <?php if ($datos_productos): ?>
            <div class="section">
                <h2 class="section-title">
                    <i class="fas fa-shopping-bag"></i>
                    Productos
                </h2>
                <div class="productos-list">
                    <?php foreach ($datos_productos as $producto): ?>
                    <div class="producto-item">
                        <div class="producto-nombre">
                            <?= htmlspecialchars($producto['nombre'] ?? 'Producto') ?>
                        </div>
                        <div class="producto-details">
                            <span>Cantidad: <?= intval($producto['cantidad'] ?? 1) ?></span>
                            <span>Precio: Gs. <?= number_format($producto['precio_total'] ?? 0, 0, ',', '.') ?></span>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>

            <!-- Monto Total -->
            <div class="monto-total">
                <div style="font-size: 18px; margin-bottom: 10px;">Total Pagado</div>
                <div class="amount">Gs. <?= number_format($pedido['monto_pagado'] ?? $pedido['monto_total'], 0, ',', '.') ?></div>
            </div>

            <!-- Botones -->
            <div class="btn-container">
                <a href="index.php" class="btn btn-primary">
                    <i class="fas fa-home"></i>
                    Volver al inicio
                </a>
                
                <?php if ($pedido['estado'] === 'pagado'): ?>
                <a href="javascript:window.print()" class="btn btn-secondary">
                    <i class="fas fa-print"></i>
                    Imprimir
                </a>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <script>
        // Funcionalidad de impresión
        function imprimirPedido() {
            window.print();
        }
    </script>
</body>
</html>