<?php
include('header.php');

// Database query for events
$q = isset($_GET['q']) ? trim($_GET['q']) : '';
$from = isset($_GET['from']) ? trim($_GET['from']) : '';
$to = isset($_GET['to']) ? trim($_GET['to']) : '';

$where = " WHERE is_active = 1 ";

if ($q !== '') {
    $q_esc = mysqli_real_escape_string($con, $q);
    $where .= " AND event_name LIKE '%$q_esc%' ";
}

if ($from !== '' && preg_match('/^\d{4}-\d{2}-\d{2}$/', $from)) {
    $from_esc = mysqli_real_escape_string($con, $from);
    $where .= " AND event_date >= '$from_esc' ";
}

if ($to !== '' && preg_match('/^\d{4}-\d{2}-\d{2}$/', $to)) {
    $to_esc = mysqli_real_escape_string($con, $to);
    $where .= " AND event_date <= '$to_esc' ";
}

$order_by = " ORDER BY event_date DESC, id DESC ";
$query = "SELECT * FROM events $where $order_by";
$sel_event = mysqli_query($con, $query);
?>
<!-- Scroll Progress Bar -->
<div class="scroll-progress" id="scrollProgress"></div>

<!-- Hero Section -->
<section class="hero-section">
    <div class="container position-relative">
        <div class="row justify-content-center">
            <div class="col-lg-12 text-center">
                <h1 class="hero-title">Discover Upcoming Events</h1>
                <p class="hero-subtitle">Stay connected with the latest events, workshops, and gatherings from RCU Alumni Network</p>
                
                <!-- Search Box -->
                <div class="search-box">
                    <form method="get" action="" class="row g-2 g-md-3 align-items-end">
                        <div class="col-12 col-md-4">
                            <label class="form-label text-muted small mb-1 search-label">Search</label>
                            <input type="text" class="form-control search-input" placeholder="Search events by name..." name="q" value="<?php echo htmlspecialchars($q); ?>">
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label text-muted small mb-1 search-label">From Date</label>
                            <input type="date" class="form-control filter-select" name="from" value="<?php echo htmlspecialchars($from); ?>">
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label text-muted small mb-1 search-label">To Date</label>
                            <input type="date" class="form-control filter-select" name="to" value="<?php echo htmlspecialchars($to); ?>">
                        </div>
                        <div class="col-12 col-md-2">
                            <label class="form-label text-muted small mb-1">&nbsp;</label>
                            <button type="submit" class="search-btn w-100">
                                <i class="bi bi-search me-2"></i>Search
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Content -->
<main class="container py-5">
    <!-- Section Title -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-1">All Events</h2>
            <p class="text-muted mb-0">Browse and discover amazing events</p>
        </div>
        <a href="events.php" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-clockwise me-2"></i>Clear Filters
        </a>
    </div>

    <!-- Events Grid -->
    <div class="events-grid" id="eventsGrid">
        <?php
        if ($sel_event && mysqli_num_rows($sel_event) > 0) {
            $cardIndex = 0;
            while ($res_event = mysqli_fetch_assoc($sel_event)) {
                $cardIndex++;
                $id = (int)$res_event['id'];
                $event_name = htmlspecialchars($res_event['event_name'] ?? '');
                $event_date = $res_event['event_date'] ?? '';
                $event_photo = $res_event['event_photo'] ?? '';
                $event_description = htmlspecialchars($res_event['event_description'] ?? '');
                $event_location = htmlspecialchars($res_event['event_location'] ?? 'RCU Campus');
                $event_time = htmlspecialchars($res_event['event_time'] ?? '10:00 AM');
                
                $day = date('d', strtotime($event_date));
                $month = date('M', strtotime($event_date));
                $year = date('Y', strtotime($event_date));
                
                // Build share URL
                $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https://" : "http://";
                $host = $_SERVER['HTTP_HOST'];
                $event_link = $protocol . $host . '/event-details.php?id=' . $id;
                $whatsapp_text = rawurlencode($event_name . " - " . $event_link);
                $whatsapp_url = "https://api.whatsapp.com/send?text=" . $whatsapp_text;
                
                $staggerClass = 'stagger-' . (($cardIndex % 6) + 1);
        ?>
        <div class="event-card fade-in <?php echo $staggerClass; ?>" style="opacity: 0;">
            <div class="event-card-image">
                <img src="<?php echo 'adminweb/' . $event_photo; ?>" alt="<?php echo $event_name; ?>" loading="lazy">
                <div class="event-date-badge">
                    <div class="day"><?php echo $day; ?></div>
                    <div class="month"><?php echo $month; ?></div>
                    <div class="month"><?php echo $year; ?></div>
                </div>
            </div>
            <div class="event-card-body">
                <span class="event-category">Alumni Event</span>
                <h3 class="event-title">
                    <a href="event-details.php?id=<?php echo $id; ?>" class="text-decoration-none text-reset"><?php echo $event_name; ?></a>
                </h3>
                <?php /*
                <p class="event-description"><?php echo substr(strip_tags($event_description), 0, 100); ?>...</p>*/ ?>
                
                <div class="event-meta">
                    <div class="event-meta-item">
                        <i class="bi bi-calendar3 me-1"></i>
                        <?php echo date('M d, Y', strtotime($res_event['event_date'])); ?>
                    </div>
                </div>
            </div>
            <div class="event-card-footer">
                <a href="event-details.php?id=<?php echo $id; ?>" class="view-details-btn">
                    View Details
                    <i class="bi bi-arrow-right"></i>
                </a>
                <a href="<?php echo $whatsapp_url; ?>" target="_blank" class="share-btn" title="Share on WhatsApp">
                    <i class="bi bi-whatsapp"></i>
                </a>
            </div>
        </div>
        <?php
            }
        } else {
        ?>
        <!-- Empty State -->
         <style>
            .events-grid {
                display: block !important;
            }
         </style>
        <div class="col-12">
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="bi bi-calendar-event"></i>
                </div>
                <h3 class="empty-state-title">No Events Found</h3>
                <p class="empty-state-text">We couldn't find any events matching your criteria. Try adjusting your filters or search terms.</p>
                <a href="events.php" class="btn btn-primary mt-3">
                    <i class="bi bi-arrow-left me-2"></i>Browse All Events
                </a>
            </div>
        </div>
        <?php } ?>
    </div>
</main>

<!-- Toast Notification -->
<div class="toast-notification success" id="toast">
    <div class="toast-icon">
        <i class="bi bi-check-lg fs-5"></i>
    </div>
    <div>
        <h6 class="fw-bold mb-0">Success!</h6>
        <small class="text-muted">Link copied to clipboard</small>
    </div>
</div>

<?php include('footer.php'); ?>

<!-- Additional Scripts -->
<script>
    // ============================================
    // SCROLL PROGRESS BAR
    // ============================================
    window.addEventListener('scroll', function() {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrollPercentage = (scrollTop / scrollHeight) * 100;
        document.getElementById('scrollProgress').style.width = scrollPercentage + '%';
    });

    // ============================================
    // COPY TO CLIPBOARD
    // ============================================
    function copyToClipboard(text) {
        if (!text) return;
        
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showToast();
            });
        } else {
            // Fallback
            var ta = document.createElement('textarea');
            ta.value = text;
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            document.body.removeChild(ta);
            showToast();
        }
    }

    function showToast() {
        const toast = document.getElementById('toast');
        toast.classList.add('show');
        setTimeout(function() {
            toast.classList.remove('show');
        }, 3000);
    }

    // ============================================
    // INTERSECTION OBSERVER FOR ANIMATIONS
    // ============================================
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    document.querySelectorAll('.event-card').forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(30px)';
        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(card);
    });
</script>
</body>
</html>