window.addEventListener("load", () => {
  const today = new Date();
  const tomorrow = new Date(today.valueOf() + 86400000);
  const threeDays = new Date(today.valueOf() + 259200000);
  const oneYear = new Date(today.valueOf() + 31557600000);

  const toISO = function(d) {
    return String(d.getFullYear()) + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
  };
  const fromISO = function(d) {
    return new Date(d + " ");
  };

  let start = $("#user-datepicker input[name=start]");
  let end   = $("#user-datepicker input[name=end]");
  const userDatepicker = $("#user-datepicker").datepicker({
    // format: "yyyy-MM-dd",
    datesDisabled: #{toJSON unavailableDates}.map(d => fromISO(d)),
    maxViewMode: 1,
    multidate: false,
    startDate: today,
    endDate: oneYear
  });

  $("#user-datepicker input").datepicker().on("changeDate", function(e) {
    if (start.datepicker("getDate") < end.datepicker("getDate")) {
      let req = new XMLHttpRequest();

      req.open("POST", "@{ListingQuoteR lid}");
      req.addEventListener("load", function() {
        if (req.status == 200) {
          let resp = JSON.parse(req.responseText);
          document.getElementById("price-total").textContent = "$" + (resp[0] + resp[1]);
        }
      });
      req.setRequestHeader("Content-type", "application/json");
      req.setRequestHeader("Accept", "application/json");

      req.send(JSON.stringify(
        [ start.datepicker("getDate")
        , end.datepicker("getDate")
        ].map(d => toISO(d))
      ));
    }
  });
});