<?php 


session_start();
// if don't have session user..then
if(!isset($_SESSION["staname"])){
    die("<script>alert('Please login first!');
    window.location.href='login.html';
    </script>");

    session_write_close();
}


//shop.php
include("conn.php");
$message = '';

if(isset($_POST["add_to_cart"]))
{   
    //check for buyamount to stock availability
    $buyamount = $_POST['quantity'];
    $stock = $_POST['hidden_stock'];

    if($buyamount > $stock)
    {
        die("<script>alert('Not enough stock');
            window.history.go(-1);
            </script>");
    }

    if(isset($_COOKIE["shopping_cart"]))
    {
        $cookie_data = stripslashes($_COOKIE['shopping_cart']);

        $cart_data = json_decode($cookie_data, true);
    }
    else
    {
        $cart_data = array();
    }

    $item_id_list = array_column($cart_data, 'item_id');

    if(in_array($_POST["hidden_id"], $item_id_list))
    {
        foreach($cart_data as $keys => $values)
        {
            if($cart_data[$keys]["item_id"] == $_POST["hidden_id"])
            {
                $cart_data[$keys]["item_quantity"] = $cart_data[$keys]["item_quantity"] + $_POST["quantity"];
            }
        }
    }
    else
    {
        $item_array = array(
        'item_id'   => $_POST["hidden_id"],
        'item_name'   => $_POST["hidden_name"],
        'item_price'  => $_POST["hidden_price"],
        'item_quantity'  => $_POST["quantity"]
        );
        $cart_data[] = $item_array;
    }

    
    $item_data = json_encode($cart_data);
    setcookie('shopping_cart', $item_data, time() + (86400 * 30));
    header("location:pos.php?success=1");
}

if(isset($_GET["action"]))
{
    if($_GET["action"] == "delete")
    {
        $cookie_data = stripslashes($_COOKIE['shopping_cart']);
        $cart_data = json_decode($cookie_data, true);
        foreach($cart_data as $keys => $values)
        {
            if($cart_data[$keys]['item_id'] == $_GET["id"])
            {
                unset($cart_data[$keys]);
                $item_data = json_encode($cart_data);
                setcookie("shopping_cart", $item_data, time() + (86400 * 30));
                header("location:pos.php?remove=1");
            }
        }
    }
    if($_GET["action"] == "clear")
    {
        setcookie("shopping_cart", "", time() - 3600);
        header("location:pos.php?clearall=1");
    }
}

if(isset($_GET["success"]))
{
    $message = '
    <div class="alert alert-success alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        Item Added
    </div>
    ';
}

if(isset($_GET["remove"]))
{
    $message = '
    <div class="alert alert-success alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    Item removed
    </div>
    ';
}

if(isset($_GET["clearall"]))
{
    $message = '
    <div class="alert alert-success alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    Cleared
    </div>
    ';
}
?>

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        

        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="shopStyle.css">
        <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet">

        <title>Supreme Sports Store</title>

        <style>
        .button{
            background-color: Red; 
            float:right;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;

        }
        #btnScrollToTop{
            position:fixed;
            right: 20px;
            bottom: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #e62739;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
            color: #ffffff;
            border: none;
            outline: none;
            cursor: pointer;
            z-index: 99;
        }
        #btnScrollToTop:active{
            background: #cc2333;
        }
        .curved{
            background:linear-gradient( rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)),url(images/shop_svg.jpg);
            background-size: cover;
            background-attachment: fixed;
            color:white !important;
            text-align: center;
        }
        .curved h1{
            padding-top: 70px;
            font-family: 'Teko', sans-serif;
            font-size: 55px;
        }
        .curved svg{
            display: block;
            margin-top: -200px;
        }
        html{
            scroll-behavior: smooth;
        }
        @media only screen and (min-width: 1101px) and (max-width: 1320px) {
            .productborder{
                margin-left: 65px;
            }
        }
        @media only screen and (min-width: 888px) and (max-width: 1100px) {
            .curved h1{
                padding-top: 60px;
                font-family: 'Teko', sans-serif;
                font-size: 55px;
            }
            .curved svg{
                display: block;
                margin-top: -150px;
            }
            .productborder{
                margin-left: 45px;
            }
        }
        @media only screen and (min-width: 670px) and (max-width: 887px) {
            .curved h1{
                padding-top: 45px;
                font-family: 'Teko', sans-serif;
                font-size: 45px;
            }
            .curved svg{
                display: block;
                margin-top: -100px;
            }
            .productborder{
                margin-left: 35px;
            }
        }
        @media only screen and (max-width: 669px) {
            .curved h1{
                padding-top: 35px;
                font-family: 'Teko', sans-serif;
                font-size: 40px;
            }
            .curved svg{
                display: block;
                margin-top: -50px;
            }
        }
        @media only screen and (min-width: 576px) and (max-width: 669px) {
            .productborder{
                margin-left: 15px;
            }
        }
        @media only screen and (max-width: 575px) {
            .productborder{
                margin-left: 0px;
            }
        }
        </style>
    </head>


<body>
<!--Pull back to top button-->
        <button onclick="topFunction()" id="btnScrollToTop">
            <i class="material-icons">arrow_upward</i>
        </button>

<button class="button" onclick="window.location.href = 'staff_page.php';">Back</button>
        <!--categories filter-->
        <h5> Categories: </h5>
        <!--  form for the Filter function -->
        <form action="pos.php" method="GET">
            <ul class="list-group list-group-horizontal-md">
                <li class="list-group-item list-group-item-success">
                    <label for="Badminton">
                        <input type="radio" id="Badminton" name="sports"  value="Badminton">
                        Badminton
                    </label>
                </li>
                <li class="list-group-item list-group-item-success">
                    <label for="Volleyball">
                        <input type="radio" id="Volleyball" name="sports" value="Volleyball">
                        Volleyball
                    </label>
                </li>
                <li class="list-group-item list-group-item-success">
                    <label for="Squash">
                        <input type="radio" id="Squash" name="sports" value="Squash">
                        Squash
                    </label>
                </li>
                <li class="list-group-item list-group-item-success">
                    <label for="Futsal">
                        <input type="radio" id="Futsal" name="sports" value="Futsal">
                        Futsal
                    </label>
                </li>
                
                <input type="reset" value="Clear" class="btn btn-outline-dark btn-md">
                <input type="submit" value="Filter" class="btn btn-outline-success btn-md">
            </ul>
            <p style="color:red;">*** Untick all and click Filter to show all products again</p>
            

        </form>

    <br />
    <h3 align="center" style="font-family: 'Acme', sans-serif;color:black;">Sport Accesories</h3><br />
    

    
    <?php

    if(!isset($_GET["sports"])){
        $sql = "SELECT * FROM item ORDER BY Item_Name ASC";
        $result = mysqli_query($conn, $sql);
    }
    else{
        $sql = "SELECT * FROM item WHERE Item_Category='".$_GET["sports"]."' ORDER BY Item_Name ASC";
        $result = mysqli_query($conn, $sql);
    }
    if(mysqli_num_rows($result) > 0)  
    {
        while($row = mysqli_fetch_array($result))
        {
    ?>
    
    
    <div class="col-sm-5 col-md-3 productborder" align="center" >
        <form method="post">
            <div class="products">
                <img src="<?php echo $row["Item_Image"]; ?>" class="img-fluid"/><br />

                <h5 class="text-info"><?php echo $row["Item_Name"]; ?></h5>

                <h5 class="text-danger">RM <?php echo $row["Item_Price"]; ?></h5>
                <p>Stock : <?php echo $row["Item_Stock"]; ?></p>

                <input type="text" name="quantity" value="1" class="form-control" />
                <input type="hidden" name="hidden_name" value="<?php echo $row["Item_Name"]; ?>" />
                <input type="hidden" name="hidden_price" value="<?php echo $row["Item_Price"]; ?>" />
                <input type="hidden" name="hidden_stock" value="<?php echo $row["Item_Stock"]; ?>" />
                <input type="hidden" name="hidden_id" value="<?php echo $row["Item_ID"]; ?>" />
                <input type="submit" name="add_to_cart" class="btn btn-success" value="Add" />
            </div>
        </form>
    </div>


    <?php
        }
    }
    ?>
   
   
        <div style="clear:both"></div>
        <br />
        <h4>Order Details</h4>
        <div class="table-responsive">
        <?php echo $message; ?>
        <div align="right">
            <a href="pos.php?action=clear" style="text-decoration:none;"><b>Clear Cart</b></a>
        </div>
        <table class="table table-bordered">
            <tr class="thead-dark">
            <th width="40%">Item Name</th>
            <th width="10%">Quantity</th>
            <th width="20%">Price</th>
            <th width="15%">Total</th>
            <th width="5%">Action</th>
            </tr>
        <?php


        if(isset($_COOKIE["shopping_cart"]))
        {
            $total = 0;
            $cookie_data = stripslashes($_COOKIE['shopping_cart']);
            $cart_data = json_decode($cookie_data, true);          
            foreach($cart_data as $keys => $values)
            {
        ?>
            <tr>
            <td><?php echo $values["item_name"]; ?></td>
            <td><?php echo $values["item_quantity"]; ?></td>
            <td>RM <?php echo $values["item_price"]; ?></td>
            <td>RM <?php echo number_format($values["item_quantity"] * $values["item_price"], 2);?></td>
            <td><a href="pos.php?action=delete&id=<?php echo $values["item_id"]; ?>"><span class="text-danger">Remove</span></a></td>
            </tr>
            
        <?php 	
           	$subtotal = $total + ($values["item_quantity"] * $values["item_price"]);
           	
           	$tax = $subtotal * 0.1;
           	 
           	$total = $subtotal + $tax; 
            }               
        ?>
        	<tr style="background-color:#333; color:whitesmoke;">
            <td colspan="3" align="right">Subtotal</td>
            <td align="right">RM <?php echo number_format($subtotal, 2); ?></td>
            <td></td>
            </tr>

        	<tr style="background-color:#333; color:whitesmoke;">
            <td colspan="3" align="right">Tax 10%</td>
            <td align="right">RM <?php echo number_format($tax, 2); ?></td>
            <td></td>
            </tr>

            <tr style="background-color:#333; color:whitesmoke;">
            <td colspan="3" align="right">Total</td>
            <td align="right">RM <?php echo number_format($total, 2); ?></td>
            <td></td>
            </tr>
    <!-- Payment Method! ! ! ! ! !-->
            <tr class="payment_method">
            <td align="right">
               <strong>Payment Method: </strong> 
            </td>
            <td colspan="4">
            <form action="pos_payment.php" method="POST">
            <?php 
                foreach($cart_data as $keys => $values) 
                {
            ?>
                <input type="hidden" name="itemID[]" value="<?php echo $values['item_id']; ?>" />
                <input type="hidden" name="itemAmount[]" value="<?php echo $values["item_quantity"]; ?>" />
                
            <?php 
              }  
            ?>
                <input type="hidden" name="total" value="<?php echo $total; ?>" />
                <select name="payment" required>
                	<option value="Cash">
                        Cash
                    </option>
                    <option value="Credit Card">
                        Credit Card
                    </option>
                    
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <input type="submit" class="btn btn-success"name="checkout" value="Checkout" style="width: 98.5%">
            </td>
        </tr>

   </form>
        <?php
        }
        else
        {
            echo '
            <tr>
            <td colspan="5" align="center">No Item in Cart</td>
            </tr>
            ';
        }
        ?>
            </table>
            </div>
        </div>
        <br />
</body>


    <!--Bootstrap js-->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!--To make dropdown menu become hover accross-->
    <script>
        const $dropdown = $(".dropdown");
        const $dropdownToggle = $(".dropdown-toggle");
        const $dropdownMenu = $(".dropdown-menu");
        const showClass = "show";

        $(window).on("load resize", function() {
            if (this.matchMedia("(min-width: 768px)").matches) {
                $dropdown.hover(
                    function() {
                        const $this = $(this);
                        $this.addClass(showClass);
                        $this.find($dropdownToggle).attr("aria-expanded", "true");
                        $this.find($dropdownMenu).addClass(showClass);
                    },
                    function() {
                        const $this = $(this);
                        $this.removeClass(showClass);
                        $this.find($dropdownToggle).attr("aria-expanded", "false");
                        $this.find($dropdownMenu).removeClass(showClass);
                    }
                );
            } else {
                $dropdown.off("mouseenter mouseleave");
            }
        });

        //let the nvbar stick on top
        // When the user scrolls the page, execute myFunction
        window.onscroll = function() {
            myFunction()
        };

        // Get the navbar
        var navbar = document.getElementById("navbar");

        // Get the offset position of the navbar
        var sticky = navbar.offsetTop;

        // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
            } else {
                navbar.classList.remove("sticky");
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        }
    </script>

    </html>