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

$thirtyDaysAgo = date('Y-m-d', strtotime('-90 days'));
$db = getDB();
$stmt = $db->prepare('SELECT * FROM lake.events WHERE eventdate > ?');
$stmt->execute([$thirtyDaysAgo]);
$events = $stmt->fetchAll();

include __DIR__ . '/header.php';
?>
        <!-- Slider -->
        <section id="slider" class="slider-element dark swiper_wrapper slider-parallax min-vh-75">
            <div class="slider-inner">
                <div class="swiper-container swiper-parent">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide dark">
                            <div class="container">
                                <div class="slider-caption">
                                    <div>
                                        <h2 class="text-transform-none" data-animate="fadeInUp">Welcome to Lake Tamarack</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide-bg" style="background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.5)), url('/img/img_3623lake.jpg') no-repeat center center; background-size: cover;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="content">
            <div class="content-wrap py-0" style="overflow: visible">

                <svg viewBox="0 0 1382 58" width="100%" height="60" preserveAspectRatio="none" style="position: absolute; top: -58px; left:0; z-index: 1"><path style="fill:#FFF;" d="M1.52.62s802.13,127,1380,0v56H.51Z"></svg>

                <div class="section mt-3" style="background: #FFF">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-md-7 text-center">
                                <div class="heading-block border-bottom-0 mb-4">
                                    <h2 class="mb-4 text-transform-none">About Lake Tamarack</h2>
                                </div>
                                <div class="svg-line mb-4">
                                    <img src="demos/nonprofit/images/divider-1.svg" alt="svg divider" height="20">
                                </div>
                                <p>Lake Tamarack Association is a private lake community, located in the northwest corner of the state, in the front range of the Appalachian Mountains, at an elevation of 1,100 feet. The 34 acre lake is nestled in the heavily wooded highlands, bordering Newark Watershed Property. Lake Tamarack is located in the Stockholm section of Hardyston Township, in Sussex County, New Jersey..</p>
                            </div>
                        </div>
                    </div>
                </div>

<style type="text/css">
.fc-body { background:none; }
.fc-direction-ltr { min-height: 500px; }
</style>

<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: '<?= date('Y-m-d') ?>',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
<?php
$evCount = count($events);
foreach ($events as $i => $ev) {
    $title = addslashes(htmlspecialchars_decode($ev->eventname));
    $start = date('Y-m-d', strtotime($ev->eventdate));
    echo "      { title: '" . $title . "', url: 'eventinfo.php?id=" . (int)$ev->id . "', start: '" . $start . "' }";
    if ($i < $evCount - 1) echo ',';
    echo "\n";
}
?>
    ]
  });
  calendar.render();
});
</script>

                <div class="section m-0 p-0 row align-items-stretch" style="background-color: rgba(198,192,156, 0.15);">
                    <div class="col-lg-4 dark d-flex flex-column align-items-center text-center justify-content-center" style="background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.5)), url('/magic.png') center center repeat; background-size: cover; min-height: 300px;">
                        <h2 class="display-4 px-4 fw-bold mb-4 d-block">Lake Calendar</h2>
                    </div>
                    <div class="col-lg-8">
                        <div id='calendar'></div>
                    </div>
                </div>

<div class="mobile-only" style="max-width:80%;text-align:left;">
    <div class="heading-block border-bottom-0 mb-4">
        <h2 class="mb-4 text-transform-none">Upcoming Events</h2>
    </div>
    <div class="svg-line mb-4">
        <img src="demos/nonprofit/images/divider-1.svg" alt="svg divider" height="20">
    </div>
    <?php foreach ($events as $ev): ?>
        <li><a href="/eventinfo.php?id=<?= (int)$ev->id ?>"><?= htmlspecialchars($ev->eventname) ?></a> (<?= date('l n/j', strtotime($ev->eventdate)) ?>)</li><br>
    <?php endforeach; ?>
</div>

<style>
    @media (min-width: 768px) { .mobile-only { display: none; } }
</style>

                <p></p>
                <div class="container">
                    <div class="w-100 position-relative">
                        <img src="/img/killian_lake.jpg" alt="Lake Tamarack">
                    </div>
                </div>

            </div>
        </section><!-- #content end -->

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