<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<?php
session_start();
// if dont have session user..then
if(! isset($_SESSION['manname']))
{
session_write_close();
die("<script>alert('Please login as manager first before proceed!');window.location.href='login.html';</script>");
}
?>

<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="shortcut icon" href="images/logo.png" type="image/x-icon" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">


<title>Manager - Online Sales Management</title>

<style>
    .modal{
        font-family: 'Acme', sans-serif;
    }
    .form-group{
        margin-top:-15px;
    }
    /*style for animated background*/
    .animatedbg{
        width: 100%;
        min-height: 87vh;
        background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
        background-size: 400% 400%;
        animation: change 10s ease-in-out infinite;
        padding-top:40px;
        padding-bottom: 40px;
        font-family: 'Acme', sans-serif;
    }
    @keyframes change{
        0%{
            background-position: 0 50%;
        }
        50%{
            background-position: 100% 50%;
        }
        100%{
            background-position: 0 50%;
        }
    }
    .card {
        /* Add shadows to create the "card" effect */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
        transition: 0.3s;
        min-height:500px;
        width: 1400px;
        padding: 20px;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 20px;
        background-color: #d9d9d9;
        
    }
    /* On mouse-over, add a deeper shadow */
    .card:hover {
        box-shadow: 0 12px 32px 0 lightblue;
        }
        .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
    .card button
    {
        border: none;
        outline: none;
        height: 35px;
        width: 120px;
        background: #CF161E;
        color: #fff;
        font-size: 14px;
    }
    .card button:hover
    {
        cursor: pointer;
        background: #ffc107;
        color: #000;
    }

</style>
</head>

<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <a class="navbar-brand" href="manager_userinfo.php"><img alt="Brand" src="images/logo.png"
            style="width: 80px; height: 80px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto" style="padding-right: 50px;">
            <li class="nav-item">
                <a class="nav-link" href="manager_userinfo.php">User Info <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Court Booking
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="manager_badminton_court_booking_management.php">Badminton Booking Management</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="manager_volleyball_court_booking_management.php">Volleyball Booking Management</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="manager_squash_court_booking_management.php">Squash Booking Management</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="manager_futsal_court_booking_management.php">Futsal Booking Management</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="manager_court_booking_report.php">Court Booking Report</a>
                    
                </div>
            </li>
            <li class="nav-item dropdown active">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Sales
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="manager_online_sales_management.php">Sales Management</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="manager_online_sales_report.php">Sales Report</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="logout.php">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<!--Contents here-->
<section class="animatedbg">
    <div class="card">
            <!--Futsal-->
            <h2 style="text-align:center;color:red;margin-top:15px;">Online Sales Management</h2>
            <table id="tableid" class="table" style="text-align:center;">
            <?php 
                include("conn.php");//add connection to the php page
                $sql = "SELECT oo.Order_Date, oo.Order_ID, op.Payment_ID, m.Mem_Name, m.Mem_Address, m.Mem_Phone, od.Item_ID, od.Order_Amount, oo.Order_Status
                        FROM online_ordering oo, online_ordering_details od, member m, online_payment op
                        WHERE (oo.Order_ID = od.Order_ID) AND (oo.Mem_ID = m.Mem_ID) AND (oo.Payment_ID = op.Payment_ID)
                        ORDER BY OO.Order_Date ASC";
                $result = mysqli_query($conn, $sql);
            ?>
                <thead class="thead-dark">
                    <tr>
                    <th scope="col">Order Date</th>
                    <th scope="col">Order ID</th>
                    <th scope="col">Payment ID</th>
                    <th scope="col">Member Name</th>
                    <th scope="col">Address</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Item ID</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Order Status</th>
                    <th scope="col">Update</th>
                    <th scope="col">Cancel</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        if($result)
                        {
                            foreach($result as $row)
                            {
                    ?>
                    <tr>
                        <td><?php echo $row['Order_Date']?></td>
                        <td><?php echo $row['Order_ID']?></td>
                        <td><?php echo $row['Payment_ID']?></td>
                        <td><?php echo $row['Mem_Name']?></td>
                        <td><?php echo $row['Mem_Address']?></td>
                        <td><?php echo $row['Mem_Phone']?></td>
                        <td><?php echo $row['Item_ID']?></td>
                        <td><?php echo $row['Order_Amount']?></td>
                        <td><?php echo $row['Order_Status']?></td>
                        <td>
                            <button type="button" class="updatebtn">Update</button>
                        </td>
                        <td>
                            <button type="button" <?php if ($row['Order_Status'] == 'Delivered'){ ?> onclick="return false;" <?php }else{?> class="deletebtn" <?php }?>>Cancel</button>
                        </td>
                    </tr>
                    
                    <?php
                            }
                        }else
                        {
                            echo "No order done for today!";
                        }
                    ?>
                </tbody>
            </table>
    </div>
</section>

<!--order Update Modal -->
<div class="modal fade" id="updateorder" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel" style="color:red;">Update Online Ordering</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="update_online_order.php" method="POST">
        <div class="modal-body" style="margin-top:-10px;">
                <div class="form-group">
                    <label> Order Date </label>
                    <input type="text" name="odate" id="odate" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label> Order ID </label>
                    <input type="text" name="oid" id="oid" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label> Payment ID </label>
                    <input type="text" name="pid" id="pid" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label> Member Name </label>
                    <input type="text" name="memname" id="memname" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label> Address </label>
                    <input type="text" name="address" id="address" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label> Phone </label>
                    <input type="text" name="phone" id="phone" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label> Item ID </label>
                    <input type="text" name="iid" id="iid" class="form-control" readonly>
                </div><div class="form-group">
                    <label> Amount </label>
                    <input type="text" name="oamount" id="oamount" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label> Order Status </label>
                    <select class="form-control" name="ostatus" id="ostatus">
                            <option value="Processing">Processing</option>
                            <option value="Delivered">Delivered</option>
                    </select>
                </div>
        </div>
        <div class="modal-footer" style="margin-top:-25px;">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary" name="updatedata">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!--order Delete Modal -->
<div class="modal fade" id="deleteorder" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel" style="color:red;">Order Cancellation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="delete_order.php" method="POST">
        <div class="modal-body" style="margin-top:-10px;">
            
                <div class="form-group">
                    <input type="hidden" name="delete_id" id="delete_id">

                    <input type="hidden" name="payment_id" id="payment_id">

                <h6>Do you want to cancel this order?</h6>
        </div>
        <div class="modal-footer" style="margin-top:-25px;">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            <button type="submit" class="btn btn-primary" name="deletedata">Yes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!--Bootstrap js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script>
    //to make dropdown hover
    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");
        }
    });


    //onclick popup for order and fetch data and display on modal
    $(document).ready(function() {
        $('.updatebtn').on('click',function(){
            $('#updateorder').modal('show');

                $tr = $(this).closest('tr');

                var data = $tr.children("td").map(function() {
                    return $(this).text();
                }).get();

                console.log(data);

                $('#odate').val(data[0]);
                $('#oid').val(data[1]);
                $('#pid').val(data[2]);
                $('#memname').val(data[3]);
                $('#address').val(data[4]);
                $('#phone').val(data[5]);
                $('#iid').val(data[6]);
                $('#oamount').val(data[7]);
                $('#ostatus').val(data[8]);
        });
    });

    //delete popup for sales 
    $(document).ready(function() {
        $('.deletebtn').on('click',function(){
            $('#deleteorder').modal('show');

                $tr = $(this).closest('tr');

                var data = $tr.children("td").map(function() {
                    return $(this).text();
                }).get();

                console.log(data);

                $('#delete_id').val(data[1]);
                $('#payment_id').val(data[2]);

        });
    });

    $(document).ready(function() {
        $('#tableid').DataTable({
            "pagingType": "full_numbers",
            "lengthMenu": [
                [5, 10 ,25, -1],
                [5, 10, 25, "All"]
            ],
            language:{
                search:"_INPUT_",
                searchPlaceholder: "Keywords/Date",
            }
        });
    } );

</script>

</body>

</html>