<?php
session_start();
error_reporting(0);
include('includes/config.php');

if (isset($_SESSION['alogin'])) {
    header('location:index.php');
}

if (isset($_POST['login'])) {
    $status = '1';
    $email = $_POST['username'];
    $password = md5($_POST['password']);
    $sql = "SELECT email,password FROM users WHERE email=:email and password=:password and status=(:status)";
    $query = $dbh->prepare($sql);
    $query->bindParam(':email', $email, PDO::PARAM_STR);
    $query->bindParam(':password', $password, PDO::PARAM_STR);
    $query->bindParam(':status', $status, PDO::PARAM_STR);
    $query->execute();
    $results = $query->fetchAll(PDO::FETCH_OBJ);
    if ($query->rowCount() > 0) {
        $_SESSION['alogin'] = $_POST['username'];
        echo "<script type='text/javascript'> document.location = 'index.php'; </script>";
    } else {
        echo "<script>alert('Invalid Details Or Account Not Confirmed');</script>";
    }
}
?>

<!doctype html>
<html lang="en">

<head>
    <link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ডিজিটাল-সেবা</title>
    <link rel="shortcut icon" type="image/png/jpg" href="https://i.ibb.co/Ndwr1VLh/image.jpg" />
    <style>
        /* General Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Alegreya Sans', sans-serif;
        }

        body {
            background: #F2F2F2;
        }

        h1 {
            padding: 0 0 30px;
        }

        .form-container {
            background: #ecf0f3;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
            width: 100%;
            max-width: 400px;
            margin: 50px auto;
        }

        .form-container .form-icon {
            text-align: center;
            margin: 0 auto 15px;
        }

        .form-container .form-icon img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px #fff;
        }

        .form-container .title {
            color: #ac40ab;
            font-size: 25px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
            margin: 0 0 20px;
        }

        .form-container .form-horizontal .form-group {
            margin: 0 0 25px 0;
            position: relative;
        }

        .form-container .form-horizontal .form-group label {
            font-size: 15px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .form-container .form-horizontal .form-control {
            color: #333;
            background: #ecf0f3;
            font-size: 15px;
            height: 50px;
            padding: 10px 40px 10px 20px; /* Adjust padding for consistency */
            letter-spacing: 1px;
            border: none;
            border-radius: 50px;
            box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;
            display: inline-block;
            width: 100%; /* Ensures input box takes full width of its container */
            transition: all 0.3s ease 0s;
        }

        .form-container .form-horizontal .form-control:focus {
            box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;
            outline: none;
        }

        .form-container .form-horizontal .form-control::placeholder {
            color: #808080;
            font-size: 14px;
        }

        /* Button Styling */
        .btn {
            color: #fff;
            background-color: #f75700;
            font-family: 'Alegreya Sans', sans-serif;
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 12px 15px;
            border-radius: 30px;
            border: none;
            position: relative;
            margin: 10px 0;
            z-index: 1;
            transition: all 0.5s ease;
            width: 100%; /* Full width */
        }

        .btn:hover,
        .btn:focus {
            background-color: #f90000;
            color: #fff;
            border-radius: 30px;
        }

        .btn:before {
            content: " ";
            width: calc(100% + 20px);
            height: calc(100% + 20px);
            border: 2px solid transparent;
            transform: translateX(-50%) translateY(-50%);
            position: absolute;
            left: 50%;
            top: 50%;
            transition: all 0.7s ease;
        }

        .btn:hover:before {
            border-radius: 30px;
            border: 2px solid #f90000;
        }

        /* Additional Buttons */
        .form-container .form-horizontal .btn-alt {
            background-color: #3498db;
            margin-top: 10px;
        }

        .form-container .form-horizontal .btn-alt:hover,
        .form-container .form-horizontal .btn-alt:focus {
            background-color: #2980b9;
        }

        /* Eye Button Styling */
        .eye-btn {
            position: absolute;
            right: 20px;
            top: 60%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 20px;
        }

        /* Responsive Design */
        @media only screen and (max-width: 767px) {
            .btn {
                margin-bottom: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="form-container">
        <div class="form-icon">
    <img src="https://i.ibb.co/Ndwr1VLh/image.jpg" alt="Logo">
</div>

        <h3 class="title">Login</h3>
        <form method="POST" class="form-horizontal">
            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" name="username" required placeholder="Email address">
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" id="password" name="password" required placeholder="Password">
                <button type="button" class="eye-btn" onclick="togglePassword()">👁️</button>
            </div>
            <button type="submit" name="login" class="btn">Login</button>

            <!-- Additional buttons with the same style as the login button -->
            <a href="register.php"><button type="button" class="btn">Create New Account</button></a>
        </form>
    </div>

    <script>
        function togglePassword() {
            var passwordField = document.getElementById("password");
            if (passwordField.type === "password") {
                passwordField.type = "text";
            } else {
                passwordField.type = "password";
            }
        }
    </script>
</body>

</html>
