{% extends 'gestion/_base.html.twig' %}
{% set active = 'points-depot' %}

{% block title %}Points de dépôt{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Service d'affûtage</span>
            <h1 class="adm-page-title">Points de dépôt</h1>
            <p class="adm-page-sub">Commerces partenaires où les clients peuvent déposer leurs lames — affichés sur la page Affûtage, classés par proximité.</p>
        </div>
        <div class="adm-page-head-actions">
            <a class="adm-btn" href="{{ path('gestion_point_depot_new') }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                Nouveau point de dépôt
            </a>
        </div>
    </div>

    {% set actifs = points|filter(p => p.actif)|length %}
    {% if points is not empty %}
        <div class="adm-callout adm-callout--info" style="margin-bottom:16px;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>
            <span><strong>{{ actifs }}</strong> point{{ actifs > 1 ? 's' : '' }} visible{{ actifs > 1 ? 's' : '' }} sur le site — les clients ne voient que ceux situés à moins de 30 km de leur adresse.</span>
        </div>
    {% endif %}

    {% if points is empty %}
        <div class="adm-card">
            <div class="adm-empty">
                <p>Aucun point de dépôt — ajoutez le premier pour qu'il apparaisse sur la page Affûtage.</p>
            </div>
        </div>
    {% else %}
        {# Sous 768 px, chaque ligne devient une carte : nom en tête, adresse et
           état en libellé/valeur, actions en pied (cf. §18 du DS). #}
        <div class="adm-table-wrap adm-table-wrap--cards">
            <table class="adm-table adm-table--cards">
                <thead>
                    <tr><th>Nom</th><th>Adresse</th><th>Ville</th><th>Coordonnées</th><th>État</th><th></th></tr>
                </thead>
                <tbody>
                    {% for point in points %}
                        <tr>
                            <td class="adm-cell-head" data-label="Nom"><strong>{{ point.nom }}</strong></td>
                            <td style="max-width:320px;" data-label="Adresse">{{ point.adresse }}</td>
                            <td data-label="Ville">{{ point.ville ?: '—' }}{% if point.codePostal %} <span class="adm-mono" style="font-size:0.78rem;">({{ point.codePostal }})</span>{% endif %}</td>
                            <td class="adm-mono" style="font-size:0.76rem;" data-label="Coordonnées">{{ point.latitude|number_format(5, '.', '') }}, {{ point.longitude|number_format(5, '.', '') }}</td>
                            <td data-label="État">
                                <span class="adm-badge adm-badge--{{ point.actif ? 'green' : 'neutral' }}">{{ point.actif ? 'Visible' : 'Masqué' }}</span>
                            </td>
                            <td class="adm-cell-actions">
                                <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ path('gestion_point_depot_edit', {id: point.id}) }}">Éditer</a>
                                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-toggle-point="{{ point.id }}">
                                    {{ point.actif ? 'Masquer' : 'Afficher' }}
                                </button>
                                <button type="button" class="adm-btn adm-btn--danger adm-btn--sm" data-delete-point="{{ point.id }}">Supprimer</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    document.addEventListener('click', function (e) {
        var toggle = e.target.closest('[data-toggle-point]');
        if (toggle) {
            admFetch('/gestion/api/points-depot/' + toggle.getAttribute('data-toggle-point') + '/toggle', { body: {} })
                .then(function (data) {
                    showNotification({ success: true, title: data.actif ? 'Point affiché sur le site' : 'Point masqué' });
                    window.location.reload();
                });
            return;
        }
        var del = e.target.closest('[data-delete-point]');
        if (del) {
            admConfirm({
                title: 'Supprimer le point de dépôt',
                message: 'Il disparaîtra définitivement de la page Affûtage.',
                okLabel: 'Supprimer',
                danger: true
            }).then(function (ok) {
                if (!ok) return;
                admFetch('/gestion/api/points-depot/' + del.getAttribute('data-delete-point') + '/delete', { body: {} })
                    .then(function () {
                        showNotification({ success: true, title: 'Point de dépôt supprimé' });
                        window.location.reload();
                    });
            });
        }
    });
})();
</script>
{% endblock %}