<?php
session_start();
require "connection.php";

$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 1;
$loggedIn = isset($_SESSION['user_id']);

// Fetch Orders
$order_sql = "
    SELECT 
        `order`.*, 
        `address`.`address_line_1`, 
        `address`.`city`, 
        `address`.`postal_code`, 
        `address`.`country`
    FROM `order` 
    LEFT JOIN `address` ON `order`.`address_address_id` = `address`.`address_id`
    WHERE `order`.`user_id` = '$userId' 
    ORDER BY `order`.`order_id` DESC
";

$order_rs = Database::search($order_sql);
$order_count = $order_rs->num_rows;

// Data Prep
if ($order_count == 0 || true) {
    if ($order_count == 0 || true) {
         $orders = [
            [
                'order_id' => 10024,
                'date_time' => '2024-01-15 10:30:00',
                'qty' => 4,
                'amount' => 145.50,
                'status' => 'Shipped', 
                'tracking_no' => 'ZY-8842-US',
                'courier' => 'DHL Express',
                'address' => '123 Willow Lane, Beverly Hills, CA',
                'timeline' => [
                    ['status' => 'Placed', 'date' => 'Jan 15', 'completed' => true],
                    ['status' => 'Shipped', 'date' => 'Jan 17', 'completed' => true],
                    ['status' => 'In Transit', 'date' => 'Today', 'completed' => false],
                    ['status' => 'Delivered', 'date' => '-', 'completed' => false],
                ],
                'items' => [
                    ['img' => 'Addaheading_18.png', 'name' => 'BOPF Special Black Tea', 'qty' => 1, 'price' => 45.00],
                    ['img' => 'Addaheading_18.png', 'name' => 'Green Tea Extract', 'qty' => 1, 'price' => 30.50]
                ]
            ],
             [
                'order_id' => 10025,
                'date_time' => date('Y-m-d H:i:s'),
                'qty' => 2,
                'amount' => 85.00,
                'status' => 'Pending', 
                'tracking_no' => 'Pending',
                'courier' => '-',
                'address' => '45 Temple Rd, Colombo 03, LK',
                'timeline' => [
                    ['status' => 'Placed', 'date' => 'Just Now', 'completed' => true],
                    ['status' => 'Processing', 'date' => '-', 'completed' => false]
                ],
                'items' => [['img' => 'Addaheading_18.png', 'name' => 'Earl Grey Premium', 'qty' => 2, 'price' => 42.50]]
            ]
        ];
    }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- ═══ SEO META TAGS — Auto-generated by seo-optimize.js ═══ -->
    <title>Dropti Zeylona</title>
    <meta name="description" content="Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.">
    <meta name="keywords" content="Ceylon tea, organic tea, Sri Lanka tea">
    <meta name="author" content="Dropti Zeylona">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#1A3021">
    <link rel="canonical" href="http://localhost/dropti_zeylona_up/pages/order.php">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://localhost/dropti_zeylona_up/pages/order.php">
    <meta property="og:title" content="Dropti Zeylona">
    <meta property="og:description" content="Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.">
    <meta property="og:image" content="http://localhost/dropti_zeylona_up/pages/dropti2.png">
    <meta property="og:site_name" content="Dropti Zeylona">
    <meta property="og:locale" content="en_US">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Dropti Zeylona">
    <meta name="twitter:description" content="Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.">
    <meta name="twitter:image" content="http://localhost/dropti_zeylona_up/pages/dropti2.png">

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "http://localhost/dropti_zeylona_up/pages/#organization",
      "name": "Dropti Zeylona",
      "url": "http://localhost/dropti_zeylona_up/pages",
      "logo": {
        "@type": "ImageObject",
        "url": "http://localhost/dropti_zeylona_up/pages/dropti2.png"
      },
      "email": "info@droptiZeylona.com",
      "sameAs": [
        "https://www.instagram.com/droptiZeylona",
        "https://www.facebook.com/droptiZeylona"
      ]
    },
    {
      "@type": "WebPage",
      "@id": "http://localhost/dropti_zeylona_up/pages/order.php",
      "url": "http://localhost/dropti_zeylona_up/pages/order.php",
      "name": "Dropti Zeylona",
      "description": "Premium organic Ceylon teas — handcrafted, ethically sourced luxury blends from the misty peaks of Sri Lanka.",
      "isPartOf": {
        "@id": "http://localhost/dropti_zeylona_up/pages/#website"
      },
      "publisher": {
        "@id": "http://localhost/dropti_zeylona_up/pages/#organization"
      },
      "inLanguage": "en-US",
      "image": "http://localhost/dropti_zeylona_up/pages/dropti2.png"
    }
  ]
}
    </script>
    <!-- ═════════════════════════════════════════════════════ -->
    
    <!-- Core CSS & Fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Raleway:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">


    <style>
        /* --- MODERN SHARP VARIABLES --- */
        :root { 
            --primary: #1A3021; 
            --accent: #D4AF37; 
            --bg-gradient: linear-gradient(135deg, #fdfbf7 0%, #f4f1ea 100%);
            --shadow-sm: 0 4px 6px rgba(0,0,0,0.02);
            --shadow-lg: 0 20px 40px rgba(0,0,0,0.04);
            /* NO RADIUS */
            --radius: 0px; 
        }
        
        body { background: var(--bg-gradient); color: var(--primary); font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; }
        .serif { font-family: 'Cormorant Garamond', serif; }
        
        /* --- NAV (CARTTEST STYLE) --- */
        #mainNav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(15px); transition: all 0.4s ease; border-bottom: 1px solid rgba(212,175,55,0.1); }
        .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; height: 60px; }
        .logo img { height: 40px; }
        .nav-links { display: flex; gap: 25px; align-items: center; margin-left: 40px; }
        .nav-links a { text-decoration: none; color: #e5e5e5; font-size: 0.9rem; font-weight: 500; transition: 0.3s; font-family: 'Raleway'; letter-spacing: 0.5px; }
        .nav-links a:hover, .nav-links a.active { color: #D4AF37; }
        .nav-links a.active { border-bottom: 2px solid #D4AF37; padding-bottom: 2px; }
        .mobile-menu-btn { display: none; color: #D4AF37; font-size: 1.5rem; }
        @media (max-width: 768px) {
            .nav-links { display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #0c1c11; flex-direction: column; padding: 30px; gap: 25px; border-top: 1px solid #333; }
            .nav-links.show { display: flex; }
            .mobile-menu-btn { display: block; }
        }
        .own_blend { display: inline-flex; justify-content: center; align-items: center; color: #D4AF37; border: 1px solid #D4AF37; padding: 6px 15px; border-radius: 0; font-size: 0.8rem; font-weight: 700; background: transparent; transition: 0.3s; margin-left: auto; margin-right: 20px; }
        .own_blend:hover { background: #D4AF37; color: black; }
        .badge { position: absolute; top: -5px; right: -8px; background: #D4AF37; color: black; font-size: 9px; padding: 1px 5px; border-radius: 0; font-weight: 800; }

        /* --- DASHBOARD LAYOUT --- */
        .wrapper { max-width: 1200px; margin: 120px auto 50px; padding: 0 20px; }
        
        /* Heading Area */
        .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
        .title-group h1 { font-family: 'Cormorant Garamond'; font-size: 3rem; font-weight: 600; color: var(--primary); line-height: 1; }
        .title-group p { color: #888; font-size: 0.95rem; margin-top: 5px; letter-spacing: 0.5px; }

        /* --- MODERN FLOATING TABLE (SHARP) --- */
        .modern-table-container { display: none; }
        @media (min-width: 1024px) { 
            .modern-table-container { display: block; } 
        }

        .row-card {
            background: white; border-radius: 0; /* SHARP */
            box-shadow: var(--shadow-sm); margin-bottom: 15px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(0,0,0,0.02); overflow: hidden;
            position: relative;
        }
        .row-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(212,175,55,0.2); }
        .row-card::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
            background: transparent; transition: 0.3s;
        }
        .row-card:hover::before { background: var(--accent); }

        .row-main {
            display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1fr;
            padding: 25px 30px; align-items: center; cursor: pointer;
        }

        .td-label { font-size: 0.75rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; display: block; }
        .td-value { font-size: 1rem; color: var(--primary); font-weight: 600; }
        .td-price { font-family: 'Cormorant Garamond'; font-size: 1.5rem; font-weight: 700; color: var(--primary); }

        /* Status Dot */
        .status-visual { display: flex; align-items: center; gap: 10px; }
        .dot { width: 8px; height: 8px; border-radius: 0; /* SHARP DOT (SQUARE) */ display: block; transform: rotate(45deg); }
        .status-Shipped .dot { background: #10B981; }
        .status-Pending .dot { background: #F59E0B; }
        .status-Delivered .dot { background: #3B82F6; }
        
        /* Images Preview - Sharp */
        .img-stack { display: flex; }
        .img-stack img { 
            width: 40px; height: 40px; border-radius: 0; border: 1px solid white; 
            object-fit: cover; margin-right: -10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: 0.2s;
        }
        .row-card:hover .img-stack img { margin-right: 5px; border-color: #D4AF37; }

        /* Detail Drawer */
        .row-detail { height: 0; overflow: hidden; transition: height 0.4s ease; background: #fafafa; }
        .detail-inner { padding: 30px; border-top: 1px solid #f0f0f0; }

        /* --- MOBILE MODERN CARDS (SHARP) --- */
        .mobile-view { display: block; }
        @media (min-width: 1024px) { .mobile-view { display: none; } }

        .m-card {
            background: white; border-radius: 0; /* SHARP */
            padding: 24px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04); margin-bottom: 25px;
            position: relative; overflow: hidden; border: 1px solid #f0f0f0;
        }
        
        .m-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
        .m-id { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
        .m-date { font-size: 0.8rem; color: #999; }
        
        .m-gallery { 
            display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; scrollbar-width: none;
        }
        .m-gallery img {
            width: 70px; height: 70px; border-radius: 0; /* SHARP */ object-fit: cover;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        .m-status-bar {
            height: 4px; background: #eee; border-radius: 0; margin: 15px 0 10px; position: relative; overflow: hidden;
        }
        .m-progress { height: 100%; background: var(--accent); width: 0; transition: width 1s; }
        
        .m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 20px; background: #eee; border: 1px solid #eee; }
        .btn-modern {
            padding: 15px; border-radius: 0; /* SHARP */ border: none; font-weight: 600; font-size: 0.85rem;
            cursor: pointer; transition: 0.2s; text-align: center; display: flex; justify-content: center; align-items: center; gap: 8px;
            background: white; color: var(--primary);
        }
        .btn-modern:hover { background: #fafafa; }
        .btn-primary-m { background: #1A3021; color: #D4AF37; }
        .btn-alert-m { color: red; }

        /* Collapsible Mobile */
        .m-drawer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
        .m-drawer.open { max-height: 500px; }

        /* --- MODERN MODAL (SHARP) --- */
        .modal-backdrop {
            position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
            z-index: 2000; display: none; justify-content: center; align-items: center; padding: 20px;
        }
        .modal-surface {
            background: white; border-radius: 0; /* SHARP */ padding: 40px; width: 100%; max-width: 450px;
            box-shadow: 0 0 0 1px #D4AF37; transform: scale(0.9); opacity: 0; animation: popIn 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-align: center;
        }
        @keyframes popIn { 100% { transform: scale(1); opacity: 1; } }
        
        .star-rating { display: inline-flex; gap: 5px; margin: 20px 0; background: #f9f9f9; padding: 10px 20px; border-radius: 0; }
        .star-rating i { font-size: 1.5rem; color: #ddd; transition: 0.2s; cursor: pointer; }
        .star-rating i:hover, .star-rating i.active { color: #fece00; transform: scale(1.2); }

        .upload-zone {
            border: 2px dashed #eee; border-radius: 0; padding: 30px; margin: 20px 0;
            color: #888; transition: 0.2s; cursor: pointer;
        }
        .upload-zone:hover { border-color: var(--accent); background: #fffdf5; color: var(--accent); }
        
        .btn-full { width: 100%; py-4; background: #1A3021; color: white; font-weight: bold; padding: 15px; border: none; cursor: pointer; transition: 0.2s; }
        .btn-full:hover { background: black; color: #D4AF37; }

    </style>
</head>

<body>

    <!-- NAVIGATION (Exact CartTest Copy) -->
    <nav id="mainNav">
        <div class="top-bar-container" style="background:#fff; height:35px; overflow:hidden; position:relative; text-align:center;">
             <div class="w-full absolute top-0 animate-[move_10s_linear_infinite]" style="animation: move 10s linear infinite;">
                 <div style="height:35px; line-height:35px; font-weight:700; font-size:12px; letter-spacing:1px; font-family: 'Raleway';">FREE SHIPPING ON ORDERS OVER $99</div>
             </div>
        </div>
        <div class="nav-container">
            <div class="logo"><img src="dropti2.png" alt="Zeylona"></div>
            <div class="nav-links" id="navLinks">
                <a href="shop.php">Shop</a>
                <a href="tea_academy.html">Academy</a>
                <a href="order.php" class="active">Orders</a>
                <a href="about.html">About</a>
                <a href="cart1.php">Cart</a>
            </div>
            <div class="flex items-center gap-4">
                 <a href="make_my_blend.html" class="hidden md:inline-flex own_blend">MAKE A BLEND</a>
                 <a href="cart1.php" class="relative text-white hover:text-yellow-400 transition ml-2">
                    <i class="fas fa-shopping-cart text-xl"></i>
                    <span class="badge">2</span>
                 </a>
                 <button class="mobile-menu-btn ml-4" id="mobileBtn"><i class="fas fa-bars"></i></button>
            </div>
        </div>
    </nav>
    <script>
        document.getElementById('mobileBtn').addEventListener('click', () => { 
            const links = document.getElementById('navLinks');
            links.classList.toggle('show');
        });
    </script>

    <div class="wrapper">
        <div class="page-header">
            <div class="title-group">
                <h1>My Orders</h1>
                <p>Track your premium collection journey.</p>
            </div>
            <div class="hidden md:flex gap-0 border border-[#1A3021]">
                <button class="px-6 py-2 bg-[#1A3021] text-white text-sm font-bold uppercase">Active</button>
                <button class="px-6 py-2 bg-white text-gray-500 text-sm font-bold uppercase hover:bg-gray-50">History</button>
            </div>
        </div>

        <?php if (count($orders) > 0): ?>

            <!-- 1. PC: SHARP FLOATING ROWS -->
            <div class="modern-table-container">
                <?php foreach($orders as $index => $order): 
                    $dateStr = date("M d, Y", strtotime($order['date_time']));
                    $status = $order['status'];
                    $rowId = "pcrow-" . $index;
                ?>
                <div class="row-card">
                    <!-- Main Bar -->
                    <div class="row-main" onclick="togglePcRow('<?php echo $rowId; ?>')">
                        <div>
                            <span class="td-label">Order ID</span>
                            <span class="td-value">#<?php echo $order['order_id']; ?></span>
                        </div>
                        <div>
                            <span class="td-label">Date</span>
                            <span class="td-value font-normal"><?php echo $dateStr; ?></span>
                        </div>
                        <div>
                            <span class="td-label">Collection</span>
                            <div class="img-stack">
                                <?php foreach(array_slice($order['items'],0,3) as $item): ?>
                                    <img src="<?php echo $item['img']; ?>">
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <div>
                            <span class="td-label">Total</span>
                            <span class="td-price">$<?php echo number_format($order['amount'], 2); ?></span>
                        </div>
                        <div class="status-visual status-<?php echo $status; ?>">
                            <span class="dot"></span>
                            <span class="font-bold text-sm <?php echo $status=='Shipped'?'text-green-600':($status=='Pending'?'text-yellow-600':'text-blue-600'); ?>"><?php echo $status; ?></span>
                            <i class="fas fa-chevron-down text-gray-300 ml-auto transition-transform duration-300" id="icon-<?php echo $rowId; ?>"></i>
                        </div>
                    </div>

                    <!-- Hidden Drone -->
                    <div id="<?php echo $rowId; ?>" class="row-detail">
                        <div class="detail-inner">
                            <div class="grid grid-cols-3 gap-12">
                                <!-- Tracker -->
                                <div>
                                    <h5 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Journey</h5>
                                    <div class="space-y-4 border-l-2 border-gray-100 pl-4 ml-1">
                                        <?php foreach($order['timeline'] as $step): ?>
                                            <div class="relative">
                                                <div class="absolute -left-[20px] top-1 w-2 h-2 rotate-45 <?php echo $step['completed']?'bg-[#D4AF37]':'bg-gray-200'; ?>"></div>
                                                <div class="text-sm font-bold <?php echo $step['completed']?'text-[#1A3021]':'text-gray-400'; ?>"><?php echo $step['status']; ?></div>
                                                <div class="text-xs text-gray-400"><?php echo $step['date']; ?></div>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                                <!-- Address -->
                                <div>
                                    <h5 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Destination</h5>
                                    <p class="text-[#1A3021] font-medium leading-relaxed mb-4 text-lg"><?php echo $order['address']; ?></p>
                                    <h5 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Tracking ID</h5>
                                    <span class="bg-gray-100 font-mono px-3 py-1 text-sm"><?php echo $order['tracking_no']; ?></span>
                                </div>
                                <!-- Actions -->
                                <div class="flex flex-col justify-center gap-3">
                                    <?php if($status == 'Shipped' || $status == 'Delivered'): ?>
                                        <button onclick="openModal()" class="w-full py-3 bg-[#1A3021] text-white font-bold text-sm shadow hover:bg-black transition uppercase tracking-widest">
                                            Confirm Receipt
                                        </button>
                                        <button class="w-full py-3 bg-white border border-gray-200 text-[#1A3021] font-bold text-sm hover:bg-gray-50 uppercase tracking-widest">
                                            Track Order
                                        </button>
                                    <?php endif; ?>
                                    
                                    <?php if($status == 'Pending'): ?>
                                        <button class="w-full py-3 bg-white border border-[#1A3021] text-[#1A3021] font-bold text-sm hover:bg-[#1A3021] hover:text-white transition uppercase tracking-widest">Edit Order</button>
                                        <button class="text-red-500 font-bold text-xs mt-2 hover:underline uppercase tracking-widest">Cancel Order</button>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- 2. MOBILE: SHARP APP CARDS -->
            <div class="mobile-view">
                <?php foreach($orders as $index => $order): 
                     $status = $order['status'];
                     $pct = ($status=='Delivered')?100:($status=='Shipped'?60:20);
                     $mobId = "mob-" . $index;
                ?>
                <div class="m-card">
                    <div class="m-header">
                        <div>
                             <div class="m-id">Order #<?php echo $order['order_id']; ?></div>
                             <div class="m-date"><?php echo date("M d, Y", strtotime($order['date_time'])); ?></div>
                        </div>
                        <div class="serif text-xl font-bold text-[#1A3021]">$<?php echo number_format($order['amount'], 2); ?></div>
                    </div>

                    <div class="m-gallery" onclick="toggleMob('<?php echo $mobId; ?>')">
                        <?php foreach($order['items'] as $item): ?>
                            <img src="<?php echo $item['img']; ?>">
                        <?php endforeach; ?>
                    </div>

                    <div>
                        <div class="flex justify-between text-xs font-bold text-[#1A3021] mb-1">
                            <span>Status</span>
                            <span><?php echo $status; ?></span>
                        </div>
                        <div class="m-status-bar">
                            <div class="m-progress" style="width: <?php echo $pct; ?>%;"></div>
                        </div>
                    </div>

                    <!-- Drawer -->
                    <div id="<?php echo $mobId; ?>" class="m-drawer">
                        <div class="pt-4 border-top border-dashed border-gray-100 mt-4">
                            <div class="text-xs font-bold text-gray-400 uppercase mb-2">Details</div>
                            <p class="text-sm font-medium text-[#1A3021] mb-4"><?php echo $order['address']; ?></p>
                            
                            <div class="text-xs font-bold text-gray-400 uppercase mb-2">Journey</div>
                            <?php foreach(array_reverse($order['timeline']) as $step): if($step['completed']): ?>
                                <div class="flex items-center gap-2 mb-1">
                                    <div class="w-2 h-2 bg-[#D4AF37] rotate-45"></div>
                                    <span class="text-xs font-bold text-[#1A3021]"><?php echo $step['status']; ?></span>
                                    <span class="text-[10px] text-gray-400 ml-auto"><?php echo $step['date']; ?></span>
                                </div>
                            <?php endif; endforeach; ?>
                        </div>
                    </div>

                    <div class="m-actions">
                         <?php if($status == 'Shipped' || $status == 'Delivered'): ?>
                            <button class="btn-modern btn-primary-m" onclick="openModal()">Confirm</button>
                            <button class="btn-modern">Track</button>
                        <?php else: ?>
                            <button class="btn-modern" style="border-right: 1px solid #ddd;">Edit</button>
                            <button class="btn-modern btn-alert-m">Cancel</button>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

        <?php endif; ?>
    </div>

    <!-- SHARP MODAL -->
    <div id="ratingModal" class="modal-backdrop">
        <div class="modal-surface">
            <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-300 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button>
            <h3 class="font-serif text-3xl text-[#1A3021] mb-2 font-bold">Confirmed</h3>
            <p class="text-gray-500 text-sm">How was the unboxing?</p>
            
            <div class="star-rating" id="starContainer">
                 <i class="fas fa-star" onclick="setStar(1)"></i>
                 <i class="fas fa-star" onclick="setStar(2)"></i>
                 <i class="fas fa-star" onclick="setStar(3)"></i>
                 <i class="fas fa-star" onclick="setStar(4)"></i>
                 <i class="fas fa-star" onclick="setStar(5)"></i>
            </div>
            
            <div class="upload-zone" onclick="document.getElementById('f').click()">
                <i class="fas fa-camera text-2xl mb-2"></i>
                <div class="text-xs font-bold uppercase tracking-wide">Upload Photo</div>
                <input type="file" id="f" hidden>
            </div>
            
            <button class="btn-full" onclick="closeModal()">SUBMIT REVIEW</button>
        </div>
    </div>

    <script>
        function togglePcRow(id) {
            const el = document.getElementById(id);
            const icon = document.getElementById('icon-'+id);
            if(el.style.height && el.style.height !== '0px') {
                el.style.height = '0px';
                icon.style.transform = 'rotate(0deg)';
            } else {
                el.style.height = el.scrollHeight + 'px';
                icon.style.transform = 'rotate(180deg)';
            }
        }
        function toggleMob(id) { document.getElementById(id).classList.toggle('open'); }
        function openModal() { document.getElementById('ratingModal').style.display = 'flex'; }
        function closeModal() { document.getElementById('ratingModal').style.display = 'none'; }
        function setStar(n) { document.querySelectorAll('#starContainer i').forEach((e,i)=> e.classList.toggle('active', i<n)); }
    </script>
</body>
</html>