sports-arena-website / booking_history.php
booking_history.php
Raw
<!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['memname']))
{
session_write_close();
die("<script>alert('Please login first before proceed!');window.location.href='login.html';</script>");
}
?>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 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 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">    
    <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>


    <title>Courts Booking History</title>

    <style>
        hr.style17 {
            border-top: 1px solid #8c8b8b;
            text-align: center;
            width: 90%;
        }
        hr.style17:after {
            content: '§';
            display: inline-block;
            position: relative;
            top: -14px;
            padding: 0 10px;
            background: #f0f0f0;
            color: #8c8b8b;
            font-size: 18px;
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            transform: rotate(60deg);
        }
        .container-fluid
        {
            font-family: 'Acme', sans-serif;
        }
        .container-fluid button
        {
            border: none;
            outline: none;
            height: 35px;
            width: 120px;
            background: #CF161E;
            color: #fff;
            font-size: 14px;
        }
        .container-fluid button:hover
        {
            cursor: pointer;
            background: #ffc107;
            color: #000;
        }
        .curved{
            background:linear-gradient( rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)),url(images/booking_history.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: -230px;
        }
        @media only screen and (min-width: 1000px) and (max-width: 1200px) {
            .curved h1{
            padding-top: 60px;
            font-size: 55px;
            }
            .curved svg{
                margin-top: -180px;
            }
        }
        @media only screen and (min-width: 850px) and (max-width: 999px) {
            .curved h1{
            padding-top: 40px;
            font-size: 45px;
            }
            .curved svg{
                margin-top: -160px;
            }
        }
        @media only screen and (min-width: 600px) and (max-width: 849px) {
            .curved h1{
            padding-top: 45px;
            font-size: 45px;
            }
            .curved svg{
                margin-top: -100px;
            }
        }
        @media only screen and (min-width: 450px) and (max-width: 599px) {
            .curved h1{
            padding-top: 35px;
            font-size: 35px;
            }
            .curved svg{
                margin-top: -60px;
            }
        }
        @media only screen and (max-width: 449px) {
            .curved h1{
            padding-top: 35px;
            font-size: 35px;
            }
            .curved svg{
                margin-top: -30px;
            }
        }
    </style>
</head>

<body>
<!--Navigation Bar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <a class="navbar-brand" href="home.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="home.php">Home <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">
                    Arena
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="arena_facilities.php">Arena Facilities</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="badminton_court_booking.php">Badminton Court Booking</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="volleyball_court_booking.php">Volleyball Court Booking</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="squash_court_booking.php">Squash Court Booking</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="futsal_court_booking.php">Futsal Court Booking</a>
                    <div class="dropdown-divider"></div>
                </div>
            </li>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="shop.php">Shop</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about_us.php">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="faq.php">FAQ</a>
            </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">
                        Extras
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="member_profile.php">Profile</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="booking_history.php">Booking</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="my_purchases.php">My Purchase</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="logout.php">Logout</a>
                        <div class="dropdown-divider"></div>
                    </div>
            </li>
        </ul>
    </div>
</nav>

<div class="curved">
    <h1>Upcoming Courts Booking</h1>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 319">
        <path fill="#FFFFFF" fill-opacity="1"
                    d="M0,128L80,154.7C160,181,320,235,480,266.7C640,299,800,309,960,298.7C1120,288,1280,256,1360,240L1440,224L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z">
        </path>
    </svg>
</div>

<!--Content-->
<div class="container-fluid">
        <h2 style="text-align:center;color:red;margin-top:15px;">Badminton Court</h2>
        <div class="table-responsive">
            <table id="tableid" class="table table-bordered" style="text-align:center;">
            <?php 
                include("conn.php");//add connection to the php page
                $sql = "SELECT * 
                        FROM badminton_court_booking b, member m, badminton_court bc 
                        WHERE (b.Mem_ID = m.Mem_ID) AND (b.Court_ID = bc.Court_ID) AND (b.Mem_ID = '".$_SESSION['memid']."') AND (b.Payment_Status = 'Pending') 
                        ORDER BY b.Start_Time";
                $result = mysqli_query($conn, $sql);
            ?>
                <thead class="thead-dark">
                    <tr>
                    <th scope="col">Booking ID</th>
                    <th scope="col">Court ID</th>
                    <th scope="col">Court Name</th>
                    <th scope="col">Start Time</th>
                    <th scope="col">End Time</th>
                    <th scope="col">Duration</th>
                    <th scope="col">Update</th>
                    <th scope="col">Cancellation</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        if($result)
                        {
                            foreach($result as $row)
                            {
                    ?>
                    <tr>
                        <td><?php echo $row['Booking_ID']?></td>
                        <td><?php echo $row['Court_ID']?></td>
                        <td><?php echo $row['Court_Name']?></td>
                        <td><?php echo $row['Start_Time']?></td>
                        <td><?php echo $row['End_Time']?></td>
                        <td><?php echo $row['Duration']?></td>
                        <td>
                            <a href='member_update_badminton.php?id=<?php echo $row['Booking_ID']; ?>'><button>Update</button></a>
                        </td>
                        <td>
                            <a href='member_delete_badminton.php?id=<?php echo $row['Booking_ID']; ?>' onclick="return confirm('Are you sure you want to cancel this booking?');"><button>Cancel</button></a>
                        </td>
                    </tr>
                    
                    <?php
                            }
                        }else
                        {
                            echo "No badminton court booked!";
                        }
                    ?>
                </tbody>
            </table>
        </div>
        <hr class="style17">

        <h2 style="text-align:center;color:red;margin-top:15px;">Volleyball Court</h2>
        <div class="table-responsive">
            <table id="tableid" class="table table-bordered" style="text-align:center;">
            <?php 
                include("conn.php");//add connection to the php page
                $sql = "SELECT * 
                        FROM volleyball_court_booking b, member m, volleyball_court bc 
                        WHERE (b.Mem_ID = m.Mem_ID) AND (b.Court_ID = bc.Court_ID) AND (b.Mem_ID = '".$_SESSION['memid']."') AND (b.Payment_Status = 'Pending') 
                        ORDER BY b.Start_Time";
                $result = mysqli_query($conn, $sql);
            ?>
                <thead class="thead-dark">
                    <tr>
                    <th scope="col">Booking ID</th>
                    <th scope="col">Court ID</th>
                    <th scope="col">Court Name</th>
                    <th scope="col">Start Time</th>
                    <th scope="col">End Time</th>
                    <th scope="col">Duration</th>
                    <th scope="col">Update</th>
                    <th scope="col">Cancellation</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        if($result)
                        {
                            foreach($result as $row)
                            {
                    ?>
                    <tr>
                        <td><?php echo $row['Booking_ID']?></td>
                        <td><?php echo $row['Court_ID']?></td>
                        <td><?php echo $row['Court_Name']?></td>
                        <td><?php echo $row['Start_Time']?></td>
                        <td><?php echo $row['End_Time']?></td>
                        <td><?php echo $row['Duration']?></td>
                        <td>
                            <a href='member_update_volleyball.php?id=<?php echo $row['Booking_ID']; ?>'><button>Update</button></a>
                        </td>
                        <td>
                            <a href='member_delete_volleyball.php?id=<?php echo $row['Booking_ID']; ?>' onclick="return confirm('Are you sure you want to cancel this booking?');"><button>Cancel</button></a>
                        </td>
                    </tr>
                    
                    <?php
                            }
                        }else
                        {
                            echo "No volleyball court booked!";
                        }
                    ?>
                </tbody>
            </table>
        </div>
        <hr class="style17">

        <h2 style="text-align:center;color:red;margin-top:15px;">Squash Court</h2>
        <div class="table-responsive">
            <table id="tableid" class="table table-bordered" style="text-align:center;">
            <?php 
                include("conn.php");//add connection to the php page
                $sql = "SELECT * 
                        FROM squash_court_booking b, member m, squash_court bc 
                        WHERE (b.Mem_ID = m.Mem_ID) AND (b.Court_ID = bc.Court_ID) AND (b.Mem_ID = '".$_SESSION['memid']."') AND (b.Payment_Status = 'Pending') 
                        ORDER BY b.Start_Time";
                $result = mysqli_query($conn, $sql);
            ?>
                <thead class="thead-dark">
                    <tr>
                    <th scope="col">Booking ID</th>
                    <th scope="col">Court ID</th>
                    <th scope="col">Court Name</th>
                    <th scope="col">Start Time</th>
                    <th scope="col">End Time</th>
                    <th scope="col">Duration</th>
                    <th scope="col">Update</th>
                    <th scope="col">Cancellation</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        if($result)
                        {
                            foreach($result as $row)
                            {
                    ?>
                    <tr>
                        <td><?php echo $row['Booking_ID']?></td>
                        <td><?php echo $row['Court_ID']?></td>
                        <td><?php echo $row['Court_Name']?></td>
                        <td><?php echo $row['Start_Time']?></td>
                        <td><?php echo $row['End_Time']?></td>
                        <td><?php echo $row['Duration']?></td>
                        <td>
                            <a href='member_update_squash.php?id=<?php echo $row['Booking_ID']; ?>'><button>Update</button></a>
                        </td>
                        <td>
                            <a href='member_delete_squash.php?id=<?php echo $row['Booking_ID']; ?>' onclick="return confirm('Are you sure you want to cancel this booking?');"><button>Cancel</button></a>
                        </td>
                    </tr>
                    
                    <?php
                            }
                        }else
                        {
                            echo "No squash court booked!";
                        }
                    ?>
                </tbody>
            </table>
        </div>
        <hr class="style17">

        <h2 style="text-align:center;color:red;margin-top:15px;">Futsal Court</h2>
        <div class="table-responsive" style="margin-bottom:30px;">
            <table id="tableid" class="table table-bordered" style="text-align:center;">
            <?php 
                include("conn.php");//add connection to the php page
                $sql = "SELECT * 
                        FROM futsal_court_booking b, member m, futsal_court bc 
                        WHERE (b.Mem_ID = m.Mem_ID) AND (b.Court_ID = bc.Court_ID) AND (b.Mem_ID = '".$_SESSION['memid']."') AND (b.Payment_Status = 'Pending') 
                        ORDER BY b.Start_Time";
                $result = mysqli_query($conn, $sql);
            ?>
                <thead class="thead-dark">
                    <tr>
                    <th scope="col">Booking ID</th>
                    <th scope="col">Court ID</th>
                    <th scope="col">Court Name</th>
                    <th scope="col">Start Time</th>
                    <th scope="col">End Time</th>
                    <th scope="col">Duration</th>
                    <th scope="col">Update</th>
                    <th scope="col">Cancellation</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        if($result)
                        {
                            foreach($result as $row)
                            {
                    ?>
                    <tr>
                        <td><?php echo $row['Booking_ID']?></td>
                        <td><?php echo $row['Court_ID']?></td>
                        <td><?php echo $row['Court_Name']?></td>
                        <td><?php echo $row['Start_Time']?></td>
                        <td><?php echo $row['End_Time']?></td>
                        <td><?php echo $row['Duration']?></td>
                        <td>
                            <a href='member_update_futsal.php?id=<?php echo $row['Booking_ID']; ?>'><button>Update</button></a>
                        </td>
                        <td>
                            <a href='member_delete_futsal.php?id=<?php echo $row['Booking_ID']; ?>' onclick="return confirm('Are you sure you want to cancel this booking?');"><button>Cancel</button></a>
                        </td>
                    </tr>
                    
                    <?php
                            }
                        }else
                        {
                            echo "No futsal court booked!";
                        }
                    ?>
                </tbody>
            </table>
        </div>
</div>

<!--Footer-->
<footer>
    <div class="footer-top">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12 segment-one md-mb-30 sm-mb-30">
                    <h3><font style="color: red;">Supreme</font> Sports Arena</h3>
                    <p>Supreme Sports Arena is a newly built sports arena which include badminton, squash, volleyball and futsal. The Arena is provided with high quality facilities for the sports enthusiasts.</p>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 segment-two md-mb-30 sm-mb-30">
                    <h2>Quick Links</h2>
                    <ul>
                        <li><a href="home.php">Home</a></li>
                        <li><a href="arena_facilities.php">Arena Facilities</a></li>
                        <li><a href="shop.php">Shop</a></li>
                        <li><a href="about_us.php">About Us</a></li>
                        <li><a href="faq.php">FAQ</a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 segment-three md-mb-30 sm-mb-30">
                    <h2>Contact Us</h2>
                    <p><i class="fa fa-phone"></i> &nbsp; 012-3456789 (John Siena)</p>
                    <p><i class="fas fa-envelope"></i> &nbsp; supremesportsarena@gmail.com</p>
                    <a href="https://www.facebook.com/Supreme-Sports-Arena-113298846750542/?modal=admin_todo_tour" target="_blank"><i
                            class="fab fa-facebook-square"></i></a>
                    <a href="https://www.instagram.com/supreme_sports_arena/" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://twitter.com/ArenaSupreme" target="_blank"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
        </div>
    </div>
    <p class="footer-bottom-text">All Right reserved by &copy;Supreme Sports Arena 2020</p>
</footer>

<!--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");
        }
    }
</script>
</body>

</html>