<?php
session_start();
$dbtype = "root";
require("includes/dbconnect.php");
require("includes/config.php");
require("includes/function.php");

$zdir = $dbname;
$zcomp = 1;
$zdbroot = $zdir;
$focusfield = "user";

$addflag = '';
if (isset($_POST["submit"])) {
    $a = 1;

    $mobile = $_POST['mobile'];
    $name = mysqli_real_escape_string($conn, $_POST['name']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $address = mysqli_real_escape_string($conn, $_POST['address']);
    
    $pass = mysqli_real_escape_string($conn, $_POST['pass']);
    $confpass = mysqli_real_escape_string($conn, $_POST['confpass']);

    if (isset($_POST["mobile"])) {
        $result = mysqli_query($conn, "SELECT mobile FROM `customer` WHERE `mobile`= '$mobile' ") or die(mysqli_error($conn));
        if (mysqli_num_rows($result) > 0) {
            $a = 0;
            browse("User Already Exist");
            header("refresh: 1; index.php?mobile=$mobile");
        }
    }
    if (isset($_POST["email"])) {
        $result2 = mysqli_query($conn, "SELECT email FROM `customer` WHERE `email`= '$email' ") or die(mysqli_error($conn));
        if (mysqli_num_rows($result2) > 0) {
            $a = 0;
            browse("User Already Exist");
            header("refresh: 1; index.php?mobile=$mobile");
        }
    }
    
    if ($a == 1) {
        
        mysqli_query($conn, "INSERT INTO `customer`(`name`, `mobile`, `email`, `address`, `password`, `confpass`) 
                                                          VALUES('$name', '$mobile', '$email', '$address', '$pass', '$confpass')") or die(mysqli_error($conn));
        browse("User Created Successfully");
        header("refresh: 1; index.php?mobile=$mobile");
    }

}

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signup Page</title>
    <style>
        /* General Styles */
        body {
            font-family: 'Poppins', sans-serif;
            background: url("images/loginbg3.jpg") no-repeat center center fixed;
            background-size: cover;
            color: #333;
            margin: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            /* font-family: 'Arial', sans-serif;
            background: url("images/loginbg3.jpg") no-repeat center center fixed;
            background-size: cover;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #333; */
        }

        .signup-container {
            background: #fff;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            max-width: 400px;
            width: 100%;
            text-align: center;
            opacity: 0.8;
        }

        .signup-container h1 {
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            color: #6a11cb;
        }

        .signup-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            text-align: left;
        }

        .form-group label {
            font-weight: bold;
        }

        .form-group input,
        .form-group textarea {
            width: 95%;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: #6a11cb;
            outline: none;
            box-shadow: 0 0 5px rgba(106, 17, 203, 0.5);
        }

        textarea {
            resize: none;
        }

        .btn {
            padding: 15px;
            margin-top: 10px;
            border: none;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: #fff;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn:hover {
            background: linear-gradient(135deg, #2575fc, #6a11cb);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .signup-container {
                padding: 1.5rem;
            }

            .signup-container h1 {
                font-size: 1.5rem;
            }

            .form-group input,
            .form-group textarea {
                font-size: 0.9rem;
                padding: 0.5rem;
                width: 95%;
            }

            .btn {
                font-size: 0.9rem;
                padding: 0.7rem;
            }
        }

        @media (max-width: 480px) {
            .signup-container {
                padding: 0.8rem;
                margin-top: -100px;
            }

            .signup-container h1 {
                font-size: 1.2rem;
            }

            .form-group input,
            .form-group textarea {
                font-size: 0.8rem;
                padding: 0.4rem;
                width: 94%;
            }

            .btn {
                font-size: 0.8rem;
                padding: 0.6rem;
            }
        }



        /* Add styling for the error message */
        .error-message {
            color: red;
            font-size: 0.9rem;
            margin-top: -0.5rem;
            margin-bottom: 1rem;
            display: none;
            /* Initially hidden */
        }
    </style>
</head>

<body>
    <div class="signup-container">
        <h1>Create Your Account</h1>
        <form action="#" method="POST" class="signup-form">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" placeholder="Enter your name" maxlength="40" required
                    autofocus>
            </div>
            <div class="form-group">
                <label for="mobile">Mobile</label>
                <input type="tel" id="mobile" name="mobile" placeholder="Enter your mobile number" maxlength="20"
                    required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" maxlength="30" required>
            </div>
            <div class="form-group">
                <label for="address">Address</label>
                <textarea id="address" name="address" placeholder="Enter your address" maxlength="80" rows="2"></textarea>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="pass" placeholder="Enter your password" maxlength="15"
                    required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">Confirm Password</label>
                <input type="password" id="confirmPassword" name="confpass" placeholder="Confirm your password"
                    maxlength="15" required>
            </div>
            <div class="error-message" id="errorMessage"></div>
            <button type="submit" name="submit" class="btn">Sign Up</button>

            <p>
                Already have an account? <a href="index.php">Login</a>
            </p>
        </form>
    </div>

    <script type="text/javascript">

        // Real-time password matching validation
        document.getElementById("confirmPassword").addEventListener("keyup", function () {
            const password = document.getElementById("password").value;
            const confirmPassword = document.getElementById("confirmPassword").value;
            const errorMessage = document.getElementById("errorMessage");

            // Check if passwords match
            if (password !== confirmPassword) {
                errorMessage.textContent = "Passwords do not match!";
                errorMessage.style.display = "block"; // Show error message
            } else {
                errorMessage.textContent = "";
                errorMessage.style.display = "none"; // Hide error message
            }
        });

        // Optional: Check on password input as well
        document.getElementById("password").addEventListener("keyup", function () {
            const password = document.getElementById("password").value;
            const confirmPassword = document.getElementById("confirmPassword").value;
            const errorMessage = document.getElementById("errorMessage");

            // Check if passwords match
            if (password !== confirmPassword && confirmPassword !== "") {
                errorMessage.textContent = "Passwords do not match!";
                errorMessage.style.display = "block"; // Show error message
            } else {
                errorMessage.textContent = "";
                errorMessage.style.display = "none"; // Hide error message
            }
        });


    </script>

</body>

</html>