<?php 
    include 'config.php';     
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Konfirmasi Pesanan - My Menu</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 1rem;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 1.5rem;
            padding: 0.5rem 0;
        }

        .header h2 {
            font-size: clamp(1.3rem, 4vw, 2rem);
            margin-bottom: 0.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1rem;
            opacity: 0.9;
        }

        /* Order Summary Card */
        .order-summary {
            background: white;
            border-radius: 20px;
            margin-bottom: 1.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .summary-header {
            background: linear-gradient(135deg, #04AA6D, #45a049);
            color: white;
            padding: 1.5rem;
            text-align: center;
        }

        .summary-header h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .order-number {
            font-size: 2rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .summary-body {
            padding: 1.5rem;
        }

        .customer-info {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .info-grid {
            display: grid;
            gap: 0.8rem;
            font-size: 0.95rem;
        }

        .info-item {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .info-label {
            font-weight: 600;
            color: #333;
            min-width: 80px;
        }

        .info-value {
            color: #666;
            flex: 1;
        }

        /* Order Items Table */
        .order-items {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .section-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1rem;
        }

        .items-table th {
            background: #f8f9fa;
            padding: 1rem 0.8rem;
            text-align: left;
            font-weight: 600;
            color: #333;
            border-bottom: 2px solid #eee;
            font-size: 0.9rem;
        }

        .items-table td {
            padding: 1rem 0.8rem;
            border-bottom: 1px solid #eee;
            vertical-align: middle;
            font-size: 0.9rem;
        }

        .items-table tr:last-child td {
            border-bottom: none;
        }

        .product-name {
            font-weight: 500;
            color: #333;
        }

        .price {
            font-weight: 600;
            color: #04AA6D;
        }

        .quantity {
            text-align: center;
            font-weight: 600;
        }

        .subtotal {
            font-weight: 600;
            color: #333;
        }

        /* Summary Calculations */
        .calculation-row {
            background: #f8f9fa;
            font-weight: 600;
        }

        .total-row {
            background: linear-gradient(135deg, #04AA6D, #45a049);
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .total-row td {
            padding: 1.2rem 0.8rem;
        }

        /* Action Buttons */
        .action-section {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            text-align: center;
        }

        .button-group {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #04AA6D, #45a049);
            color: white;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            flex: 1;
            box-shadow: 0 8px 20px rgba(4, 170, 109, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(4, 170, 109, 0.4);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            flex: 1;
        }

        .btn-secondary:hover {
            background: #5a6268;
            transform: translateY(-2px);
        }

        /* Back button */
        .back-btn {
            position: fixed;
            top: 1rem;
            left: 1rem;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: none;
            color: white;
            padding: 0.8rem;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        /* Alerts */
        .alert {
            padding: 1rem;
            border-radius: 10px;
            margin-bottom: 1rem;
            position: relative;
            font-weight: 500;
        }

        .alert.success {
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            color: white;
        }

        .alert.warning {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            color: white;
        }

        .alert.danger {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
        }

        .closebtn {
            position: absolute;
            top: 50%;
            right: 1rem;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            font-weight: bold;
        }

        /* Mobile optimizations */
        @media (max-width: 768px) {
            body {
                padding: 0.5rem;
            }

            .order-summary,
            .order-items,
            .action-section {
                margin-bottom: 1rem;
                padding: 1rem;
            }

            .summary-header {
                padding: 1rem;
            }

            .summary-body {
                padding: 1rem;
            }

            .items-table th,
            .items-table td {
                padding: 0.8rem 0.5rem;
                font-size: 0.8rem;
            }

            .button-group {
                flex-direction: column;
                gap: 0.8rem;
            }

            .btn-primary,
            .btn-secondary {
                padding: 1rem 1.5rem;
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .items-table th,
            .items-table td {
                padding: 0.6rem 0.3rem;
                font-size: 0.75rem;
            }

            .order-number {
                font-size: 1.5rem;
            }

            .info-label {
                min-width: 60px;
                font-size: 0.85rem;
            }

            .info-value {
                font-size: 0.85rem;
            }
        }

        /* Confirmation message */
        .confirmation-text {
            background: #e8f5e8;
            border: 2px solid #04AA6D;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
            text-align: center;
            color: #2d5a2d;
        }

        .confirmation-text .icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            display: block;
        }

        /* Loading state */
        .btn-loading {
            background: #ccc !important;
            cursor: not-allowed !important;
            transform: none !important;
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #04AA6D;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 0.5rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Debug info */
        .debug-info {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 8px;
            font-size: 0.9rem;
            color: #856404;
        }
    </style>
</head>
<body>
    <button class="back-btn" onclick="history.back()" title="Kembali">
        ←
    </button>

    <div class="header">
        <h2>Konfirmasi Pesanan</h2>
        <p>Periksa kembali detail pesanan Anda sebelum melanjutkan</p>
    </div>

    <?php
    // Handle alerts
    if(isset($_GET["delete"])){
        $id_delete = $_GET["delete"];
        $counter = $_GET["counter"];
        $query_sql = "DELETE FROM produk_temp WHERE temp_id = '$id_delete'";

        if (mysqli_query($conn, $query_sql)) { ?>
            <div class="alert warning">
                <button class="closebtn" onclick="this.parentElement.style.display='none'">&times;</button>
                <strong>Berhasil!</strong> Produk berhasil dihapus dari pesanan
            </div>
        <?php } else { ?>
            <div class="alert danger">
                <button class="closebtn" onclick="this.parentElement.style.display='none'">&times;</button>
                <strong>Gagal!</strong> Terjadi kesalahan saat menghapus produk
            </div> 
        <?php }
    }

    // Get order data
    if(isset($_GET["tujuan"])){
        $counter = $_GET["counter"];
        $tanggal = $_GET["tanggal"];
        $nama = $_GET["nama"];
        $alamat = $_GET["alamat"];
        $nowa = $_GET["nowa"];
        $note = $_GET["note"];
        $diskpersen = $_GET["diskpersen"];
        $diskrp = $_GET["diskrp"];
        
        // PERBAIKAN: Debug tanggal untuk melihat nilai asli
        // Uncomment untuk debugging
        // echo '<div class="debug-info"><strong>Debug Tanggal:</strong><br>';
        // echo 'Tanggal asli dari GET: ' . $tanggal . '<br>';
        // echo 'Timestamp: ' . strtotime($tanggal) . '<br>';
        // echo 'Date parsed: ' . date('Y-m-d H:i:s', strtotime($tanggal)) . '</div>';
        
        // PERBAIKAN: Validasi dan format tanggal
        if (empty($tanggal) || strtotime($tanggal) === false) {
            // Jika tanggal kosong atau tidak valid, gunakan tanggal sekarang
            $tanggal = date('Y-m-d H:i:s');
        }
        
        // Pastikan tanggal dalam format yang benar
        $formatted_date = date('Y-m-d H:i:s', strtotime($tanggal));
        $display_date = date('d/m/Y H:i', strtotime($tanggal));
    }
    ?>

    <!-- Order Summary -->
    <div class="order-summary">
        <div class="summary-header">
            <h3>Ringkasan Pesanan</h3>
            <div class="order-number">No. <?php echo $counter; ?></div>
        </div>
        <div class="summary-body">
            <div class="customer-info">
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">📅 Tanggal:</span>
                        <span class="info-value"><?php echo $display_date; ?></span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">👤 Nama:</span>
                        <span class="info-value"><?php echo $nama; ?></span>
                    </div>
                    <?php if(!empty($alamat)) { ?>
                    <div class="info-item">
                        <span class="info-label">📍 Alamat:</span>
                        <span class="info-value"><?php echo $alamat; ?></span>
                    </div>
                    <?php } ?>
                    <?php if(!empty($nowa)) { ?>
                    <div class="info-item">
                        <span class="info-label">📱 WhatsApp:</span>
                        <span class="info-value"><?php echo $nowa; ?></span>
                    </div>
                    <?php } ?>
                    <?php if(!empty($note)) { ?>
                    <div class="info-item">
                        <span class="info-label">📝 Catatan:</span>
                        <span class="info-value"><?php echo $note; ?></span>
                    </div>
                    <?php } ?>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Items -->
    <div class="order-items">
        <h3 class="section-title">🛍️ Detail Pesanan</h3>
        
        <form action="simpan.php" method="GET">
            <table class="items-table">
                <thead>
                    <tr>
                        <th>Menu</th>
                        <th>Qty</th>
                        <th>Harga</th>
                        <th>Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $subtotal = 0;
                    $total = 0;
                    $total_produk = 0;
                    $tampilMas = "SELECT * FROM produk_temp
                                LEFT JOIN produk ON produk_id = temp_produk
                                WHERE temp_master = '$counter'";
                    $result_tampilMas = mysqli_query($conn, $tampilMas);
                    
                    while($mas = mysqli_fetch_array($result_tampilMas)) {
                        $var_jumlah = $mas['temp_id'];
                        $jumlah_produk = $_GET["$var_jumlah"];
                        $harga_produk = $mas['produk_harga'];
                        $subtotal_item = $harga_produk * $jumlah_produk;
                        
                        $total += $subtotal_item;
                        $total_produk += $jumlah_produk;

                        // Update temp table
                        $query_sql = "UPDATE produk_temp SET 
                                temp_jumlah = $jumlah_produk,
                                temp_harga = $harga_produk
                        WHERE temp_id='$var_jumlah'";
                        mysqli_query($conn, $query_sql);
                    ?>    
                    <tr>
                        <td class="product-name"><?php echo $mas['produk_nama']; ?></td>
                        <td class="quantity"><?php echo $jumlah_produk; ?></td>
                        <td class="price">Rp <?php echo number_format($harga_produk); ?></td>
                        <td class="subtotal">Rp <?php echo number_format($subtotal_item); ?></td>
                    </tr>
                    <?php } ?>
                    
                    <!-- Calculation rows -->
                    <tr class="calculation-row">
                        <td colspan="3"><strong>SUBTOTAL</strong></td>
                        <td class="subtotal"><strong>Rp <?php echo number_format($total); ?></strong></td>
                    </tr>
                    
                    <?php if($diskpersen > 0) { ?>
                    <tr>
                        <td colspan="3">Diskon (<?php echo $diskpersen; ?>%)</td>
                        <td class="price">- Rp <?php echo number_format($diskpersen/100*$total); ?></td>
                    </tr>
                    <?php } ?>
                    
                    <?php if($diskrp > 0) { ?>
                    <tr>
                        <td colspan="3">Diskon (Rp)</td>
                        <td class="price">- Rp <?php echo number_format($diskrp); ?></td>
                    </tr>
                    <?php } ?>
                    
                    <tr class="total-row">
                        <td colspan="3"><strong>GRAND TOTAL</strong></td>
                        <td><strong>Rp <?php echo number_format($total-($diskpersen/100*$total)-$diskrp); ?></strong></td>
                    </tr>
                </tbody>
            </table>

            <!-- Hidden form fields -->
            <input name="counter" type="hidden" value="<?php echo $counter; ?>">
            <input name="tanggal" type="hidden" value="<?php echo $formatted_date; ?>">
            <input name="nama" type="hidden" value="<?php echo $nama; ?>">
            <input name="alamat" type="hidden" value="<?php echo $alamat; ?>">
            <input name="note" type="hidden" value="<?php echo $note; ?>">
            <input name="nowa" type="hidden" value="<?php echo $nowa; ?>">
            <input name="jumlah" type="hidden" value="<?php echo $total_produk; ?>">
            <input name="total" type="hidden" value="<?php echo $total; ?>">
            <input name="diskpersen" type="hidden" value="<?php echo $diskpersen; ?>">
            <input name="diskrp" type="hidden" value="<?php echo $diskrp; ?>">
            <input name="tujuan" type="hidden" value="USER_ADD">
            
            <!-- Action Section -->
            <div class="action-section">
                <div class="confirmation-text">
                    <span class="icon">✅</span>
                    <strong>Pastikan semua data sudah benar sebelum melanjutkan</strong>
                    <p style="margin-top: 0.5rem; font-size: 0.9rem;">Setelah dikonfirmasi, pesanan akan diproses dan tidak dapat diubah</p>
                </div>
                
                <div class="button-group">
                    <button type="button" class="btn-secondary" onclick="history.back()">
                        ← Kembali & Edit
                    </button>
                    <button type="submit" class="btn-primary" onclick="showLoading(this)">
                        💾 Konfirmasi & Simpan
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script>
        function showLoading(button) {
            // Disable temporarily untuk debugging
            return true;
        }

        // Auto-hide alerts
        setTimeout(() => {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                alert.style.opacity = '0';
                setTimeout(() => alert.style.display = 'none', 300);
            });
        }, 5000);

        // Add confirmation before submit
        document.querySelector('form').addEventListener('submit', function(e) {
            if (!confirm('Apakah Anda yakin ingin menyimpan pesanan ini?')) {
                e.preventDefault();
                
                // Reset button if cancelled
                const submitBtn = document.querySelector('.btn-primary');
                submitBtn.innerHTML = '💾 Konfirmasi & Simpan';
                submitBtn.classList.remove('btn-loading');
                submitBtn.disabled = false;
                
                const backBtn = document.querySelector('.btn-secondary');
                if (backBtn) {
                    backBtn.disabled = false;
                    backBtn.style.opacity = '1';
                }
            }
        });
    </script>
</body>
</html>