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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Battambang:wght@100;300;400;700;900&family=Bayon&family=Koulen&display=swap" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'Kh Ang Kampaeng Thmor';
            src: url('font/KhAngKampaengThmor.woff2') format('woff2'),
                url('font/KhAngKampaengThmor.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        body {
            text-align: center;
            color: white;
            font-size: 7vw;
            /* Scales with screen width */
            background: black;
            overflow: hidden;
        }

        /* #popup {
            position: fixed;
            top: 50%;
            left: 43%;
            width: 310px;
            height: 450px;
            justify-content: center;
            transform: translate(-50%, -50%);
            background: white;
            padding: 25px 40px;
            border-radius: 10px;
            display: none;
            color: black;
            font-size: 57px;
            font-family: "Battambang", serif;
            font-weight: 500;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        } */

        .banner {
            width: 100%;
            background-color: white;
            color: black;
            text-align: center;
            padding: 1vw 0;
            position: absolute;
            top: 0;
            left: 0;
            height: 10vh;
            font-size: 2vw;
            /* z-index: 1; */


        }

        .banner p {
            font-family: "Bayon", sans-serif;
            font-weight: 300;
            font-style: normal;
        }

        .banner img {
            max-height: 10vh;
            width: auto;
            float: left;
            margin-left: 2vw;
        }

        marquee {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-size: 3vw;
        }

        .video-container {
            position: absolute;
            top: 13vh;
            left: 0;
            right: 20vw;
            z-index: -1;
            /* Sends video to the background */
        }

        .video-container video {
            width: 100%;
            height: 85vh;
            /* Makes the video cover full height */
            object-fit: cover;
        }


        .hotline {
            width: 100%;
            height: 5vh;
            background-color: white;
            color: black;
            padding: 1vw 0;
            font-size: 1.5vw;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            /* z-index: 2; */
        }

        .hotline p {
            font-family: "Bayon", sans-serif;
            color: black;
            font-size: 2vw;
            font-weight: 500;
            margin-right: 270px;

            /* You may adjust this value based on the layout */
        }

        .history-container {
            position: fixed;
            /* top: 13.5vh; */
            /* bottom: 8.5vh; */
            top: 0;
            bottom: 22px;
            right: 0;
            width: 20vw;
            background-color: #fff;
            padding: 1vw;
            overflow-y: hidden;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
            z-index: 1;
        }


        .history-item {
            color: white; 
            font-size: 5vw;
            padding: 2vw;
            text-align: center;
            font-family: 'Kh Ang Kampaeng Thmor';
            margin-top: 2px;
            border-radius: 25px;
            /* background-color: #68c170; */
            background-color: #3e6545;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            color: #ffc107;
        }

        .status {
            font-size: 1.5vw;
            color: red;
            margin-top: 5px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            body {
                font-size: 5vw;
            }

            #popup {
                justify-content: center;
                height: auto;
                width: 50vw;
                font-size: 7vw;
                padding: 5vw;
                position: fixed;
                /* Use fixed position */
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                z-index: 2;
            }

            .banner {
                height: auto;
                font-size: 4vw;
            }

            .banner img {
                width: 20vw;
                height: auto;
            }

            .hotline {
                height: auto;
                font-size: 3vw;
            }

            .hotline p {
                font-size: 2.5vw;
                word-wrap: break-word;
                /* Correctly specify the property */
                overflow-wrap: break-word;
            }

            .history-container {
                width: 40%;
                position: fixed;
                /* top: 11.5vh; */
                /* bottom: 5vh; */
                top: 0;
                bottom: 0;
                font-size: 3vw;
            }

            .video-container {
                position: absolute;
                top: 10vh;
                left: 0;
            }

            .video-container video {
                width: 100%;
                height: 100vh;
            }

            .history-item {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 4vw;
            }

            #popup {
                font-size: 6vw;
                height: auto;
                width: 60vw;
                padding: 5vw;
                position: fixed;
                /* Use fixed position */
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                z-index: 2;
            }

            .hotline {
                font-size: 3vw;
                word-wrap: break-word;
                overflow-wrap: break-word;


            }

            .history-container {
                width: 40%;
                position: fixed;
                top: 0;
                bottom: 0;
                font-size: 4vw;
                right: 0;
                /* z-index: -1; */
            }

            .video-container {
                position: absolute;
                top: 10vh;
                left: 0;
                right: 0;
            }

            .video-container video {
                width: 100%;
                height: 100vh;
            }

        }
    </style>
    <script>
        let audioCache = {};


        // function preloadAudio(number) {
        //     const audio = new Audio('Sound/' + number + '.wav'); // Ensure correct file path
        //     audioCache[number] = audio;
        // }

        function playSound(number) {
            if (audioCache[number]) {
                audioCache[number].currentTime = 0;
                audioCache[number].play().catch(error => {
                    console.error("Playback failed:", error);
                });
            } else {
                console.error("Audio not preloaded:", number);
            }
        }

        function fetchNumber() {
            fetch('fetch.php')
                .then(response => response.text())
                .then(number => {
                    number = number.trim();
                    if (number !== '') {
                        // let popup = document.getElementById('popup');
                        // popup.innerHTML = 'លេខ<br><b>' + number + '</b><br>សូមយកអាហាររបស់អ្នក';
                        // popup.style.display = 'block';

                        // setTimeout(() => {
                        //     popup.style.display = 'none';
                        // }, 13000);

                        playSound(number);

                        fetch('history.php')
                            .then(response => response.json())
                            .then(data => {
                                let historyContainer = document.getElementById('historyContainer');

                                if (historyContainer.children.length > 0) {
                                    let previousNumber = historyContainer.children[0];
                                    let servedStatus = document.createElement('div');
                                    previousNumber.appendChild(servedStatus);
                                }

                                let div = document.createElement('div');
                                div.className = 'history-item';
                                div.innerText = number;

                                let nowServingStatus = document.createElement('div');
                                div.appendChild(nowServingStatus);

                                historyContainer.insertBefore(div, historyContainer.firstChild);
                            });
                    }
                });
        }

        function enableAudioPlayback() {
            for (let i = 0; i <= 99; i++) {
                preloadAudio(i);
            }
            document.removeEventListener('click', enableAudioPlayback);
        }

        document.addEventListener('click', enableAudioPlayback);
        setInterval(fetchNumber, 5000);

        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && document.fullscreenElement) {
                document.exitFullscreen();
            }
        });

        document.addEventListener('dblclick', toggleFullScreen);
    </script>






</head>

<body>

    <div class="video-container">
        <video autoplay loop muted>
            <source src="./videos//background.mp4" type="video/mp4">
        </video>
    </div>

    <div id="popup"></div>


    <div class="banner">
        <img src="./img/amazon.png" alt="Amazon Logo">
        <marquee behavior="" direction="left">
            <p>សូមស្វាគមន៍ មកកាន់ កាហ្វេអាម៉ាហ្សូន ខនសិបស្តរ សាខា ទួលគោក! សូមស្វាគមន៍ មកកាន់ កាហ្វេអាម៉ាហ្សូន ខនសិបស្តរ សាខា ទួលគោក!</p>
        </marquee>
    </div>

    <div class="hotline">
        <p>សូមអរគុណ ដែលបានអញ្ចើញមក​ កាហ្វេអាម៉ាហ្សូន ខនសិបស្តរ!</p>

    </div>

    <div class="history-container" id="historyContainer"></div>

</body>

</html>