new booking

<div class="container">
  <h1>Stormer Booking Details</h1>
  <div class="profile-info">
    <p><b>Stormer Name:</b> <%= @stormer.user.name %></p>
    <p><b>Cost Per Day:</b> <%= @stormer.costday %> AUD</p>
  </div>

  <%= simple_form_for([@stormer, @booking]) do |f| %>
    <div class="form-inputs">
      <%= f.input :startdate, label: "Start Date",
                  as: :date, start_year: Date.today.year,
                  end_year: Date.today.year + 5,
                  order: [:day, :month, :year],
                  input_html: { id: "booking_startdate" } %>
      <%= f.input :enddate, label: "End Date", as: :date,
                  end_year: Date.today.year + 5,
                  order: [:day, :month, :year],
                  input_html: { id: "booking_enddate" } %>

      <%= f.input :status, as: :hidden, input_html: { value: 1 } %>

      <div id="finalcost"></div>

      <%= f.input :details, label: false, placeholder: "Details about the Storm" %>
    </div>
    <div class="form-actions">
      <%= f.button :submit, class: "btn btn-outline-success rounded-pill" %>
    </div>
  <% end %>
</div>

<script>
  const startDateInput = document.querySelector('#booking_startdate');
  const endDateInput = document.querySelector('#booking_enddate');
  startDateInput.addEventListener('input', calculateTotalCost);
  endDateInput.addEventListener('input', calculateTotalCost);

  function calculateTotalCost() {
    const startDate = startDateInput.value
    const endDate = endDateInput.value
    const days = endDate - startDate + 1
    const costPerDay = <%= @stormer.costday %>;
    const totalCost = costPerDay * days;
    document.querySelector('#finalcost').textContent = `Total Cost: ${totalCost} AUD`;
</script>