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

if (isset($_POST['send'])) {
    $_SESSION['designed_by'] = $_POST['designed_by'];
    $_SESSION['project_num'] = $_POST['project_num'];
    $_SESSION['email']       = $_POST['email'];
    $_SESSION['notes']       = $_POST['notes'];
    $_SESSION['quote']       = true;
    $_SESSION['country']     = $_POST['country'];
    $_SESSION['state']       = $_POST['state'];

    header('Location: project-pdf.php');
    exit;
}

$image_file = (isset($_POST['image-file'])) ? $_POST['image-file'] : null;
$mcount = (isset($_POST['mcount'])) ? $_POST['mcount'] : null;
$actual_slope = (isset($_POST['target_slope'])) ? $_POST['target_slope'] : null;

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

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

    <title>Get a Quote - QRAMP 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="bb b--light-gray mb3 shadow-1">
        <div class="flex justify-between gh5 items-center lh-copy ph3">
            <a href="https://qramp.com" target="_blank" title="Visit the QRamp website">
                <img src="images/qramp-logo.png" alt="QRamp - Modular Access System" width="230" height="90">
            </a>
            <nav class="flex gv2 gh3 pa3 tc justify-between">
                <div class="flex gv2 gh3 f6">
                    <a href="/builder.php">
                        <img src="images/toolbar/back.svg" alt="" width="50" height="50"><br>
                        Back to Builder
                    </a>

                    <a href="https://qramp.com/find-a-dealer" title="Find a Dealer" target="_blank">
                        <img src="images/toolbar/search.png" alt="" width="50" height="50"><br>
                        Find a Dealer
                    </a>
                </div>
            </nav>
            <div class="tr nowrap">
                <span class="f6">For assistance please call</span><br>
                <a class="f3 fw5" href="tel:+18556977267">(855)-697-7267</a>
            </div>
        </div>
    </header>

    <main class="flex-l ph3 ga3 items-start">
        <div class="flex flex-column ga2 ba b--blue pa3 bw3 lh-copy" style="flex-basis:300px">
            <h1 class="blue f3 ma0">Ramp Preview</h1>
            <p class="mt0 f6">Here is a preview of your ramp. Please fill in the rest of your details below and we will get back to you.</p>

            <h2 class="ma0 f4 blue">Your Information</h2>

            <form class="flex flex-column ga3" action="quote.php" method="post">
                <label class="f6 fw6">
                    Your Location
                    <select class="db w-100" name="country" required onchange="checkIfUS();">
                        <option value=""></option>
                        <option value="CA">Canada</option>
                        <option value="US">United States</option>
                    </select>
                </label>

                <label class="f6 fw6 dn" id="stateField">
                    Your State
                    <select class="db w-100" name="state">
                        <option selected value=""></option>
                        <option>Alabama</option>
                        <option>Alaska</option>
                        <option>Arizona</option>
                        <option>Arkansas</option>
                        <option>California</option>
                        <option>Colorado</option>
                        <option>Connecticut</option>
                        <option>Delaware</option>
                        <option>Florida</option>
                        <option>Georgia</option>
                        <option>Hawaii</option>
                        <option>Idaho</option>
                        <option>Illinois</option>
                        <option>Indiana</option>
                        <option>Iowa</option>
                        <option>Kansas</option>
                        <option>Kentucky</option>
                        <option>Louisiana</option>
                        <option>Maine</option>
                        <option>Maryland</option>
                        <option>Massachusetts</option>
                        <option>Michigan</option>
                        <option>Minnesota</option>
                        <option>Mississippi</option>
                        <option>Missouri</option>
                        <option>Montana</option>
                        <option>Nebraska</option>
                        <option>Nevada</option>
                        <option>New Hampshire</option>
                        <option>New Jersey</option>
                        <option>New Mexico</option>
                        <option>New York</option>
                        <option>North Carolina</option>
                        <option>North Dakota</option>
                        <option>Ohio</option>
                        <option>Oklahoma</option>
                        <option>Oregon</option>
                        <option>Pennsylvania</option>
                        <option>Rhode Island</option>
                        <option>South Carolina</option>
                        <option>South Dakota</option>
                        <option>Tennessee</option>
                        <option>Texas</option>
                        <option>Utah</option>
                        <option>Vermont</option>
                        <option>Virginia</option>
                        <option>Washington</option>
                        <option>West Virginia</option>
                        <option>Wisconsin</option>
                        <option>Wyoming</option>
                    </select>
                </label>

                <label class="f6 fw6">
                    Designed By *
                    <input class="db w-100" name="designed_by" type="text" required
                    value="<?= ($_SESSION['designed_by']) ? $_SESSION['designed_by'] : '' ?>">
                </label>

                <label class="f6 fw6">
                    Project Number *
                    <input class="db w-100" name="project_num" type="text" required
                    value="<?= ($_SESSION['project_num']) ? $_SESSION['project_num'] : '' ?>">
                </label>

                <label class="f6 fw6">
                    Email Address *
                    <input class="db w-100" name="email" type="email" required
                    value="<?= ($_SESSION['email']) ? $_SESSION['email'] : '' ?>">
                </label>

                <label class="f6 fw6">
                    Notes
                    <textarea class="db w-100" name="notes" rows="8"
                        ><?= ($_SESSION['notes']) ? $_SESSION['notes'] : '' ?></textarea>
                </label>

                <input type="hidden" id="image-file" name="image-file" value="<?= $image_file; ?>">
                <input type="hidden" id="mcount" name="mcount" value="<?= $mcount; ?>">
                <input type="hidden" id="actual_slope" name="actual_slope" id="actual_slope" value="<?= $actual_slope; ?>">

                <?php if (!isset($_POST['send'])) : ?>
                    <button class="btn" name="send">Send</button>
                <?php endif; ?>

                <?php if (isset($_POST['send'])) : ?>
                    Thank you for using our builder. We have received your request and will get back to you.
                <?php endif; ?>
            </form>
        </div>

        <div class="flex flex-auto justify-center pa3">
            <img src="/projects/<?= $_SESSION['uuid'] . '.png'; ?>" alt="">
        </div>
    </main>

    <script>
        function checkIfUS() {
            const stateField = document.getElementById('stateField');
            if (document.querySelector('select[name="country"]').value === 'US') {
                stateField.classList.remove('dn');
            } else {
                stateField.classList.add('dn');
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            checkIfUS();
        })
    </script>
</body>
