<?php
/**
 * หน้าประวัติการสั่งจองของลูกค้า (My Pre-orders)
 * REDSHOP Pre-order System
 */
session_start();
require_once 'db.php';

// ตรวจสอบว่าเข้าสู่ระบบหรือไม่
if (!isset($_SESSION['user_id'])) {
    $_SESSION['redirect_after_login'] = 'my_orders.php';
    header("Location: login.php");
    exit;
}

$user_id = $_SESSION['user_id'];
$user_name = $_SESSION['user_name'];
$user_phone = $_SESSION['user_phone'];

// ดึงรายการสั่งจองของลูกค้ารายนี้ (ทั้งตาม user_id หรือ เบอร์โทรที่ตรงกัน)
try {
    $stmt = $pdo->prepare("
        SELECT b.*, p.name AS product_name, p.image_url AS product_image, pv.variant_name 
        FROM bookings b
        LEFT JOIN products p ON b.product_id = p.id
        LEFT JOIN product_variants pv ON b.variant_id = pv.id
        WHERE b.user_id = :uid OR (b.user_id IS NULL AND b.customer_phone = :phone)
        ORDER BY b.id DESC
    ");
    $stmt->execute([
        'uid' => $user_id,
        'phone' => $user_phone
    ]);
    $bookings = $stmt->fetchAll();
} catch (PDOException $e) {
    $bookings = [];
    $error_msg = "เกิดข้อผิดพลาดในการดึงข้อมูล: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ประวัติการสั่งจองของฉัน - REDSHOP Pre-order</title>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+Thai:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-red: #e61e2b;
            --hover-red: #c1101b;
            --light-red: #ffebeb;
            --dark-gray: #2d3748;
            --light-gray: #f7fafc;
            --border-color: #edf2f7;
        }

        body {
            font-family: 'Noto Sans Thai', 'Inter', sans-serif;
            background-color: #f8fafc;
            color: var(--dark-gray);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            border-bottom: 3px solid var(--primary-red);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            background-color: #fff !important;
        }
        .navbar-brand {
            font-weight: 700;
            color: var(--primary-red) !important;
            font-size: 1.5rem;
        }

        .order-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            margin-bottom: 20px;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .order-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }

        .order-header {
            background-color: #fbfcfd;
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 1.5rem;
        }

        .order-body {
            padding: 1.5rem;
        }

        .product-thumb {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 10px;
            background-color: #edf2f7;
        }

        .badge-status-pending { background-color: #fef3c7; color: #92400e; }
        .badge-status-confirmed { background-color: #d1fae5; color: #065f46; }
        .badge-status-approved { background-color: #d1fae5; color: #065f46; }
        .badge-status-rejected { background-color: #fee2e2; color: #991b1b; }
        .badge-status-cancelled { background-color: #fee2e2; color: #991b1b; }

        .btn-red {
            background-color: var(--primary-red);
            color: #fff;
            border: none;
        }
        .btn-red:hover {
            background-color: var(--hover-red);
            color: #fff;
        }
    </style>
</head>
<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                <i class="fa-solid fa-cart-shopping-fast me-2"></i>
                <span class="text-dark">RED</span>SHOP
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php"><i class="fa-solid fa-store me-1"></i> หน้าร้านค้า</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active fw-bold text-danger" href="my_orders.php"><i class="fa-solid fa-receipt me-1"></i> ประวัติการสั่งจอง</a>
                    </li>
                </ul>

                <div class="d-flex align-items-center gap-2">
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown">
                            <i class="fa-solid fa-circle-user text-danger"></i>
                            <span><?php echo htmlspecialchars($user_name); ?></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                            <li><h6 class="dropdown-header"><i class="fa-solid fa-phone me-1"></i> <?php echo htmlspecialchars($user_phone); ?></h6></li>
                            <li><a class="dropdown-item" href="my_orders.php"><i class="fa-solid fa-receipt me-2"></i> ประวัติการสั่งจองของฉัน</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="logout.php"><i class="fa-solid fa-right-from-bracket me-2"></i> ออกจากระบบ</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Body -->
    <div class="container py-4 flex-grow-1">
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div>
                <h3 class="fw-bold mb-1"><i class="fa-solid fa-box-archive text-danger me-2"></i>ประวัติรายการจองสินค้าของฉัน</h3>
                <p class="text-muted mb-0">ตรวจสอบสถานะการสั่งจอง การอนุมัติสลิป และหมายเลขพัสดุ</p>
            </div>
            <div>
                <a href="index.php" class="btn btn-outline-danger mt-2 mt-sm-0">
                    <i class="fa-solid fa-plus me-1"></i> สั่งจองสินค้าเพิ่ม
                </a>
            </div>
        </div>

        <?php if (empty($bookings)): ?>
            <div class="card border-0 shadow-sm rounded-4 text-center py-5">
                <div class="card-body">
                    <i class="fa-regular fa-clipboard fa-4x text-muted mb-3 opacity-50"></i>
                    <h5 class="text-muted fw-bold">ยังไม่มีประวัติการสั่งจอง</h5>
                    <p class="text-muted mb-4">คุณยังไม่มีรายการสั่งจองสินค้าในระบบ เริ่มต้นสั่งจองสินค้าที่คุณสนใจได้ทันที!</p>
                    <a href="index.php" class="btn btn-red px-4 py-2 rounded-pill">
                        <i class="fa-solid fa-bag-shopping me-2"></i>ไปที่หน้ารายการสินค้า
                    </a>
                </div>
            </div>
        <?php else: ?>
            <div class="row">
                <div class="col-12">
                    <?php foreach ($bookings as $b): ?>
                        <div class="order-card">
                            <div class="order-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                                <div>
                                    <span class="badge bg-dark me-2">รหัสจอง #<?php echo str_pad($b['id'], 5, '0', STR_PAD_LEFT); ?></span>
                                    <span class="text-muted small">
                                        <i class="fa-regular fa-calendar me-1"></i> <?php echo date('d/m/Y H:i', strtotime($b['created_at'])); ?> น.
                                    </span>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <!-- สถานะสลิป -->
                                    <?php 
                                        $pay_status = $b['payment_status'];
                                        $pay_badge = 'badge-status-pending';
                                        $pay_label = 'รอตรวจสอบยอด';
                                        if ($pay_status === 'Approved') {
                                            $pay_badge = 'badge-status-approved';
                                            $pay_label = 'ชำระเงินเรียบร้อย';
                                        } elseif ($pay_status === 'Rejected') {
                                            $pay_badge = 'badge-status-rejected';
                                            $pay_label = 'สลิปไม่ถูกต้อง';
                                        }
                                    ?>
                                    <span class="badge <?php echo $pay_badge; ?> px-3 py-2 rounded-pill">
                                        <i class="fa-solid fa-receipt me-1"></i> <?php echo $pay_label; ?>
                                    </span>

                                    <!-- สถานะการจอง -->
                                    <?php 
                                        $ord_status = $b['status'];
                                        $ord_badge = 'badge-status-pending';
                                        $ord_label = 'รอดำเนินการ';
                                        if ($ord_status === 'Confirmed') {
                                            $ord_badge = 'badge-status-confirmed';
                                            $ord_label = 'ยืนยันออเดอร์แล้ว';
                                        } elseif ($ord_status === 'Cancelled') {
                                            $ord_badge = 'badge-status-cancelled';
                                            $ord_label = 'ยกเลิกรายการ';
                                        }
                                    ?>
                                    <span class="badge <?php echo $ord_badge; ?> px-3 py-2 rounded-pill">
                                        <i class="fa-solid fa-truck-fast me-1"></i> <?php echo $ord_label; ?>
                                    </span>
                                </div>
                            </div>

                            <div class="order-body">
                                <div class="row align-items-center g-3">
                                    <div class="col-auto">
                                        <?php if (!empty($b['product_image']) && file_exists($b['product_image'])): ?>
                                            <img src="<?php echo htmlspecialchars($b['product_image']); ?>" alt="product" class="product-thumb">
                                        <?php else: ?>
                                            <div class="product-thumb d-flex align-items-center justify-content-center text-muted">
                                                <i class="fa-regular fa-image fa-2x"></i>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    <div class="col">
                                        <h5 class="fw-bold mb-1"><?php echo htmlspecialchars($b['product_name'] ?? 'สินค้าที่ถูกลบ'); ?></h5>
                                        <div class="text-muted small mb-1">
                                            ตัวเลือก: <span class="badge bg-light text-dark border"><?php echo htmlspecialchars($b['variant_name'] ?? '-'); ?></span>
                                            &nbsp;|&nbsp; จำนวน: <strong><?php echo $b['quantity']; ?></strong> ชิ้น
                                        </div>
                                        <div class="text-muted small">
                                            <i class="fa-solid fa-user me-1"></i> ผู้รับ: <?php echo htmlspecialchars($b['customer_name']); ?> (<?php echo htmlspecialchars($b['customer_phone']); ?>)
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-auto text-md-end border-start-md">
                                        <div class="text-muted small">ยอดชำระรวม</div>
                                        <h4 class="text-danger fw-bold mb-0">฿<?php echo number_format($b['total_price'], 2); ?></h4>
                                        <span class="badge bg-secondary-subtle text-secondary small mt-1"><?php echo htmlspecialchars($b['payment_method']); ?></span>
                                    </div>
                                </div>

                                <!-- ส่วนพัสดุและสลิป -->
                                <hr class="my-3">
                                <div class="row align-items-center g-2" style="font-size: 0.9rem;">
                                    <div class="col-md-7">
                                        <span class="fw-semibold"><i class="fa-solid fa-truck text-danger me-1"></i> เลขติดตามพัสดุ (Tracking):</span>
                                        <?php if (!empty($b['tracking_number'])): ?>
                                            <span class="badge bg-primary fs-6 px-3 py-1 ms-1"><?php echo htmlspecialchars($b['tracking_number']); ?></span>
                                        <?php else: ?>
                                            <span class="text-muted ms-1">(ยังไม่มีเลขพัสดุ - อยู่ระหว่างจัดเตรียม/ผลิต)</span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="col-md-5 text-md-end">
                                        <?php if (!empty($b['slip_image_url']) && file_exists($b['slip_image_url'])): ?>
                                            <a href="<?php echo htmlspecialchars($b['slip_image_url']); ?>" target="_blank" class="btn btn-sm btn-outline-secondary">
                                                <i class="fa-solid fa-image me-1"></i> ดูสลิปที่แนบ
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>
    </div>

    <!-- Footer -->
    <footer class="bg-white border-top py-3 text-center mt-auto">
        <div class="container">
            <p class="text-muted small mb-0">&copy; 2026 REDSHOP Online Pre-order System. All rights reserved.</p>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
