34968-vm/signup.php

<?php
session_start();
if (isset($_SESSION['user_id'])) {
    header('Location: index.php');
    exit();
}
$page_title = "Sign Up";
include 'header.php';
?>

<style>
    .form-container {
        display: flex;
        min-height: 80vh;
    }
    .form-column {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
    }
    .image-column {
        flex: 1;
        background: url('assets/images/hero.jpg') no-repeat center center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
    }
    .form-box {
        width: 100%;
        max-width: 400px;
    }
    .form-box h2 {
        margin-bottom: 20px;
        font-size: 2.5rem;
        font-weight: bold;
    }
    .form-box .form-group {
        margin-bottom: 20px;
    }
    .form-box .form-control {
        border-radius: 5px;
        padding: 15px;
        border: 1px solid #ddd;
    }
    .form-box .btn-primary {
        width: 100%;
        padding: 15px;
        border-radius: 5px;
        background-color: #007bff;
        border: none;
    }
    .social-login {
        margin-top: 20px;
        text-align: center;
    }
    .social-login p {
        margin-bottom: 15px;
    }
    .social-login .btn {
        width: 100%;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 5px;
    }
    .social-login .btn-google {
        background-color: #db4437;
        color: white;
    }
    .social-login .btn-facebook {
        background-color: #3b5998;
        color: white;
    }
</style>

<div class="form-container">
    <div class="form-column">
        <div class="form-box">
            <h2>Create Your Account</h2>
            <p>Sign up to start ordering your favorite food.</p>
            <?php if (isset($_GET['error'])): ?>
                <div class="alert alert-danger" role="alert">
                    <?php echo htmlspecialchars($_GET['error']); ?>
                </div>
            <?php endif; ?>
            <form action="signup_process.php" method="post">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>

                <hr>
                <h4>Set Your Location</h4>
                <p><small>Pin your location on the map to help drivers find you.</small></p>

                <div class="form-group">
                    <label for="location_label">Location Label</label>
                    <input type="text" class="form-control" id="location_label" name="location_label" placeholder="e.g., 'Near the big mango tree'">
                </div>

                <div class="form-group">
                    <label for="location_notes">Location Notes</label>
                    <textarea class="form-control" id="location_notes" name="location_notes" rows="2" placeholder="e.g., 'Blue house, 2nd floor'"></textarea>
                </div>

                <div id='map' style='width: 100%; height: 300px; margin-bottom: 15px;'></div>
                <input type="hidden" id="lat" name="lat">
                <input type="hidden" id="lng" name="lng">

                <button type="submit" class="btn btn-primary">Sign Up</button>
            </form>
            <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
            <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
            <script>
                mapboxgl.accessToken = '<?php require_once 'includes/api_keys.php'; echo MAPBOX_API_KEY; ?>';
                const lat_input = document.getElementById('lat');
                const lng_input = document.getElementById('lng');

                const map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/streets-v11',
                    center: [171.380, 7.135], // Default to Majuro
                    zoom: 12
                });

                let marker = new mapboxgl.Marker({
                    draggable: true
                })
                .setLngLat([171.380, 7.135])
                .addTo(map);

                function onDragEnd() {
                    const lngLat = marker.getLngLat();
                    lat_input.value = lngLat.lat;
                    lng_input.value = lngLat.lng;
                }

                marker.on('dragend', onDragEnd);

                map.on('click', (e) => {
                    const coordinates = e.lngLat;
                    lat_input.value = coordinates.lat;
                    lng_input.value = coordinates.lng;
                    marker.setLngLat(coordinates).addTo(map);
                });

                // Set initial values
                lat_input.value = 7.135;
                lng_input.value = 171.380;
            </script>
            <div class="social-login">
                <p>Or sign up with</p>
                <a href="auth_google.php" class="btn btn-google"><i class="fab fa-google"></i> Sign up with Google</a>
            </div>
            <div class="mt-3 text-center">
                <p>Already have an account? <a href="login.php">Log in</a></p>
            </div>
        </div>
    </div>
    <div class="image-column">
        <div>
            <h1>Your next meal, delivered.</h1>
            <p>The best local restaurants, right at your fingertips.</p>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>