{% extends "base_dashboard.html" %}
{% load static %}
<!-- {% load tz_detect %} -->
<!-- {% load tz %} -->
{% load custom_tags %}
{% load static %}
{% block title %}
    Edit Hunt: {{ hunt.name }} - {% env 'PROJECT_NAME' %} Dashboard
{% endblock title %}
{% block description %}
    Edit the details of the hunt "{{ hunt.name }}" in the {% env 'PROJECT_NAME' %} dashboard. Update the description, start time, and end time of the hunt.
{% endblock description %}
{% block keywords %}
    {% env 'PROJECT_NAME' %}, hunt, edit, update, description, time, schedule, "{{ hunt.name }}", dashboard
{% endblock keywords %}
{% block og_title %}
    Edit Hunt: {{ hunt.name }} - {% env 'PROJECT_NAME' %} Dashboard
{% endblock og_title %}
{% block og_description %}
    Update the hunt "{{ hunt.name }}" details including name, description, start and end times in the {% env 'PROJECT_NAME' %} dashboard.
{% endblock og_description %}
{% block content %}
    {% localtime on %}
    <section>
        {% include "includes/organization_sidenav.html" %}
    </section>
    <script src="{% static "js/jquery.validate.js" %}"></script>
    <link href="{% static "css/bootstrap-slider.css" %}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{% static "css/mtr-datepicker.min.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "css/mtr-datepicker.default-theme.min.css" %}" />
    <form id="update-hunt">
        {% csrf_token %}
        <div class="bg-white rounded-lg shadow-lg">
            <div class="p-4 border-b">
                <button type="button" class="float-right text-gray-600 hover:text-gray-900">×</button>
                <h4 class="text-xl font-bold">Edit Hunt</h4>
            </div>
            <div class="p-4">
                <input type="hidden" name="id" value="{{ hunt.pk }}" />
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700">Name:</label>
                    <input type="text"
                           name="name"
                           required
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                           id="name"
                           value="{{ hunt.name }}">
                </div>
                {{ hunt_form.media }}
                {{ date_form.media }}
                {{ hunt_form.as_p }}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label for="datepicker-1" class="block text-sm font-medium text-gray-700">
                            Start Date/Time :
                            <div id="datepicker-1-res" class="hidden"></div>
                        </label>
                        <div id="datepicker-1" class="mt-1"></div>
                    </div>
                    <div>
                        <label for="datepicker-2" class="block text-sm font-medium text-gray-700">
                            End Date/Time :
                            <div id="datepicker-2-res" class="hidden"></div>
                        </label>
                        <div id="datepicker-2" class="mt-1"></div>
                    </div>
                </div>
                <div class="mb-6">
                    <label for="domain" class="block text-sm font-medium text-gray-700">Domain:</label>
                    <select name="domain"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                            id="domain">
                        {% for domain in domains %}<option>{{ domain.id }} - {{ domain.name }}</option>{% endfor %}
                    </select>
                </div>
                <div class="mb-6">
                    <span class="block text-sm font-medium text-gray-700">Prizes</span>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="prize_winner" class="block text-sm font-medium text-gray-700">Winner:</label>
                            <div class="mt-1 flex rounded-md shadow-sm">
                                <input name="prize_winner"
                                       type="number"
                                       placeholder="Winner"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                       disabled />
                                <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">$</span>
                            </div>
                        </div>
                        <div>
                            <label for="prize_runner" class="block text-sm font-medium text-gray-700">Runner's Up:</label>
                            <div class="mt-1 flex rounded-md shadow-sm">
                                <input placeholder="Runner's Up"
                                       name="prize_runner"
                                       type="number"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                       disabled />
                                <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">$</span>
                            </div>
                        </div>
                        <div>
                            <label for="prize_second_runner"
                                   class="block text-sm font-medium text-gray-700">2nd Runner's Up:</label>
                            <div class="mt-1 flex rounded-md shadow-sm">
                                <input placeholder="2nd Runner's Up"
                                       name="prize_second_runner"
                                       type="number"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                       disabled />
                                <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">$</span>
                            </div>
                        </div>
                    </div>
                </div>
                <label class="inline-flex items-center mt-4">
                    <input name="publish"
                           type="checkbox"
                           class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                           {% if hunt.is_published %}checked{% endif %}
                           value="true">
                    <span class="ml-2 text-sm text-gray-700">Publish (If Not Published, the Hunt Will be saved as a draft)</span>
                </label>
            </div>
            <div class="p-4 border-t flex justify-end space-x-4">
                <input type="submit"
                       class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                       value="Change" />
                <input type="reset"
                       class="inline-flex justify-center rounded-md border border-transparent bg-gray-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                       value="Reset {{ hunt.starts_on.isoformat }}" />
            </div>
        </div>
    </form>
    <script type="text/javascript" src="{% static "js/mtr-datepicker-timezones.js" %}"></script>
    <script type="text/javascript" src="{% static "js/mtr-datepicker.js" %}"></script>
    <script type="text/javascript" src="{% static "js/dt.js" %}"></script>
    <script type="text/javascript">
  var dateNow = new Date();
  var starts_on = new Date("{{ hunt.starts_on.isoformat }}")
  var end_on = new Date("{{ hunt.end_on.isoformat }}")
  console.log(starts_on.getTimezoneOffset())
  console.log(starts_on)
  console.log(end_on)
  var Datepicker1 = MtrDatepickerDemo.init({
    target: 'datepicker-1',
    timestamp: starts_on.getTime() - 10 * 60000,
    future: true,
  }, {
    exportFormats: 'datepicker-1-res',
  });
  var Datepicker2 = MtrDatepickerDemo.init({
    target: 'datepicker-2',
    timestamp: end_on.getTime() - 10 * 60000,
    future: true,
  }, {
    exportFormats: 'datepicker-2-res',
  });
    </script>
    <!-- {% tz_detect %} -->
{% endlocaltime %}
{% endblock content %}
{% block after_js %}
    <script src="{% static "js/bootstrap-slider.js" %}"></script>
    <script>
  $('.btn').on('click', function () {
    $(".hunt-form").valid();
  });

  function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
  }

  $(".slider").slider({
    tooltip: 'always',
    formatter: function (value) {
      return '$' + numberWithCommas(value);
    }
  });
    </script>
{% endblock after_js %}