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

{% block title %}{% if errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}

{% block extrahead %}{{ block.super }}
<script src="{% url 'admin:jsi18n' %}"></script>
{{ media }}
{% endblock %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static "admin/css/forms.css" %}">{% endblock %}

{% block coltype %}colM{% endblock %}

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

{# Breadcrumbs inherited from base.html #}

{% block content %}
<div id="content-main" class="flex flex-col gap-8">
  {% block object-tools %}
  {% if change and not is_popup %}
    <div class="flex justify-end -mb-4">
        <ul class="object-tools flex gap-2 list-none">
          {% block object-tools-items %}
            {% change_form_object_tools %}
          {% endblock %}
        </ul>
    </div>
  {% endif %}
  {% endblock %}
  
  <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" novalidate class="flex flex-col gap-10">
    {% csrf_token %}{% block form_top %}{% endblock %}
    
    <div class="bg-white dark:bg-slate-800 rounded-3xl border border-gray-100 dark:border-slate-700 shadow-sm overflow-hidden flex flex-col">
        {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1">{% endif %}
        {% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">{% endif %}
        {% if source_model %}<input type="hidden" name="{{ source_model_var }}" value="{{ source_model }}">{% endif %}
        
        {% if save_on_top %}{% block submit_buttons_top %}{% submit_row %}{% endblock %}{% endif %}
        
        {% if errors %}
            <div class="bg-red-500/10 border-b border-red-500/20 text-red-600 p-8 flex items-center gap-4">
                <i class="pi pi-exclamation-triangle text-2xl"></i>
                <div class="flex flex-col">
                    <span class="font-black text-lg">{% blocktranslate count counter=errors|length %}Errore di validazione{% plural %}Sussistono errori di validazione{% endblocktranslate %}</span>
                    <span class="text-sm font-bold opacity-80">{% translate "Controlla i campi evidenziati in rosso qui sotto." %}</span>
                </div>
            </div>
            {% if adminform.form.non_field_errors %}
                <div class="p-6 bg-red-500/5 text-red-700 font-bold border-b border-red-500/10">{{ adminform.form.non_field_errors }}</div>
            {% endif %}
        {% endif %}

        {% with fieldset_count=adminform.fieldsets|length %}
        {% if fieldset_count > 1 or inline_admin_formsets %}
        <!-- Premium Apple Tabs Navigation -->
        <div class="px-8 pt-8">
            <div class="flex flex-wrap items-center gap-3 p-2 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-md rounded-[1.5rem] w-fit border border-slate-200/50 dark:border-slate-800/50 shadow-sm">
                {% for fieldset in adminform %}
                <button type="button" 
                        class="apple-tab-btn {% if forloop.first %}active{% endif %} group px-6 py-3 rounded-[1.2rem] text-xs font-black uppercase tracking-[0.1em] transition-all duration-300 flex items-center gap-3" 
                        data-tab-target="fieldset-{{ forloop.counter0 }}">
                    <div class="w-2 h-2 rounded-full bg-blue-500 opacity-0 group-[.active]:opacity-100 transition-opacity"></div>
                    <i class="pi 
                        {% if forloop.counter == 1 %}pi-info-circle
                        {% elif "personal" in fieldset.name|lower or "personali" in fieldset.name|lower %}pi-user
                        {% elif "permis" in fieldset.name|lower or "permessi" in fieldset.name|lower %}pi-lock
                        {% elif "date" in fieldset.name|lower %}pi-calendar
                        {% else %}pi-tag{% endif %} 
                        text-[14px]"></i>
                    <span>{{ fieldset.name|default:_("Generale") }}</span>
                </button>
                {% endfor %}

                {% for inline_admin_formset in inline_admin_formsets %}
                    <button type="button" 
                            class="apple-tab-btn group px-6 py-3 rounded-[1.2rem] text-xs font-black uppercase tracking-[0.1em] text-slate-500 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-all duration-300 flex items-center gap-3" 
                            data-tab-target="inline-{{ forloop.counter }}">
                        <div class="w-2 h-2 rounded-full bg-blue-500 opacity-0 group-[.active]:opacity-100 transition-opacity"></div>
                        <i class="pi pi-list text-[14px]"></i>
                        <span>{{ inline_admin_formset.opts.verbose_name_plural }}</span>
                    </button>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}

        <div class="p-8">
            <!-- Fieldsets Tabs -->
            {% block field_sets %}
            {% for fieldset in adminform %}
              <div class="apple-tab-content {% if not forloop.first %}!hidden{% endif %} space-y-12" id="tab-fieldset-{{ forloop.counter0 }}">
                {% include "admin/includes/fieldset.html" with heading_level=2 prefix="fieldset" id_prefix=0 id_suffix=forloop.counter0 %}
              </div>
            {% endfor %}
            {% endblock %}

            {% block after_field_sets %}{% endblock %}

            <!-- Inlines Tabs -->
            {% block inline_field_sets %}
            {% for inline_admin_formset in inline_admin_formsets %}
                <div class="apple-tab-content !hidden space-y-12" id="tab-inline-{{ forloop.counter }}">
                    {% include inline_admin_formset.opts.template %}
                </div>
            {% endfor %}
            {% endblock %}

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

        {% block submit_buttons_bottom %}
            <div class="p-8 bg-gray-50/50 dark:bg-slate-900/20 border-t border-gray-100 dark:border-slate-700/50">
                {% submit_row %}
            </div>
        {% endblock %}
    </div>

    {% block admin_change_form_document_ready %}
        <script id="django-admin-form-add-constants"
                src="{% static 'admin/js/change_form.js' %}"
                {% if adminform and add %}
                    data-model-name="{{ opts.model_name }}"
                {% endif %}
                async>
        </script>
    {% endblock %}

    {% prepopulated_fields_js %}
  </form>
</div>

<style>
    /* Tabs Styling */
    .apple-tab-btn.active {
        background: #2563eb !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }
    
    .apple-tab-btn.has-error {
        color: #ef4444 !important;
    }
    
    .apple-tab-btn.active.has-error {
        background: #ef4444 !important;
        color: white !important;
    }

    /* Transition effects */
    .apple-tab-content {
        animation: fadeIn 0.3s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const tabBtns = document.querySelectorAll('.apple-tab-btn');
    const tabContents = document.querySelectorAll('.apple-tab-content');
    
    function switchTab(targetId) {
        // Hide all contents
        tabContents.forEach(content => {
            content.classList.add('!hidden');
        });

        // Deactivate all buttons
        tabBtns.forEach(btn => {
            btn.classList.remove('active');
            btn.classList.add('text-slate-500', 'dark:text-slate-400');
        });
        
        // Show target
        const targetContent = document.getElementById(`tab-${targetId}`);
        if (targetContent) {
            targetContent.classList.remove('!hidden');
        }
        
        // Activate button
        const targetBtn = document.querySelector(`[data-tab-target="${targetId}"]`);
        if (targetBtn) {
            targetBtn.classList.add('active');
            targetBtn.classList.remove('text-slate-500', 'dark:text-slate-400');
        }

        // Save state in session storage
        sessionStorage.setItem(`activeTab_${window.location.pathname}`, targetId);
    }
    
    tabBtns.forEach(btn => {
        btn.onclick = () => switchTab(btn.dataset.tabTarget);
    });

    // Check for errors in tabs and highlight them
    tabContents.forEach(content => {
        const id = content.id.replace('tab-', '');
        if (content.querySelector('.errors, .errorlist, .errornote')) {
            const btn = document.querySelector(`[data-tab-target="${id}"]`);
            if (btn) btn.classList.add('has-error');
        }
    });

    // Restore active tab
    const savedTab = sessionStorage.getItem(`activeTab_${window.location.pathname}`);
    if (savedTab) {
        switchTab(savedTab);
    } else if (document.querySelector('.apple-tab-btn.has-error')) {
        // If there's an error and no saved tab, go to the first tab with error
        const firstErrorTab = document.querySelector('.apple-tab-btn.has-error').dataset.tabTarget;
        switchTab(firstErrorTab);
    }
});
</script>
{% endblock %}