{% extends "default.html" %}

{% block content %}
<style>
    .order-form {
        margin: 0 auto;
        margin-top: 2rem;
        max-width: 500px;
    }

    .order-form h2 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .order-form h2 hr {
        flex: 1;
    }

    .order-form h2 span {
        flex: 3;
        text-align: center;
    }

    .order-form--heading,
    .form-check {
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    #orderSuccess {
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
        padding-top: 5rem;
        text-align: center;
    }

    .order-toast {
        position: fixed;
        bottom: 1.5rem;
        margin: 0 auto;
        left: 0;
        right: 0;
        width: unset;
        z-index: 1000;
        height: auto !important;
    }
</style>

<form class="order-form" id="orderForm" action="#" onsubmit="submitForm(event)">
    <h2 class="order-form--heading">
        <hr /><span>Request a quote</span>
        <hr />
    </h2>

    <!-- Platforms -->
    <div class="mb-3">
        <label class="order-form--heading">Platforms to target</label>
        <div class="form-check">
            <input name="platform" class="form-check-input" type="checkbox" id="defaultCheck1" value="twitter">
            <label class="form-check-label" for="defaultCheck1">
                Twitter
            </label>
        </div>
        <div class="form-check">
            <input name="platform" class="form-check-input" type="checkbox" id="defaultCheck2" value="instagram">
            <label class="form-check-label" for="defaultCheck2">
                Instagram
            </label>
        </div>
        <div class="form-check">
            <input name="platform" class="form-check-input" type="checkbox" id="defaultCheck3" value="tiktok">
            <label class="form-check-label" for="defaultCheck3">
                TikTok
            </label>
        </div>
        <div class="form-check">
            <input name="platform" class="form-check-input" type="checkbox" id="defaultCheck3" value="facebook">
            <label class="form-check-label" for="defaultCheck4">
                Facebook
            </label>
        </div>
        <div class="form-check">
            <input name="platform" class="form-check-input" type="checkbox" id="defaultCheck5" value="reddit">
            <label class="form-check-label" for="defaultCheck5">
                Reddit
            </label>
        </div>
    </div>

    <!-- Narrative -->
    <div class="mb-3">
        <label for="exampleInputPassword1" class="order-form--heading">Narrative to push</label>
        <textarea form="orderForm" class="textarea form-control" id="narrativeToPush" name="narrative"
            rows="5"></textarea>
    </div>

    <!-- Additional Information -->
    <div class="mb-3">
        <label for="exampleInputPassword1" class="order-form--heading">Additional information</label>
        <textarea form="orderForm" class="textarea form-control" id="additionalInformation" name="info"
            rows="5"></textarea>
    </div>

    <!-- Customer Email -->
    <div class="mb-3">
        <label for="exampleInputEmail1" class="order-form--heading">Your Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" name="email" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text"><small>We respect your privacy. <a href="https://wikipedia.org/">Learn
                    more.</a></small></div>
    </div>

    <!-- Actions -->
    <button type="submit" class="btn btn-primary">Request Quote</button>
</form>

<div id="orderSuccess">
    <div class="order-form--heading">
        <h1>Order Received</h1>
        <p>We will get back to you as quickly as possible with a quote.</p>
    </div>
</div>

<div class="toast order-toast" id="order-post-success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true"
    data-bs-delay="5000">
    <div class="toast-body bg-success text-center text-white">
        <i class="fas fa-comment-alt-smile mr-2"></i> We have received your order.
    </div>
</div>

<div class="toast order-toast" id="order-post-error" role="alert" aria-live="assertive" aria-atomic="true"
    data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
    <div class="toast-body bg-danger text-center text-white">
        <i class="fas fa-exclamation-circle mr-2"></i>
        rDrama is very busy right now -- please try your request again later.
        </span>
    </div>
</div>

<script>
    function submitForm(e) {
        e.preventDefault();

        const formElement = document.getElementById('orderForm');
        const formData = new FormData(formElement);
        const structure = {
            platforms: [],
            narrative: "",
            info: "",
            email: ""
        };

        for (const [key, value] of formData.entries()) {
            if (key === "platform") {
                structure.platforms.push(value);
            } else {
                structure[key] = value;
            }
        }
        const capitalize = word => `${word[0].toUpperCase()}${word.slice(1)}`
        let platformText = capitalize(structure.platforms[0]);

        if (structure.platforms.length === 2) {
            platformText += ` and ${capitalize(structure.platforms[1])}`;
        } else if (structure.platforms.length === 3) {
            platformText += `, ${capitalize(structure.platforms[1])} and ${capitalize(structure.platforms[2])}`;
        } else {
            platformText += "all of your platforms"
        }

        const messageToSend = `
            I am looking to push the following narrative on ${platformText}:

            ${structure.narrative}

            ${structure.info.length > 0 ? `Additionally, ${structure.info}` : ""}

            You can contact me at ${structure.email}.
        `;

        const xhr = new XMLHttpRequest();
        xhr.open("post", `/order`);
        xhr.onload = function () {
            try {
                const response = JSON.parse(xhr.response);
                const succeeded = xhr.status >= 200 &&
                    xhr.status < 300 &&
                    response &&
                    !response.error;

                if (succeeded) {
                    const successElement = document.getElementById("orderSuccess");
                    const toast = document.getElementById("order-post-success");
                    
                    bootstrap.Toast.getOrCreateInstance(toast).show();

                    formElement.style.display = "none";
                    successElement.style.display = "flex";
                } else {
                    const toast = document.getElementById("order-post-error");
                    bootstrap.Toast.getOrCreateInstance(toast).show();
                }
            } catch (error) {
                const toast = document.getElementById("order-post-error");
                bootstrap.Toast.getOrCreateInstance(toast).show();
            }
        };

        const form = new FormData();
        form.append("formkey", formkey());
        form.append("message", messageToSend);
        xhr.send(form);
    }
</script>
{% endblock %}