<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order History</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="logo.webp" type="image/x-icon">
    <style>
        .order-card {
            margin-bottom: 20px;
        }
        .order-item {
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
        .order-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
        }
        .disabled-card {
            opacity: 0.5;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <h2 class="mb-4">Order History</h2>
        <div id="ordersList">
            <!-- Orders will be displayed here -->
        </div>
    </div>

    <!-- Firebase Scripts -->
    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>

    <script>
        // Initialize Firebase with your config
        const firebaseConfig = {
            apiKey: "AIzaSyB4BNpLQK0RHUmklOMh2HiNMzwFP5uDE5s",
            authDomain: "hosteller-efdb5.firebaseapp.com",
            databaseURL: "https://hosteller-efdb5-default-rtdb.firebaseio.com",
            projectId: "hosteller-efdb5",
            storageBucket: "hosteller-efdb5.firebasestorage.app",
            messagingSenderId: "250843951769",
            appId: "1:250843951769:web:01f0d52d2b1724816cbe08"
        };

        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Check if user is logged in
            firebase.auth().onAuthStateChanged(function(user) {
                if (user) {
                    displayOrders(user.email);
                } else {
                    window.location.href = 'index.html'; // Redirect if not logged in
                }
            });
        });

        function displayOrders(userEmail) {
            // Get orders from localStorage
            const orders = JSON.parse(localStorage.getItem('orders') || '[]');
            const ordersContainer = document.getElementById('ordersList');
            
            // Filter orders for current user
            const userOrders = orders.filter(order => order.userEmail === userEmail);

            if (userOrders.length === 0) {
                ordersContainer.innerHTML = '<div class="alert alert-info">No orders found.</div>';
                return;
            }

            // Clear previous orders
            ordersContainer.innerHTML = '';

            // Sort orders by date (most recent first)
            userOrders.sort((a, b) => new Date(b.orderDate) - new Date(a.orderDate));

            userOrders.forEach(order => {
                const orderDate = new Date(order.orderDate).toLocaleDateString();
                const orderCard = `
                    <div class="card order-card" id="order-${orderDate.replace(/[^0-9]/g, '')}">
                        <div class="card-header">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <strong>Order Date:</strong> ${orderDate}
                                </div>
                                <div class="d-flex align-items-center">
                                    <strong class="me-3">Total: ₹${order.totalPrice}</strong>
                                    <button class="btn btn-danger btn-sm" onclick="deleteOrder('${order.orderDate}', this)">
                                        <i class='bx bx-trash'></i> Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <strong>Shipping Details:</strong><br>
                                Name: ${order.userName}<br>
                                Phone: ${order.userPhone}<br>
                                Room No: ${order.shippingAddress}
                            </div>
                            <div class="order-items">
                                ${order.items.map(item => `
                                    <div class="order-item d-flex align-items-center">
                                        <img src="${item.image}" alt="${item.title}" class="order-image me-3">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0">${item.title}</h6>
                                            <small class="text-muted">
                                                ₹${item.price} × ${item.quantity}
                                            </small>
                                        </div>
                                        <div class="text-end">
                                            <strong>₹${(item.price * item.quantity).toFixed(2)}</strong>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `;
                ordersContainer.innerHTML += orderCard;
            });
        }

        function deleteOrder(orderDate, buttonElement) {
            if (confirm('Are you sure you want to delete this order?')) {
                try {
                    // Get the order card element
                    const orderCard = buttonElement.closest('.card');
                    
                    // Disable the card visually
                    orderCard.classList.add('disabled-card');
                    
                    // Disable the delete button
                    buttonElement.disabled = true;

                    // Get current user's email
                    const userEmail = firebase.auth().currentUser.email;
                    
                    // Get all orders from localStorage
                    let orders = JSON.parse(localStorage.getItem('orders') || '[]');
                    
                    // Find the index of the order to delete
                    const orderIndex = orders.findIndex(order => 
                        order.userEmail === userEmail && 
                        order.orderDate === orderDate
                    );

                    if (orderIndex !== -1) {
                        // Remove the order
                        orders.splice(orderIndex, 1);
                        
                        // Save updated orders back to localStorage
                        localStorage.setItem('orders', JSON.stringify(orders));
                        
                        // Add fade out animation
                        setTimeout(() => {
                            orderCard.style.transition = 'all 0.5s ease';
                            orderCard.style.opacity = '0';
                            orderCard.style.height = '0';
                            orderCard.style.margin = '0';
                            orderCard.style.padding = '0';
                            
                            // Remove the element after animation
                            setTimeout(() => {
                                orderCard.remove();
                                // Check if there are no more orders
                                if (document.querySelectorAll('.order-card').length === 0) {
                                    document.getElementById('ordersList').innerHTML = 
                                        '<div class="alert alert-info">No orders found.</div>';
                                }
                            }, 500);
                        }, 100);
                    }
                } catch (error) {
                    console.error('Error deleting order:', error);
                    alert('Error deleting order. Please try again.');
                    // Remove disabled state if there's an error
                    orderCard.classList.remove('disabled-card');
                    buttonElement.disabled = false;
                }
            }
        }
    </script>
</body>
</html>
