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

{% block head %}
<style>
    .table thead.sticky-top th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: white;
        box-shadow: inset 0 1px 0 #dee2e6, inset 0 -1px 0 #dee2e6;
    }
    .sortable {
        position: relative;
        padding-right: 30px !important;
        vertical-align: bottom;
    }
    .sortable:hover {
        background-color: #f8f9fa;
    }
    .sort-active {
        font-weight: bold;
    }
    .sort-arrows {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .sort-arrow {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }
    .sort-arrow.up {
        border-bottom: 6px solid #aaa;
        margin-bottom: 1px;
    }
    .sort-arrow.down {
        border-top: 6px solid #aaa;
        margin-top: 1px;
    }
    .sort-arrow.up.active {
        border-bottom-color: #000;
    }
    .sort-arrow.down.active {
        border-top-color: #000;
    }
    .products-wrapper {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 300px);
    }
    .products-table-scroll {
        flex: 1;
        overflow-y: auto;
    }
    .pagination-container {
        padding: 10px 0;
        background: white;
        border-top: 2px solid #dee2e6;
        margin-top: 0;
    }
    #map {
        width: 100%;
        height: calc(100vh - 300px);
        margin-top: 50px;
    }
</style>
{% endblock %}

{% block content %}
    <p></p>
    <div class="position-relative">
        <!-- Layout selection buttons -->
        <div class="position-absolute top-0 end-0 mt-2" style="z-index: 10;">
            <div class="btn-group" role="group" aria-label="{% translate 'Sélection de la vue' %}">
                <button id="layout-btn-table" class="btn btn-light" type="button" title="{% translate 'Vue tableau uniquement' %}">
                    <i class="bi bi-table"></i>
                </button>
                <button id="layout-btn-both" class="btn btn-light text-primary" type="button" title="{% translate 'Vue partagée' %}">
                    <i class="bi bi-layout-split"></i>
                </button>
                <button id="layout-btn-map" class="btn btn-light" type="button" title="{% translate 'Vue carte uniquement' %}">
                    <i class="bi bi-globe-europe-africa"></i>
                </button>
            </div>
        </div>

    <div class="row mt-2" style="height: calc(100vh - 100px);">
        <div class="col-md-6" id="col-left" style="max-height: calc(100vh - 100px); overflow: auto;">
            <ul class="nav nav-tabs" id="tablesTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="warehouses-table-tab" data-bs-toggle="tab" data-bs-target="#warehouses-table-content" type="button" role="tab" aria-controls="warehouses-table" aria-selected="true" style="color: black;"><i class="bi bi-buildings"></i> {% translate "Entrepôts" %}</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="warehouse-locations-table-tab" data-bs-toggle="tab" data-bs-target="#warehouse-locations-table-content" type="button" role="tab" aria-controls="warehouse-locations-table" aria-selected="false" style="color: black;"><i class="bi bi-geo-alt"></i> {% translate "Emplacements" %}</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="products-table-tab" data-bs-toggle="tab" data-bs-target="#products-table-content" type="button" role="tab" aria-controls="products-table" aria-selected="false" style="color: black;"><i class="bi bi-box-seam"></i> {% translate "Produits" %}</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="serialized-items-table-tab" data-bs-toggle="tab" data-bs-target="#serialized-items-table-content" type="button" role="tab" aria-controls="serialized-items-table" aria-selected="false" style="color: black;"><i class="bi bi-upc-scan"></i> {% translate "Articles tracés" %}</button>
                </li>
                {# Onglet Conception masqué (modèle conservé, non supprimé) #}
            </ul>
            <div class="tab-content my-2" id="tablesTabContent">
                <div class="tab-pane fade show active" id="warehouses-table-content" role="tabpanel" aria-labelledby="warehouses-table-tab">
                    <!-- Spinner -->
                    <div id="warehouses-spinner" class="table-spinner">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{% translate "Chargement..." %}</span>
                        </div>
                    </div>
                    <div id="warehouses-table-container" style="display: none;">
                        <table id="warehouses-table" class="table"
                            data-height="500"
                            data-pagination="true"
                            data-page-size="25"
                            data-click-to-select="true" >
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade show" id="warehouse-locations-table-content" role="tabpanel" aria-labelledby="warehouse-locations-table-tab">
                    <div id="warehouse-locations-table-container">
                        <table id="warehouse-locations-table" class="table"
                            data-height="500"
                            data-pagination="true"
                            data-page-size="25"
                            data-click-to-select="true" >
                            <thead>
                                <tr>
                                    <th data-field="actions" data-formatter="actionsFormatter" data-width="100"></th>
                                    <th data-field="warehouse">{% translate "Entrepôt" %}</th>
                                    <th data-field="name">{% translate "Nom" %}</th>
                                    <th data-field="stock_manager">{% translate "Gestionnaire" %}</th>
                                    {% if can_administer_any %}<th>{% translate "Actions" %}</th>{% endif %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for wl in warehouseLocations %}
                                    <tr>
                                        <td></td>
                                        <td>
                                            <a href="{% url 'stock:warehouse_detail' wl.warehouse.id %}">
                                                {{ wl.warehouse }}
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{% url 'stock:warehouse_location_detail' wl.id %}">
                                                {{ wl.name }}
                                            </a>
                                        </td>
                                        <td>{{ wl.warehouse.manager }}</td>
                                        {% if can_administer_any %}
                                        <td>
                                            <a href="{% url 'stock:warehouse_location_edit' wl.id %}" class="btn btn-sm btn-outline-secondary">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#deleteLocationModal"
                                                    data-location-id="{{ wl.id }}"
                                                    data-location-name="{{ wl.name }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade show" id="products-table-content" role="tabpanel" aria-labelledby="products-table-tab">
                    <!-- Bouton ajout produit -->
                    {% if can_manage_products %}
                    <div class="d-flex justify-content-end mt-2 mb-1">
                        <a href="{% url 'stock:product_create' %}" class="btn btn-sm btn-primary">
                            <i class="bi bi-plus-circle"></i> {% translate "Nouveau produit" %}
                        </a>
                    </div>
                    {% endif %}
                    <!-- Filtres et recherche -->
                    <div class="card mt-2 mb-2 border-0">
                        <div class="card-body py-2">
                            <div class="row g-2 align-items-center">
                                <div class="col-md-5">
                                    <input type="text" 
                                           id="products-search" 
                                           class="form-control form-control-sm" 
                                           placeholder="{% translate 'Rechercher par nom, code ou SKU...' %}">
                                </div>
                                <div class="col-md-4">
                                    <select id="products-category-filter" class="form-select form-select-sm">
                                        <option value="">{% translate "Toutes les catégories" %}</option>
                                        {% for category in categories %}
                                            <option value="{{ category.id }}">{{ category.name_fr }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check mb-0">
                                        <input class="form-check-input" type="checkbox" id="products-show-inactive">
                                        <label class="form-check-label small" for="products-show-inactive">
                                            {% translate "Afficher les inactifs" %}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Spinner -->
                    <div id="products-spinner" class="table-spinner">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{% translate "Chargement..." %}</span>
                        </div>
                    </div>
                    <div id="products-table-container" style="display: none;">
                        <div class="products-wrapper">
                            <div class="products-table-scroll">
                                <table id="products-table" class="table table-hover table-bordered mb-0">
                                    <thead class="sticky-top">
                                        <tr>
                                            <th class="sortable" data-sort="code" style="cursor: pointer;">
                                                {% translate "Code" %}
                                                <span class="sort-arrows">
                                                    <span class="sort-arrow up"></span>
                                                    <span class="sort-arrow down"></span>
                                                </span>
                                            </th>
                                            <th class="sortable" data-sort="name" style="cursor: pointer; min-width: 200px;">
                                                {% translate "Nom" %}
                                                <span class="sort-arrows">
                                                    <span class="sort-arrow up"></span>
                                                    <span class="sort-arrow down"></span>
                                                </span>
                                            </th>
                                            <th>SKU</th>
                                            <th>{% translate "Catégorie" %}</th>
                                            <th class="text-end">{% translate "Stock total" %}</th>
                                            <th class="text-end">{% translate "Seuil" %}</th>
                                            <th class="text-end">{% translate "Prix" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="products-table-body">
                                        <!-- Les lignes seront insérées ici par JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="pagination-container">
                                <nav aria-label="Products pagination">
                                    <ul class="pagination pagination-sm justify-content-center mb-0" id="products-pagination">
                                        <!-- La pagination sera générée ici -->
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                {# Contenu onglet Conception masqué - modèle conservé #}
                {# <div class="tab-pane fade show" id="designs-table-content" ...> ... </div> #}

                <!-- Onglet Articles tracés -->
                <div class="tab-pane fade" id="serialized-items-table-content" role="tabpanel" aria-labelledby="serialized-items-table-tab">
                    {% if can_manage_products %}
                    <div class="d-flex justify-content-end mt-2 mb-1">
                        <a href="{% url 'stock:serialized_item_create' %}" class="btn btn-sm btn-primary">
                            <i class="bi bi-plus-circle"></i> {% translate "Nouvel article" %}
                        </a>
                    </div>
                    {% endif %}

                    <form method="get" action="{% url 'stock:warehouses' %}" class="card mb-2 border-0 bg-light">
                        <input type="hidden" name="tab" value="serialized-items-table">
                        <div class="card-body py-2 row g-2 align-items-end">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold small mb-1">{% translate "Recherche" %}</label>
                                <input type="text" name="si_q" value="{{ si_query }}" class="form-control form-control-sm"
                                       placeholder="{% translate 'Numéro de série, nom ou code produit…' %}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold small mb-1">{% translate "Produit" %}</label>
                                <select name="si_product" class="form-select form-select-sm">
                                    <option value="">— {% translate "Tous" %} —</option>
                                    {% for p in serialized_products %}
                                    <option value="{{ p.pk }}" {% if si_product_id == p.pk|stringformat:"s" %}selected{% endif %}>{{ p.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-semibold small mb-1">{% translate "Statut" %}</label>
                                <select name="si_status" class="form-select form-select-sm">
                                    <option value="">— {% translate "Tous" %} —</option>
                                    {% for val, label in si_status_choices %}
                                    <option value="{{ val }}" {% if si_status == val %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-auto">
                                <button type="submit" class="btn btn-sm btn-primary">
                                    <i class="bi bi-search"></i> {% translate "Filtrer" %}
                                </button>
                                <a href="{% url 'stock:warehouses' %}?tab=serialized-items-table" class="btn btn-sm btn-outline-secondary ms-1">
                                    <i class="bi bi-x-circle"></i> {% translate "Réinitialiser" %}
                                </a>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-bordered align-middle mb-0">
                            <thead class="table-primary">
                                <tr>
                                    <th>{% translate "Numéro de série" %}</th>
                                    <th>{% translate "Produit" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th>{% translate "Détenteur actuel" %}</th>
                                    <th>{% translate "Emplacement" %}</th>
                                    <th>{% translate "Enregistré le" %}</th>
                                    <th class="text-end"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in serialized_items %}
                                <tr>
                                    <td class="font-monospace fw-bold">
                                        <a href="{% url 'stock:serialized_item_detail' item.pk %}">{{ item.serial_number }}</a>
                                    </td>
                                    <td>
                                        <a href="{% url 'stock:product_detail' item.product.pk %}">{{ item.product.name }}</a>
                                        <small class="text-muted d-block">{{ item.product.code }}</small>
                                    </td>
                                    <td>
                                        {% if item.status == 'available' %}
                                            <span class="badge bg-success">{{ item.get_status_display }}</span>
                                        {% elif item.status == 'assigned' %}
                                            <span class="badge bg-primary">{{ item.get_status_display }}</span>
                                        {% elif item.status == 'lost' %}
                                            <span class="badge bg-danger">{{ item.get_status_display }}</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{{ item.get_status_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ item.current_holder.name|default:"—" }}</td>
                                    <td>
                                        {% if item.current_location %}
                                            {{ item.current_location.name }}
                                            <small class="text-muted d-block">{{ item.current_location.warehouse.name }}</small>
                                        {% else %}—{% endif %}
                                    </td>
                                    <td>{{ item.created_at|date:"d/m/Y" }}</td>
                                    <td class="text-end">
                                        <a href="{% url 'stock:serialized_item_detail' item.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        {% translate "Aucun article trouvé." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <p class="text-muted small mt-2">{{ serialized_items|length }} {% translate "article(s)" %}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6" id="col-right">
            <div id="map">
            </div>
        </div>
    </div>
    </div>
{% endblock content%}

{% if can_administer_any %}
<!-- Modal de confirmation de suppression d'emplacement -->
<div class="modal fade" id="deleteLocationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger">
                    <i class="bi bi-exclamation-triangle"></i>
                    {% translate "Confirmer la suppression" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {% translate "Êtes-vous sûr de vouloir supprimer l'emplacement" %}
                <strong id="deleteLocationName"></strong> ?
                {% translate "Cette action est irréversible." %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {% translate "Annuler" %}
                </button>
                <form id="deleteLocationForm" method="post" action="">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash"></i> {% translate "Supprimer" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}


{% block script %}
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.min.js"></script> -->
    <script>
        const warehousesgeojsonUrl = "{% url 'stock:warehouses_geojson' %}";
        const warehousesUrl = "{% url 'stock:warehouses' %}";
        const productsApiUrl = "{% url 'stock:products_api' %}";

        // Synchroniser l'URL avec l'onglet actif
        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('-table-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 + '-table-tab');
                if (tabBtn) {
                    tabBtn.click();
                    tabBtn.blur();
                }
            }

            {% if can_administer_any %}
            // Modal suppression emplacement
            const deleteLocationModal = document.getElementById('deleteLocationModal');
            if (deleteLocationModal) {
                deleteLocationModal.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;
                    const locationId = btn.getAttribute('data-location-id');
                    const locationName = btn.getAttribute('data-location-name');
                    document.getElementById('deleteLocationName').textContent = locationName;
                    document.getElementById('deleteLocationForm').action = '/stock/warehouse-locations/' + locationId + '/delete/';
                });
            }
            {% endif %}
        });
    </script>
    <script src="{% url 'javascript-catalog' %}"></script>
    <script src="{% static 'stock/warehouses_index.js' %}"></script>
{% endblock script %}