{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block head %}
<link rel="stylesheet" href="{% static 'common/select2.min.css' %}" />
<link rel="stylesheet" href="{% static 'common/select2-bootstrap-5-theme.min.css' %}" />
<style>
    /* ── Bordure gauche par type de mouvement ── */
    .batch-card-in       { border-left: 4px solid #198754 !important; }
    .batch-card-out      { border-left: 4px solid #dc3545 !important; }
    .batch-card-transfer { border-left: 4px solid #0dcaf0 !important; }

    /* ── En-tête teinté par type ── */
    .batch-card-in .card-header       { background-color: rgba(25, 135, 84, 0.08); }
    .batch-card-out .card-header      { background-color: rgba(220, 53, 69, 0.08); }
    .batch-card-transfer .card-header { background-color: rgba(13, 202, 240, 0.08); }

    /* ── Table produits : alternance ── */
    .batch-card .product-row-even td { background-color: rgba(0,0,0,0.04) !important; }
    .batch-card thead tr { border-bottom: 1px solid rgba(0,0,0,0.1); }
</style>
{% endblock %}

{% block content %}

<div class="container mt-2">
    <ul class="nav nav-tabs" id="tablesTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="preparation-orders-tab" data-bs-toggle="tab" data-bs-target="#preparation-orders-content" type="button" role="tab" aria-controls="preparation-orders" aria-selected="true"><i class="bi bi-clipboard-check"></i> {% translate "Bons de préparation" %}</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="production-orders-tab" data-bs-toggle="tab" data-bs-target="#production-orders-content" type="button" role="tab" aria-controls="production-orders" aria-selected="false"><i class="bi bi-pencil-square"></i> {% translate "Bons de confection" %}</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="movements-tab" data-bs-toggle="tab" data-bs-target="#movements-content" type="button" role="tab" aria-controls="movements-table" aria-selected="false"><i class="bi bi-arrow-left-right"></i> {% translate "Mouvements de Stock" %}</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="inventories-tab" data-bs-toggle="tab" data-bs-target="#inventories-content" type="button" role="tab" aria-controls="inventories-content" aria-selected="false"><i class="bi bi-journal-check"></i> {% translate "Inventaires" %}</button>
        </li>
    </ul>
    <div class="tab-content my-2" id="tablesTabContent">
        <div class="tab-pane fade show active" id="preparation-orders-content" role="tabpanel" aria-labelledby="preparation-orders-tab">
            <div id="preparation-orders-container">
                <!-- Filtres -->
                <div class="card mb-3 shadow-sm bg-light">
                    <div class="card-body py-2">
                        <form method="get" class="row g-2 align-items-center">
                            <!-- Préserver l'onglet actif -->
                            <input type="hidden" name="tab" value="preparation-orders">

                            <div class="col-md-4">
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                                    <input type="text" class="form-control" name="q" value="{{ search_q }}" placeholder="{% translate 'N° bon, code ou titre d\'intervention...' %}">
                                    <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-status"><i class="bi bi-funnel me-1"></i>{% translate "Statut" %}</label>
                                    <select class="form-select" id="filter-status" name="status" onchange="this.form.submit()">
                                        <option value="">-- {% translate "Tous les statuts" %} --</option>
                                        {% for val, label in preparation_order_status_choices %}
                                            <option value="{{ val }}" {% if selected_status == val %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-3">
                                <div class="input-group input-group-sm">
                                    <label class="input-group-text" for="filter-priority"><i class="bi bi-exclamation-triangle me-1"></i>{% translate "Priorité" %}</label>
                                    <select class="form-select" id="filter-priority" name="priority" onchange="this.form.submit()">
                                        <option value="">-- {% translate "Toutes les priorités" %} --</option>
                                        {% for val, label in preparation_order_priority_choices %}
                                            <option value="{{ val }}" {% if selected_priority == val %}selected{% endif %}>{{ label }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-2 d-flex justify-content-between align-items-center gap-1">
                                <div>
                                    {% if selected_status or selected_priority or search_q %}
                                        <a href="?tab=preparation-orders" class="btn btn-sm btn-outline-secondary" title="{% translate 'Effacer les filtres' %}">
                                            <i class="bi bi-x-circle me-1"></i>{% translate "Effacer" %}
                                        </a>
                                    {% endif %}
                                </div>
                                {% if can_create_preparation_order %}
                                <a href="{% url 'stock:new_preparation_order' %}" class="btn btn-sm btn-primary text-nowrap">
                                    <i class="bi bi-plus-circle me-1"></i>{% translate "Nouveau bon" %}
                                </a>
                                {% endif %}
                            </div>
                        </form>
                    </div>
                </div>

                {% for order in preparation_orders %}
                <div class="card mb-3 shadow-sm
                    {% if order.status == 'to_process' %}border-warning
                    {% elif order.status == 'cancelled' %}border-danger
                    {% elif order.status == 'processed' %}border-success
                    {% else %}border-secondary{% endif %}
                    " style="border-left-width: 4px !important;">

                    <!-- En-tête -->
                    <div class="card-header d-flex align-items-center gap-2 flex-wrap py-2
                        {% if order.status == 'to_process' %}bg-warning bg-opacity-10
                        {% elif order.status == 'cancelled' %}bg-danger bg-opacity-10
                        {% elif order.status == 'processed' %}bg-success bg-opacity-10
                        {% else %}bg-secondary bg-opacity-10{% endif %}">

                        <a href="{% url 'stock:preparation_order_detail' order.pk %}" class="fw-bold text-decoration-none me-1">
                            {{ order.order_number }}
                        </a>

                        {% if order.intervention %}
                            <a href="{% url 'interventions:intervention_detail' order.intervention.id %}" class="badge bg-light text-dark border text-decoration-none me-1" title="{% translate 'Intervention liée' %}">
                                <i class="bi bi-wrench me-1 text-primary"></i>{% if order.intervention.code %}{{ order.intervention.code }}{% else %}#{{ order.intervention.id }}{% endif %}{% if order.intervention.title %} — {{ order.intervention.title }}{% endif %}
                            </a>
                        {% endif %}

                        {% if order.status == 'to_process' %}
                            <span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'pending' %}
                            <span class="badge bg-info"><i class="bi bi-clock me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'processed' %}
                            <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'cancelled' %}
                            <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>{{ order.get_status_display }}</span>
                        {% endif %}

                        {% if order.priority == '1' %}
                            <span class="badge bg-danger" title="{% translate 'Priorité' %}"><i class="bi bi-exclamation-triangle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% elif order.priority == '2' %}
                            <span class="badge bg-warning text-dark" title="{% translate 'Priorité' %}"><i class="bi bi-exclamation-circle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% elif order.priority == '3' %}
                            <span class="badge bg-primary" title="{% translate 'Priorité' %}"><i class="bi bi-info-circle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% else %}
                            <span class="badge bg-secondary" title="{% translate 'Priorité' %}"><i class="bi bi-arrow-down-circle-fill me-1"></i>{{ order.get_priority_display }}</span>
                        {% endif %}

                        <span class="text-muted small ms-auto"><i class="bi bi-calendar3 me-1"></i>{{ order.date|date:"d/m/Y H:i" }}</span>
                        <span class="badge bg-light text-dark border"><i class="bi bi-box-seam me-1"></i>{{ order.preparationorderitem_set.count }} {% translate "article(s)" %}</span>

                        <a href="{% url 'stock:preparation_order_detail' order.pk %}" class="btn btn-sm btn-outline-primary ms-1" title="{% translate 'Voir le détail' %}">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>

                    <!-- Corps : liste des articles -->
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="table-layout:fixed;width:100%;">
                            <colgroup>
                                <col style="width:60%">
                                <col style="width:40%">
                            </colgroup>
                            <thead>
                                <tr style="border-bottom:1px solid rgba(0,0,0,0.1);">
                                    <th class="ps-3 text-muted small fw-semibold text-uppercase">{% translate "Produit" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Quantité" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in order.preparationorderitem_set.all %}
                                <tr class="{% if forloop.counter|divisibleby:2 %}bg-black bg-opacity-10{% endif %}">
                                    <td class="ps-3 py-2">
                                        <i class="bi bi-box-seam me-1 text-muted"></i>{{ item.product.name }}
                                    </td>
                                    <td class="py-2 fw-semibold">{{ item.quantity }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="2" class="text-muted fst-italic py-2 ps-3">{% translate "Aucun article." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-clipboard-check fs-2 d-block mb-2 opacity-50"></i>
                    {% translate "Aucun bon de préparation." %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade" id="production-orders-content" role="tabpanel" aria-labelledby="production-orders-tab">
            <div id="production-orders-container">
                {% if can_create_production_order %}
                <div class="d-flex justify-content-end align-items-center m-2">
                    <a href="{% url 'stock:production_order_create' %}" class="btn btn-light">
                        <i class="bi bi-plus-circle"></i> {% translate "Nouveau bon de confection" %}
                    </a>
                </div>
                {% endif %}
                {% for order in production_orders %}
                <div class="card mb-3 shadow-sm
                    {% if order.status == 'draft' %}border-secondary
                    {% elif order.status == 'in_production' %}border-primary
                    {% elif order.status == 'completed' %}border-success
                    {% elif order.status == 'cancelled' %}border-danger
                    {% else %}border-secondary{% endif %}"
                    style="border-left-width: 4px !important;">

                    <!-- En-tête -->
                    <div class="card-header d-flex align-items-center gap-2 flex-wrap py-2
                        {% if order.status == 'draft' %}bg-secondary bg-opacity-10
                        {% elif order.status == 'in_production' %}bg-primary bg-opacity-10
                        {% elif order.status == 'completed' %}bg-success bg-opacity-10
                        {% elif order.status == 'cancelled' %}bg-danger bg-opacity-10
                        {% else %}bg-secondary bg-opacity-10{% endif %}">

                        <a href="{% url 'stock:production_order_detail' order.pk %}" class="fw-bold text-decoration-none me-1">
                            {{ order.code }}
                        </a>

                        {% if order.status == 'draft' %}
                            <span class="badge bg-secondary">{{ order.get_status_display }}</span>
                        {% elif order.status == 'in_production' %}
                            <span class="badge bg-primary"><i class="bi bi-gear me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'completed' %}
                            <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>{{ order.get_status_display }}</span>
                        {% elif order.status == 'cancelled' %}
                            <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>{{ order.get_status_display }}</span>
                        {% endif %}

                        <span class="text-muted small ms-auto"><i class="bi bi-calendar3 me-1"></i>{{ order.created_at|date:"d/m/Y" }}</span>
                        <a href="{% url 'stock:production_order_detail' order.pk %}" class="btn btn-sm btn-outline-primary ms-1" title="{% translate 'Voir le détail' %}">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>

                    <!-- Corps -->
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="table-layout:fixed;width:100%;">
                            <colgroup>
                                <col style="width:40%">
                                <col style="width:20%">
                                <col style="width:40%">
                            </colgroup>
                            <thead>
                                <tr style="border-bottom:1px solid rgba(0,0,0,0.1);">
                                    <th class="ps-3 text-muted small fw-semibold text-uppercase">{% translate "Entrepôt" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Quantité" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Bon de prép." %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="ps-3 py-2">{{ order.warehouse.name }}</td>
                                    <td class="py-2 fw-semibold">{{ order.quantity }}</td>
                                    <td class="py-2">
                                        {% if order.preparation_order %}
                                            <a href="{% url 'stock:preparation_order_detail' order.preparation_order.pk %}">
                                                #{{ order.preparation_order.order_number }}
                                            </a>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-pencil-square fs-2 d-block mb-2 opacity-50"></i>
                    {% translate "Aucun bon de confection." %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade" id="movements-content" role="tabpanel" aria-labelledby="movements-tab">
            <div id="movements-container">
                {% if can_create_movement %}
                <div class="d-flex justify-content-end align-items-center gap-2 m-2 flex-wrap">
                    <a href="{% url 'stock:new_stock_entry' %}" class="btn btn-success btn-sm">
                        <i class="bi bi-box-arrow-in-down me-1"></i> {% translate "Nouvelle entrée" %}
                    </a>
                    <a href="{% url 'stock:new_stock_exit' %}" class="btn btn-danger btn-sm">
                        <i class="bi bi-box-arrow-up me-1"></i> {% translate "Nouvelle sortie" %}
                    </a>
                    <a href="{% url 'stock:new_stock_transfer' %}" class="btn btn-info btn-sm text-white">
                        <i class="bi bi-arrow-left-right me-1"></i> {% translate "Nouveau transfert" %}
                    </a>
                </div>
                {% endif %}

                {% for batch in batches_with_movements %}
                <div class="card batch-card batch-card-{{ batch.movement_type }} mb-3 shadow-sm">

                    <!-- En-tête de la card -->
                    <div class="card-header d-flex align-items-center gap-2 py-2 flex-wrap">
                        <a href="{% url 'stock:stock_movement_batch_detail' batch.pk %}" class="fw-bold text-decoration-none me-1">#{{ batch.pk }}</a>

                        {% if batch.movement_type == 'in' %}
                            <span class="badge bg-success"><i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Entrée" %}</span>
                        {% elif batch.movement_type == 'out' %}
                            <span class="badge bg-danger"><i class="bi bi-box-arrow-up me-1"></i>{% translate "Sortie" %}</span>
                        {% elif batch.movement_type == 'transfer' %}
                            <span class="badge bg-info text-dark"><i class="bi bi-arrow-left-right me-1"></i>{% translate "Transfert" %}</span>
                        {% else %}
                            <span class="badge bg-secondary">{{ batch.get_movement_type_display }}</span>
                        {% endif %}

                        {% if batch.movement_subtype %}
                            <span class="badge bg-white text-dark border">{{ batch.get_movement_subtype_display }}</span>
                        {% endif %}

                        <span class="small ms-1"><i class="bi bi-calendar3 me-1"></i>{{ batch.date|date:"d/m/Y H:i" }}</span>

                        {% if batch.created_by %}
                            <span class="text-muted small" title="{% translate 'Créé par' %}">
                                <i class="bi bi-person-gear me-1"></i>{{ batch.created_by.get_full_name|default:batch.created_by.username }}
                            </span>
                        {% endif %}
                        {% if batch.reason %}
                            <span class="text-muted small fst-italic text-truncate" style="max-width:260px;" title="{{ batch.reason }}">
                                <i class="bi bi-chat-left-text me-1"></i>{{ batch.reason }}
                            </span>
                        {% endif %}

                        {% if batch.movement_type != 'transfer' %}
                        {% if batch.person %}
                            <span class="badge bg-primary ms-auto"><i class="bi bi-person-fill me-1"></i>{{ batch.person.name }}</span>
                        {% elif batch.company %}
                            <span class="badge bg-secondary ms-auto"><i class="bi bi-building me-1"></i>{{ batch.company.name }}</span>
                        {% endif %}
                        {% endif %}
                    </div>

                    <!-- Corps : table des produits -->
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="table-layout:fixed;width:100%;">
                            <colgroup>
                                <col style="width:25%">
                                <col style="width:25%">
                                <col style="width:25%">
                                <col style="width:25%">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th class="ps-3 text-muted small fw-semibold text-uppercase">{% translate "Produit" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Quantité" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Source" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Destination" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for movement in batch.movements.all %}
                                <tr class="product-row-odd">
                                    <td class="ps-3 py-2">
                                        <a href="{% url 'stock:stock_movement_detail' movement.id %}" class="text-decoration-none text-reset">
                                            <i class="bi bi-box-seam me-1 text-muted"></i>{{ movement.product.name }}
                                        </a>
                                    </td>
                                    <td class="py-2">
                                        {% if movement.source_location and movement.destination_location %}
                                            <span class="text-info">{{ movement.quantity }}</span>
                                        {% elif movement.destination_location %}
                                            <span class="text-success">+{{ movement.quantity }}</span>
                                        {% else %}
                                            <span class="text-danger">-{{ movement.quantity }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="py-2 text-muted small">
                                        {% if movement.source_location %}
                                            <i class="bi bi-geo-alt me-1"></i>{{ movement.source_location.name }}
                                        {% else %}—{% endif %}
                                    </td>
                                    <td class="py-2 text-muted small">
                                        {% if movement.destination_location %}
                                            <i class="bi bi-geo-alt-fill me-1"></i>{{ movement.destination_location.name }}
                                        {% else %}—{% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-muted fst-italic py-2 ps-3">{% translate "Aucun article." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-arrow-left-right fs-2 d-block mb-2 opacity-50"></i>
                    {% translate "Aucun mouvement de stock." %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="tab-pane fade" id="inventories-content" role="tabpanel" aria-labelledby="inventories-tab">
            <div id="inventories-container">
                {% if can_create_inventory %}
                <div class="d-flex justify-content-end align-items-center m-2">
                    <a href="{% url 'stock:inventory_create' %}" class="btn btn-light">
                        <i class="bi bi-plus-circle"></i> {% translate "Nouvel inventaire" %}
                    </a>
                </div>
                {% endif %}
                {% for inventory in inventories %}
                <div class="card mb-3 shadow-sm
                    {% if inventory.status == 'validated' %}border-success
                    {% elif inventory.status == 'in_progress' %}border-primary
                    {% else %}border-secondary{% endif %}"
                    style="border-left-width: 4px !important;">

                    <!-- En-tête -->
                    <div class="card-header d-flex align-items-center gap-2 flex-wrap py-2
                        {% if inventory.status == 'validated' %}bg-success bg-opacity-10
                        {% elif inventory.status == 'in_progress' %}bg-primary bg-opacity-10
                        {% else %}bg-secondary bg-opacity-10{% endif %}">

                        <a href="{% url 'stock:inventory_detail' inventory.pk %}" class="fw-bold text-decoration-none me-1">
                            #{{ inventory.id }}
                        </a>

                        <span class="badge bg-{% if inventory.status == 'validated' %}success{% elif inventory.status == 'in_progress' %}primary{% else %}secondary{% endif %}">
                            {% if inventory.status == 'validated' %}<i class="bi bi-check-circle me-1"></i>{% elif inventory.status == 'in_progress' %}<i class="bi bi-hourglass-split me-1"></i>{% endif %}
                            {{ inventory.get_status_display }}
                        </span>

                        <span class="badge bg-light text-dark border"><i class="bi bi-geo-alt me-1"></i>{{ inventory.warehouse_location.name }}</span>
                        <span class="badge bg-light text-dark border"><i class="bi bi-building me-1"></i>{{ inventory.warehouse_location.warehouse.name }}</span>

                        <span class="text-muted small ms-auto"><i class="bi bi-calendar3 me-1"></i>{{ inventory.updated_at|date:"d/m/Y H:i" }}</span>
                        <a href="{% url 'stock:inventory_detail' inventory.pk %}" class="btn btn-sm btn-outline-primary ms-1" title="{% translate 'Voir le détail' %}">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>

                    <!-- Corps -->
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="table-layout:fixed;width:100%;">
                            <colgroup>
                                <col style="width:60%">
                                <col style="width:40%">
                            </colgroup>
                            <thead>
                                <tr style="border-bottom:1px solid rgba(0,0,0,0.1);">
                                    <th class="ps-3 text-muted small fw-semibold text-uppercase">{% translate "Responsable" %}</th>
                                    <th class="text-muted small fw-semibold text-uppercase">{% translate "Articles" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="ps-3 py-2">{{ inventory.performed_by|default:"-" }}</td>
                                    <td class="py-2 fw-semibold">{{ inventory.total_items }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="bi bi-journal-check fs-2 d-block mb-2 opacity-50"></i>
                    {% translate "Aucun inventaire enregistré." %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endblock content%}

{% block script %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // À chaque changement d'onglet, mettre à jour ?tab= dans l'URL
    document.querySelectorAll('#tablesTab button[data-bs-toggle="tab"]').forEach(function(btn) {
        btn.addEventListener('shown.bs.tab', function() {
            const tabName = btn.id.replace('-tab', '');
            history.replaceState(null, '', '?tab=' + tabName);
        });
    });

    // Activer l'onglet indiqué par ?tab= au chargement de la page
    const tab = new URLSearchParams(window.location.search).get('tab');
    if (tab) {
        const tabBtn = document.getElementById(tab + '-tab');
        if (tabBtn) {
            tabBtn.click();
            tabBtn.blur();
        }
    }
});
</script>
{% endblock script %}