---
import Layout from "../../layouts/Layout.astro";
import type { Locale } from "../../i18n/config";
import { useTranslations } from "../../i18n/ui";

const lang: Locale = "de";
const t = useTranslations(lang);
---
<Layout title="Checkout" description="Bestellung abschließen bei Van's DIY & Bastelbedarf." lang={lang} path="/checkout/">
  <section class="section-tight">
    <div class="container">
      <span class="eyebrow">{t.checkout.eyebrow}</span>
      <h1>{t.checkout.title}</h1>
      <p class="todo-note">{t.checkout.todoNote}</p>
    </div>
  </section>

  <section class="section-tight">
    <div class="container checkout-layout">
      <form class="frm card" id="checkout-form">
        <h3>{t.checkout.step1}</h3>
        <div><label for="email">{t.checkout.email}</label><input id="email" type="email" required /></div>
        <div class="grid grid-2">
          <div><label for="vorname">{t.checkout.firstName}</label><input id="vorname" type="text" required /></div>
          <div><label for="nachname">{t.checkout.lastName}</label><input id="nachname" type="text" required /></div>
        </div>
        <div><label for="strasse">{t.checkout.street}</label><input id="strasse" type="text" placeholder="Musterstraße 1" required /></div>
        <div class="grid grid-2">
          <div><label for="plz">{t.checkout.zip}</label><input id="plz" type="text" inputmode="numeric" maxlength="5" placeholder="10115" required /></div>
          <div><label for="ort">{t.checkout.city}</label><input id="ort" type="text" placeholder="Berlin" required /></div>
        </div>
        <div>
          <label for="land">{t.checkout.country}</label>
          <select id="land">
            <option>Deutschland</option>
            <option>Österreich</option>
            <option>Schweiz</option>
            <option>Luxemburg</option>
          </select>
        </div>

        <hr class="divider" />
        <h3>{t.checkout.step2}</h3>
        <div class="payment-options">
          <label class="pay-option"><input type="radio" name="pay" value="paypal" checked /> PayPal</label>
          <label class="pay-option"><input type="radio" name="pay" value="klarna" /> Klarna</label>
          <label class="pay-option"><input type="radio" name="pay" value="ueberweisung" /> {t.checkout.bankTransfer}</label>
        </div>

        <hr class="divider" />
        <h3>{t.checkout.step3}</h3>
        <div id="checkout-summary" class="checkout-summary"></div>
        <p class="small">{t.common.vatNote}</p>

        <div class="checkbox-row">
          <input id="agb" type="checkbox" required />
          <label for="agb">{t.checkout.agbPrefix} <a href="/agb/">{t.checkout.agbLink}</a> {t.checkout.agbSuffix}</label>
        </div>
        <div class="checkbox-row">
          <input id="widerruf" type="checkbox" required />
          <label for="widerruf">{t.checkout.revocationPrefix} <a href="/widerruf/">{t.checkout.revocationLink}</a> {t.checkout.revocationAnd} <a href="/datenschutz/">{t.checkout.privacyLink}</a> {t.checkout.revocationSuffix}</label>
        </div>

        <button class="btn btn-primary btn-block" type="submit">{t.checkout.orderButton}</button>
      </form>

      <aside class="card checkout-aside">
        <h3>{t.checkout.shippingHintTitle}</h3>
        <p class="small">{t.checkout.shippingHint}</p>
        <a class="small" href="/versand-zahlung/">{t.checkout.shippingLink}</a>
      </aside>
    </div>
  </section>
</Layout>

<script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/checkout/danke/", checkoutLang: lang }}>
  import { getCart, cartTotal } from "../../scripts/cart";
  import { formatPrice } from "../../i18n/format";

  const summary = document.getElementById("checkout-summary");
  const cart = getCart();
  const subtotal = cartTotal();
  const shipping = cart.length === 0 ? 0 : subtotal >= 75 ? 0 : 4.95;

  summary.innerHTML = `
    ${cart.map((i) => `<div class="row"><span>${i.menge}× ${i.name}</span><span>${formatPrice(i.preis * i.menge, checkoutLang)}</span></div>`).join("")}
    <div class="row"><span>${shippingLabel}</span><span>${shipping === 0 ? freeLabel : formatPrice(shipping, checkoutLang)}</span></div>
    <div class="row total"><span>${totalLabel}</span><span>${formatPrice(subtotal + shipping, checkoutLang)}</span></div>
  `;

  document.getElementById("checkout-form").addEventListener("submit", (e) => {
    e.preventDefault();
    if (cart.length === 0) {
      alert(emptyCartAlert);
      return;
    }
    location.href = thankYouPath;
  });
</script>