<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Tab Upload and Display</title>

    <!-- Reveal.js CSS -->
    <link rel="stylesheet" href="https://unpkg.com/reveal.js/dist/reveal.css">
    <link rel="stylesheet" href="https://unpkg.com/reveal.js/dist/theme/white.css">

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        iframe, video {
            width: 140%;
            max-height: 100vh;
        }

        #slideshow {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 130%;
        }

        #slideshow img {
            max-width: 130%;
            max-height: 250vh;
            display: none;
        }

        #slideshow img.active {
            display: block;
        }

        input[type="text"] {
            font-size: 24px;
            width: 100%;
        }

        #digitalClock {
            font-size: 256px;
            color: #1b4f72;
            margin: -50px 0; /* Reduced margin to shift the clock up */
            width: 100%;
            text-align: center; /* Center the clock */
        }
        #digitalClock sup {
            font-size: 48px; /* Set font size for AM/PM superscript */
			font-weight: bold;
        }
        /* Style for the second column */
        .double-width {
            width: 40%; /* Double the width of the second column */
        }

        table {
            width: 100%;
            background-color: #F0F8FF;
            border: 2px solid black;
            font-size: 18pt;
            border-collapse: collapse;
            margin: auto;
        }

        th,
        td {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
        }

        th {
            color: black;
            font-size: 25px;
        }

        input::placeholder {
            font-size: 12px; /* Adjust the size as needed */
        }

        /* Fullscreen button style */
        #fullscreenButton {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            background-color: #1b4f72;
            color: white;
            border: none;
            border-radius: 5px;
            z-index: 1000; /* Ensure the button is above other elements */
        }

        /* Clear Data button style */
        #clearDataButton {
            position: absolute;
            bottom: -10%;
            left: 50%;
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 5px;
            z-index: 1000; /* Ensure the button is above other elements */
        }
    </style>
</head>

<body>

    <button id="fullscreenButton">Fullscreen</button>
    <div class="reveal">
        <div class="slides">
            <!-- Slide 1: Image Slideshow -->
            <section>
                <div id="slideshow">
                    <img src="S1.png" class="active" alt="Slide 1">
                    <img src="S2.png" alt="Slide 2">
                    <img src="S3.png" alt="Slide 3">
                    <img src="S4.png" alt="Slide 4">
                    <img src="S5.png" alt="Slide 5">
                    <img src="S6.png" alt="Slide 6">
                    <img src="S7.png" alt="Slide 7">
                    <img src="S8.png" alt="Slide 8">
                </div>
            </section>

            <!-- Slide 2: Pre-loaded Video -->
            <section>
                <video id="videoDisplay" controls>
                    <source src="FWA Pre-Exam Video - RUC.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </section>

            <!-- Slide 3: Countdown and Table -->
            <section>
                <button id="clearDataButton">Clear Data</button>

                <img src="logo.png" alt="HCTLOGO" style="width:40%; align-item: right">

                <div id="digitalClock">00:00:00<sup>AM</sup></div>

                <table border="1">
                    <thead>
                        <tr>
                            <th style="font-size: 22px; font-weight: bold; text-align: center;background-color: #a9cce3">Course Code</th>
                            <th class="double-width" style="font-size: 22px; font-weight: bold; text-align: center;background-color: #a9cce3">Course Title</th>
                            <th style="font-size: 22px; font-weight: bold; text-align: center;background-color: #a9cce3;color: blue">CRN</th>
                            <th style="font-size: 22px; font-weight: bold; text-align: center;background-color: #a9cce3">Start Time (AM/PM)</th>
                            <th style="font-size: 22px; font-weight: bold; text-align: center;background-color: #a9cce3">End Time (AM/PM)</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center; color: blue"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                        </tr>
                        <tr>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center; color: blue"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                        </tr>
                        <tr>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center; color: blue"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                        </tr>
                        <tr>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center; color: blue"></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                            <td><input type="text" style="font-size: 22px; font-weight: bold; text-align: center" ></td>
                        </tr>
                    </tbody>
                </table>
                <h1 style="color:red;font-weight: bold; font-size: 20px;position: absolute;left: 0%;bottom:-10%">FWA-AlDhafra Campuses: <input type="text" placeholder="Term" style="width:20%;font-size: 20px; font-weight: bold; text-align: center;color: red"></h1>
            </section>
        </div>
        <h1 style="color:#5499c7;font-weight: bold; font-size: 10px;">Designed by Dr. Fawaz Hrahsheh-HCT-MZY/ADH</h1>
    </div>

    <!-- Reveal.js JavaScript -->
    <script src="https://unpkg.com/reveal.js/dist/reveal.js"></script>
    <script>
        // Initialize Reveal.js
        Reveal.initialize();

        // Fullscreen functionality
        const fullscreenButton = document.getElementById('fullscreenButton');
        fullscreenButton.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => {
                    console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
                });
            } else {
                document.exitFullscreen();
            }
        });

        // Clear Data functionality
        const clearDataButton = document.getElementById('clearDataButton');
        clearDataButton.addEventListener('click', () => {
            inputs.forEach((input) => {
                input.value = ''; // Clear the input field
            });
            localStorage.clear(); // Clear all data from local storage
        });

        // Image Slideshow Logic
        const images = document.querySelectorAll("#slideshow img");
        let currentIndex = 0;

        function showNextImage() {
            images[currentIndex].classList.remove("active"); // Hide current image
            currentIndex = (currentIndex + 1) % images.length; // Move to next image (loop back if needed)
            images[currentIndex].classList.add("active"); // Show next image
        }

        setInterval(showNextImage, 10000); // Change image every 10 seconds

        // Digital Clock Logic
        function updateClock() {
            const now = new Date();
            let hours = now.getHours();
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const ampm = hours >= 12 ? 'PM' : 'AM'; // Determine AM/PM
            hours = hours % 12; // Convert to 12-hour format
            hours = hours ? String(hours).padStart(2, '0') : '12'; // Adjust for 12 AM/PM
            document.getElementById('digitalClock').innerHTML = `${hours}:${minutes}:${seconds}<sup>${ampm}</sup>`;
        }
        setInterval(updateClock, 1000);

        // Save input data to local storage
        const inputs = document.querySelectorAll('input[type="text"]');

        // Load saved data from local storage
        function loadSavedData() {
            inputs.forEach((input, index) => {
                const savedValue = localStorage.getItem(`input_${index}`);
                if (savedValue) {
                    input.value = savedValue;
                }
            });
        }

        // Save data on input change
        inputs.forEach((input, index) => {
            input.addEventListener('input', () => {
                localStorage.setItem(`input_${index}`, input.value);
            });
        });

        // Call load function on page load
        loadSavedData();

        // Save the active slide index
        Reveal.on('slidechanged', (event) => {
            localStorage.setItem('activeSlide', event.indexh);
        });

        // Load the active slide index on page load
        const activeSlide = localStorage.getItem('activeSlide');
        if (activeSlide !== null) {
            Reveal.slide(parseInt(activeSlide));
        }
    </script>

</body>

</html>