{% load static %}
<script src="https://widget.packeta.com/v6/www/js/library.js"></script>

<input type="hidden"  id="packetaApiKey" value="{{ packeta_Api_Key }}">

<script>
  const packetaApiKey = document.querySelector('#packetaApiKey').value;

  const packetaOptions = {
    country: "cz,sk",
    language: "cs",
    valueFormat: "\"Packeta\",id,carrierId,carrierPickupPointId,name,city,street",
    view: "modal",
    vendors: [
      {
        country: "cz",
        group: "zbox",
        price: 45,
        selected: true
      },
      {
        country: "cz",
        price: 45,
        selected: true
      }
    ],
    defaultCurrency: "CZK",
    defaultPrice: "45"
  };



  function showSelectedPickupPoint(point) {
    const saveElement = document.querySelector(".packeta-selector-value");
    // Add here an action on pickup point selection
    saveElement.innerText = '';
    if (point) {
      console.log("Selected point", point);
      saveElement.innerText = "point: " + JSON.stringify(point, null, 4); // DŮLEŽITÉ PRO DALŠÍ ZPRACOVÁNÍ (jenom potřebuji ID)
    }
  }

</script>

<button class="packeta-selector-open"
  onclick="Packeta.Widget.pick(packetaApiKey, showSelectedPickupPoint, packetaOptions)">Select pick-up point</button>
<div class="packeta-selector-value"></div>