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

if (isset($_POST['generate'])) {
    $_SESSION['designed_by'] = $_POST['designed_by'];
    $_SESSION['project_num'] = $_POST['project_num'];
    $_SESSION['email']       = $_POST['email'];
    $_SESSION['notes']       = $_POST['notes'];
    $_SESSION['is_dealer']   = isset($_POST['is_dealer']);
    $_SESSION['country']     = $_SESSION['is_dealer'] ? ($_POST['country'] ?? '') : '';
    $_SESSION['state']       = $_SESSION['is_dealer'] ? ($_POST['state'] ?? '') : '';

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

$states = [
    'Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut',
    'Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa',
    'Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan',
    'Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada',
    'New Hampshire','New Jersey','New Mexico','New York','North Carolina',
    'North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island',
    'South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont',
    'Virginia','Washington','West Virginia','Wisconsin','Wyoming',
];
?><!DOCTYPE html>
<html lang="en">

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

    <title>Project Details - QRAMP Ramp Builder</title>

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

<body>
    <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:340px">
            <h1 class="blue f3 ma0">Ramp Preview</h1>
            <p class="mv0 f6">Your ramp preview is ready. Complete the details below to generate your diagram PDF. You will also receive a copy via email.</p>

            <form class="flex flex-column ga3" action="save.php" method="post">

                <label class="f6 fw6 flex items-center ga2">
                    <input type="checkbox" name="is_dealer" id="is_dealer" value="1" <?= !empty($_SESSION['is_dealer']) ? 'checked' : '' ?>>
                    I am a QRamp Authorized Dealer
                </label>

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

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

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

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

                <label class="f6 fw6">
                    Notes
                    <textarea class="db w-100" name="notes" rows="5" maxlength="150" id="notes"><?= htmlspecialchars($_SESSION['notes'] ?? '') ?></textarea>
                    <span class="f7 gray db tr"><span id="notes-count"><?= strlen($_SESSION['notes'] ?? '') ?></span>/150</span>
                </label>

                <div id="dealerLocation" class="<?= !empty($_SESSION['is_dealer']) ? '' : 'dn' ?> flex flex-column ga3">
                    <label class="f6 fw6">
                        Your Location
                        <select class="db w-100" name="country" id="country" onchange="checkIfUS()">
                            <option value=""></option>
                            <option value="CA" <?= ($_SESSION['country'] ?? '') === 'CA' ? 'selected' : '' ?>>Canada</option>
                            <option value="US" <?= ($_SESSION['country'] ?? '') === 'US' ? 'selected' : '' ?>>United States</option>
                        </select>
                    </label>

                    <label class="f6 fw6 dn" id="stateField">
                        Your State
                        <select class="db w-100" name="state">
                            <option value=""></option>
                            <?php foreach ($states as $state): ?>
                            <option <?= ($_SESSION['state'] ?? '') === $state ? 'selected' : '' ?>><?= $state ?></option>
                            <?php endforeach; ?>
                        </select>
                    </label>
                </div>

                <div class="flex ga2 mt2">
                    <button class="btn btn-primary w-100" name="generate" type="submit">Continue</button>
                </div>

            </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');
            stateField.classList.toggle('dn', document.getElementById('country').value !== 'US');
        }

        document.getElementById('is_dealer').addEventListener('change', function () {
            const dealerLocation = document.getElementById('dealerLocation');
            dealerLocation.classList.toggle('dn', !this.checked);
            if (!this.checked) {
                document.getElementById('country').value = '';
                document.getElementById('stateField').classList.add('dn');
            }
        });

        document.addEventListener('DOMContentLoaded', checkIfUS);

        document.getElementById('notes').addEventListener('input', function () {
            document.getElementById('notes-count').textContent = this.value.length;
        });
    </script>
</body>
</html>
