<?php session_start();?>
<!DOCTYPE html>
<html lang="en">
<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>homepage</title>

    <script>
        var alertList = document.querySelectorAll(".alert");
        alertList.forEach(function (alert) {
            new bootstrap.Alert(alert);
        });
    </script>

    <style>
        .pill-navbar{
            border-radius: 50px;  
            padding:10px 20px;
            
        }
        @media(max-width:992px){
            
            .pill-navbar{
            border-radius: 25px;  
            margin-top:10px;

            }
            .pill-navbar .collapse-navbar{
                margin-top:10px;
                padding-top:10px;
                border-top:1px#eee
            }
        }
        .form-group{
            margin-bottom:1rem;
        }
        .card{
            max-width:30vw;
            border-radius: 40px;  
            padding:10px 20px;
      
        }

        .carousel{
            max-height:10vh;
            min-height:10vh;

        }
        .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;
        }

    </style>

    <?php
        if ($_SERVER['REQUEST_METHOD']=="POST"){
            include("db.php");
            $name=$_POST['Username'];
            $password=$_POST['Password'];

            $sql="SELECT `User_id`,`Username`,`Password` FROM User WHERE Username=?";
            $stmt=mysqli_stmt_init($conn);
            mysqli_stmt_prepare($stmt,$sql);
            mysqli_stmt_bind_param($stmt,'s',$name);
            if(mysqli_stmt_execute($stmt)){
               $result=mysqli_stmt_get_result($stmt);

               if($row=mysqli_fetch_assoc($result)){
                    if(password_verify($password,$row["Password"])){
                        $_SESSION['id']=$row['User_id'];
                       
                    }  
                    else{
                        echo"<div class='alert alert-warning alert-dismissible fade show' role='alert'>
                            <button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>
                            <strong>Incorrect password</strong> 
                        </div>";
                    }
               }
               else{
                    echo"<div class='alert alert-warning alert-dismissible fade show' role='alert'>
                            <button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>
                            <strong>Incorrect Login in details</strong> 
                        </div>";
               }
            }
            else{
                echo"ERROR".mysqli_stmt_error($stmt);
            }
            mysqli_stmt_close($stmt);

            if(isset($_SESSION['id'])){
                $sql="SELECT `User_id` FROM Producers 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);
                    if($row=mysqli_fetch_assoc($result)){
                        $_SESSION['name']=$row['CompanyName'];
                        echo"<script>window.location.href='ProducerHome.php';</script>";
                    }
                    else{
                        mysqli_stmt_close($stmt);
                        $sql="SELECT `User_id` FROM Customers 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);
                            if($row=mysqli_fetch_assoc($result)){
                                echo"<script>alert('Successfully logged in');</script>";
                                header("Location: CustomerHome.php");
                                
                            }
                        }
                    
                    }
                }
            }
            

        }
    ?>

</head>

<body>

    <!-- navbar -->
    <nav class="navbar navbar-expand-xl navbar-light bg-light shadow pill-navbar w-50 mx-auto my-4 ">
        <a class="navbar-brand" href="CustomerHome.php">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 that collapse -->
        <div class="collapse navbar-collapse ms-4" id="Navbar">
            <ul class="navbar-nav mt-auto">
                <li class="nav-item"><a class="nav-link" id="Link" href="CustomerProducts.php">Products</a></li>
                <li class="nav-item"><a class="nav-link" href="CustomerSuppliers.php">Suppliers</a></li>
                <li class="nav-item"><a class="nav-link" id="Link" href="CustomerOrders.php">Orders</a></li>
                <li class="nav-item"><a class="nav-link" id="Link" href="CustomerLoyalty.php">Loyalty</a></li>
            </ul>

            <!-- right side nav links -->
            <!-- dropdown login -->
             <?php
                if(!isset($_SESSION['id'])){?>
                    <div class='dropdown ms-auto'>
                    

                        <button class='btn btn-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
                            Login<span class='bi bi-person-fill'></span>
                        </button>

                        <div class='dropdown-menu p-4' style='min-width:250px; border-radius:15px;'>

                            <form action='CustomerHome.php' method='post'>               
                                <p>don't have an account, &nbsp <a href='CustomerSignUp.php'>sign up now!</a></p>

                                <div class='form-group'>
                                    <input class='form-control' type='text' name='Username' id='Username' placeholder='Username'>
                                </div>

                                <div class='form-group'>
                                    <input class='form-control' type='password' name='Password' id='Password' placeholder='Password'>
                                </div>

                                <button class='btn btn-success w-100' type='submit'>log in</button>
                            </form>

                        </div>

                    </div>
                
                <?php }

                else{?>
                    <ul class='navbar-nav ms-auto'>
                        <li class='nav-item'><a class='nav-link' href='Logout.php'>Logout<span class='bi bi-person-fill'></span></a></li>
                    </ul>
                <?php }; ?>
            

            <ul class="navbar-nav ms-1 ">
                <li class="nav-item"><a class="nav-link" href="">Settings<span class="bi bi-gear-fill"></span></a></li>
            </ul>
        </div>

    </nav>
    
     <div class="alert alert-danger alert-dismissible fade show d-none" role="alert" id="alert">
        You need to sign in before going here.
        <button type="button" class="btn-close" aria-label="Close" id="closeAlert"></button>
    </div>
   
    <script>
        const id=(<?php echo json_encode($_SESSION['id'] ?? null) ?>)
        const alertBox = document.getElementById("alert")
        
        document.getElementById("Link").addEventListener("click",function(event){
            
            if(id===null){
                event.preventDefault();
                alertBox.classList.remove("d-none")
            };
        })

        document.getElementById("closeAlert").addEventListener("click",function(event){
            event.preventDefault();
            alertBox.classList.add("d-none")
        })
    </script>

  
    <!-- main content -->
   <div class="container">
        <!-- Slider/Carousel -->
        <div class="carousel slide mb-5 border" id="carouselId" data-bs-ride="carousel">

            <ol class="carousel-indicators">
                <li
                    data-bs-target="#carouselId"
                    data-bs-slide-to="0"
                    class="active"
                    aria-current="true"
                    aria-label="First slide">
                </li>

                <li
                    data-bs-target="#carouselId"
                    data-bs-slide-to="1"
                    aria-label="Second slide">
                </li>

                <li
                    data-bs-target="#carouselId"
                    data-bs-slide-to="2"
                    aria-label="Third slide">
                </li>
            </ol>


            <div class="carousel-inner" role="listbox">

                <div class="carousel-item active">
                    <img
                        src="holder.js/900x500/auto/#777:#555/text:First slide"
                        class="w-100 d-block"
                        alt="First slide"
                    />
                </div>

                <div class="carousel-item">
                    <img
                        src="holder.js/900x500/auto/#666:#444/text:Second slide"
                        class="w-100 d-block"
                        alt="Second slide"
                    />
                </div>

                <div class="carousel-item">
                    <img
                        src="holder.js/900x500/auto/#666:#444/text:Third slide"
                        class="w-100 d-block"
                        alt="Third slide"
                    />
                </div>

            </div>
        </div>

        <!-- welcome message -->
        <div class="row">
            <div class="col-lg-12 text-center p-auto mt-5 " style="color:white;">
                <strong>
                    <h1>Welcome</h1>
                    <h3>To the Greenfield Local Hub website</h3>
                </strong>
                <h5>On this website you can order products, view suppliers and even read<br>about the benfits of buying locally down below</h5>
            </div>
        </div>

        <!-- top artical -->
        <div class="row">
            <div class="col-12 mt-5" style="height:20vh; align-content:center;">

                <div class="card mx-auto">
                    <img class="card-img-top" src="holder.js/100x180/" alt="Title" />
                    <div class="card-body">
                        <h4 class="card-title">Title</h4>
                        <p class="card-text">Text</p>
                    </div>
                    <a class="stretched-link" href=""></a>
                </div>
    
            </div>
        </div>

        <!-- bottom two articals -->
        <div class="row">

            <div class="col-lg-6 col-sm-12 mt-2" style="height:20vh; align-content:center;">

                <div class="card mx-auto">
                    
                    <img class="card-img-top" src="holder.js/100x180/" alt="Title" />
                    <div class="card-body">
                        <h4 class="card-title">Title</h4>
                        <p class="card-text">text</p>
                    </div>
                    <a class="stretched-link" href=""></a>
                </div>
                
            </div>
            

            <div class="col-lg-6 col-sm-12 mt-2" style="height:20vh; align-content:center;">

                <div class="card mx-auto">
                    <img class="card-img-top" src="holder.js/100x180/" alt="Title" />
                    <div class="card-body">
                        <h4 class="card-title">Title</h4>
                        <p class="card-text">Text</p>
                    </div>
                    <a class="stretched-link" href=""></a>
                </div>
            </div>

        </div>

        

    </div>
    <div clas="footer">

    </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>