<?php
require_once 'includes/config.php';
require_once 'includes/db.php';
require_once 'includes/functions.php';

// Provera da li imamo informacije o porudžbini u sesiji
if (!isset($_SESSION['last_order_number'])) {
    header('Location: /');
    exit;
}

$order_number = $_SESSION['last_order_number'];
$order_total = isset($_SESSION['last_order_total']) ? $_SESSION['last_order_total'] : 0;

// Dohvati ime kupca
$customer_name = isset($_SESSION['last_order_name']) ? $_SESSION['last_order_name'] : '';
$vocative_name = to_vocative($customer_name);

// Podaci o poklon vaučeru
$gift_voucher_issued = isset($_SESSION['gift_voucher_issued']) ? $_SESSION['gift_voucher_issued'] : false;
$gift_voucher_code = isset($_SESSION['gift_voucher_code']) ? $_SESSION['gift_voucher_code'] : '';
$gift_voucher_amount = isset($_SESSION['gift_voucher_amount']) ? $_SESSION['gift_voucher_amount'] : 0;

// Očisti sesijske promenljive
unset($_SESSION['last_order_number']);
unset($_SESSION['last_order_total']);
unset($_SESSION['last_order_name']);
unset($_SESSION['gift_voucher_issued']);
unset($_SESSION['gift_voucher_code']);
unset($_SESSION['gift_voucher_amount']);
?>
<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hvala na porudžbini - <?php echo get_setting('site_name', 'Hugong Aparati'); ?></title>
    <meta name="description" content="Vaša porudžbina je uspešno primljena. Hvala na poverenju!">
    <meta name="robots" content="noindex, follow">
    
    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <!-- CSS -->
    <link rel="stylesheet" href="/assets/css/new/variables.css">
    <link rel="stylesheet" href="/assets/css/new/base.css">
    <link rel="stylesheet" href="/assets/css/new/layout.css">
    <link rel="stylesheet" href="/assets/css/new/components.css">
    <link rel="stylesheet" href="/assets/css/new/pages/category.css">
    <link rel="stylesheet" href="/assets/css/new/pages/checkout.css">
    <link rel="stylesheet" href="/assets/css/new/responsive.css">
    
    <style>
        .thank-you-content {
            padding: 60px 0;
        }
        .thank-you-box {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            padding: 40px;
            max-width: 800px;
            margin: 0 auto;
        }
        .thank-you-header {
            text-align: center;
            margin-bottom: 40px;
        }
        .success-icon {
            margin-bottom: 20px;
        }
        .success-icon svg {
            width: 80px;
            height: 80px;
            stroke: #4caf50;
        }
        .thank-you-header h1 {
            font-size: 32px;
            margin-bottom: 15px;
            color: #333;
        }
        .thank-you-header p {
            font-size: 18px;
            color: #666;
        }
        .order-details {
            background-color: #f8f9fa;
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 30px;
        }
        .order-info-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .order-info-item:last-child {
            border-bottom: none;
        }
        .order-info-item .label {
            font-weight: 600;
            color: #555;
        }
        .order-info-item .value {
            font-weight: 700;
            color: #333;
        }
        .next-steps {
            margin-bottom: 40px;
        }
        .next-steps h3 {
            font-size: 20px;
            margin-bottom: 20px;
        }
        .next-steps ol {
            padding-left: 0;
            list-style: none;
        }
        .next-steps li {
            display: flex;
            margin-bottom: 20px;
        }
        .step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .step-text strong {
            display: block;
            margin-bottom: 5px;
            font-size: 17px;
        }
        .step-text p {
            margin: 0;
            color: #666;
        }
        .thank-you-footer {
            text-align: center;
        }
        .primary-button {
            display: inline-block;
            background-color: #007bff;
            color: white;
            padding: 12px 30px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            margin-bottom: 20px;
            transition: background-color 0.3s;
        }
        .primary-button:hover {
            background-color: #0069d9;
        }
        .contact-info {
            font-size: 15px;
            color: #777;
        }
        .contact-info a {
            color: #007bff;
            text-decoration: none;
        }
        .contact-info a:hover {
            text-decoration: underline;
        }
        
        /* Stilovi za poklon vaučer */
        .gift-voucher-section {
            margin: 30px 0;
            background: linear-gradient(135deg, #fff8e1 0%, #fff4cc 100%);
            border: 2px dashed #ffd700;
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            position: relative;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
        }
        
        .voucher-badge {
            position: absolute;
            top: -15px;
            right: 20px;
            background-color: #f6cc00;
            color: #333;
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .voucher-title {
            color: #7f4e00;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .voucher-code {
            background-color: white;
            border: 1px solid #e0e0e0;
            padding: 12px 20px;
            border-radius: 5px;
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 2px;
            margin: 20px auto;
            display: inline-block;
            color: #333;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .voucher-value {
            font-size: 30px;
            font-weight: 700;
            color: #28a745;
            margin: 10px 0;
        }
        
        .voucher-description {
            font-size: 15px;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        
        .voucher-instructions {
            text-align: left;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #e0e0e0;
        }
        
        .voucher-instructions h4 {
            color: #333;
            font-size: 16px;
            margin-bottom: 10px;
        }
        
        .voucher-instructions ol {
            padding-left: 20px;
        }
        
        .voucher-instructions li {
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .thank-you-box {
                padding: 25px;
            }
            .thank-you-header h1 {
                font-size: 26px;
            }
            .next-steps li {
                align-items: flex-start;
            }
            .voucher-code {
                font-size: 18px;
                padding: 10px 15px;
            }
            .voucher-value {
                font-size: 24px;
            }
        }
    </style>
</head>
<body id="no-padding-top">
    <!-- Header -->
    <header class="checkout-header">
        <div class="container">
            <a href="/" class="logo"><?php echo get_setting('site_name', 'HUGONG APARATI'); ?></a>
            
            <div class="security-badge">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
                Uspešna porudžbina
            </div>
            
            <a href="/" class="continue-shopping-btn">
                ← Nazad na početnu
            </a>
        </div>
    </header>
    
    <!-- Thank You Content -->
    <div class="checkout-content thank-you-content">
        <div class="container">
            <div class="thank-you-box">
                <div class="thank-you-header">
                    <div class="success-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                            <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                    </div>
                    <?php if (!empty($vocative_name)): ?>
                    <h1><?php echo htmlspecialchars($vocative_name); ?>, hvala na porudžbini!</h1>
                    <?php else: ?>
                    <h1>Hvala na porudžbini!</h1>
                    <?php endif; ?>
                    <p>Vaša porudžbina je uspešno primljena. Uskoro ćemo vas kontaktirati.</p>
                </div>
                
                <div class="order-details">
                    <div class="order-info-item">
                        <span class="label">Broj porudžbine:</span>
                        <span class="value"><?php echo $order_number; ?></span>
                    </div>
                    <div class="order-info-item">
                        <span class="label">Ukupan iznos:</span>
                        <span class="value"><?php echo format_price($order_total); ?></span>
                    </div>
                </div>
                
                <?php if ($gift_voucher_issued && !empty($gift_voucher_code)): ?>
                <!-- Poklon vaučer sekcija -->
                <div class="gift-voucher-section">
                    <div class="voucher-badge">BONUS</div>
                    <h3 class="voucher-title">Čestitamo! Dobili ste poklon vaučer!</h3>
                    <p class="voucher-description">Zbog brzog završetka porudžbine zaradili ste vaučer u vrednosti od:</p>
                    <div class="voucher-value"><?php echo number_format($gift_voucher_amount, 0, ',', '.'); ?> RSD</div>
                    <p>Kod vašeg vaučera je:</p>
                    <div class="voucher-code"><?php echo $gift_voucher_code; ?></div>
                    <p class="voucher-description">Ovaj vaučer možete iskoristiti za umanjenje iznosa pri sledećoj kupovini.</p>
                    
                    <div class="voucher-instructions">
                        <h4>Kako iskoristiti vaučer:</h4>
                        <ol>
                            <li>Izaberite proizvode i dodajte ih u korpu</li>
                            <li>Na stranici za plaćanje unesite vaučer kod u polje za promotivni kod</li>
                            <li>Kliknite na "Primeni" i iznos će biti automatski oduzet od ukupne sume</li>
                        </ol>
                        <p><strong>Napomena:</strong> Vaučer važi 30 dana od danas i može se iskoristiti za jednu kupovinu.</p>
                    </div>
                </div>
                <?php endif; ?>
                
                <div class="next-steps">
                    <h3>Šta je sledeće?</h3>
                    <ol>
                        <li>
                            <div class="step-number">1</div>
                            <div class="step-text">
                                <strong>Potvrda porudžbine</strong>
                                <p>Dobićete email ili SMS potvrdu sa detaljima Vaše porudžbine.</p>
                            </div>
                        </li>
                        <li>
                            <div class="step-number">2</div>
                            <div class="step-text">
                                <strong>Provera i priprema</strong>
                                <p>Naš tim pregleda i priprema vašu porudžbinu za isporuku.</p>
                            </div>
                        </li>
                        <li>
                            <div class="step-number">3</div>
                            <div class="step-text">
                                <strong>Isporuka</strong>
                                <p>Proizvod će biti isporučen na Vašu adresu u roku od 1-3 radna dana.</p>
                            </div>
                        </li>
                    </ol>
                </div>
                
                <div class="thank-you-footer">
                    <a href="/" class="primary-button">Nastavi kupovinu</a>
                    <p class="contact-info">Imate pitanja? Kontaktirajte nas na <a href="tel:+381658065065">065/8-065-065</a></p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Back to top button -->
    <button id="back-to-top" aria-label="Nazad na vrh">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
    </button>
    
    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Back to top functionality
            const backToTopButton = document.getElementById('back-to-top');
            
            if (backToTopButton) {
                window.addEventListener('scroll', function() {
                    if (window.pageYOffset > 300) {
                        backToTopButton.style.display = 'block';
                    } else {
                        backToTopButton.style.display = 'none';
                    }
                });
                
                backToTopButton.addEventListener('click', function() {
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                });
            }
            
            // Očisti localStorage podatke od tajmera za vaučer
            localStorage.removeItem('voucherTimerData');
            localStorage.removeItem('voucherWarningShown');
            localStorage.removeItem('voucherExpiredNotified');
        });
    </script>
</body>
</html>