<?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 (Dummy data if empty for design purpose as in order.php)
$orders = [];
if ($order_count > 0) {
    while ($row = $order_rs->fetch_assoc()) {
        // Simple mapping for this demonstration
        $orders[] = [
            'order_id' => $row['order_id'],
            'date_time' => $row['order_date'],
            'amount' => $row['amount'],
            'status' => 'Shipped', // Hardcoded for design demo or fetch from status table if exists
            'address' => $row['address_line_1'] . ", " . $row['city'],
            'tracking_no' => 'ZY-' . rand(1000, 9999) . '-LK',
            'timeline' => [
                ['status' => 'Placed', 'date' => 'Mar 01', 'completed' => true],
                ['status' => 'Shipped', 'date' => 'Mar 03', 'completed' => true],
                ['status' => 'In Transit', 'date' => 'Today', 'completed' => false],
            ],
            'items' => [['img' => 'Addaheading_18.png', 'name' => 'Ceylon Premium Tea', 'qty' => 1, 'price' => $row['amount']]]
        ];
    }
} else {
    $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]]
        ]
    ];
}

// Logic for Latest 3 vs All
$view = $_GET['view'] ?? 'dashboard';
$orders_to_show = ($view === 'orders') ? $orders : array_slice($orders, 0, 3);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ═══ SEO META TAGS — Auto-generated by seo-optimize.js ═══ -->
    <title>My Account | Dropti Zeylona</title>
    <meta name="description" content="Manage your Dropti Zeylona account — view order history, update preferences and access exclusive member benefits.">
    <meta name="keywords" content="tea account, my orders, Zeylona member">
    <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/user.php">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://localhost/dropti_zeylona_up/pages/user.php">
    <meta property="og:title" content="My Account | Dropti Zeylona">
    <meta property="og:description" content="Manage your Dropti Zeylona account — view order history, update preferences and access exclusive member benefits.">
    <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="My Account | Dropti Zeylona">
    <meta name="twitter:description" content="Manage your Dropti Zeylona account — view order history, update preferences and access exclusive member benefits.">
    <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/user.php",
      "url": "http://localhost/dropti_zeylona_up/pages/user.php",
      "name": "My Account | Dropti Zeylona",
      "description": "Manage your Dropti Zeylona account — view order history, update preferences and access exclusive member benefits.",
      "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>
    <!-- ═════════════════════════════════════════════════════ -->
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0F172A',
                        secondary: '#334155',
                        accent: '#D4AF37', // Gold
                        'luxury-dark': '#0B0F19',
                    },
                    fontFamily: {
                        sans: ['Raleway', 'sans-serif'],
                        serif: ['Cormorant Garamond', 'serif'],
                    }
                }
            }
        }
    </script>
    <!-- Google Fonts -->
    <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&display=swap"
        rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* Base Styles */
        body {
            font-family: 'Raleway', sans-serif;
            background-image: url('../bg.jpg');
            /* Using same BG as likely other pages */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
        }

        /* Glassmorphism */
        .glass-panel {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        /* Navbar Styles (Synced) */
        #mainNav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            transition: all 0.5s ease;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 64px;
        }

        .logo img {
            height: 40px;
            width: auto;
        }

        .nav-links {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: #d1d5db;
            font-weight: 500;
            transition: color 0.3s;
            padding-bottom: 4px;
            font-family: 'Raleway', sans-serif;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: #D4AF37;
        }

        .nav-links a.active {
            border-bottom: 2px solid #D4AF37;
        }

        /* Mobile Menu */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            color: #d1d5db;
        }

        .mobile-menu-btn svg {
            width: 24px;
            height: 24px;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 64px;
                left: 0;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.95);
                flex-direction: column;
                gap: 20px;
                padding: 20px;
            }

            .nav-links.show {
                display: flex;
            }

            .mobile-menu-btn {
                display: block;
            }
        }

        /* Top Bar */
        .top-bar-item {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            letter-spacing: 0.5px;
        }

        .top-bar-texts {
            animation: vertical-scroll 6s linear infinite;
        }

        @keyframes vertical-scroll {

            0%,
            20% {
                transform: translateY(0);
            }

            30%,
            50% {
                transform: translateY(-40px);
            }

            55%,
            70% {
                transform: translateY(-80px);
            }

            75%,
            90% {
                transform: translateY(-120px);
            }

            100% {
                transform: translateY(0);
            }
        }

        /* Own Blend Button */
        .own_blend {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            padding: 5px;
            width: 185px;
            height: 40px;
            border: 1px solid #500331ff;
            border-radius: 0px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.4s ease;
            box-shadow: 0 2px 10px rgba(255, 204, 35, 0.2);
            font-family: 'Raleway', sans-serif;
        }

        .own_blend:hover {
            transform: translateY(-3px) scale(1.03);
        }

        .own_blend::before {
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #c50159ff, #ec016bff, #f5509aff);
            transition: top 0.5s ease-in-out;
            border-radius: 10px;
            z-index: 0;
            pointer-events: none;
            mix-blend-mode: lighten;
        }

        .own_blend:hover::before {
            top: 0;
        }

        .own_blend span {
            position: relative;
            z-index: 1;
            color: #fff;
            transition: color 0.3s ease;
        }

        @media (max-width: 768px) {
            .own_blend {
                padding: 8px 16px;
                font-size: 2px;
                width: 125px;
                height: 35px;
                border: 1px solid #ffcc23ff;
                border-radius: 0px;
            }
        }

        /* Nav Icons & Badge */
        .nav-icons {
            display: flex;
            gap: 25px;
            align-items: center;
        }

        .icon {
            position: relative;
            cursor: pointer;
        }

        .badge {
            position: absolute;
            top: -6px;
            right: -10px;
            background: #D4AF37;
            color: black;
            font-weight: bold;
            font-size: 10px;
            padding: 2px 5px;
            border-radius: 0;
        }

        .sidebar-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: #4b5563;
            border-radius: 0;
            transition: all 0.3s;
            text-decoration: none;
            font-weight: 500;
        }

        .sidebar-link:hover,
        .sidebar-link.active {
            background: #f8fafc;
            color: #D4AF37;
        }

        .sidebar-link.active {
            background: #fff;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        /* Profile Specifics */
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 0;
            object-fit: cover;
            border: 3px solid #D4AF37;
            padding: 2px;
        }

        /* --- MODERN ORDER STYLES FROM ORDER.PHP --- */
        .row-card {
            background: white;
            border-radius: 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
            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: 0 20px 40px rgba(0, 0, 0, 0.04);
            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: #D4AF37;
        }

        .row-main {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1fr;
            padding: 20px 25px;
            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: 0.9rem;
            color: #0F172A;
            font-weight: 600;
        }

        .td-price {
            font-family: 'Cormorant Garamond';
            font-size: 1.3rem;
            font-weight: 700;
            color: #0F172A;
        }

        .status-visual {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 0;
            display: block;
            transform: rotate(45deg);
        }

        .status-Shipped .dot {
            background: #10B981;
        }

        .status-Pending .dot {
            background: #F59E0B;
        }

        .status-Delivered .dot {
            background: #3B82F6;
        }

        .img-stack {
            display: flex;
        }

        .img-stack img {
            width: 35px;
            height: 35px;
            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;
        }

        .row-detail {
            height: 0;
            overflow: hidden;
            transition: height 0.4s ease;
            background: #fafafa;
        }

        .detail-inner {
            padding: 25px;
            border-top: 1px solid #f0f0f0;
        }

        /* Mobile Order Cards */
        .m-card {
            background: white;
            border-radius: 0;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
            border: 1px solid #f0f0f0;
        }

        .m-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .m-id {
            font-size: 1rem;
            font-weight: 700;
            color: #0F172A;
        }

        .m-date {
            font-size: 0.75rem;
            color: #999;
        }

        .m-gallery {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 8px;
            margin-bottom: 12px;
            scrollbar-width: none;
        }

        .m-gallery img {
            width: 60px;
            height: 60px;
            border-radius: 0;
            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: 12px 0 8px;
            position: relative;
            overflow: hidden;
        }

        .m-progress {
            height: 100%;
            background: #D4AF37;
            width: 0;
            transition: width 1s;
        }

        .m-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            margin-top: 15px;
            background: #eee;
            border: 1px solid #eee;
        }

        .btn-modern {
            padding: 12px;
            border-radius: 0;
            border: none;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: 0.2s;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            background: white;
            color: #0F172A;
        }

        .btn-modern:hover {
            background: #fafafa;
        }

        .btn-primary-m {
            background: #0F172A;
            color: #D4AF37;
        }

        .m-drawer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .m-drawer.open {
            max-height: 500px;
        }

        @media (max-width: 1024px) {
            .pc-orders {
                display: none;
            }
        }

        @media (min-width: 1025px) {
            .mobile-orders {
                display: none;
            }
        }
    </style>
</head>

<body class="bg-gray-50/50">

    <!-- Navbar -->
    <nav id="mainNav">
        <div class="top-bar-container"
            style="background-color:#fff; color:black; font-weight:bold; height:40px; overflow:hidden; position:relative; text-align:center;">
            <div class="top-bar-texts" style="position:absolute; top:0; width:100%;">
                <div class="top-bar-item">Free Shipping on all orders above $99!</div>
                <div class="top-bar-item" style="background-color: #000; color: #ffc60bff;">New User 20% OFF!</div>
                <div class="top-bar-item">Indulge in Pure Relaxation & Luxury With Ceylon Zeylona</div>
            </div>
        </div>
        <div class="nav-container">
            <div class="logo"><img src="../dropti2.png" alt="Logo"></div>
            <div class="nav-links" id="navLinks">
                <a href="shop.php">Shop</a>
                <a href="tea_academy.html">Academy</a>
                <a href="homepage.html">Home</a>
                <a href="myAi.php">AI Health Scan</a>
                <a href="products.php">Products</a>
                <a href="cart1.php">Cart</a>
            </div>
            <a href="make_my_blend.html" id="btnDiv" class="own_blend" style="text-decoration:none;">Make My
                Blend!</a>
            <div class="nav-icons">
                <div class="icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg></div>
                <a href="cart1.php">
                    <div class="icon cart cursor-pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="9" cy="21" r="1"></circle>
                            <circle cx="20" cy="21" r="1"></circle>
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                        </svg><span class="badge">2</span></div>
                </a>
                <a href="profile.php">
                    <div class="icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D4AF37"
                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M4 21v-2a4 4 0 0 1 3-3.87"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg></div>
                </a>
            </div>
            <button class="mobile-menu-btn" id="mobileBtn"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
                    </path>
                </svg></button>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="pt-32 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">

        <!-- Page Header -->
        <div class="mb-8">
            <h1 class="text-3xl md:text-4xl font-serif font-bold text-primary">
                <?php echo ($view === 'orders' ? 'My <span class="text-accent italic">Orders</span>' : 'My <span class="text-accent italic">Account</span>'); ?>
            </h1>
            <p class="text-gray-500 mt-2">
                <?php echo ($view === 'orders' ? 'Track your premium collection journey.' : 'Manage your orders, tea preferences, and account settings.'); ?>
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-12 gap-8">

            <!-- Sidebar Navigation -->
            <aside class="md:col-span-3">
                <div class="glass-panel p-4 flex flex-col gap-2 sticky top-32">
                    <a href="user.php" class="sidebar-link <?php echo ($view === 'dashboard' ? 'active' : ''); ?>">
                        Dashboard
                    </a>
                    <a href="user.php?view=orders#orders-section"
                        class="sidebar-link <?php echo ($view === 'orders' ? 'active' : ''); ?>">
                        My Orders
                    </a>
                    <a href="#" class="sidebar-link">
                        Wishlist
                    </a>
                    <a href="#" class="sidebar-link">
                        Custom Blends
                    </a>
                    <a href="#" class="sidebar-link">
                        Addresses
                    </a>
                    <a href="#" class="sidebar-link">
                        Settings
                    </a>
                    <div class="h-px bg-gray-200 my-2"></div>
                    <a href="#" class="sidebar-link text-red-500 hover:text-red-600">
                        Logout
                    </a>
                </div>
            </aside>

            <!-- Main Details -->
            <section class="md:col-span-9 space-y-8">

                <?php if ($view === 'dashboard'): ?>
                    <!-- Profile Overview Widget -->
                    <div
                        class="glass-panel p-6 md:p-8 flex flex-col md:flex-row items-center md:items-start gap-6 relative overflow-hidden">
                        <div class="absolute top-0 right-0 p-4 opacity-10">
                            <i class="fas fa-leaf text-9xl text-accent"></i>
                        </div>

                        <img src="https://ui-avatars.com/api/?name=User+Name&background=0F172A&color=D4AF37" alt="Profile"
                            class="profile-avatar shadow-lg">

                        <div class="flex-1 text-center md:text-left z-10">
                            <h2 class="text-2xl font-serif font-bold text-primary">Hello, Chamika!</h2>
                            <p class="text-gray-500">Member since Jan 2026</p>
                            <div class="mt-4 flex flex-wrap justify-center md:justify-start gap-3">
                                <span
                                    class="px-3 py-1 bg-yellow-100 text-yellow-700 text-xs font-bold uppercase border border-yellow-200">
                                    <i class="fas fa-crown mr-1"></i> Gold Member
                                </span>
                                <span
                                    class="px-3 py-1 bg-green-100 text-green-700 text-xs font-bold uppercase border border-green-200">
                                    <i class="fas fa-leaf mr-1"></i> Eco-Friendly
                                </span>
                            </div>
                        </div>

                        <div class="text-center md:text-right z-10">
                            <div class="text-sm text-gray-500 uppercase tracking-widest font-bold mb-1">Tea Points</div>
                            <div class="text-4xl font-serif font-bold text-accent">1,250</div>
                            <button class="mt-2 text-xs text-primary underline hover:text-accent">Redeem Rewards</button>
                        </div>
                    </div>
                <?php endif; ?>

                <?php
                // Logic to slice orders array based on $_GET['view']
                $orders_to_show = ($view === 'orders') ? $orders : array_slice($orders, 0, 3);
                ?>

                <!-- Recent Orders (Now with Order.php Design) -->
                <div id="orders-section">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-serif font-bold text-xl text-primary">
                            <?php echo ($view === 'orders' ? 'My All Orders' : 'Recent Orders'); ?>
                        </h3>
                        <div class="flex gap-2">
                            <?php if ($view !== 'orders'): ?>
                                <a href="user.php?view=orders#orders-section"
                                    class="px-4 py-1.5 bg-primary text-white text-xs font-bold uppercase hover:bg-black transition">View
                                    All</a>
                            <?php endif; ?>
                            <button
                                class="px-4 py-1.5 bg-white text-gray-500 text-xs font-bold uppercase border border-gray-100 hover:bg-gray-50">Filter</button>
                        </div>
                    </div>

                    <!-- PC VIEW -->
                    <div class="pc-orders">
                        <?php foreach ($orders_to_show as $index => $order):
                            $dateStr = date("M d, Y", strtotime($order['date_time']));
                            $status = $order['status'];
                            $rowId = "pcrow-" . $index;
                            ?>
                            <div class="row-card">
                                <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>
                                <div id="<?php echo $rowId; ?>" class="row-detail">
                                    <div class="detail-inner">
                                        <div class="grid grid-cols-3 gap-8">
                                            <div>
                                                <h5
                                                    class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-3">
                                                    Journey</h5>
                                                <div class="space-y-3 border-l-2 border-gray-100 pl-4">
                                                    <?php foreach ($order['timeline'] as $step): ?>
                                                        <div class="relative">
                                                            <div
                                                                class="absolute -left-[21px] top-1 w-2 h-2 rotate-45 <?php echo $step['completed'] ? 'bg-[#D4AF37]' : 'bg-gray-200'; ?>">
                                                            </div>
                                                            <div
                                                                class="text-xs font-bold <?php echo $step['completed'] ? 'text-primary' : 'text-gray-400'; ?>">
                                                                <?php echo $step['status']; ?>
                                                            </div>
                                                            <div class="text-[10px] text-gray-400"><?php echo $step['date']; ?>
                                                            </div>
                                                        </div>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                            <div>
                                                <h5
                                                    class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-3">
                                                    Ship To</h5>
                                                <p class="text-primary text-sm font-medium leading-relaxed mb-3">
                                                    <?php echo $order['address']; ?>
                                                </p>
                                                <h5
                                                    class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">
                                                    Tracking</h5>
                                                <span
                                                    class="bg-gray-100 font-mono px-2 py-0.5 text-[10px]"><?php echo $order['tracking_no']; ?></span>
                                            </div>
                                            <div class="flex flex-col justify-center gap-2">
                                                <button
                                                    class="w-full py-2 bg-primary text-white font-bold text-xs hover:bg-black transition uppercase tracking-widest">Track
                                                    Order</button>
                                                <button
                                                    class="w-full py-2 bg-white border border-gray-200 text-primary font-bold text-xs hover:bg-gray-50 uppercase tracking-widest">Order
                                                    Details</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <!-- MOBILE VIEW -->
                    <div class="mobile-orders">
                        <?php foreach ($orders_to_show 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="font-serif text-lg font-bold text-primary">
                                        $<?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-[10px] font-bold text-primary mb-1">
                                        <span>Status: <?php echo $status; ?></span>
                                        <span><?php echo $pct; ?>%</span>
                                    </div>
                                    <div class="m-status-bar">
                                        <div class="m-progress" style="width: <?php echo $pct; ?>%;"></div>
                                    </div>
                                </div>
                                <div id="<?php echo $mobId; ?>" class="m-drawer">
                                    <div class="pt-4 border-t border-dashed border-gray-100 mt-4">
                                        <p class="text-xs font-medium text-primary mb-3"><?php echo $order['address']; ?>
                                        </p>
                                        <?php foreach (array_reverse($order['timeline']) as $step):
                                            if ($step['completed']): ?>
                                                <div class="flex items-center gap-2 mb-1 text-[10px]">
                                                    <div class="w-1.5 h-1.5 bg-[#D4AF37] rotate-45"></div>
                                                    <span class="font-bold text-primary"><?php echo $step['status']; ?></span>
                                                    <span class="text-gray-400 ml-auto"><?php echo $step['date']; ?></span>
                                                </div>
                                            <?php endif; endforeach; ?>
                                    </div>
                                </div>
                                <div class="m-actions">
                                    <button class="btn-modern btn-primary-m">Track</button>
                                    <button class="btn-modern" onclick="toggleMob('<?php echo $mobId; ?>')">Details</button>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>


                <!-- Address & Saved Items (Grid) -->
                <?php if ($view === 'dashboard'): ?>
                    <!-- Address & Saved Items (Grid) -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Default Address -->
                        <div class="glass-card p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-serif font-bold text-lg text-primary">Shipping Address</h3>
                                <button class="text-xs text-accent font-bold"><i class="fas fa-edit"></i> Edit</button>
                            </div>
                            <p class="text-sm text-gray-600 leading-relaxed">
                                <strong>Chamika Perera</strong><br>
                                123 Lotus Road, Colombo 07,<br>
                                Western Province, Sri Lanka.<br>
                                +94 77 123 4567
                            </p>
                        </div>

                        <!-- Health Stats (Link to AI) -->
                        <div class="glass-card p-6 relative overflow-hidden group cursor-pointer"
                            onclick="window.location.href='myAi.php'">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-primary to-luxury-dark opacity-90 transition group-hover:opacity-100">
                            </div>
                            <div class="relative z-10 text-white">
                                <i class="fas fa-heartbeat text-3xl text-accent mb-3"></i>
                                <h3 class="font-serif font-bold text-lg">Health Report</h3>
                                <p class="text-xs text-gray-300 mt-1 mb-3">Last scan: 3 days ago<br>Status: <span
                                        class="text-green-400">Stable</span></p>
                                <span
                                    class="text-xs font-bold text-accent uppercase tracking-wider group-hover:underline">View
                                    AI Analysis <i class="fas fa-arrow-right ml-1"></i></span>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

            </section>
        </div>

    </main>

    <script>
        // Mobile Menu Script
        const mobileBtn = document.getElementById('mobileBtn');
        const navLinks = document.getElementById('navLinks');
        if (mobileBtn) {
            mobileBtn.addEventListener('click', () => { navLinks.classList.toggle('show'); });
        }

        // --- ORDER FUNCTIONS FROM ORDER.PHP ---
        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) {
            const el = document.getElementById(id);
            el.classList.toggle('open');
        }
    </script>

</body>

</html>