<?php ?>

<style>
  .wfacp_collapsible_order_summary_wrap {
    display: none !important;
  }

  #wfacp-e-form .wfacp-left-panel {
    display: flex !important;
    align-items: flex-start;
    gap: 2rem;

    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }

  body #wfacp-e-form .wfacp_main_form .wfacp_section_title {
    font-weight: 600 !important;
    color: var(--active-dark-main) !important;
    font-size: 1em !important;
    text-transform: uppercase !important;
  }

  .wfacp-checkout-form-block.wfacp-ac36544b #wfacp-e-form .wfacp-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    background-color: transparent !important;
    border-width: 0 !important;
  }

  .step__subtitle {
    margin-top: 1rem;

    font-weight: 600;
    font-size: 2.25em !important;
    color: var(--dark-main) !important;

    text-transform: uppercase;
  }

  .wfacp-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .step__description {
    margin-top: -.25rem;
    margin-bottom: 1rem;

    font-size: 1.15em !important;
    color: var(--dark-main) !important;
  }

  #wfacp-sec-wrapper .wfacp_main_form.woocommerce #wfacp_checkout_form .wfacp_divider_field.wfacp_divider_shipping {
    display: flex;
    flex-wrap: nowrap !important;
    flex-direction: column;
  }

  body #wfacp-e-form .wfacp_form .wfacp-inner-form-detail-wrap {
    padding: 0 !important;
  }

  #wfacp-sec-wrapper .wfacp_main_form.woocommerce #wfacp_checkout_form .wfacp_divider_field.wfacp_divider_shipping p {
    width: 100% !important;
  }

  .step_0 {
    width: 100%;
    max-width: 50%;
  }

  .checkout_form__step_2 {
    width: 100%;
    max-width: 50%;
  }

  .wfacp_payment {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    border-radius: .25rem;
    border: 1px solid var(--grey-main);
    background-color: var(--grey-light-main);
  }

  .wfacp_payment .wfacp-comm-title {
    display: none !important;
  }

  body #wfacp-e-form #payment .payment_methods li.wc_payment_method>input[type=radio]:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;
  }

  body #wfacp-e-form #payment .payment_methods li.wc_payment_method>input[type=radio]:before {
    min-width: 10px;
    min-height: 10px;

    background-color: var(--dark-main);
  }

  .woocommerce-terms-and-conditions-wrapper {
    display: none !important;
  }

  #payment {
    background-color: transparent !important;
  }

  .wfacp-payment-dec {
    display: none;
  }

  body #wfacp-e-form .woocommerce-checkout #payment ul.payment_methods {
    /*order: 3;*/
    border: none !important;
  }

  body.woocommerce-checkout #wfacp-e-form #payment div.form-row {
    /*order: 1;*/
  }

  body #wfacp-e-form .woocommerce-checkout #payment ul.payment_methods li {
    display: grid !important;
    align-items: center;
    grid-template-columns: 30px calc(100% - 30px);

    padding: 0 0 .75rem 0 !important;

    border: none !important;
  }

  body .wfacp_main_form.woocommerce .woocommerce-checkout #payment ul.payment_methods li>label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    font-weight: 500 !important;
    font-size: 1.15em !important;
    color: var(--dark-main) !important;
  }

  button#place_order {
    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: .65rem 0 !important;

    border-radius: 4px;
    background-color: #008460 !important;
    color: var(--background-color);
  }

  #wfacp-e-form .wfacp_main_form.woocommerce .wfacp-order-place-btn-wrap button:before {
    display: flex !important;
    margin-top: -2px !important;
  }

  button#place_order:hover {
    opacity: .75 !important;
  }

  .item__shipping {
    display: flex;
    align-items: center;
    gap: 1rem;

    width: 100%;
    padding: 1rem;

    border-radius: .25rem;
    background-color: var(--grey-light-main);
  }

  .item__shipping .shipping__image {
    width: 24px;
  }

  .item__shipping .shipping__info {
    display: flex;
    gap: .25rem;
  }

  .item__shipping .shipping__info .info__title {
    color: var(--dark-main);
  }

  .item__shipping .shipping__info .info__date {
    font-weight: 600;
    color: var(--dark-main);
  }

  .wfacp-form-control-wrapper {
    padding: 0 !important;
  }

  #billing_first_name_field {
    width: 49% !important;
    margin-right: 1% !important;
  }

  #billing_last_name_field {
    width: 49% !important;
    margin-left: 1% !important;
  }

  body #wfacp-e-form .wfacp_main_form .form-row:not(.woocommerce-invalid-required-field) input[type=text]:focus {
    border-color: var(--active-dark-main) !important;
    box-shadow: 0 0 0 1px var(--active-dark-main) !important;
  }

  body #wfacp-e-form #payment .payment_methods>li:not(.woocommerce-notice) {
    background: var(--grey-light-main) !important;
  }

  body #wfacp-e-form .woocommerce-checkout #payment ul.payment_methods li {
    padding: 1rem !important;

    border-radius: .25rem;
  }

  body #wfacp-e-form .woocommerce-checkout #payment ul.payment_methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  li.payment_method_ppcp label[for=payment_method_ppcp]:after {
    display: none !important;
  }

  body #wfacp-e-form .woocommerce-checkout #payment div.payment_box {
    /*display: none !important;*/
    grid-area: 2 / 1 / 3 / 3;
    background-color: transparent !important;
  }

  body #wfacp-sec-wrapper #payment {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #wfacp-e-form .wfacp_main_form .wfacp-order-place-btn-wrap {
    padding-top: 0 !important;
  }

  #express_checkout_text {
    font-weight: 400;
    font-size: 1.25em !important;
    text-align: center;
    /*order: 0;*/
  }

  .express_checkout_or {
    display: flex;
    align-items: center;
    gap: 1rem;

    /*order: 2;*/
  }

  .express_checkout_or__divider {
    width: 100%;
    height: 1px;

    background: #bfbfbfff;
  }

  #express_checkout_or__text {
    font-weight: 400;
    font-size: 1em !important;
    white-space: nowrap;
  }

  body .bwf-section-wrap.bwf-section-4d6ccf62 {
    padding: 0 !important;
  }

  .wfacp-checkout-form-block.wfacp-ac36544b #wfacp-e-form .wfacp-section {
    padding: 0 !important;
  }

  body #wfacp-sec-wrapper .wfacp_main_form.woocommerce #wfacp_checkout_form .wfacp_divider_field .wfacp-col-left-half {
    width: 100% !important;
  }

  body #wfacp-sec-wrapper .wfacp_main_form.woocommerce #wfacp_checkout_form .wfacp_divider_field .wfacp-col-left-third {
    width: 100% !important;
  }

  @media screen and (max-width: 675px) {
    #wfacp-e-form .wfacp-left-panel {
      flex-direction: column !important;
      gap: 1rem;
    }

    .step_0 {
      max-width: 100%;
    }

    .checkout_form__step_2 {
      max-width: 100%;
    }

    .item__shipping .shipping__info {
      flex-direction: column;
      gap: 0;
    }

    #billing_first_name_field {
      width: 100% !important;
      margin-right: 0 !important;
    }

    #billing_last_name_field {
      width: 100% !important;
      margin-right: 0 !important;
    }
  }
</style>

<script lang="js">
  // const originalOpen = XMLHttpRequest.prototype.open;
  // const originalSend = XMLHttpRequest.prototype.send;
  //
  // XMLHttpRequest.prototype.open = function (method, url, ...rest) {
  //   this._requestMethod = method;
  //   this._requestUrl = url;
  //
  //   originalOpen.apply(this, [method, url, ...rest]);
  // };
  //
  // XMLHttpRequest.prototype.send = function (body) {
  //   let formDataObject = {};
  //   let jsonData;
  //
  //   if (this._requestMethod === "POST" && body) {
  //     if (body instanceof FormData) {
  //       body.forEach((value, key) => {
  //         formDataObject[key] = value;
  //       });
  //     } else if (typeof body === "string") {
  //       try {
  //         jsonData = JSON.parse(body);
  //       } catch (e) {
  //         jsonData = body;
  //       }
  //     }
  //   }
  //
  //   this.addEventListener("readystatechange", function () {
  //     if (this.readyState === 4 && this.status === 200) {
  //       try {
  //         let response = JSON.parse(this.responseText);
  //         if (response && response?.fragments?.place_order_text && jsonData?.split("&").find((el) => el === "payment_method=mollie_wc_gateway_klarna")) {
  //           response.fragments.place_order_text = `<img style="display: flex !important; height: 24px;" src="https://imagedelivery.net/u8JiH5bJQTfO_tBFRSJ5Lg/d3ae4608-37eb-4123-b3e6-0402f4808600/gamma=0" alt="klarna" />`;
  //         }
  //         Object.defineProperty(this, "responseText", { value: JSON.stringify(response) });
  //       } catch (e) {
  //         console.error("Error processing response:", e);
  //       }
  //     }
  //   });
  //
  //   originalSend.apply(this, [body]);
  // };
  const today = new Date();
  today.setDate(today.getDate() + 1);

  const langCodes = {
    en: "en-GB",
    ie: "en-GB",
    de: "de-DE",
    fr: "fr-FR",
    nl: "nl-NL",
    benl: "nl-BE",
    befr: "fr-BE",
    dk: "da-DK",
    sv: "sv-SE"
  };

  const shippingText = {
    en: "Your order will be shipped on:",
    ie: "Your order will be shipped on:",
    de: "Ihre Bestellung wird verschickt am",
    fr: "Votre commande sera expédiée le :",
    nl: "Je bestelling wordt verzonden op:",
    benl: "Je bestelling wordt verzonden op:",
    befr: "Votre commande sera expédiée le :",
    dk: "Din ordre vil blive afsendt den:",
    sv: "Din beställning kommer att skickas den:"
  };

  console.log("hello <?php echo do_shortcode('[language]'); ?>");
  console.log("dfg", today.toLocaleDateString(langCodes["<?php echo do_shortcode('[language]'); ?>"] || "de-DE", { day: "numeric", month: "long", year: "numeric" }));

  const firstElement = document.querySelector(".step_1");
  const secondElement = document.querySelector(".wfacp_smart_buttons");
  const thirdElement = document.querySelector(".wfacp_payment");

  const wrapperDiv = document.createElement("div");
  wrapperDiv.classList.add("checkout_form__step_2");

  firstElement.parentNode.insertBefore(wrapperDiv, firstElement);

  wrapperDiv.appendChild(firstElement);
  wrapperDiv.appendChild(secondElement);
  wrapperDiv.appendChild(thirdElement);

  document.querySelector(".wfacp_main_form")?.classList.add("container");

  const shippingInfoHTML = `
    <div class="item__shipping">
      <img class="shipping__image" src="https://staging.glucofit.co/wp-content/uploads/2024/11/shipping.svg" alt="shipping__image">
      <div class="shipping__info">
        <span class="info__title">${shippingText["<?php echo do_shortcode('[language]'); ?>"] || "Your order will be shipped on:"}</span>
        <span class="info__date">${today.toLocaleDateString(langCodes["<?php echo do_shortcode('[language]'); ?>"] || "de-DE", { day: "numeric", month: "long", year: "numeric" })}</span>
      </div>
    </div>
  `;

  const phoneInput = document.querySelector("#billing_phone_field");
  phoneInput.insertAdjacentHTML("afterend", shippingInfoHTML);

  const expressCheckoutText = `
    <span id="express_checkout_text">Express checkout</span>
  `;

  const expressCheckoutOr = `
    <div class="express_checkout_or">
      <div class="express_checkout_or__divider"></div>
       <span id="express_checkout_or__text">Or</span>
      <div class="express_checkout_or__divider"></div>
    </div>
  `;

  // jQuery(document).ready(function($) {
  //   function addCustomButton() {
  //     $("#place_order").style.cssText = "display:none !important";
  //
  //     if ($(".custom-checkout-button").length === 0) {
  //       $(`<button type="button" class="button alt custom-checkout-button">Pay with Klarna</button>`)
  //         .insertAfter('#place_order')
  //         .on("click", function() {
  //           $('#place_order').trigger("click");
  //         });
  //     }
  //   }
  //
  //   addCustomButton();
  //
  //   const targetNode = document.querySelector("#payment");
  //   const config = { childList: true, subtree: true };
  //
  //   const observer = new MutationObserver(function(mutationsList) {
  //     for (let mutation of mutationsList) {
  //       if (mutation.type === "childList") {
  //         addCustomButton();
  //       }
  //     }
  //   });
  //
  //   if (targetNode) observer.observe(targetNode, config);
  // });

  // setInterval(() => {
  //   const klarnaBtn = document.querySelector("#payment_method_mollie_wc_gateway_klarna");
  //   if (klarnaBtn.checked) {
  //     const orderButton = document.querySelector("#place_order");
  //     orderButton.innerHTML = `
  //       <img
  //         src="https://imagedelivery.net/u8JiH5bJQTfO_tBFRSJ5Lg/d3ae4608-37eb-4123-b3e6-0402f4808600/gamma=0"
  //         style="
  //           width: 256px;
  //           height: 40px;
  //           object-fit: cover;
  //           z-index: 10;
  //         "
  //         alt="klarna"
  //       />
  //     `;
  //     orderButton.style.cssText = 'background:#ffb3c7 !important';
  //   }
    //
    // klarnaBtn.addEventListener("change", () => {
    //   console.log("checked");
    //   if (klarnaBtn.checked) {
    //     const orderButton = document.querySelector("#place_order");
    //     orderButton.innerHTML = `
    //     <img src="https://imagedelivery.net/u8JiH5bJQTfO_tBFRSJ5Lg/d3ae4608-37eb-4123-b3e6-0402f4808600/gamma=0" alt="klarna" />
    //   `;
    //     orderButton.style.background = "#ffb3c7";
    //   }
    // });
  // }, 1000);

  // setInterval(() => {
  //   if (!document.querySelector("#express_checkout_text")) {
  //     const paypalBtn = document.querySelector("body.woocommerce-checkout #wfacp-e-form #payment div.form-row");
  //
  //     paypalBtn.insertAdjacentHTML("beforebegin", expressCheckoutText);
  //     paypalBtn.insertAdjacentHTML("afterend", expressCheckoutOr);
  //   }
  // }, 2000);

  const addressNumber = {
    en: "Street address and number",
    ie: "Street address and number",
    de: "Straße und Hausnummer",
    fr: "Numéro de rue et de maison",
    nl: "Straat en huisnummer",
    benl: "Straat en huisnummer",
    befr: "Numéro de rue et de maison",
    dk: "Gade og husnummer",
    sv: "Gatu- och husnummer"
  };

  const shippingAddress = document.querySelector("#shipping_address_1_field label");
  shippingAddress.innerHTML = shippingAddress.innerHTML.replace("Street address", addressNumber["<?php echo do_shortcode('[language]'); ?>"] || "Street address and number");

  console.log("all injected");
  // const klarnaAddress = document.querySelector(".payment_method_mollie_wc_gateway_klarna");
  // klarnaAddress.innerHTML = `
  //   <div>${klarnaAddress.innerHTML}</div>
  //   <span>With Klarna Pay Later, you have the option of paying by invoice. And only when the order has arrived</span>
  // `;
</script>
