<?php
// Start session
session_start();
require 'db.php';  // Database connection

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Collect form data
    $name = $_POST['name'];
    $email = $_POST['email'];
    $register_number = $_POST['register_number'];
    $password = $_POST['password'];
    $confirm_password = $_POST['confirm-password'];
    $department = $_POST['department'];  // Department selected by user
    $error =0;
    // Check if passwords match
    if ($password != $confirm_password) {
        header("location:error.html");
        exit();       
    }
    $len=strlen($password);
    if($len<8)
    {
        header("location:password_error.html");
        exit();
    }
    // Hash the password before saving to the database
    $hashed_password = password_hash($password, PASSWORD_DEFAULT);

    // Choose the correct table based on the selected department
    $table = $department;  // The table will be the same as the department name

    try {
        // Check if the department table exists (optional, to ensure DB integrity)
        $sql = "SHOW TABLES LIKE :table";
        $stmt = $conn->prepare($sql);
        $stmt->bindParam(':table', $table);
        $stmt->execute();
        
        if ($stmt->rowCount() == 0) {
            echo "<script>alert('Selected department does not exist!');</script>";
            exit();
        }

        // Prepare SQL to insert into the correct department table
        $sql = "INSERT INTO $table (name, email, register_number, password, department) 
                VALUES (:name, :email, :register_number, :password, :department)";
        $stmt = $conn->prepare($sql);

        // Bind parameters
        $stmt->bindParam(':name', $name);
        $stmt->bindParam(':email', $email);
        $stmt->bindParam(':register_number', $register_number);
        $stmt->bindParam(':password', $hashed_password);
        $stmt->bindParam(':department', $department);

        // Execute the statement
        $stmt->execute();

        // Redirect to login page or any other page as needed
        header('Location: StudentLS.html');
        exit();
        
    } catch (PDOException $e) {
        // Show an alert for duplicate entry
        header("Location:dublication_error.html");
    }
}
?>
<html>
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    /* Body and General Styles */
    body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* Ensure full height to push footer to the bottom */
    }

    nav {
        background-color: #4CAF50;
        padding: 15px;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    nav ul {
        list-style: none;
        display: flex;
        justify-content: flex-end;  /* Align the nav items to the right */
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }

    nav ul li {
        margin: 5px 15px;
    }

    nav a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        transition: color 0.3s;
        font-size: 0.9em;
    }

    nav a:hover {
        color: #dfffd6;
    }

    /* Container for Form and Image */
    .form-container {
        max-width: 1000px;
        width: 100%;
        margin: 10px auto;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;  /* Reduced gap */
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }

    .form-container img {
        max-width: 400px;
        width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Form Section */
    .form-section {
        max-width: 500px;
        width: 100%;
        text-align: left;
    }

    .form-section h2 {
        color: #333;
        margin-bottom: 20px;
        font-size: 1.5em;
        text-align: center;
    }

    .form-group {
        position: relative;
        margin-bottom: 15px;
    }

    /* Input fields with icons */
    .form-group input,
    .form-group select {
        width: 100%;
        padding: 12px 12px 12px 45px;  /* Increased left padding to create space between icon and text */
        border: 1px solid #ddd;
        border-radius: 8px;
        outline: none;
        transition: all 0.3s ease;
        font-size: 0.9em;
        box-sizing: border-box;
    }

    .form-group input:focus,
    .form-group select:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

    /* Icon styling */
    .form-group i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #4CAF50; /* Change icon color to a green shade */
    }

    button[type="submit"] {
        background: linear-gradient(45deg, #4CAF50, #81C784);
        color: #fff;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: bold;
        font-size: 1em;
        width: 100%;
        margin-top: 20px;
    }

    button[type="submit"]:hover {
        background: linear-gradient(45deg, #388E3C, #66BB6A);
    }

    /* Options (Sign Up, Forgot Password) Links */
    .options {
        font-size: 0.9em;
        text-align: center;
    }

    .options a {
        display: inline-block;
        margin-top: 10px;
        padding: 10px;
        font-size: 1em;
        color: #4CAF50;
        border: 2px solid #4CAF50;
        border-radius: 8px;
        transition: all 0.3s;
    }

    .options a:hover {
        background-color: #4CAF50;
        color: white;
        text-decoration: none;
    }

    /* Media Queries for Mobile View (below 768px) */
    @media (max-width: 767px) {
        nav ul {
            justify-content: space-between; /* Align nav items to both sides */
            padding: 0;
            margin: 0;
            width: 100%; /* Make sure nav items span the full width */
        }

        nav {
            padding: 10px; /* Reduce padding to ensure it fits the screen */
        }

        .form-container {
            flex-direction: column; /* Stack items vertically */
            padding: 10px; /* Add padding for better spacing on small screens */
            margin: 0; /* Remove margins to ensure it touches the screen edges */
        }

        /* Ensure the image and form section take the full width */
        .form-container .image-container {
            order: -1; /* Move the image to the top */
            width: 100%; /* Ensure the image takes full width */
            margin-bottom: 20px; /* Add space between image and form */
        }

        .form-container img {
            max-width: 100%; /* Ensure image scales correctly */
            height: auto;
        }

        .form-container .form-section {
            width: 100%; /* Form takes full width on mobile */
        }

        button[type="submit"] {
            width: auto; /* Allow the submit button to resize properly */
            margin-top: 20px;
        }

        .options a {
            font-size: 0.9em; /* Make links smaller on mobile */
        }
    }

    /* Footer Styles */
    .copyright {
        text-align: center;
        margin-top: 20px;
        padding: 15px 10px;
        background-color: #f9f9f9;
        border-top: 1px solid #ddd;
        color: #666;
        font-size: 0.8em;
        margin-top: auto; /* Push footer to the bottom of the page */
    }

    /* Modal Popup for Forgot Password */
    .modal {
        display: none; /* Hidden by default */
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
        padding-top: 60px;
    }

    .modal-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border-radius: 10px;
        width: 80%;
        max-width: 400px;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    /* Styling for select input (already defined, but included for reference) */
.form-group select {
width: 100%;
padding: 12px 12px 12px 45px;  /* Adjust left padding for spacing */
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
transition: all 0.3s ease;
font-size: 0.9em;
box-sizing: border-box;
}

.form-group select:focus {
border-color: #4CAF50;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
</style>
<body>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="upload.html">Upload Docx</a></li>
            <li><a href="feedback.html">Feedback</a></li>
            <li><a href="Contact.html">Contact</a></li>
        </ul>
    </nav>
</body>
<br>
    <div class="form-container">
        <div class="image-container">
            <img src="images/signup-image.jpg" alt="Sign Up Image">
        </div>
        <div class="form-section">
            <h2>Create Your Account</h2>
            <form action="signup.php" method="POST">
                <div class="form-group">
                    <i class="material-icons">person</i>
                    <input type="text" id="name" name="name" required placeholder="Full Name">
                </div>

                <div class="form-group">
                    <i class="material-icons">email</i>
                    <input type="email" id="email" name="email" required placeholder="Email">
                </div>

                <div class="form-group">
                    <i class="material-icons">card_membership</i>
                    <input type="text" id="register_number" name="register_number" required pattern="7100\d{8}" title="Please enter a 12-digit register number" placeholder="12-Digit Register Number">
                </div>
<!-- Department Dropdown -->
                <div class="form-group">
                    <i class="material-icons">school</i>
                    <select id="department" name="department" required >
                        <option value="" disabled selected>Select Department</option>
                        <option value="cs_department">CSE</option>
                        <option value="ai_ds_department">AI&DS</option>
                        <option value="eee_department">EEE</option>
                        <option value="mech_department">ECE</option>
                        <option value="ece_department">MECH</option>
                        <option value="mba_department">MBA</option>
                    </select>
                </div>
                <div class="form-group">
                    <i class="material-icons">lock</i>
                    <input type="password" id="password" name="password" required placeholder="Password">
                </div>

                <div class="form-group">
                    <i class="material-icons">lock</i>
                    <input type="password" id="confirm-password" name="confirm-password" required placeholder="Confirm Password">
                </div>
                <button type="submit">Sign Up</button>
            </form>
<br>
            <div class="options">
                <a href="StudentLS.html" id="signin-link">Already have an account? Sign In</a>
            </div>
        </div>
    </div>
    <section id="mySection"style="display: none;">
        <h1>hi</h1>
    </section>
    <script>
        // JavaScript to handle SignUp and Forgot Password popups
        document.getElementById("signup-link").addEventListener("click", function() {
            document.getElementById("login-section").style.display = "none";
            document.getElementById("signup-section").style.display = "block";
        });

        document.getElementById("signin-link").addEventListener("click", function() {
            document.getElementById("signup-section").style.display = "none";
            document.getElementById("login-section").style.display = "block";
        });

        document.getElementById("forgot-password-link").addEventListener("click", function() {
            document.getElementById("forgot-password-modal").style.display = "block";
        });

        document.querySelector(".close").addEventListener("click", function() {
            document.getElementById("forgot-password-modal").style.display = "none";
        });

        window.onclick = function(event) {
            if (event.target == document.getElementById("forgot-password-modal")) {
                document.getElementById("forgot-password-modal").style.display = "none";
            }
        };
        

    </script>
    
    
</html>