{% load i18n admin_urls static admin_modify %}
<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group"
     data-inline-type="tabular"
     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
  <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
{{ inline_admin_formset.formset.management_form }}
<fieldset class="module {{ inline_admin_formset.classes }}">
   {% if inline_admin_formset.formset.max_num == 1 %}
     <h2>{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2>
   {% else %}
     <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
   {% endif %}
   {{ inline_admin_formset.formset.non_form_errors }}
   <table>
     <thead>
      <tr>
        {% for field in inline_admin_formset.fields %}
        {% if field.name == 'byorder' %}
        <th style="width: 20px;">
          <div class="handle"></div>
        </th>
        {% endif %}
        {% endfor %}
       <th class="original"></th>
     {% for field in inline_admin_formset.fields %}
       <th class="column-{{ field.name }}{% if field.required %} required{% endif %}{% if field.widget.is_hidden %} hidden{% endif %}">{{ field.label|capfirst }}
       {% if field.help_text %}<img src="{% static "admin/img/icon-unknown.svg" %}" class="help help-tooltip" width="10" height="10" alt="({{ field.help_text|striptags }})" title="{{ field.help_text|striptags }}">{% endif %}
       </th>
     {% endfor %}
     {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}<th>{% translate "Delete?" %}</th>{% endif %}
     </tr></thead>

     <tbody>
     {% for inline_admin_form in inline_admin_formset %}
     
        {% if inline_admin_form.form.non_field_errors %}
        <tr class="row-form-errors"><td colspan="{{ inline_admin_form|cell_count }}">{{ inline_admin_form.form.non_field_errors }}</td></tr>
        {% endif %}
        <tr class="form-row {% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form{% endif %}"
             id="{{ inline_admin_formset.formset.prefix }}-{% if forloop.last and inline_admin_formset.has_add_permission %}empty{% else %}{{ forloop.counter0 }}{% endif %}">
        <td class="original">
          {% if inline_admin_form.original or inline_admin_form.show_url %}<p>
          {% if inline_admin_form.original %}
          {{ inline_admin_form.original }}
          {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}<a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{{ inline_admin_formset.has_change_permission|yesno:'inlinechangelink,inlineviewlink' }}">{% if inline_admin_formset.has_change_permission %}{% translate "Change" %}{% else %}{% translate "View" %}{% endif %}</a>{% endif %}
          {% endif %}
          {% if inline_admin_form.show_url %}<a href="{{ inline_admin_form.absolute_url }}">{% translate "View on site" %}</a>{% endif %}
            </p>{% endif %}
          {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
          {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
        </td>
        {% for fieldset in inline_admin_form %}
          {% for line in fieldset %}
            {% for field in line %}
              
              <td class="{% if field.field.name %}field-{{ field.field.name }}{% endif %}{% if field.field.is_hidden %} hidden{% endif %}">
              {% if field.is_readonly %}
                  <p>{{ field.contents }}</p>
              {% else %}
                  {{ field.field.errors.as_ul }}
                  {{ field.field }}
              {% endif %}
              </td>
            {% endfor %}
          {% endfor %}
        {% endfor %}
       
        {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
          <td class="delete">{% if inline_admin_form.original %}{{ inline_admin_form.deletion_field.field }}{% endif %}</td>
        {% endif %}

        
        </tr>
        {% if forloop.last %}
        <tr style="display: none;" ><td>
        <textarea style="display: none;">
          <tr class="form-row  empty-form"
            id="{{ inline_admin_formset.formset.prefix }}-empty">
        {% for field in inline_admin_formset.fields %}
        {% if field.name == 'byorder' %}
        <td style="width: 20px;">
          <div class="handle"></div>
        </td>
        {% endif %}
        {% endfor %}
        <td class="original">
          {% if inline_admin_form.original or inline_admin_form.show_url %}<p>
          {% if inline_admin_form.original %}
          {{ inline_admin_form.original }}
          {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}<a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{{ inline_admin_formset.has_change_permission|yesno:'inlinechangelink,inlineviewlink' }}">{% if inline_admin_formset.has_change_permission %}{% translate "Change" %}{% else %}{% translate "View" %}{% endif %}</a>{% endif %}
          {% endif %}
          {% if inline_admin_form.show_url %}<a href="{{ inline_admin_form.absolute_url }}">{% translate "View on site" %}</a>{% endif %}
            </p>{% endif %}
          {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
          {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
        </td>
        {% for fieldset in inline_admin_form %}
          {% for line in fieldset %}
            {% for field in line %}
              
              <td class="{% if field.field.name %}field-{{ field.field.name }}{% endif %}{% if field.field.is_hidden %} hidden{% endif %}">
              {% if field.is_readonly %}
                  <p>{{ field.contents }}</p>
              {% else %}
                  {{ field.field.errors.as_ul }}
                  {{ field.field }}
              {% endif %}
              </td>
            {% endfor %}
          {% endfor %}
        {% endfor %}
      
        {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
          <td class="delete">{% if inline_admin_form.original %}{{ inline_admin_form.deletion_field.field }}{% endif %}</td>
        {% endif %}
        </tr>
        </textarea>
      </td></tr>
      {% endif %}
     {% endfor %}
     </tbody>
   </table>
</fieldset>
  </div>
</div>
<style>
  /* 隐藏原始序号字段 */
  .column-byorder {
    display: none !important;
  }
 
</style>


<script src="/static/django_sohoui/js/jquery.min.js"></script>
<script src="/static/django_sohoui/js/Sortable.min.js"></script>‌‌

<script type="text/javascript">
    // function save(){
    //     var form = document.getElementById('{{ opts.model_name }}_form')
    //     form.submit()
    // }

    {% for field in inline_admin_formset.fields %}
    {% if field.name == 'byorder' %}
    document.addEventListener('DOMContentLoaded', function() {
        // 为每个 inline 表格添加拖拽把手
        document.querySelectorAll('.inline-related tbody tr').forEach(function(row) {
            if (!row.querySelector('.handle')) {
                var handle = document.createElement('td');
                handle.className = 'handle';
                handle.innerHTML = '<i class="fas fa-arrows-alt handle" style="line-height: 33px; font-size:16px;"></i>';
                row.insertBefore(handle, row.firstChild);
            }
        });

        // 初始化所有 inline 表格的拖拽功能
        document.querySelectorAll('.inline-related tbody').forEach(function(tbody) {
            new Sortable(tbody, {
                animation: 150,
                handle: '.handle',
                // ghostClass: 'sortable-ghost',
                onEnd: function(evt) {
                    // 更新序号
                    updateOrderNumbers();
                }
            });
        });

        // 更新序号函数
        function updateOrderNumbers() {
            document.querySelectorAll('.inline-related tbody tr').forEach(function(row, index) {
                // 更新 ORDER 字段
                var orderInput = row.querySelector('input[name$="-byorder"]');
                console.log(index)
                if (orderInput) {
                    orderInput.value = index;
                }
            });
        }
    });
    {% endif %}
    {% endfor %}

</script>