<template>
  <section class="text-white mt-20" id="contact">
    <h2 class="text-4xl font-bold text-white text-left mb-4 px-4 xl:pl-16">
      Let's Connect
    </h2>
    <div
      class="grid md:grid-cols-2 gap-4 relative px-4 xl:px-16 mt-8"
      data-aos="zoom-in-up"
    >
      <div>
        <p class="text-[#ADB7BE]">
          Check my email and linkedin or send a message here to get in touch!
        </p>
        <div class="col-lg-4 col-md-4 mb-lg-0 mt-5">
          <div class="flex mb-10 items-center">
            <div
              class="p-2"
              style="
                background: #111a3e;
                width: 50px;
                height: 46px;
                display: flex;
                justify-content: center;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid #111a3e;
                backdrop-filter: blur(9px);
                -webkit-backdrop-filter: blur(9px);
              "
            >
              <img
                src="https://img.icons8.com/metro/50/ffffff/new-post.png"
                alt="new-post"
                class="w-6"
              />
            </div>
            <div class="ml-5 text-white">
              <h4>Email</h4>
              <p class="text-[#ADB7BE]">info@fernandovideira.com</p>
            </div>
          </div>
          <div class="flex mb-10 items-center">
            <div
              class="p-2"
              style="
                background: #111a3e;
                width: 50px;
                height: 46px;
                display: flex;
                justify-content: center;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid #111a3e;
                backdrop-filter: blur(9px);
                -webkit-backdrop-filter: blur(9px);
              "
            >
              <img
                src="https://img.icons8.com/ios-filled/50/ffffff/phone.png"
                alt="new-post"
                class="w-6"
              />
            </div>
            <div class="ml-5 text-white">
              <h4>Phone</h4>
              <p class="text-[#ADB7BE]">(+351) 923-543-517</p>
            </div>
          </div>
          <div class="flex mb-10 items-center">
            <div
              class="p-2"
              style="
                background: #111a3e;
                width: 50px;
                height: 46px;
                display: flex;
                justify-content: center;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid #111a3e;
                backdrop-filter: blur(9px);
                -webkit-backdrop-filter: blur(9px);
              "
            >
              <img
                src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png"
                alt="new-post"
                class="w-6"
              />
            </div>
            <div class="ml-5 text-white">
              <h4>Linkedin</h4>
              <a href="https://www.linkedin.com/in/fernando-videira-info/"
                ><p class="text-[#ADB7BE]">Fernando Videira</p></a
              >
            </div>
          </div>
        </div>
      </div>
      <div
        class="p-6"
        style="
          background: #101828;
          width: 100%;
          height: 100%;
          border-radius: 20px;
          overflow: hidden;
          border: 1px solid #111a3e;
          backdrop-filter: blur(9px);
          -webkit-backdrop-filter: blur(9px);
        "
      >
        <form
          ref="form"
          class="flex flex-col p-2"
          data-aos="zoom-in-up"
          @submit.prevent="sendEmail"
        >
          <div class="mb-6">
            <label for="email" class="text-white block mb-2 text-sm font-medium"
              >Email</label
            >
            <input
              type="email"
              id="email"
              class="bg-gray-950 placeholder:[#9CA2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5"
              placeholder="email@example.com"
              name="email"
            />
          </div>
          <div class="mb-6">
            <label
              for="subject"
              class="text-white block mb-2 text-sm font-medium"
              >Subject</label
            >
            <input
              type="text"
              id="subject"
              class="bg-gray-950 placeholder:[#9CA2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5"
              placeholder="Subject"
              name="subject"
            />
          </div>
          <div class="mb-6">
            <label
              for="message"
              class="text-white block mb-2 text-sm font-medium"
              >Message</label
            >
            <textarea
              id="message"
              rows="4"
              class="bg-gray-950 placeholder:[#9CA2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5"
              placeholder="Message"
              name="message"
            ></textarea>
          </div>
          <button
            type="submit"
            class="z-1 cursor-pointer w-[100%!important] px-6 md:px-7 py-3 rounded-full sm:w-max flex justify-center text-white bg-primary border-2 border-transparent"
          >
            Send Message
          </button>
        </form>
      </div>
      <div
        class="bg-gradient-to-tr opacity-25 from-[#570cac] to-primary blur-2xl h-20 w-80 z-0 absolute -top-1/2 -left-4 transform -translate-x-2/3 -translate-1/2"
      ></div>
    </div>
  </section>
</template>
<script setup>
import { ref } from "vue";
import emailjs from "emailjs-com";
import { useToast } from "vue-toast-notification";

const $toast = useToast();
const form = ref(null);

const sendEmail = async () => {
  const isEmpty = [...form.value.elements].some(
    (el) => el.tagName !== "BUTTON" && el.type !== "submit" && !el.value.trim()
  );
  if (isEmpty) {
    $toast.warning("Please fill in all fields");
    return;
  }

  try {
    const result = await emailjs.sendForm(
      "service_0oh6s0e",
      "template_4s8pg7r",
      form.value,
      "fSghIDn2dawqKYyH7"
    );
    $toast.success("Email sent successfully!");
    form.value.reset();
  } catch (err) {
    $toast.error("Error sending email. Try again later.");
  }
};
</script>
