 <?php session_start();?>
<!DOCTYPE html>
<html lang="en">
<?php
if(!isset($_SESSION['id'])){
    echo"<script>alert(you have to log back in to continue);</script>";
    echo"<script>window.location.href='Logout.php';</script>";
    exit();
}

include("db.php");
    $sql="SELECT`Product_id,ProductName`, `Amount`, `ProductPrice` FROM `basket` WHERE User_id = ?";
    $stmt=mysqli_stmt_init($conn);
    mysqli_stmt_prepare($stmt,$sql);
    mysqli_stmt_bind_param($stmt,"i",$_SESSION['id']);
    if(mysqli_stmt_execute($stmt)){
        $result=mysqli_stmt_get_result($stmt);
        
    }
?>
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

    <title>Account creation</title>
</head>
<style>
    .pill-navbar{
        border-radius: 50px;  
        padding:10px 20px;
        
    }
    @media(max-width:900px){
        
        .pill-navbar{
        border-radius: 25px;  
        margin-top:10px;

        }
        .pill-navbar .collapse-navbar{
            margin-top:10px;
            padding-top:10px;
            border-top:1px#eee
        }
    }
    .card{
        min-width:70vw;
        min-height:40vh;
        border-radius: 40px;  
        padding: 50px;
        max-height:80vh;
        overflow-y:auto;
    }

   
    .button{
        min-height:5vh;
        max-height:5vh;
    }

    body{

        background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.7)), url("Dark-theme.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height:100vh;
      
    }
    .form-group{
        margin-bottom:1rem;
    }

</style>
<body>
    
  
    
    
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow pill-navbar w-50 mx-auto my-4 mb-5  ">
    
        <a class="navbar-brand" href="#">Logo</a>

        <!-- expand/collapse button -->
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- nav links -->
        <div class="collapse navbar-collapse ms-4" id="Navbar">
            <ul class="navbar-nav mt-auto">
                <li class="nav-item"><a class="nav-link" href="">Products</a></li>
                <li class="nav-item"><a class="nav-link" href="">Suppliers</a></li>
                <li class="nav-item"><a class="nav-link" href="">Orders</a></li>
                <li class="nav-item"><a class="nav-link" href="">Loyalty</a></li>
            </ul>
            <!-- right side nav links -->
            <ul class="navbar-nav ms-auto ">
                <li class="nav-item"><a class="nav-link" href="">Log out<span class="bi bi-person-fill"></span></a></li>
                <li class="nav-item"><a class="nav-link" href="">Settings<span class="bi bi-gear-fill"></span></a></li>
            </ul>
        </div>

    </nav>

    
    
    <!-- main content -->
   <div class="container p-auto mt-5 ">
        <div class="col-lg-12 mx-auto mt-5">
            <?php
            
            ?>
            <a href="CustomerProducts.php"><--Go Back</a>
            <div class="card">
                <div class="header">
                    <div class="card-title text-center" style="padding-left:9rem; padding-right:9rem;">  
                        <h3>Checkout</h3>
                </div>
                <div class="card-body px-auto mt-3">
                    <div class="card-text px-auto">
                        <div class="row">
                            <div class="col-lg-5" style="min-height:60vh;">
                                <div class="col-12-lg border center mx-auto my-5" style="min-height:400px; max-width:400px;">
                                    <div class="card-body px-auto mt-3">
                                        <table class="table-table-primary">
                                            <thead>
                                                <tr>
                                                    <th>Product Name</th>
                                                    <th>Amount</th>
                                                    <th>Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            <?php while($row=mysqli_fetch_assoc($result)){?>
                                                <tr>
                                                    <td><h4 class="card-title"><?php echo htmlspecialchars($row['ProductName'])?></h4></td>
                                                    <td><p class="card-text"><?php echo htmlspecialchars($row['ProductAmount'])?></p></td>
                                                    <td><p class="card-text"><?php echo htmlspecialchars($row['ProductPrice'])?></p></td>
                                                    <td><a class="btn btn-danger" href="BasketDelete.php?id=<?php echo($row['Product_id'])?>">REMOVE</a></td>
                                                </tr>
                                            <?php };?>
                                            </tbody>
                                        </table>
                                    </div> 
                                </div>
                            </div>
                            
                            </div>

                            <div class="col-lg-7">
                                <div class="col-12-lg border my-5 p-4" style="min-height:500px;">
                                    <form action="OrderInsert.php" method="POST">


                                        <div class="form-group">
                                         <label for="Type" class="form-label">Type</label>
                                            <select class="form-select form-select-lg" name="Type">
                                                <option value="Delivery">Delivery</option>
                                                <option value="Pick up">Pick up</option>
                                            </select>
                                        </div>

                                       
                                        <div class="form-group">
                                            <label for="date" class="form-label">Select a date for collection/pickup</label>
                                            <input type="date" class="form-control" name="Date">
                                        </div>

                                        <div class="form-group">
                                            <label for="Time" class="form-label">Time</label>
                                                <select class="form-select form-select-lg" name="Time">
                                                    <option value="10:00">10:00am</option>
                                                    <option value="11:00">11:00am</option>
                                                    <option value="12:00">12:00am</option>
                                                    <option value="1:00">1:00pm</option>
                                                    <option value="2:00">2:00pm</option>
                                                    <option value="3:00">3:00pm</option>
                                                </select>
                                        </div>

                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <button type="submit" class="btn btn-priamry" href="OrderInsert.php">Conform</button> 
                                                </div>
                                            </div>
                                        </div>
                                    
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            

        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
