{% extends 'admin/base_site.html' %}
{% load tags static %}

{% block extrahead %}
  <script src="{% static 'admin/js/core.js' %}"></script>
  <script src="/admin/jsi18n/"></script>
  <script src="{% static 'admin/js/calendar.js' %}"></script>
  <script src="{% static 'admin/js/admin/DateTimeShortcuts.js' %}"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}" />

  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
  <script>
    var lastClickedButton = ''
    function renderCalendar() {
        var calendarEl = document.getElementById('calendar');
        var destination = document.getElementById("destination-selector");
        var place = document.getElementById("place-selector");

        var calendar = new FullCalendar.Calendar(calendarEl, {
            timeZone: "{% settings_value 'TIME_ZONE' %}",
            eventTimeFormat: {
                hourCycle: "h23",
                hour: "2-digit",
                minute: "2-digit",
                omitZeroMinute: false,
                meridiem: false
            },
            firstDay: 1,
            expandRows: true,
            initialView: "timeGridWeek",
            headerToolbar: {
                left: "prev,next,today",
                center: "title",
                right: null
            },
            datesSet: function (dateInfo) {
              const datePicker = document.getElementById("date-picker");
                if (lastClickedButton !== 'submit-date-picker') {
                  datePicker.value = ''
                }
                lastClickedButton = 'header-buttons'
          },
            eventSources: [{
                url: "{% url 'events' %}",
                method: "GET",
                extraParams: function() {
                    return {
                        destination: destination.value,
                        place: place.value
                    };
                },
                failure: function() {
                    alert("there was and error while fetching events!");
                }
            }],
            views: {
                timeGridWeek: {
                    nowIndicator: true,
                    dayHeaderFormat: { weekday: "short" },
                    allDaySlot: false,
                    slotEventOverlap: false,
                    slotMinTime: "00:00:00",
                    slotDuration: "00:60:00",
                    slotLabelFormat: {
                        hourCycle: "h23",
                        hour: "2-digit",
                        minute: "2-digit",
                        omitZeroMinute: false,
                        meridiem: false
                    }
                }
            },
        });
        $(calendarEl).data('fullCalendarObj',calendar);
        calendar.render();
    }
    function refetchCalendar(){
        var calendar = $('#calendar').data('fullCalendarObj');
        calendar.refetchEvents();
    }
    function goToDate() {
        var calendar = $("#calendar").data("fullCalendarObj");
        var datePicker = document.getElementById("date-picker");
        if (datePicker.value === '') {
                alert("Please select a date.");
                return
            }

        lastClickedButton = 'submit-date-picker'
        calendar.gotoDate(datePicker.value);
            }

    document.addEventListener("DOMContentLoaded", renderCalendar);

    $(document).on('submit','#task-form',function(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url:'{% url "planner" %}',
            data:
            {
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
                campaign:$('#id_campaign').val(),
                start_0:$('#id_start_0').val(),
                start_1:$('#id_start_1').val()
            },
     success:function(data){
            refetchCalendar();
            alert("Campaign scheduled sucessfully.")
         },
        error:function(request, data){
            alert(request.responseText)
        }
     })
    });

</script>
{% endblock %}

{% block content %}
  <style>
    #filters {
        display: flex;
        justify-content: flex-end;
    }
    #filter-block {
        margin-left: 10px;
    }
    .separator {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #form-wrapper {
        display: flex;
        align-items: center;
        gap: 20px
    }
    #date-form {
        display: flex;
        gap: 5px;
    }
    #submit-date-button{
        padding: 5px 10px;
    }
</style>

  <div>
    <form id="task-form" method="post">
      {% csrf_token %}
      <h2>Schedule campaign</h2>
      <div id="form-wrapper">
        <table border="1">
          <tr>
            <td>
              <b>Campaign</b>
            </td>
            <td>
              <b>Start</b>
            </td>
          </tr>
          <tr>
            <td>{{ form.campaign }}</td>
            <td id="date-form">{{ form.start }}</td>
          </tr>
        </table>
        <input type="submit" value="Add" />
      </div>
    </form>
  </div>
  <hr class="separator" />
  <div style="display: flex; justify-content: space-between">
    <span>
      <span style="font-weight: bold;">Select date: </span>
      <input type="date" id="date-picker"/>
      <input type="submit" onclick="goToDate()" id="submit-date-button" value="Submit"/>
    </span>
    <form method="post">
      <div id="filters">
        <span>
          <span><b>Place:</b></span>
          <select id="place-selector" name="selected_place" onchange="refetchCalendar()">
            {% for place in places %}
              <option value="{{ place.id }}">{{ place.name }}</option>
            {% endfor %}
          </select>
        </span>
        <span>
          <span id="filter-block"><b>Destination:</b></span>
          <select id="destination-selector" name="selected_destination" onchange="refetchCalendar()">
            {% for destination in destinations %}
              <option value="{{ destination }}">{{ destination }}</option>
            {% endfor %}
          </select>
        </span>
      </div>
    </form>
  </div>
  {% if places %}
    <div id="calendar"></div>
  {% else %}
    <div>No data to display.</div>
  {% endif %}
{% endblock %}