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

/**
 * Expected GET params:
 *  - q       => search query (title)
 *  - from    => start date (YYYY-MM-DD)
 *  - to      => end date (YYYY-MM-DD)
 *
 * Notes:
 *  - This uses mysqli and simple escaping via mysqli_real_escape_string.
 *  - If you want prepared statements, you can easily convert.
 */

// helper to safely output
function e($str) {
    return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

$q = isset($_GET['q']) ? trim($_GET['q']) : '';
$from = isset($_GET['from']) ? trim($_GET['from']) : '';
$to = isset($_GET['to']) ? trim($_GET['to']) : '';

// build SQL with basic validation/escaping
$where = " WHERE is_active = 1 ";
$params = [];

if ($q !== '') {
    $q_esc = mysqli_real_escape_string($con, $q);
    // search in event_name (case-insensitive)
    $where .= " AND event_name LIKE '%$q_esc%' ";
}

if ($from !== '') {
    // basic date format check (YYYY-MM-DD)
    if (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 !== '') {
    if (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 ";

// final query
$query = "SELECT * FROM events $where $order_by";
$sel_event = mysqli_query($con, $query);
?>
<style>
    .stretched-link::after {
        position: unset !important;
    }
</style>
<section class="mt-20 mb-50">
    <div class="container">
        <!-- Filter + Search row -->
        <div class="row mb-4 align-items-end">
            <div class="col-md-8">
                <form class="row g-2" method="get" action="">
                    <div class="col-md-5">
                        <label class="form-label" for="q">Search by title</label>
                        <input id="q" name="q" type="text" class="form-control" placeholder="Event title..." value="<?php echo e($q); ?>">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="from">From</label>
                        <input id="from" name="from" type="date" class="form-control" value="<?php echo e($from); ?>">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="to">To</label>
                        <input id="to" name="to" type="date" class="form-control" value="<?php echo e($to); ?>">
                    </div>
                    <div class="col-md-1 d-grid">
                        <label style="width: 100%;">&nbsp;</label>
                        <button type="submit" class="btn btn-primary">Go</button>
                    </div>
                </form>
            </div>
            <div class="col-md-4 text-md-end mt-2 mt-md-0">
                <a href="<?php echo basename($_SERVER['PHP_SELF']); ?>" class="btn btn-outline-secondary">Clear</a>
            </div>
        </div>

        <!-- Events grid -->
        <div class="row" id="events-grid">
            <?php
            if ($sel_event && mysqli_num_rows($sel_event) > 0) {
                while ($res_event = mysqli_fetch_assoc($sel_event)) {
                    // prepare variables safely
                    $id = (int)$res_event['id'];
                    $event_name = $res_event['event_name'] ?? '';
                    $event_date = $res_event['event_date'] ?? '';
                    $event_photo = $res_event['event_photo'] ?? '';
                    $details_url = "event-details.php?id=" . $id;

                    // Build absolute or relative full URL for sharing. Adjust site root if needed.
                    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https://" : "http://";
                    $host = $_SERVER['HTTP_HOST'];
                    $request_path = dirname($_SERVER['REQUEST_URI']);
                    // Make absolute URL to event details (you can change to use your site's canonical base)
                    $event_link = $protocol . $host . '/' . ltrim($details_url, '/');
            ?>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 shadow-sm">
                    <?php if ($event_photo): ?>
                        <a href="<?php echo e($details_url); ?>" class="d-block card-img-top overflow-hidden" style="height:220px;">
                            <img
                                src="<?php echo e('adminweb/' . $event_photo); ?>"
                                alt="<?php echo e($event_name); ?>"
                                loading="lazy"
                                class="img-fluid w-100 h-100 object-fit-cover lazy-img"
                                style="display:block;"
                            >
                        </a>
                    <?php endif; ?>
                    <div class="card-body d-flex flex-column">
                        <small class="text-muted mb-2"><?php echo e(date('d M Y', strtotime($event_date))); ?></small>
                        <h5 class="card-title mb-2"><a href="<?php echo e($details_url); ?>" class="stretched-link text-dark text-decoration-none"><?php echo e($event_name); ?></a></h5>
                        <?php /*
                        <p class="card-text text-truncate" style="max-height:3.6em;">
                            <?php
                                if (!empty($res_event['short_description'])) {
                                    echo e(substr($res_event['short_description'], 0, 150));
                                }
                            ?>
                        </p> */ ?>

                        <div class="mt-auto d-flex justify-content-between align-items-center pt-2">
                            <a href="<?php echo e($details_url); ?>" class="btn btn-sm btn-outline-primary">Read more</a>
                            
                            <?php
                                $whatsapp_text = rawurlencode($event_name . " - " . $event_link);
                                $whatsapp_url = "https://api.whatsapp.com/send?text=" . $whatsapp_text;
                            ?>
                            <div class="btn-group" role="group" aria-label="share">
                                <a href="<?php echo e($whatsapp_url); ?>" target="_blank" rel="noopener" class="btn btn-success btn-sm" title="Share on WhatsApp">
                                    <i class="fab fa-whatsapp"></i> Share
                                </a>

                                <!-- Copy link button -->
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard('<?php echo e($event_link); ?>')" title="Copy link">
                                    <i class="far fa-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php
                } // end while
            } else {
            ?>
            <div class="col-12">
                <div class="alert alert-info mb-0">No events found for selected filters.</div>
            </div>
            <?php } // end if ?>
        </div>
    </div>

    <!-- small hidden spam links removed. If you need SEO links, add them legitimately in footer/meta -->
</section>

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

<!-- Scripts: lazyload fallback and copy-to-clipboard -->
<script>
    // copyToClipboard for the "Copy link" button
    function copyToClipboard(text) {
        if (!text) return;
        // fallback handling
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                alert('Link copied to clipboard');
            }, function() {
                fallbackCopy(text);
            });
        } else {
            fallbackCopy(text);
        }

        function fallbackCopy(t) {
            var ta = document.createElement('textarea');
            ta.value = t;
            document.body.appendChild(ta);
            ta.select();
            try {
                document.execCommand('copy');
                alert('Link copied to clipboard');
            } catch (err) {
                prompt('Copy this link:', t);
            }
            document.body.removeChild(ta);
        }
    }

    // IntersectionObserver lazy-load fallback for browsers that don't support loading="lazy" or for progressive enhancement
    (function() {
        var lazyImages = [].slice.call(document.querySelectorAll('img.lazy-img'));

        if ('loading' in HTMLImageElement.prototype) {
            // Browser supports native lazy loading; nothing more required.
            return;
        }

        if ('IntersectionObserver' in window) {
            var io = new IntersectionObserver(function(entries, obs) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        var img = entry.target;
                        // If you used data-src pattern, swap here. We used src directly so nothing to do except unobserve.
                        img.classList.remove('lazy-img');
                        obs.unobserve(img);
                    }
                });
            }, {
                rootMargin: '200px 0px' // pre-load before visible
            });

            lazyImages.forEach(function(img) {
                io.observe(img);
            });
        } else {
            // Last fallback: just load all images (they already have src)
            lazyImages.forEach(function(img) {
                img.classList.remove('lazy-img');
            });
        }
    })();
</script>

<!-- Optional: small styles to keep card image cover behaviour -->
<style>
    .object-fit-cover {
        object-fit: cover;
    }
    /* small responsive fix for card text truncation */
    @media (max-width: 576px) {
        .card .card-text { display: none; }
    }
</style>