<?php
require_once __DIR__ . '/vendor/autoload.php';

$errors = false;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $rise = (int) $_POST['rise'];

    // Validate Rise height. (Max of 32 inches currently)
    if ($rise > 100 || $rise < 1) {
        $errors = '<div class="red mb4">* Rise can only be a number between 1 and 100</div>';
    }

    initSessionData($_POST);

    if (!$errors) {
        header('Location: builder.php');
        exit;
    }
}

$self_url = (isset($_SERVER['QUERY_STRING'])) ? "{$_SERVER['PHP_SELF']}?{$_SERVER['QUERY_STRING']}" : $_SERVER['PHP_SELF'];

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>QRamp Custom Ramp Builder</title>

    <link rel="stylesheet" href="css/tachyons.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
<?php if (defined('DEBUG') && DEBUG) {
echo '<details><summary>Session Data</summary><pre>' . print_r($_SESSION, true) . '</pre></details>';
echo '<details><summary>Post Data</summary><pre>' . print_r($_POST, true) . '</pre></details>';
} ?>
    <header class="tc pv2">
        <img src="images/qramp-logo.png" alt="Qramp - Modular Access System">
    </header>

    <main class="center mw7 shadow-2 mb4">
        <h1 class="f3 bg-blue white ma0 pv3 ph2 ttu tc">Custom Ramp Builder</h1>
        <div class="pv4 ph3 bg-gradient">
            <?php if (isset($errors) && ! empty($errors)) {
                echo $errors;
            } ?>

            <div class="mb4">
                <h2 class="f3 fw5 blue tc mt0">Before You Begin</h2>
                <p class="tc">We recommend you have these measurements ready before starting:</p>
                <div class="flex flex-column justify-center align-center items-center ">
                    <ul class="mv0 intro-list">
                        <li>Width of the stairs or space between the railings</li>
                        <li>Porch size: width, height, and depth</li>
                        <li>Height from the doorway to the ground</li>
                        <li>Height of the first step or porch</li>
                        <li>Whether the ground slopes up or down (+/−)</li>
                        <li>Take note any obstacles that could affect ramp placement, such as A/C units, hydro meters, faucets, vents, downspouts, walkways, gardens, or uneven ground</li>
                    </ul>
                </div>
            </div>

            <form class="tc" action="<?= $self_url ?>" method="post">
                <div class="mb4">
                    <span class="f3 fw5 blue">Do you require an ADA Compliant Ramp?</span>
                    <label class="flex justify-center items-center ga2 f4 pt3 pointer">
                        <input class="w1 h1" type="checkbox" name="ada_compliant" value="1" <?= !empty($_POST['ada_compliant']) ? 'checked' : '' ?>>
                        <span class="f5 fw4">Design an ADA Compliant Ramp</span>
                    </label>
                </div>

                <div class="mb4">
                    <div class="flex flex-wrap justify-center items-baseline ga2">
                        <label class="f3 fw5 blue" for="rise">What is your rise in inches?</label>
                        <input class="f4" id="rise" name="rise" type="number" value="<?= ! empty($_POST['rise']) ? $_POST['rise'] : ''; ?>" min="1" max="100" step="1">
                    </div>
                    <p class="f5 mb0">Rise (in inches) is the vertical height from the ground to the top edge of the doorway threshold. Measure from the ground up to the threshold’s top edge.</p>
                </div>

                <div class="mv4">
                    <div class="flex flex-wrap justify-center items-baseline ga2">
                        <label class="f3 fw5 blue" for="target-slope">What is your target slope?</label>
                        <select class="f4" id="target-slope" name="target_slope">
                            <option data-slope="1:18" data-desc="Ideal for manual wheelchair use or elderly pedestrian access. Exceeds ADA slope requirements." data-img="1-18.jpg" value="18">1:18 (3.2&deg; gentle slope)</option>
                            <option data-slope="1:15" data-desc="Very easy for manual wheelchair use or elderly pedestrian access. Exceeds ADA slope requirements." data-img="1-15.jpg" value="15">1:15 (3.8&deg; gentle slope)</option>
                            <option data-slope="1:12" data-desc="Most common. Meets ADA guidelines and aligns with most municipal code requirements for public access. Suitable for elderly pedestrians and manual wheelchair users." data-img="1-12.jpg" value="12" selected="selected">1:12 (4.8&deg; gentle slope)</option>
                            <option data-slope="1:9" data-desc="Assisted manual use or power wheelchair use recommended. Difficult for independent manual wheelchair users" data-img="1-9.jpg" value="9">1:9 (6.3&deg; moderate slope)</option>
                            <option data-slope="1:6" data-desc="Suitable for power wheelchair use; assisted use may be possible. Not recommended for manual wheelchair users. Use caution." data-img="1-6.jpg" value="6">1:6 (9.5&deg; dynamic slope)</option>
                        </select>
                    </div>
                </div>

                <button class="btn dib f3" type="submit">Continue →</button>
            </form>
        </div>

        <div class="pa3 tc">
            <h3 class="f3 fw5 mt0 blue" id="target-slope-title">Target Slope <span>1:12</span></h3>
            <p id="target-slope-desc">Most common. Meets ADA guidelines and aligns with most municipal code requirements for public access. Suitable for elderly pedestrians and manual wheelchair users.</p>
            <img id="rampImg" src="images/slopes/1-12.jpg">
        </div>
    </main>

    <script src="js/scripts.js"></script>

    <script>
    localStorage.setItem('modules', []);

    const riseField = document.querySelector('input[name="rise"]');
    const maxRise = 32;

    riseField.addEventListener('input', () => {
        if (riseField.value > maxRise) {
            const notification = document.createElement('div');
            notification.classList.add('notification', 'red', 'pa2', 'tc', 'bg-washed-red', 'f4');
            notification.innerHTML = `* For a rise greater than ${maxRise}", <strong>Extended Legs</strong> are required.`;

            if (!document.querySelector('.notification')) {
                document.querySelector('main').insertBefore(notification, document.querySelector('main').firstChild);
            }
        } else {
            const notification = document.querySelector('.notification');
            if (notification) {
                notification.remove();
            }
        }
    });
    </script>

    <script>
    this.addEventListener('DOMContentLoaded', preloadModuleImages, true);

    function preloadModuleImages(e) {
        let modules = [
            '1N',   '1S',   '1W',   '1E',
            '2N',   '2W',
            '3N',   '3S',   '3W',   '3E',
            '4N',   '4S',   '4W',   '4E',
            '4v2N', '4v2S', '4v2W', '4v2E',
            '6N',   '6S',   '6W',   '6E',
            '7N',   '7W',
            '7B-N', '7B-S', '7B-W', '7B-E',
            '8N',   '8S',   '8W',   '8E',
            '9N',   '9S',   '9W',   '9E',
            '10N',  '10S',  '10W',  '10E',
        ];

        for (var i = 0; i < modules.length; i++) {
            let image = new Image();
            image.src = `images/modules/${modules[i]}.webp`;
        }
    }
    </script>
</body>

</html>
