<?php
include "../config/db.php";

$success = '';
$error = '';

if (isset($_POST['register'])) {
    $name = mysqli_real_escape_string($conn, $_POST['name']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $phone = mysqli_real_escape_string($conn, $_POST['phone']);
    $address = mysqli_real_escape_string($conn, $_POST['address']);
    $password = password_hash($_POST['password'], PASSWORD_DEFAULT);

    // Check if email exists
    $check = mysqli_query($conn, "SELECT * FROM users WHERE email='$email'");

    if (mysqli_num_rows($check) > 0) {
        $error = "Email already registered!";
    } else {
        // Check if phone column exists, if not add it dynamically
        $check_columns = mysqli_query($conn, "SHOW COLUMNS FROM users LIKE 'phone'");
        if(mysqli_num_rows($check_columns) == 0) {
            mysqli_query($conn, "ALTER TABLE users ADD COLUMN phone VARCHAR(20)");
        }
        
        $check_columns = mysqli_query($conn, "SHOW COLUMNS FROM users LIKE 'address'");
        if(mysqli_num_rows($check_columns) == 0) {
            mysqli_query($conn, "ALTER TABLE users ADD COLUMN address TEXT");
        }

        $query = "INSERT INTO users (name, email, phone, address, password) 
                  VALUES ('$name', '$email', '$phone', '$address', '$password')";

        if (mysqli_query($conn, $query)) {
            $success = "Registration successful! You can now login.";
        } else {
            $error = "Error: " . mysqli_error($conn);
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - ShopNest Rentals</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="../assets/css/style.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), 
                        url('../assets/images/fabric-bg.jpg');
            background-size: cover;
            background-attachment: fixed;
        }
        .register-container {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 0;
        }
        .register-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
            border-top: 5px solid #ff6b35;
            position: relative;
            overflow: hidden;
        }
        .register-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #ff6b35, #3498db);
        }
        .register-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .register-header i {
            font-size: 3rem;
            background: linear-gradient(45deg, #ff6b35, #3498db);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 15px;
        }
        .fashion-icon {
            position: absolute;
            right: 20px;
            top: 20px;
            color: #f8f9fa;
            font-size: 4rem;
            z-index: 0;
        }
        .form-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
        }
        .form-control {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 12px 15px;
            transition: all 0.3s;
        }
        .form-control:focus {
            border-color: #ff6b35;
            box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
        }
        .btn-rental {
            background: linear-gradient(45deg, #ff6b35, #ff8e53);
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-rental:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
        }
        .benefits-list {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
        }
        .benefits-list li {
            margin-bottom: 8px;
            color: #555;
        }
    </style>
</head>
<body>

    <div class="container register-container">
        <div class="register-card fade-in">
            <div class="fashion-icon">
                <i class="fas fa-tshirt"></i>
            </div>
            
            <div class="register-header">
                <i class="fas fa-user-plus"></i>
                <h2 style="color: #2c3e50;">Join ShopNest Rentals</h2>
                <p class="text-muted">Rent premium clothing for every occasion</p>
            </div>

            <?php if($success): ?>
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    <?php echo $success; ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>

            <?php if($error): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <?php echo $error; ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>

            <form method="POST" id="registerForm">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="form-label">
                            <i class="fas fa-user me-2"></i>Full Name
                        </label>
                        <input type="text" 
                               name="name" 
                               class="form-control"
                               placeholder="Enter your full name"
                               required
                               value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; ?>">
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">
                            <i class="fas fa-envelope me-2"></i>Email
                        </label>
                        <input type="email" 
                               name="email" 
                               class="form-control"
                               placeholder="Enter your email"
                               required
                               value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : ''; ?>">
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">
                            <i class="fas fa-phone me-2"></i>Phone Number
                        </label>
                        <input type="tel" 
                               name="phone" 
                               class="form-control"
                               placeholder="Enter phone number"
                               required
                               value="<?php echo isset($_POST['phone']) ? htmlspecialchars($_POST['phone']) : ''; ?>">
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">
                            <i class="fas fa-home me-2"></i>Delivery Address
                        </label>
                        <textarea name="address" 
                                  class="form-control"
                                  rows="2"
                                  placeholder="Enter your complete address for delivery"
                                  required><?php echo isset($_POST['address']) ? htmlspecialchars($_POST['address']) : ''; ?></textarea>
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">
                            <i class="fas fa-lock me-2"></i>Password
                        </label>
                        <input type="password" 
                               name="password" 
                               id="password"
                               class="form-control"
                               placeholder="Create password"
                               required>
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">
                            <i class="fas fa-lock me-2"></i>Confirm Password
                        </label>
                        <input type="password" 
                               name="confirm_password"
                               id="confirm_password" 
                               class="form-control"
                               placeholder="Confirm password"
                               required>
                    </div>
                </div>

                <div class="benefits-list">
                    <h6><i class="fas fa-star me-2"></i>Why Rent with Us?</h6>
                    <ul class="mb-0" style="font-size: 0.9rem;">
                        <li>✓ Rent designer clothes at 10% of retail price</li>
                        <li>✓ Free delivery & pickup</li>
                        <li>✓ Professional dry cleaning included</li>
                        <li>✓ Flexible rental periods</li>
                    </ul>
                </div>

                <div class="form-check mb-4 mt-3">
                    <input class="form-check-input" type="checkbox" id="terms" required>
                    <label class="form-check-label" for="terms">
                        I agree to the <a href="#" style="color: #ff6b35;">Rental Terms & Conditions</a>
                    </label>
                </div>

                <button type="submit" name="register" class="btn btn-rental btn-lg w-100">
                    <i class="fas fa-user-plus me-2"></i>Create Account
                </button>

                <div class="text-center mt-4">
                    <p class="text-muted">
                        Already have an account? 
                        <a href="login.php" style="color: #ff6b35; font-weight: 600;">
                            Login here
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.getElementById('registerForm').onsubmit = function(e) {
            var password = document.getElementById('password').value;
            var confirm = document.getElementById('confirm_password').value;
            
            if(password !== confirm) {
                alert('Passwords do not match!');
                e.preventDefault();
                return false;
            }
            
            if(password.length < 6) {
                alert('Password must be at least 6 characters long!');
                e.preventDefault();
                return false;
            }
            
            return true;
        };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>