<!doctype html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no" name="viewport" />
    <link href="<?php echo get_template_directory_uri(); ?>/assets/images/logos/nan_bear_head.svg" rel="icon" type="image/png" />
    <?php
    // Start or resume the session
    session_start();
    wp_head();
    include(get_theme_file_path('/includes/front-end/menu_data.php'));
    require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));

    ?>
</head>

<body class="h-screen overflow-hidden bg-blue-500" <?php body_class(); ?>>
    <?php wp_body_open(); ?>

    <main class="h-screen overflow-hidden">


        <!-- Header -->
        <section id="header-nav" class="w-full absolute bg-blue-500 top-0 z-50 <?php if (!isset($_SESSION['splash_shown'])) {
                                                                                    echo 'out-of-view';
                                                                                } else echo 'in-view' ?>">
            <header class="flex items-center justify-between text-center px-4 py-2 space-x-2 lg:space-x-8 bg-blue-800">

                <!-- Header Logo -->
                <a class="relative z-50 flex items-center space-x-4" href="<?php echo get_site_url(); ?>">
                    <img width="50px" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/header__logo.png" alt="NAN Logo">
                    <h1 class="font-bold hidden lg:flex text-white text-2xl">NAN Student Handbook</h1>
                </a>

                <!-- Header Search  -->
                <div class="relative lg:w-2/4 flex items-center">
                    <div class="absolute left-4 h-full flex items-center w-1/12"><i class="text-black bi bi-search"></i></div>
                    <input class="pl-10 rounded-md bg-gray-300" type="text" placeholder="Search...">
                </div>

                <!-- Header Buttons -->
                <div class="text-white">
                    <button id="toggle-nav" class="toggle-menu"> <i></i> <i></i><i></i> </button>
                </div>

            </header>
        </section>

        <!-- Bottom Menu -->
        <section id="footer-nav" class="w-full text-white absolute bottom-0 z-50 text-center pt-4 pb-8 bg-blue-800 <?php if (!isset($_SESSION['splash_shown'])) {
                                                                                                                        echo 'out-of-view';
                                                                                                                    } else echo 'in-view' ?>">
            <ul class="lg:max-w-3xl mx-auto text-3xl grid grid-cols-6">

                <!-- Menu Icons Loop -->
                <?php foreach ($menuData as $page) { ?>

                    <li>
                        <a href="<?php echo get_site_url('/') . '/' . $page['slug'];  ?>">
                            <i class="<?php echo $page['bootstrap_icon'] ?> text-2xl" aria-hidden="true"></i>
                        </a>
                    </li>

                <?php } ?>

            </ul>
        </section>

        <!-- Slide Out Section -->
        <section id="slide-out-menu" class="fixed z-30 bg-blue-900 w-11/12 sm:w-3/5 lg:w-2/5 xl:w-4/12 2xl:w-3/12 h-full px-2">

            <div class="h-full space-y-8 overflow-x-hidden overflow-y-scroll no-scrollbar pt-24 pb-28">

                <!-- Option/Settings Icon -->
                <div class="text-white">
                    <div class="w-full px-4 flex justify-end"><button><i class="text-2xl bi bi-gear-fill"></i></button></div>
                </div>

                <!-- Menu Section -->
                <nav class="flex flex-1 flex-col">
                    <div class="flex flex-1 flex-col gap-y-7">

                        <!-- Primary Menu -->
                        <div>
                            <ul role="list" class="-mx-2 text-white space-y-2">

                                <!-- Menu Loop -->
                                <?php
                                $pages = get_pages_as_array();

                                foreach ($pages as $page) {

                                    $pageID = $page['page']->ID;
                                    $pageTitle = $page['page']->post_title;
                                    $pageSlug = $page['page']->post_name;
                                    $pageBG = $page['page']->post_name . '.png';
                                    $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);

                                ?>

                                    <li class="accordion">
                                        <div class="flex hover:bg-gray-800 px-2 rounded-md justify-between">
                                            <a href="<?php echo get_site_url() . '/' . $pageSlug;  ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                                                <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
                                                <p><?php echo $pageTitle ?></p>
                                            </a>

                                            <?php if ($page['subpages']) { ?>
                                                <button class="accordion-toggle">
                                                    <i class="fas fa-chevron-down items-center ml-auto rounded-md bg-gray-900 px-2.5 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
                                                    <i class="fas fa-times items-center ml-auto rounded-md bg-gray-900 px-3 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
                                                </button>
                                            <?php } ?>

                                        </div>
                                        <ul class="accordion-content space-y-2">
                                            <?php foreach ($page['subpages'] as $subpage) {

                                                $subpageID = $subpage->ID;
                                                $subpageTitle = $subpage->post_title;
                                                $subpageSlug = $subpage->post_name;
                                                $subpageBG = $subpage->post_name . '.png';
                                                $subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);

                                            ?>
                                                <li class="p-2">
                                                    <a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
                                                        <p><?php echo $subpageTitle ?></p>
                                                    </a>
                                                </li>

                                            <?php } ?>
                                        </ul>
                                    </li>

                                    <!-- Horizontal Rule -->
                                    <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>

                                <?php } ?>

                            </ul>
                        </div>

                    </div>
                </nav>

            </div>

        </section>

        <?php

        // Check if a flag is set in the session to indicate that the code has already run
        if (!isset($_SESSION['splash_shown'])) {

            $_SESSION['splash_shown'] = true; ?>


            <!-- Splash Screen Content-->
            <section id="splash-screen" class="absolute w-full bottom-0 flex flex-col h-screen items-center justify-center">

                <div class="space-y-8 px-4 text-white flex flex-col justify-center items-center">
                    <img class="w-56" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-white.png" alt="">
                    <h1 class="uppercase text-center font-bold text-xl">A student handbook for post secondary transitions</h1>
                    <button id="app-enter" class="bg-blue-800 shadow-sm shadow-gray-50 px-12 py-4 rounded-md"><i class="bi bi-box-arrow-in-right pr-4"></i>Enter</button>
                </div>

            </section>

        <?php } ?>