wishlist.php

<?php
require_once 'includes/config.php';

$page_title = "Danh sách yêu thích - CONVOI VinTech";
include 'includes/header.php';
?>

<!-- VinTech Wishlist Page -->
<div class="vintech-wishlist-page">
    <div class="container">
        <!-- Page Header -->
        <div class="page-header text-center mb-5" data-animate="fadeInDown">
            <div class="vintech-section-badge">
                <i class="fas fa-heart me-2"></i>Danh sách yêu thích
            </div>
            <h1 class="page-title">Mục yêu thích của bạn</h1>
            <p class="page-subtitle">
                Quản lý các sự kiện và sản phẩm bạn quan tâm
            </p>
        </div>

        <!-- Wishlist Tabs -->
        <div class="wishlist-tabs" data-animate="fadeInUp">
            <div class="tab-buttons">
                <button class="tab-btn active" data-tab="events">
                    <i class="fas fa-calendar-alt"></i>
                    Sự kiện (<span id="events-count">0</span>)
                </button>
                <button class="tab-btn" data-tab="products">
                    <i class="fas fa-shopping-bag"></i>
                    Sản phẩm (<span id="products-count">0</span>)
                </button>
            </div>
        </div>

        <!-- Events Tab -->
        <div class="tab-content active" id="events-tab">
            <div class="wishlist-header">
                <h3>Sự kiện yêu thích</h3>
                <div class="wishlist-actions">
                    <button class="vintech-btn-enhanced vintech-btn-outline-enhanced" onclick="clearWishlist('events')">
                        <i class="fas fa-trash"></i> Xóa tất cả
                    </button>
                    <button class="vintech-btn-enhanced vintech-btn-primary-enhanced" onclick="shareWishlist('events')">
                        <i class="fas fa-share"></i> Chia sẻ
                    </button>
                </div>
            </div>
            
            <div class="wishlist-grid" id="events-wishlist">
                <!-- Events will be loaded here by JavaScript -->
            </div>
            
            <div class="empty-wishlist" id="events-empty" style="display: none;">
                <div class="empty-icon">
                    <i class="fas fa-heart-broken"></i>
                </div>
                <h4>Chưa có sự kiện yêu thích</h4>
                <p>Hãy thêm các sự kiện bạn quan tâm vào danh sách yêu thích</p>
                <a href="charity/" class="vintech-btn-enhanced vintech-btn-primary-enhanced">
                    <i class="fas fa-calendar-plus"></i> Khám phá sự kiện
                </a>
            </div>
        </div>

        <!-- Products Tab -->
        <div class="tab-content" id="products-tab">
            <div class="wishlist-header">
                <h3>Sản phẩm yêu thích</h3>
                <div class="wishlist-actions">
                    <button class="vintech-btn-enhanced vintech-btn-outline-enhanced" onclick="clearWishlist('products')">
                        <i class="fas fa-trash"></i> Xóa tất cả
                    </button>
                    <button class="vintech-btn-enhanced vintech-btn-primary-enhanced" onclick="addAllToCart()">
                        <i class="fas fa-shopping-cart"></i> Thêm tất cả vào giỏ
                    </button>
                </div>
            </div>
            
            <div class="wishlist-grid" id="products-wishlist">
                <!-- Products will be loaded here by JavaScript -->
            </div>
            
            <div class="empty-wishlist" id="products-empty" style="display: none;">
                <div class="empty-icon">
                    <i class="fas fa-heart-broken"></i>
                </div>
                <h4>Chưa có sản phẩm yêu thích</h4>
                <p>Hãy thêm các sản phẩm bạn quan tâm vào danh sách yêu thích</p>
                <a href="shop/" class="vintech-btn-enhanced vintech-btn-primary-enhanced">
                    <i class="fas fa-shopping-bag"></i> Khám phá sản phẩm
                </a>
            </div>
        </div>

        <!-- Recommendations -->
        <div class="recommendations-section mt-5" data-animate="fadeInUp">
            <h3 class="section-title text-center mb-4">Gợi ý cho bạn</h3>
            <div class="recommendations-grid">
                <!-- Recommendations will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Enhanced CSS for Wishlist -->
<style>
.vintech-wishlist-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.page-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--vintech-shadow-lg);
}

.page-title {
    color: var(--vintech-primary);
    font-weight: 700;
    margin: 1rem 0;
}

.page-subtitle {
    color: #6c757d;
    font-size: 1.1rem;
}

.wishlist-tabs {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: var(--vintech-shadow-md);
}

.tab-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.tab-btn {
    background: transparent;
    border: 2px solid var(--vintech-primary);
    color: var(--vintech-primary);
    padding: 1rem 2rem;
    border-radius: var(--vintech-radius-full);
    font-weight: 600;
    transition: all var(--vintech-transition-base);
    cursor: pointer;
}

.tab-btn.active,
.tab-btn:hover {
    background: var(--vintech-primary);
    color: white;
    transform: translateY(-2px);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.wishlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--vintech-shadow-md);
}

.wishlist-actions {
    display: flex;
    gap: 1rem;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.wishlist-item {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--vintech-shadow-md);
    transition: all var(--vintech-transition-base);
    position: relative;
}

.wishlist-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--vintech-shadow-xl);
}

.wishlist-item-image {
    width: 100%;
    height: 200px;
    border-radius: 0.75rem;
    object-fit: cover;
    margin-bottom: 1rem;
}

.wishlist-item-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--vintech-primary);
}

.wishlist-item-desc {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.wishlist-item-actions {
    display: flex;
    gap: 0.5rem;
}

.remove-wishlist {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--vintech-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--vintech-transition-base);
}

.remove-wishlist:hover {
    transform: scale(1.1);
}

.empty-wishlist {
    text-align: center;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    box-shadow: var(--vintech-shadow-md);
}

.empty-icon {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

.recommendations-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--vintech-shadow-md);
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

@media (max-width: 768px) {
    .tab-buttons {
        flex-direction: column;
    }
    
    .wishlist-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .wishlist-actions {
        justify-content: center;
    }
}
</style>

<!-- VinTech Enhanced JavaScript -->
<script src="assets/js/vintech-framework.js"></script>

<script>
class WishlistManager {
    constructor() {
        this.init();
    }
    
    init() {
        this.loadWishlist();
        this.initTabs();
        this.bindEvents();
    }
    
    initTabs() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                const tabId = btn.dataset.tab;
                
                // Update active states
                tabButtons.forEach(b => b.classList.remove('active'));
                tabContents.forEach(c => c.classList.remove('active'));
                
                btn.classList.add('active');
                document.getElementById(tabId + '-tab').classList.add('active');
            });
        });
    }
    
    loadWishlist() {
        const wishlist = JSON.parse(localStorage.getItem('vintech-wishlist') || '[]');
        
        // Separate events and products
        const events = wishlist.filter(id => id.startsWith('event-'));
        const products = wishlist.filter(id => id.startsWith('product-'));
        
        // Update counts
        document.getElementById('events-count').textContent = events.length;
        document.getElementById('products-count').textContent = products.length;
        
        // Load items
        this.loadWishlistItems('events', events);
        this.loadWishlistItems('products', products);
    }
    
    loadWishlistItems(type, items) {
        const container = document.getElementById(type + '-wishlist');
        const emptyState = document.getElementById(type + '-empty');
        
        if (items.length === 0) {
            container.style.display = 'none';
            emptyState.style.display = 'block';
            return;
        }
        
        container.style.display = 'grid';
        emptyState.style.display = 'none';
        
        // For demo purposes, create sample items
        container.innerHTML = items.map(id => this.createWishlistItem(type, id)).join('');
    }
    
    createWishlistItem(type, id) {
        const itemId = id.split('-')[1];
        const isEvent = type === 'events';
        
        return `
            <div class="wishlist-item" data-animate="fadeInUp">
                <button class="remove-wishlist" onclick="wishlistManager.removeItem('${id}')">
                    <i class="fas fa-times"></i>
                </button>
                <img src="assets/images/default-${isEvent ? 'event' : 'product'}.jpg" 
                     alt="Item ${itemId}" class="wishlist-item-image">
                <h5 class="wishlist-item-title">${isEvent ? 'Sự kiện' : 'Sản phẩm'} #${itemId}</h5>
                <p class="wishlist-item-desc">
                    ${isEvent ? 'Sự kiện thiện nguyện ý nghĩa' : 'Sản phẩm chất lượng cao'}
                </p>
                <div class="wishlist-item-actions">
                    <a href="${isEvent ? 'charity' : 'shop'}/detail.php?id=${itemId}" 
                       class="vintech-btn-enhanced vintech-btn-outline-enhanced flex-1">
                        <i class="fas fa-eye"></i> Xem chi tiết
                    </a>
                    ${!isEvent ? `
                    <button class="vintech-btn-enhanced vintech-btn-primary-enhanced" 
                            onclick="wishlistManager.addToCart('${itemId}')">
                        <i class="fas fa-cart-plus"></i>
                    </button>
                    ` : ''}
                </div>
            </div>
        `;
    }
    
    removeItem(itemId) {
        let wishlist = JSON.parse(localStorage.getItem('vintech-wishlist') || '[]');
        wishlist = wishlist.filter(id => id !== itemId);
        localStorage.setItem('vintech-wishlist', JSON.stringify(wishlist));
        
        if (window.VinTech) {
            VinTech.showToast('Đã xóa khỏi danh sách yêu thích', 'info');
        }
        
        this.loadWishlist();
    }
    
    addToCart(productId) {
        // Add to cart logic here
        if (window.VinTech) {
            VinTech.showToast('Đã thêm vào giỏ hàng', 'success');
        }
    }
    
    bindEvents() {
        // Bind other events as needed
    }
}

// Global functions
function clearWishlist(type) {
    if (confirm('Bạn có chắc muốn xóa tất cả?')) {
        let wishlist = JSON.parse(localStorage.getItem('vintech-wishlist') || '[]');
        const prefix = type === 'events' ? 'event-' : 'product-';
        wishlist = wishlist.filter(id => !id.startsWith(prefix));
        localStorage.setItem('vintech-wishlist', JSON.stringify(wishlist));
        
        if (window.VinTech) {
            VinTech.showToast('Đã xóa tất cả khỏi danh sách yêu thích', 'info');
        }
        
        wishlistManager.loadWishlist();
    }
}

function shareWishlist(type) {
    const url = window.location.href;
    const title = `Danh sách ${type === 'events' ? 'sự kiện' : 'sản phẩm'} yêu thích của tôi`;
    
    if (navigator.share) {
        navigator.share({ title, url });
    } else {
        navigator.clipboard.writeText(url);
        if (window.VinTech) {
            VinTech.showToast('Đã sao chép link chia sẻ', 'success');
        }
    }
}

function addAllToCart() {
    if (window.VinTech) {
        VinTech.showToast('Đã thêm tất cả sản phẩm vào giỏ hàng', 'success');
    }
}

// Initialize
let wishlistManager;
document.addEventListener('DOMContentLoaded', function() {
    wishlistManager = new WishlistManager();
});
</script>

<?php include 'includes/footer.php'; ?>