import { a2 as push, ap as push_element, ar as pop_element, a4 as pop, au as validate_snippet_args, a0 as FILENAME } from './exports-5bDEyudc.js';
import { p as prevent_snippet_stringification } from './validate-DIfOr8HB.js';
import dayjs from 'dayjs';
import { g as goto } from './client-CmENaDmn.js';
import { F as Form, I as Input, B as Button } from './Tabs.svelte_svelte_type_style_lang-Dnl7UCWg.js';
import './utils2-BNPuf_o4.js';

_page[FILENAME] = "src/routes/dashboard/card/+page.svelte";
function _page($$payload, $$props) {
  push(_page);
  let { data } = $$props;
  const template = data.template;
  let openedAt = dayjs().format("YYYY-MM-DD");
  let bonusDeadline = "";
  let bonusPeriod = template?.bonus_period;
  if (template?.bonus_period) {
    const [value, unit] = template.bonus_period.split(" ");
    bonusDeadline = dayjs().add(
      Number(value),
      /** @type {import('dayjs').ManipulateType} */
      unit
    ).format("YYYY-MM-DD");
  }
  $$payload.out.push(`<h1 class="mbe">`);
  push_element($$payload, "h1", 21, 0);
  $$payload.out.push(`Add card to wallet</h1>`);
  pop_element();
  $$payload.out.push(`  `);
  {
    let content = function($$payload2, form) {
      validate_snippet_args($$payload2);
      Input($$payload2, {
        label: "Card Nickname",
        name: "nickname",
        required: true,
        value: template?.title
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Opened",
        description: "Date the card was opened. Often matches the application date.",
        name: "openedAt",
        type: "date",
        required: true,
        value: openedAt,
        onchange: (event) => {
          const value = event.currentTarget.value;
          if (bonusPeriod) {
            const [amount, unit] = bonusPeriod.split(" ");
            bonusDeadline = dayjs(value).add(
              Number(amount),
              /** @type {import('dayjs').ManipulateType} */
              unit
            ).format("YYYY-MM-DD");
          }
        }
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Bonus Amount",
        name: "bonusAmount",
        pattern: "\\d+",
        value: template?.bonus_amount
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Bonus Type",
        name: "bonusType",
        type: "radio",
        options: [
          { label: "Miles", value: "MILES" },
          { label: "Points", value: "POINTS" },
          { label: "Cash", value: "CASH" }
        ],
        required: true,
        value: template?.bonus_type?.toUpperCase()
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Spend Amount",
        name: "bonusSpend",
        pattern: "\\d+",
        value: template?.minimum_spend
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Bonus Period",
        name: "bonusPeriod",
        type: "radio",
        options: [
          { label: "3 Months", value: "3 months" },
          { label: "6 Months", value: "6 months" },
          { label: "90 Days", value: "90 days" },
          { label: "120 Days", value: "120 days" }
        ],
        value: bonusPeriod,
        onchange: (event) => {
          const [amount, unit] = event.currentTarget.value.split(" ");
          bonusDeadline = dayjs(openedAt).add(
            Number(amount),
            /** @type {import('dayjs').ManipulateType} */
            unit
          ).format("YYYY-MM-DD");
        }
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Spend By",
        name: "bonusDeadline",
        type: "date",
        value: dayjs(bonusDeadline).format("YYYY-MM-DD")
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Annual Fee",
        name: "annualFee",
        pattern: "\\d+",
        value: template?.annual_fee,
        onchange: () => {
          bonusPeriod = "";
        }
      });
      $$payload2.out.push(`<!----> `);
      Input($$payload2, {
        label: "Closed",
        name: "closedAt",
        type: "date",
        description: "Necessary for re-application notifications"
      });
      $$payload2.out.push(`<!----> <div>`);
      push_element($$payload2, "div", 136, 4);
      Button($$payload2, {
        type: "submit",
        loading: form.isLoading,
        children: prevent_snippet_stringification(($$payload3) => {
          $$payload3.out.push(`<!---->Save`);
        }),
        $$slots: { default: true }
      });
      $$payload2.out.push(`<!----></div>`);
      pop_element();
    };
    prevent_snippet_stringification(content);
    Form($$payload, {
      class: "grid gap",
      onresponse: (e) => {
        if (e.result.error) {
          alert(`Error: ${e.result.error.message}`);
          return;
        }
        return goto();
      },
      content,
      $$slots: { content: true }
    });
  }
  $$payload.out.push(`<!---->`);
  pop();
}
_page.render = function() {
  throw new Error("Component.render(...) is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information");
};

export { _page as default };
//# sourceMappingURL=_page.svelte-D-X4hiS7.js.map
