<template>
  <UiContainer class="space-25-75">
    <div>
      <div class="flex flex-col w-full">
        <div class="relative flex flex-col">
          <h1 class="text-3xl font-bold">
            {{ component.front_section_lang.at(0).data.drawing_up_a_proposal_for_asave_contract }}
          </h1>
          <div class="flex flex-wrap flex-1">
            <!-- left -->
            <div class="w-full md:w-1/2 p-4">
              <h3 class="w-full border-b my-2">
                {{ component.front_section_lang.at(0).data.simulation_of_the_contract_proposal }}
              </h3>
              <p>{{ component.front_section_lang.at(0).data.monthly_savings }}</p>
              <div class="my-8">
                <div class="text-2xl">
                  {{ formater.price(store.monthlySavings) }}
                </div>
                <input v-model="store.monthlySavings" type="range" :max="store.getMaxAmount" :min="store.getMinAmount" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
              </div>
              <div class="my-8">
                <div class="text-2xl">
                  {{ store.storagePeriod }}
                </div>
                <input v-model="store.storagePeriod" type="range" :max="investmentStore.maxYear" :min="investmentStore.minYear" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
              </div>
            </div>
            <!-- right -->
            <div class="w-full md:w-1/2 p-4">
              <h3 class="w-full border-b my-2">
                {{ component.front_section_lang.at(0).data.details_of_the_contract_proposal }}
              </h3>
              <p class="flex justify-between my-4">
                <span>{{ component.front_section_lang.at(0).data.current_price_per_bar }}</span>
                <span>{{ formater.price(investmentStore.calculationResult.calculator_output.investment_piece.price) }}</span>
              </p>

              <p class="flex justify-between my-4">
                <span>{{ component.front_section_lang.at(0).data.money_for_spend }}</span>
                <span>{{ formater.price(investmentStore.calculationResult.calculator_output.money_spent) }}</span>
              </p>
              <p class="flex justify-between my-4">
                <span>{{ component.front_section_lang.at(0).data.weight_per_bar }}</span>
                <span>{{ getWeight }}</span>
              </p>
              <p class="flex justify-between my-4">
                <span>{{ component.front_section_lang.at(0).data.count }}</span>
                <span>{{ investmentStore.calculationResult.calculator_output.max_pieces_in_package }}</span>
              </p>

              <p class="flex justify-between my-4">
                <span>{{ component.front_section_lang.at(0).data.contract_type }}</span>
                <span>50/50</span>
              </p>
              <p class="flex justify-between my-4">
                <span>{{ component.front_section_lang.at(0).data.special_fee }}</span>
                <span>{{ formater.price(investmentStore.calculationResult.calculator_output.total_input_price_increase) }}</span>
              </p>
            </div>
          </div>
        </div>
        <!-- next section -->
        <div class="flex flex-wrap">
          <!-- left -->
          <div class="w-full md:w-1/2 p-4">
            <h3 class="w-full border-b my-2">
              {{ component.front_section_lang.at(0).data.graphic_simulation_of_future_profits }}
            </h3>
            <p class="my-4 md:my-12">
              <img :src="`data:image/svg+xml;base64,${investmentStore.calculationResult.chart}`" alt="" class="bg-white rounded-2xl p-2">
            </p>
          </div>
          <!-- right -->
          <div class="w-full md:w-1/2 p-4">
            <h3 class="w-full border-b my-2">
              {{ component.front_section_lang.at(0).data.summary_of_the_contract_proposal }}
            </h3>

            <p class="flex justify-between my-4">
              <span>{{ component.front_section_lang.at(0).data.save }}</span>
              <span>{{ component.front_section_lang.at(0).data.expected_value_of_savings }}</span>
            </p>
            <p class="flex justify-between my-4">
              <span></span>
              <span class="font-bold text-2xl">{{ formater.price(investmentStore.calculationResult.calculator_output.total_investement_value)
              }}</span>
            </p>
            <div class="flex flex-col items-center">
              <img :src="`/api/public/file/${investmentStore.calculationResult.calculator_output.investment_piece.cover_picture_uuid}_m.webp`" :alt="investmentStore.calculationResult.calculator_output.investment_piece.name" class="object-contain object-center w-48 max-h-64">
              <span class="my-2 text-sm">{{ investmentStore.calculationResult.calculator_output.investment_piece.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <hr class="my-4">
      <div class="flex w-full flex-wrap justify-center md:justify-end mt-8">
        <a :href="getPrintLink" target="_blank" class="my-2 mx-4">
          <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
            {{ component.front_section_lang.at(0).data.print }}
          </UiButtonArrow>
        </a>
        <nuxt-link :to="getInvestLink" class="my-2 mx-4">
          <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
            {{ component.front_section_lang.at(0).data.invest }}
          </UiButtonArrow>
        </nuxt-link>
      </div>
    </div>
  </UiContainer>
</template>

<script setup lang="ts">
defineProps<{
  component: {
    id: number
    name: string
    img: string[]
    component_name: string
    is_no_lang: boolean
    page_name: string
    front_section_lang: {
      data: {
        drawing_up_a_proposal_for_asave_contract: string
        simulation_of_the_contract_proposal: string
        monthly_savings: string
        details_of_the_contract_proposal: string
        current_price_per_bar: string
        money_for_spend: string
        weight_per_bar: string
        count: string
        contract_type: string
        special_fee: string
        graphic_simulation_of_future_profits: string
        summary_of_the_contract_proposal: string
        save: string
        expected_value_of_savings: string
        print: string
        invest: string
      }
      id_front_section: number
      id_lang: number
    }[]
  }
}>()

const investmentStore = useInvestmentStore()
const store = useStore()
const formater = useFormater(useNuxtApp())
const userStore = useUserStore()
const router = useRouter()
const menuStore = useMenuStore()

await investmentStore.getCalculator()

const getWeight = computed(() => {
  return investmentStore.calculationResult.calculator_output.investment_piece.features.find(feature => feature.feature_id === 1)?.value
})

const getPrintLink = computed(() => {
  const query = new URLSearchParams({
    monthly_deposit: String(store.monthlySavings),
    years: String(store.storagePeriod),
    grid: 'false',
    legend: 'false',
    title: 'false',
    ingots_bought_dots: 'true',
    draw_linear: 'true',
    annotations: 'false',
    show_real_value: 'false',
    series_stroke_width: '1',
  })

  return `/api/public/plan-prediction/easy/plan-proposal?${query.toString()}`
})

const getInvestLink = computed(() => {
  if (userStore.isLogged) {
    return { path: '/golden-panel/save-contract' }
  }
  return { name: router.currentRoute.value.name, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite }, query: { to: btoa('/golden-panel/save-contract') } }
})

/*
INSERT INTO `front_page` (`created_at`, `updated_at`, `name`, `is_default`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','0','16');
INSERT INTO `front_menu` (`created_at`, `updated_at`, `active`, `position_id`, `id_front_page`, `is_default`, `is_root`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','1','1','16','0','0','16');
INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investment','2','16','Investment');
INSERT INTO `front_menu_lang` (`link_rewrite`, `id_front_menu`, `id_lang`, `name`) VALUES ('inwestycja','16','1','Inwestycja');
INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investice','3','16','Investice');
INSERT INTO `front_section` (`id`, `created_at`, `updated_at`, `name`, `img`, `component_name`, `is_no_lang`) VALUES ('35','2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','[]','InvestmentBlock','0');
INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','1','35');
INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','2','4');
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
  "drawing_up_a_proposal_for_asave_contract": "Przygotowanie propozycji umowy SAVE",
  "simulation_of_the_contract_proposal": "Symulacja propozycji umowy",
  "monthly_savings": "Miesięczne oszczędności",
  "details_of_the_contract_proposal": "Szczegóły propozycji umowy",
  "current_price_per_bar": "Aktualna cena za sztabkę",
  "money_for_spend": "Kwota do wydania",
  "weight_per_bar": "Waga jednej sztabki",
  "count": "Liczba",
  "contract_type": "Typ umowy",
  "special_fee": "Opłata specjalna",
  "graphic_simulation_of_future_profits": "Graficzna symulacja przyszłych zysków",
  "summary_of_the_contract_proposal": "Podsumowanie propozycji umowy",
  "save": "Zaoszczędzona kwota",
  "expected_value_of_savings": "Oczekiwana wartość oszczędności",
  "print": "Drukuj",
  "invest": "Zainwestuj"
}', '35', '1');
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
  "drawing_up_a_proposal_for_asave_contract": "Drawing up a proposal for a SAVE contract",
  "simulation_of_the_contract_proposal": "Simulation of the contract proposal",
  "monthly_savings": "Monthly savings",
  "details_of_the_contract_proposal": "Details of the contract proposal",
  "current_price_per_bar": "Current price per bar",
  "money_for_spend": "Money for spend",
  "weight_per_bar": "Weight per bar",
  "count": "Count",
  "contract_type": "Contract type",
  "special_fee": "Special fee",
  "graphic_simulation_of_future_profits": "Graphic simulation of future profits",
  "summary_of_the_contract_proposal": "Summary of the contract proposal",
  "save": "Saved Amount",
  "expected_value_of_savings": "Expected value of savings",
  "print": "Print",
  "invest": "Invest"
}', '35', '2');
INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
  "drawing_up_a_proposal_for_asave_contract": "Vypracování návrhu smlouvy SAVE",
  "simulation_of_the_contract_proposal": "Simulace návrhu smlouvy",
  "monthly_savings": "Měsíční úspory",
  "details_of_the_contract_proposal": "Podrobnosti návrhu smlouvy",
  "current_price_per_bar": "Aktuální cena za slitku",
  "money_for_spend": "Částka k utracení",
  "weight_per_bar": "Hmotnost slitku",
  "count": "Počet",
  "contract_type": "Typ smlouvy",
  "special_fee": "Speciální poplatek",
  "graphic_simulation_of_future_profits": "Grafická simulace budoucích zisků",
  "summary_of_the_contract_proposal": "Shrnutí návrhu smlouvy",
  "save": "Ušetřená částka",
  "expected_value_of_savings": "Očekávaná hodnota úspor",
  "print": "Tisk",
  "invest": "Investovat"
}', '35', '3');
 */
</script>
