{% extends '@admin/layouts/commonmaster.html.twig' %}

{% block title %} | Create Event {% endblock %}

{% block content %}

<div class="page-body eventcreatetext">
  <div class="container">
    <div class="row">
      <div class="col-md-6 m-auto">
        <h1 style="font-size: 2.5em;">Additional Event Information</h1>
        <div class="form" style="margin-top: 20px;">
          <form method="POST" enctype="multipart/form-data" action="{{ path('app_season_event_store_metadata') }}" id="editDraftEventForm" style="margin-bottom: 30px;">

            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

            <input type="hidden" name="event_id" value="{{ app.request.attributes.get('id') }}">

            <span style="font-size: 15px;">Add Event Banner
              <i style="color: grey">
                Optional (An Image will be chosen if you dont select any)
              </i>
            </span>
            <div class="dropzone" id="dropzone-default" autocomplete="off" novalidate>
              <div class="fallback">
                <input name="event_banner_file" type="file"  />
              </div>
            </div>

            <div class="mt-4">
              <div class="mb-1">
                <label class="form-label">Event Description</label>
                <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…" name="event_desc"></textarea>
              </div>
            </div>

            <div class="mt-4">
              <div class="mb-1">
                <label class="form-label">Dress Code <span class="color: grey">(Optional)</span></label>
                <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…" name="dress_code"></textarea>
              </div>
            </div>

            <div class="mt-4">
              <label class="form-label">Expected Attendance<span style="color: grey;"><small>Visible to only the event creator</small></span></label>
              <input required type="number" class="form-control" name="expected_attendance" placeholder="Enter the Expected No of Fans">
            </div>

            <div class="mt-4">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 26px;">
                  Ticket Tiers
                  <small style="color: grey; font-size: 17px;">
                    <i> (Create ticket tiers for your event)</i>
                  </small>
                </span>
                <div style="display: flex; gap: 10px;"> <!-- Flex container for buttons with gap -->
                  <button type="button" class="btn btn-sm add-ticket-btn" id="addTicketField" style="padding: 4px; font-size: 1.2em; height: auto; background-color: #07A081;">
                    <i class='bx bx-plus-medical'></i>
                  </button>
                </div>
              </div>

              <div id="ticketContainer">
                <div class="row mt-3 ticket-row">
                  <div class="col-md-8 mb-3">
                    <label class="form-label">Enter Name</label>
                    <input type="text" class="form-control" name="ticket_name[]" placeholder="Enter tier name">
                  </div>
                  <div class="col-md-4 mb-3">
                    <label class="form-label">Price</label>
                    <input type="number" class="form-control" name="ticket_price[]" placeholder="Enter tier price in Ksh.">
                  </div>
                </div>
              </div>
            </div>

            <div class="mt-4">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 26px;">
                  Seasonal Ticket Tiers
                  <small style="color: grey; font-size: 17px;">
                    <i> (Create Seasonal ticket tiers for your event)</i>
                  </small>
                </span>
                <div style="display: flex; gap: 10px;"> <!-- Flex container for buttons with gap -->
                  <button type="button" class="btn btn-sm add-ticket-btn" id="addSeasonTicketField" style="padding: 4px; font-size: 1.2em; height: auto; background-color: #07A081;">
                    <i class='bx bx-plus-medical'></i>
                  </button>
                </div>
              </div>

              <div id="seasonTicketContainer">
                <div class="row mt-3 season_ticket_row">
                  <div class="col-md-8 mb-3">
                    <label class="form-label">Enter Name</label>
                    <input type="text" class="form-control" name="season_ticket_name[]" placeholder="Enter tier name">
                  </div>
                  <div class="col-md-4 mb-3">
                    <label class="form-label">Price</label>
                    <input type="number" class="form-control" name="season_ticket_price[]" placeholder="Enter tier price in Ksh.">
                  </div>
                </div>
              </div>
            </div>

            <div class="mt-4">
              <button class="text-light w-100 btn" style="background-color: #07A081;padding: 15px;font-size: 20px;" type="submit">Complete and Save</button>
            </div>

          </form>
        </div>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {

  // add new input fields for the tickets when the plus sign is clicked
  $('#addTicketField').click(function() {
    var newFields = `<div class="col-md-8 mb-3"><label class="form-label">Enter Name</label><input type="text" class="form-control" name="ticket_name[]" placeholder="Enter tier name"></div><div class="col-md-4 mb-3"><label class="form-label">Price</label><input type="number" class="form-control" name="ticket_price[]" placeholder="Enter tier price in Ksh."></div>`;

    $('.ticket-row').append(newFields);
  });

  // add new input fields for the seasonal tickets when the plus sign is clicked
  $('#addSeasonTicketField').click(function() {
    var newFields = `<div class="col-md-8 mb-3"><label class="form-label">Enter Name</label><input type="text" class="form-control" name="season_ticket_name[]" placeholder="Enter tier name"></div><div class="col-md-4 mb-3"><label class="form-label">Price</label><input type="number" class="form-control" name="season_ticket_price[]" placeholder="Enter tier price in Ksh."></div>`;

    $('.season_ticket_row').append(newFields);
  });

  $('#editDraftEventForm').on('submit', function() {
    console.log('wtf')
    // Add loader and blur effect
    document.body.classList.add('loader-active');
    document.querySelector('.page-body').classList.add('blurred-background');
  })

  new Dropzone("#dropzone-default")

})
</script>

{% endblock %}