<?php
	session_start();
	include 'prijava/connect.php';
    setlocale(LC_TIME,"hr_HR");
?>
<!DOCTYPE html>
<head>
    <?php
        define('meta', TRUE);
        include 'inc/head.php';
        define('json', TRUE);
        include 'json.php';
    ?>
    <script src="js/menu-order.js"></script>
    <script src="js/delete-order.js"></script>
    <script src="js/modal.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <title>Menu - KrikStudio</title>
</head>
<body>
    <?php
        if(!isset($_SESSION['username'])) {
            echo '<script>';
            echo 'window.location.href="./login"';
            echo '</script>';
        }
        define('nav', TRUE);
        include 'inc/nav.php';
        $name = $_SESSION['name'];
        $days = ["A", "B", "C", "D", "E"];
    ?>

    <section class="menu">
        <div class="wrapper">
            <h2>MENU</h2>

            <div class="tab">
                <?php if(isset($decodedData[0]["date"])) { ?><button class="tablinks active" onclick="openCity(event, 'day1')"><?php echo $decodedData[0]["date"]; ?></button><?php } ?>
                <?php if(isset($decodedData[1]["date"])) { ?><button class="tablinks" onclick="openCity(event, 'day2')"><?php echo $decodedData[1]["date"]; ?></button><?php } ?>
                <?php if(isset($decodedData[2]["date"])) { ?><button class="tablinks" onclick="openCity(event, 'day3')"><?php echo $decodedData[2]["date"]; ?></button><?php } ?>
                <?php if(isset($decodedData[3]["date"])) { ?><button class="tablinks" onclick="openCity(event, 'day4')"><?php echo $decodedData[3]["date"]; ?></button><?php } ?>
                <?php if(isset($decodedData[4]["date"])) { ?><button class="tablinks" onclick="openCity(event, 'day5')"><?php echo $decodedData[4]["date"]; ?></button><?php } ?>
            </div>

            <?php  
                for ($i = 1; $i <= 5; $i++) { ?>
                    <div id="day<?php echo $i; ?>" class="tabcontent" <?php if($i==1) { echo 'style="display:block"'; } ?>>
                        <?php
                            $timestamp = strtotime($decodedData[$i-1]["date"]);
                            $timestamp = date('D', $timestamp);
                            if($timestamp == "Mon") {
                                echo "<h3>Ponedjeljak, ".$decodedData[$i-1]["date"]."</h3>";
                            } else if($timestamp == "Tue") {
                                echo "<h3>Utorak, ".$decodedData[$i-1]["date"]."</h3>";
                            } else if($timestamp == "Wed") {
                                echo "<h3>Srijeda, ".$decodedData[$i-1]["date"]."</h3>";
                            } else if($timestamp == "Thu") {
                                echo "<h3>Četvrtak, ".$decodedData[$i-1]["date"]."</h3>";
                            } else if($timestamp == "Fri") {
                                echo "<h3>Petak, ".$decodedData[$i-1]["date"]."</h3>";
                            }

                            $checkDay = strtotime($decodedData[$i-1]["date"]);
                            $checkDay = date("Y-m-d", $checkDay);
                        ?>
                        <div class="swiper menuSwiper">
                            <div class="swiper-wrapper">
                                <?php for ($j = 1; $j <= 5; $j++) { 
                                    $orderPicked = 0;
                                    $menu = $decodedData[$i-1]["foods"][$j-1]["menu"];
                                    $queryPicked = "SELECT * FROM orders WHERE user = '$name' AND date = '$checkDay' AND menu = '$menu'";
                                    $resultPicked = mysqli_query($dbc, $queryPicked);
                                    if(mysqli_num_rows($resultPicked) == 1) {
                                        $orderPicked = 1;
                                    } 
                                ?>
                                    <div class="swiper-slide">
                                        <div class="overlay"></div>
                                        <?php if($orderPicked == 1) {
                                            echo '<span>ODABRANO</i></span>';
                                        } ?>
                                        <img src="<?php echo $decodedData[$i-1]["foods"][$j-1]["image"]; ?>" loading="lazy" />
                                        <div class="menu-detail">
                                            <p><?php echo $decodedData[$i-1]["foods"][$j-1]["title"]; ?></p>
                                            <button class="open-modal" data-ipa="<?php echo $i-1; ?>" data-japa="<?php echo $j-1; ?>" data-name="<?php echo $name; ?>" data-day="<?php echo $checkDay; ?>" data-menu="<?php echo $decodedData[$j-1]["foods"][$j-1]["menu"]; ?>">ODABERI</button>
                                        </div>
                                    </div>
                                <?php } ?>
                                
                            </div>
                            <div class="swiper-scrollbar"></div>
                        </div>
                    </div>
                <?php }
            ?> 
        </div>
    </section>

    <div id="modal-overlay">
        <div id="my-modal" class="modal"></div>
    </div>

    <section class="next-orders">
        <div class="wrapper">
            <h2>BUDUĆE NARUDŽBE</h2>
            <div class="swiper nextSwiper">
                <div class="swiper-wrapper">
                    <?php for ($i = 1; $i <= 5; $i++) {
                        $checkDay = strtotime($decodedData[$i-1]["date"]);
                        $checkDay = date("Y-m-d", $checkDay);
                        $query = "SELECT * FROM orders WHERE user = '$name' AND date = '$checkDay'";
                        $result = mysqli_query($dbc, $query);
                        if(mysqli_num_rows($result) == 1) {
                            echo '<div class="swiper-slide">';
                            $timestamp = strtotime($decodedData[$i-1]["date"]);
                            $timestamp = date('D', $timestamp);
                            echo '<h3>'.$decodedData[$i-1]["date"].'</h3>';
                            if($timestamp == "Mon") {
                                echo "<h4>Ponedjeljak</h4>";
                            } else if($timestamp == "Tue") {
                                echo "<h4>Utorak</h4>";
                            } else if($timestamp == "Wed") {
                                echo "<h4>Srijeda</h4>";
                            } else if($timestamp == "Thu") {
                                echo "<h4>Četvrtak</h4>";
                            } else if($timestamp == "Fri") {
                                echo "<h4>Petak</h4>";
                            }
                            while($row = mysqli_fetch_array($result)) {
                                if($row['completed'] == 1) {
                                    echo '<button onclick="orderCompleted()"><i data-feather="x"></i></button>';
                                } else {
                                    echo '<button onclick="orderDelete('.$row['id'].')"><i data-feather="x"></i></button>';
                                }
                                echo '<p>MENU '.$row['menu'].'</p>';
                                if($row['menu'] == 'A') {
                                    $number = 0;
                                } else if($row['menu'] == 'B') {
                                    $number = 1;
                                } else if($row['menu'] == 'C') {
                                    $number = 2;
                                } else if($row['menu'] == 'D') {
                                    $number = 3;
                                } else if($row['menu'] == 'E') {
                                    $number = 4;
                                }
                                echo $decodedData[$i-1]["foods"][$number]["title"]; 
                            }
                            echo '</div>';              
                        }
                    } ?>
                </div>
            </div>
        </div>
    </section>

    <?php define('footer', TRUE);include 'inc/footer.php'; ?>

    <script>
        feather.replace();
        var swiper = new Swiper(".menuSwiper", {
            slidesPerView: 1,
            spaceBetween: 20,
            breakpoints: {
                "768": {
                    slidesPerView: 2,
                },
                "960": {
                    slidesPerView: 2,
                },
                "1040": {
                    slidesPerView: 3,
                },
                "1280": {
                    slidesPerView: 4,
                },
                "1440": {
                    slidesPerView: 5,
                },
            },
            scrollbar: {
                el: ".swiper-scrollbar",
                draggable: true,
            },
        });
        var swiper = new Swiper(".nextSwiper", {
            slidesPerView: 1.1,
            spaceBetween: 20,
            breakpoints: {
                "768": {
                    slidesPerView: 2,
                },
                "960": {
                    slidesPerView: 2,
                },
                "1040": {
                    slidesPerView: 3,
                },
                "1280": {
                    slidesPerView: 4,
                },
                "1440": {
                    slidesPerView: 5,
                },
            },
        });
        function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
        }
    </script>
</body>