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

{% block extrahead %}
{{ block.super }}
<script>
// Onglets pour les inlines (style Jazzmin) sans dépendre de Bootstrap JS
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.admin-inline-tabs').forEach(function (tabsNav) {
    var card = tabsNav.closest('.card, .card-primary, .card-outline') || document;
    var tabContent = card.querySelector('.admin-inline-tab-content');
    if (!tabContent) return;

    function activateTab(link) {
      var targetSelector = link.getAttribute('href');
      if (!targetSelector || !targetSelector.startsWith('#')) return;

      // Désactiver tous les onglets de cette barre
      tabsNav.querySelectorAll('.nav-link').forEach(function (l) {
        l.classList.remove('active');
        l.setAttribute('aria-selected', 'false');
      });

      // Masquer tous les panneaux associés
      tabContent.querySelectorAll('.tab-pane').forEach(function (pane) {
        pane.classList.remove('show', 'active');
      });

      // Activer l'onglet
      link.classList.add('active');
      link.setAttribute('aria-selected', 'true');

      // Afficher le panneau ciblé
      var targetPane = card.querySelector(targetSelector) || document.querySelector(targetSelector);
      if (targetPane) targetPane.classList.add('show', 'active');

      // Mettre à jour le hash (sans scroll brutal)
      try {
        if (history && history.replaceState) history.replaceState(null, '', targetSelector);
      } catch (err) {}
    }

    tabsNav.querySelectorAll('a[data-toggle="tab"]').forEach(function (link) {
      link.addEventListener('click', function (e) {
        e.preventDefault();
        activateTab(this);
      });
    });

    // Si on arrive avec un hash (#inline-tab-xxx), activer l’onglet correspondant
    if (window.location && window.location.hash) {
      var initial = tabsNav.querySelector('a[href="' + window.location.hash + '"]');
      if (initial) activateTab(initial);
    }
  });
});
</script>
{% endblock %}

{% block content %}
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-12 col-sm-6">
                    <h1 class="m-0">
                        <i class="fas fa-{% if add %}plus-circle{% else %}edit{% endif %}"></i>
                        {% if add %}Ajouter {{ opts.verbose_name }}{% else %}Modifier {{ original|truncatewords:"18" }}{% endif %}
                    </h1>
                </div>
                <div class="col-12 col-sm-6">
                    <ol class="breadcrumb float-sm-right mt-2 mt-sm-0">
                        <li class="breadcrumb-item"><a href="{% url 'admin:index' %}">Accueil</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a></li>
                        <li class="breadcrumb-item"><a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a></li>
                        <li class="breadcrumb-item active">{% if add %}Ajouter{% else %}Modifier{% endif %}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
<div class="card card-primary card-outline">    <div class="card-header border-0">
    
    <div class="card-tools">
        <button type="button" class="btn btn-tool" data-card-widget="collapse">
            <i class="fas fa-minus"></i>
        </button>
    </div>
</div>
    <div class="card-body" style="padding: var(--space-6, 24px);">
        {{ block.super }}
    </div>
</div>
        </div>
    </section>
</div>
{% endblock %}

{# Parent + enfants AU MÊME NIVEAU via onglets (style Jazzmin) #}
{% block field_sets %}
{% if inline_admin_formsets %}
<div class="card card-primary card-outline mt-3 admin-parent-children-tabs">
    <div class="card-header p-0 border-bottom-0">
        <ul class="nav nav-tabs admin-inline-tabs" role="tablist">
            <li class="nav-item">
                <a
                    class="nav-link active"
                    id="tab-parent-tab"
                    data-toggle="tab"
                    href="#tab-parent"
                    role="tab"
                    aria-controls="tab-parent"
                    aria-selected="true"
                >
                    {{ opts.verbose_name|capfirst }}
                </a>
            </li>
            {% for inline_admin_formset in inline_admin_formsets %}
            {% with inline_id=inline_admin_formset.formset.prefix %}
            <li class="nav-item">
                <a
                    class="nav-link"
                    id="inline-tab-{{ inline_id }}-tab"
                    data-toggle="tab"
                    href="#inline-tab-{{ inline_id }}"
                    role="tab"
                    aria-controls="inline-tab-{{ inline_id }}"
                    aria-selected="false"
                >
                    {{ inline_admin_formset.opts.verbose_name_plural|capfirst }}
                </a>
            </li>
            {% endwith %}
            {% endfor %}
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content admin-inline-tab-content">
            <div
                class="tab-pane fade show active"
                id="tab-parent"
                role="tabpanel"
                aria-labelledby="tab-parent-tab"
            >
                {% for fieldset in adminform %}
                    {% include "admin/includes/fieldset.html" with heading_level=2 prefix="fieldset" id_prefix=0 id_suffix=forloop.counter0 %}
                {% endfor %}
{# NOTE: on ne ferme pas le tab-pane ici pour inclure after_field_sets dans le même onglet. #}
{% else %}
    {% for fieldset in adminform %}
        {% include "admin/includes/fieldset.html" with heading_level=2 prefix="fieldset" id_prefix=0 id_suffix=forloop.counter0 %}
    {% endfor %}
{% endif %}
{% endblock %}

{% block inline_field_sets %}
{% if inline_admin_formsets %}
            </div>{# /#tab-parent: fermé ici pour que after_field_sets reste dedans #}

            {% for inline_admin_formset in inline_admin_formsets %}
            {% with inline_id=inline_admin_formset.formset.prefix %}
            <div
                class="tab-pane fade"
                id="inline-tab-{{ inline_id }}"
                role="tabpanel"
                aria-labelledby="inline-tab-{{ inline_id }}-tab"
            >
                {% include inline_admin_formset.opts.template %}
            </div>
            {% endwith %}
            {% endfor %}
        </div>{# /.tab-content #}
    </div>{# /.card-body #}
</div>{# /.card #}
{% else %}
    {% for inline_admin_formset in inline_admin_formsets %}
        {% include inline_admin_formset.opts.template %}
    {% endfor %}
{% endif %}
{% endblock %}

{% block submit_buttons_bottom %}
<div class="card-footer bg-light border-top">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div class="btn-group" role="group">
            <button type="submit" class="btn btn-primary btn-lg" name="_save">
                <i class="fas fa-save"></i> {% if add %}Ajouter{% else %}Enregistrer{% endif %}
            </button>
            {% if not add %}
            <button type="submit" class="btn btn-info btn-lg" name="_continue">
                <i class="fas fa-save"></i> Enregistrer et continuer
            </button>
            <button type="submit" class="btn btn-success btn-lg" name="_addanother">
                <i class="fas fa-plus"></i> Enregistrer et ajouter
            </button>
            {% endif %}
        </div>
        <a href="{% url opts|admin_urlname:'changelist' %}" class="btn btn-secondary btn-lg">
            <i class="fas fa-times"></i> Annuler
        </a>
    </div>
</div>
{% endblock %}