<?= $this->extend('App\Views\website\index') ?>
<?= $this->section('content') ?>
<section class="about-hero" style="background: linear-gradient(rgba(17, 26, 76, 0.8), rgba(17, 26, 76, 0.8)), 
url('<?= base_url(); ?>assets/images/Nalubaale-HPP-UEGCL.jpg') no-repeat;background-size: cover;background-position: top center;">
  <div class="container">
    <h2 data-aos="fade-up">Upcoming Events</h2>
    <nav class="breadcrumb" data-aos="fade-up">
        <a href="<?= base_url(); ?>">Home</a> &raquo; <span class="ms-2">UCOLD Events</span>
    </nav>
  </div>
</section>
<section class="events-area">
    <div class="container">
        <div class="row">
            <?php if($events):?>
                <?php foreach($events as $event):?>
                <?php
                    $formatted_start_date = date('jS, F Y', strtotime($event->start_date)); // Format for Date
                    $formatted_start_month = date('F', strtotime($event->start_date)); // Format for Month
                    $formatted_start_day = date('jS', strtotime($event->start_date)); // Format for Day
                    $formatted_start_time = date('g:i A', strtotime($event->start_date)); // Format for Time
                    
                    
                    $formatted_end_date = date('jS, F Y', strtotime($event->end_date)); // Format for Date
                    $formatted_end_month = date('F', strtotime($event->end_date)); // Format for Month
                    $formatted_end_year = date('Y', strtotime($event->end_date)); // Format for Year
                    $formatted_end_day = date('jS', strtotime($event->end_date)); // Format for Day
                    $formatted_end_time = date('g:i A', strtotime($event->end_date)); // Format for Time
                ?>
                <div class="col-md-4 mb-3">
                    <a href="<?= base_url('upcoming-events/single='.$event->alias);?>">
                    <div class="card shadow border-0" data-aos="fade-up">
                        <div class="card-image"><img src="<?= $event->photo; ?>" alt="<?= $event->event_name; ?>" class=" rounded-top">
                           <span class="event-badge"><?= $event->category_name; ?></span>
                        </div>
                        <div class="card-body">
                            <h3><?= $event->event_name;?></h3>
                            
                            <p class="meta"><i class="bi bi-calendar-check me-2"></i> 
                            <?= $formatted_start_day.' - '.$formatted_end_day.' '.$formatted_end_month.' '.$formatted_end_year; ?>
                            </p>
                            <p class="meta"><i class="bi bi-geo-alt-fill me-2"></i> <?= $event->event_location; ?></p>
                            <p class="py-2 excerpt">
                                <?= $event->event_theme; ?>
                            </p>
                            <a href="<?= base_url('upcoming-events/single='.$event->alias);?>">More information →</a>
                        </div>
                    </div><!-- card !-->
                    </a>
                </div><!-- col !-->
                <?php endforeach;?>
            
            <?php else:?>
            
            <div class="col-md-6 mx-auto py-md-5 align-self-center text-center">
                <h2 class="text-danger"><i class="bi bi-emoji-frown fs-2 text-dark"></i> <span class="d-none">NO EVENTS</span></h2>
                <p class="text-muted">There are no upcoming events scheduled at this time. Please check back later for updates to our event calendar. For any inquiries, please contact us</p>
            </div>
            
            <?php endif;?>
        </div>
    </div>
</section>





<?= $this->endSection() ?>