---
import Layout from "../layouts/Layout.astro";
const { PUBLIC_DISCORD_WEBHOOK_LINK } = import.meta.env;
const { PUBLIC_SLACK_WEBHOOK_LINK } = import.meta.env;
---

<Layout>
    <div
        class="bg-ieee h-[35em] rounded-b-[10%] my-auto flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
        style="background-image: url('/backgrounds/fa21qp.png');"
    >
        <!-- BLUE BG -->
        <div class="flex flex-col items-center justify-center text-center">
            <div class="text-[3.2em] text-white font-bold mb-4 w-[11em]">
                Need to reach out? Fill out the form below!
            </div>
        </div>
    </div>

    <div class="bg-white px-6 py-24 sm:py-32 lg:px-8">
        <div
            class="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]"
            aria-hidden="true"
        >
            <div
                class="relative left-1/2 -z-10 aspect-[1155/678] w-[36.125rem] max-w-none -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-40rem)] sm:w-[72.1875rem]"
                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
            >
            </div>
        </div>
        <div class="mx-auto max-w-2xl text-center">
            <h2
                class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
            >
                Contact Form
            </h2>
            <p class="mt-2 text-lg leading-8 text-gray-600">
                Make sure you fill out the required fields. Double check to make
                sure all the information is correct before submitting!
            </p>
        </div>
        <form
            action="#"
            method="POST"
            class="mx-auto mt-16 max-w-xl sm:mt-12"
            id="contactForm"
        >
            <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
                <div>
                    <label
                        for="first-name"
                        class="block text-sm font-semibold leading-6 text-gray-900"
                        >First name</label
                    >
                    <div class="mt-2.5">
                        <input
                            type="text"
                            name="first-name"
                            id="first-name"
                            autocomplete="given-name"
                            required
                            maxlength="1024"
                            class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
                        />
                    </div>
                </div>
                <div>
                    <label
                        for="last-name"
                        class="block text-sm font-semibold leading-6 text-gray-900"
                        >Last name</label
                    >
                    <div class="mt-2.5">
                        <input
                            type="text"
                            name="last-name"
                            id="last-name"
                            autocomplete="family-name"
                            required
                            maxlength="1024"
                            class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
                        />
                    </div>
                </div>

                <div class="sm:col-span-2">
                    <label
                        for="email"
                        class="block text-sm font-semibold leading-6 text-gray-900"
                        >Email</label
                    >
                    <div class="mt-2.5">
                        <input
                            type="email"
                            name="email"
                            id="email"
                            autocomplete="email"
                            required
                            maxlength="1024"
                            pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
                            class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
                        />
                    </div>
                </div>
                <div class="sm:col-span-2">
                    <label
                        for="phone-number"
                        class="block text-sm font-semibold leading-6 text-gray-900"
                        >Phone number</label
                    >
                    <div class="relative mt-2.5">
                        <input
                            type="tel"
                            name="phone-number"
                            id="phone-number"
                            autocomplete="tel"
                            required
                            maxlength="16"
                            pattern="\+?[0-9]{1,3}?[-. ]?[0-9]{2,3}?[-. ]?[0-9]{3,4}?[-. ]?[0-9]{3,4}"
                            class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
                        />
                    </div>
                </div>
                <div class="sm:col-span-2">
                    <label
                        for="subject"
                        class="block text-sm font-semibold leading-6 text-gray-900"
                        >Subject</label
                    >
                    <div class="mt-2.5">
                        <input
                            type="text"
                            name="subject"
                            id="subject"
                            autocomplete="subject"
                            required
                            maxlength="1024"
                            class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
                        />
                    </div>
                </div>
                <div class="sm:col-span-2">
                    <label
                        for="message"
                        class="block text-sm font-semibold leading-6 text-gray-900"
                        >Message</label
                    >
                    <div class="mt-2.5">
                        <textarea
                            name="message"
                            id="message"
                            rows="4"
                            required
                            maxlength="1024"
                            class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
                        ></textarea>
                    </div>
                </div>
                <div class="flex gap-x-4 sm:col-span-2">
                    <div class="flex h-6 items-center">
                        <!-- Enabled: "bg-[#0072b5]", Not Enabled: "bg-gray-200" -->
                        <button
                            type="button"
                            class="bg-gray-200 flex w-8 flex-none cursor-pointer rounded-full p-px ring-1 ring-inset ring-gray-900/5 transition-colors duration-200 ease-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ieee"
                            role="switch"
                            aria-checked="false"
                            aria-labelledby="switch-1-label"
                        >
                            <span class="sr-only">Agree to policies</span>
                            <!-- Enabled: "translate-x-3.5", Not Enabled: "translate-x-0" -->
                            <span
                                aria-hidden="true"
                                class="translate-x-0 h-4 w-4 transform rounded-full bg-white shadow-sm ring-1 ring-gray-900/5 transition duration-200 ease-in-out"
                            ></span>
                        </button>
                    </div>
                    <label
                        class="text-sm leading-6 text-gray-600"
                        id="switch-1-label"
                    >
                        By selecting this, you agree to our
                        <a
                            href="https://www.ieee.org/security-privacy.html"
                            class="font-semibold text-ieee"
                            >privacy&nbsp;policy</a
                        >.
                    </label>
                </div>
            </div>
            <div class="mt-10">
                <button
                    type="submit"
                    id="policyAgree"
                    class="block w-full rounded-md bg-ieee px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-[#0072b5] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ieee"
                    >Submit to IEEE @ UCSD</button
                >
            </div>
        </form>
    </div>

    {/* @ts-ignore */}
    <script
        define:vars={{ PUBLIC_DISCORD_WEBHOOK_LINK, PUBLIC_SLACK_WEBHOOK_LINK }}
    >
        document.addEventListener("DOMContentLoaded", function () {
            const form = document.getElementById("contactForm");
            const policyAgreeButton = document.querySelector(
                'button[role="switch"]'
            );
            let policyAgreed = false;

            // Toggle privacy policy agreement
            policyAgreeButton.addEventListener("click", function () {
                policyAgreed = !policyAgreed;
                this.setAttribute("aria-checked", policyAgreed.toString());
                const indicator = this.querySelector(
                    'span[aria-hidden="true"]'
                );
                if (policyAgreed) {
                    this.classList.replace("bg-gray-200", "bg-ieee");
                    indicator.classList.replace(
                        "translate-x-0",
                        "translate-x-3.5"
                    );
                } else {
                    this.classList.replace("bg-ieee", "bg-gray-200");
                    indicator.classList.replace(
                        "translate-x-3.5",
                        "translate-x-0"
                    );
                }
            });

            form.addEventListener("submit", function (e) {
                e.preventDefault();
                if (!policyAgreed) {
                    alert("Please agree to the privacy policy.");
                    return;
                }

                const formData = new FormData(form);
                const formProps = Object.fromEntries(formData);

                const discordPayload = {
                    content: "New contact form submission",
                    embeds: [
                        {
                            title: "Contact Form Submission",
                            color: 25243,
                            fields: [
                                {
                                    name: "First Name",
                                    value: formProps["first-name"],
                                    inline: true,
                                },
                                {
                                    name: "Last Name",
                                    value: formProps["last-name"],
                                    inline: true,
                                },
                                { name: "Email", value: formProps["email"] },
                                {
                                    name: "Phone Number",
                                    value: formProps["phone-number"],
                                },
                                {
                                    name: "Subject",
                                    value: formProps["subject"],
                                },
                                {
                                    name: "Message",
                                    value: formProps["message"],
                                },
                            ],
                        },
                    ],
                };

                // Slack payload may need to be adjusted depending on your Slack app's requirements
                const slackPayload = {
                    text: "New contact form submission",
                    attachments: [
                        {
                            color: "#36a64f",
                            fields: [
                                {
                                    title: "Name",
                                    value: `${formProps["first-name"]} ${formProps["last-name"]}`,
                                    short: true,
                                },
                                {
                                    title: "Email",
                                    value: formProps["email"],
                                    short: true,
                                },
                                {
                                    title: "Phone Number",
                                    value: formProps["phone-number"],
                                },
                                {
                                    title: "Subject",
                                    value: formProps["subject"],
                                },
                                {
                                    title: "Message",
                                    value: formProps["message"],
                                },
                            ],
                        },
                    ],
                };

                Promise.all([
                    fetch(PUBLIC_DISCORD_WEBHOOK_LINK, {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(discordPayload),
                    }),
                    fetch(PUBLIC_SLACK_WEBHOOK_LINK, {
                        method: "POST",

                        body: JSON.stringify(slackPayload),
                    }),
                ])
                    .then((responses) => {
                        // Check all responses are ok (could refine to check each individually)
                        if (responses.every((response) => response.ok)) {
                            alert("Form submitted successfully.");
                            form.reset(); // Reset form fields after successful submission
                            // Reset the policy button
                            policyAgreeButton.click(); // This toggles it off
                        } else {
                            alert("Failed to submit form. Please try again.");
                        }
                    })
                    .catch((error) => {
                        console.error("Error:", error);
                        alert("An error occurred. Please try again.");
                    });
            });
        });
    </script>
</Layout>
