{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static "admin/css/changelists.css" %}">
  {% if cl.formset %}
    <link rel="stylesheet" href="{% static "admin/css/forms.css" %}">
  {% endif %}
  {% if cl.formset or action_form %}
    <script src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  {% if not actions_on_top and not actions_on_bottom %}
    <style>
      #changelist table thead th:first-child {width: inherit}
    </style>
  {% endif %}
{% endblock %}


{% block extrahead %}
{{ block.super }}
<script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% static 'admin/' %}{% endfilter %}";</script>
{{ media.js }}
<script src="{% static 'admin/js/filters.js' %}" defer></script>
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
&rsaquo; {{ cl.opts.verbose_name_plural|capfirst }}
</div>
{% endblock %}
{% endif %}

{% block coltype %}{% endblock %}

{% block content %}
  <div id="option-msg" style="text-align: center; color: red"></div>
  <div id="content-main">
    {% block object-tools %}
        <ul class="object-tools">
          {% block object-tools-items %}
            {% change_list_object_tools %}
          {% endblock %}
        </ul>
    {% endblock %}
    {% if cl.formset and cl.formset.errors %}
        <p class="errornote">
        {% if cl.formset.total_error_count == 1 %}{% translate "Please correct the error below." %}{% else %}{% translate "Please correct the errors below." %}{% endif %}
        </p>
        {{ cl.formset.non_form_errors }}
    {% endif %}
    <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
      <div class="changelist-form-container">
        {% block search %}{% search_form cl %}{% endblock %}
        {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}

        <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
        {% if cl.formset %}
          <div>{{ cl.formset.management_form }}</div>
        {% endif %}

        {% block result_list %}
          {% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %}
          {% result_list cl %}
          {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}
        {% endblock %}
        {% block pagination %}{% pagination cl %}{% endblock %}
        </form>
      </div>
      {% block filters %}
        {% if cl.has_filters %}
          <div id="changelist-filter">
            <h2>{% translate 'Filter' %}</h2>
            {% if cl.has_active_filters %}<h3 id="changelist-filter-clear">
              <a href="{{ cl.clear_all_filters_qs }}">&#10006; {% translate "Clear all filters" %}</a>
            </h3>{% endif %}
            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
          </div>
        {% endif %}
      {% endblock %}
    </div>
  </div>

    <script>
        function put_schedule(base_url, schedule_id){
            const schedule_box = $('#schedule_box_' + schedule_id);
            let date = schedule_box.find('input[class="vDateField"]').val();
            let time = schedule_box.find('input[class="vTimeField"]').val();
            if(date === ""){
                date = new Date().toLocaleDateString();
            }
            if (time === ""){
                time = new Date().toLocaleTimeString();
            }
            if(time.split(':').length === 2){
                time = time + ':00'
            }
            const url = base_url + '&t=' + date.replaceAll('/', '-') + ' ' + time;
            $.ajax({
                url: url,
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function(data){
                    $('#option-msg').text("加入成功");
                    $(document).trigger('mouseup');
                    setTimeout(function(){
                        $('#option-msg').text("");
                    }, 1000);
                },
                error: function(data){
                    console.debug(data);
                    alert(JSON.stringify(JSON.parse(data.responseText)));
                }}
            );
        }

        (function ($) {
            $.fn.popmenu = function (options) {
                var settings = $.extend({
                    'controller': true,
                    'width': '300px',
                    'background': '#34495e',
                    'focusColor': '#1abc9c',
                    'borderRadius': '10px',
                    'top': '50',
                    'left': '0',
                    'iconSize': '100px',
                    'color': '#fff',
                    'border': '0px'
                }, options);
                if (settings.controller === true) {
                    var temp_display = 'none';
                } else {
                    var temp_display = 'block';
                }
                var tar = $(this);
                var tar_body = tar.children('ul');
                var tar_list = tar_body.children('li');
                var tar_a = tar_list.children('a');
                var tar_ctrl = tar.children('.pop_ctrl');

                function setIt() {
                    tar_body.css({
                        'display': temp_display,
                        'position': 'absolute',
                        'margin-top': -settings.top,
                        'margin-left': -settings.left,
                        'background': settings.background,
                        'padding': '0',
                        'border-radius': settings.borderRadius,
                        'border': settings.border
                    });
                    tar_list.css({
                        'padding': '10px',
                        'display': 'block',
                        'color': settings.color,
                        'border-radius': settings.borderRadius
                    });
                    tar_a.css({
                        'text-decoration': 'none',
                        'color': settings.color
                    });
                    tar_ctrl.hover(
                        function () {
                            tar_ctrl.css('cursor', 'pointer');
                        },
                        function () {
                            tar_ctrl.css('cursor', 'default')
                        }
                    );
                    tar_ctrl.click(function (e) {
                        e.preventDefault();
                        tar_body.show('fast');
                        $(document).mouseup(function (e) {
                            var _con = tar_body;
                            if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                                _con.hide();
                            }
                            //_con.hide(); some functions you want
                        });
                    });
                    tar_list.hover(function () {
                        $(this).css({
                            'background': settings.focusColor,
                            'cursor': 'pointer'
                        });
                    }, function () {
                        $(this).css({
                            'background': settings.background,
                            'cursor': 'default'
                        });
                    });
                }
                return setIt();

            };
        }(jQuery));
        $('.schedule_box').each(function () {
            $(this).popmenu({background: '#79aec8', color: 'black'});
        });
    </script>
{% endblock %}