{% extends 'admin/base.html.twig' %}

{% block title %}Galeries{% endblock %}

{% block breadcrumb %}Galeries{% endblock %}

{% block description %}Gérez vos galeries d'images{% endblock %}

{% block stylesheets %}
    <style>
        .gallery-card { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 20px; }
        .gallery-header { padding: 1.5rem; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
        .gallery-body { padding: 1.5rem; }
        .badge-count { background: var(--primary-gradient); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; }
        .gallery-row:hover { background-color: #f8fafc !important; }
        .btn-add-gallery { background: var(--primary-gradient); border: none; color: white; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; }
    </style>
{% endblock %}

{% block body %}
    {% for label, messages in app.flashes %}
        <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show">
            {% for message in messages %}{{ message }}{% endfor %}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    <div class="gallery-card">
        <div class="gallery-header">
            <div>
                <h2 class="mb-0" style="font-size: 1.5rem; font-weight: 700; color: #1e293b;">
                    <i class="fas fa-images" style="color: var(--colorTheme);"></i> Galeries d'images
                </h2>
                <p class="mb-0 mt-1" style="color: #64748b; font-size: 0.875rem;">Créez et gérez vos galeries photos</p>
            </div>
            <div class="d-flex align-items-center gap-3">
                {% if galleries|length > 0 %}<span class="badge-count">{{ galleries|length }}</span>{% endif %}
                <a href="{{ path('bo-gallery-new') }}" class="btn btn-add-gallery"><i class="fas fa-plus"></i> Nouvelle galerie</a>
            </div>
        </div>

        <div class="gallery-body">
            {% if galleries|length > 0 %}
                <div class="mb-3 d-flex justify-content-between align-items-center">
                    <div>
                        <button type="button" id="selectAll" class="btn btn-sm btn-outline-secondary"><i class="fas fa-check-square"></i> Tout sélectionner</button>
                        <button type="button" id="deselectAll" class="btn btn-sm btn-outline-secondary" style="display: none;"><i class="far fa-square"></i> Tout désélectionner</button>
                    </div>
                    <div id="bulkActionsBar" style="display: none;">
                        <span class="me-2" style="color: #64748b;"><strong id="selectedCount">0</strong> galerie(s) sélectionnée(s)</span>
                        <button type="button" id="deleteSelectedBtn" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> Supprimer la sélection</button>
                    </div>
                </div>

                <form id="bulkDeleteForm" method="post" action="{{ path('bo-galleries-bulk-delete') }}">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead style="background-color: #f8fafc;">
                                <tr>
                                    <th style="padding: 1rem; width: 40px;"><input type="checkbox" id="selectAllCheckbox" class="form-check-input" style="cursor: pointer;"></th>
                                    <th style="padding: 1rem;">Nom</th>
                                    <th style="padding: 1rem;">Description</th>
                                    <th style="padding: 1rem;">Images</th>
                                    <th style="padding: 1rem;">Date</th>
                                    <th style="padding: 1rem; text-align: center;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for gallery in galleries %}
                                    <tr class="gallery-row">
                                        <td style="padding: 1rem;"><input type="checkbox" name="galleries[]" value="{{ gallery.id }}" class="form-check-input gallery-checkbox" style="cursor: pointer;"></td>
                                        <td style="padding: 1rem;"><strong style="color: #1e293b;">{{ gallery.name }}</strong></td>
                                        <td style="padding: 1rem;"><div style="color: #64748b;">{{ gallery.description|length > 50 ? gallery.description|slice(0, 50) ~ '...' : gallery.description }}</div></td>
                                        <td style="padding: 1rem;"><span class="badge bg-primary">{{ gallery.images|length }} images</span></td>
                                        <td style="padding: 1rem;"><small style="color: #94a3b8;"><i class="far fa-calendar-alt"></i> {{ gallery.createdAt|date('d/m/Y') }}</small></td>
                                        <td style="padding: 1rem; text-align: center;">
                                            <a href="{{ path('bo-gallery-edit', {id: gallery.id}) }}" class="btn btn-sm btn-primary" style="background: var(--primary-gradient); border: none; margin: 0 2px;"><i class="fas fa-edit"></i> Modifier</a>
                                            <form method="post" action="{{ path('bo-gallery-delete', {id: gallery.id}) }}" style="display: inline;">
                                                <button class="btn btn-sm btn-danger" type="button" style="margin: 0 2px;" onclick="showConfirmModal({
                                                    title: 'Supprimer la galerie',
                                                    message: 'Êtes-vous sûr de vouloir supprimer cette galerie ?',
                                                    actionText: 'Supprimer',
                                                    onConfirm: () => this.closest('form').submit()
                                                })"><i class="fas fa-trash"></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-images" style="font-size: 4rem; color: #cbd5e1; margin-bottom: 1rem;"></i>
                    <h3 style="color: #94a3b8; font-size: 1.25rem; font-weight: 600;">Aucune galerie</h3>
                    <p style="color: #cbd5e1; margin-bottom: 1.5rem;">Créez votre première galerie d'images</p>
                    <a href="{{ path('bo-gallery-new') }}" class="btn btn-add-gallery"><i class="fas fa-plus"></i> Créer ma première galerie</a>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            const selectAllBtn = document.getElementById('selectAll');
            const deselectAllBtn = document.getElementById('deselectAll');
            const checkboxes = document.querySelectorAll('.gallery-checkbox');
            const bulkActionsBar = document.getElementById('bulkActionsBar');
            const selectedCount = document.getElementById('selectedCount');
            const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
            const bulkDeleteForm = document.getElementById('bulkDeleteForm');

            if (!checkboxes.length) return;

            function updateBulkActions() {
                const count = document.querySelectorAll('.gallery-checkbox:checked').length;
                selectedCount.textContent = count;
                bulkActionsBar.style.display = count > 0 ? 'block' : 'none';
                deselectAllBtn.style.display = count > 0 ? 'inline-block' : 'none';
                selectAllBtn.style.display = count > 0 ? 'none' : 'inline-block';
                selectAllCheckbox.checked = count === checkboxes.length;
                selectAllCheckbox.indeterminate = count > 0 && count < checkboxes.length;
            }

            selectAllCheckbox.addEventListener('change', function() {
                checkboxes.forEach(cb => cb.checked = this.checked);
                updateBulkActions();
            });

            selectAllBtn.addEventListener('click', () => { checkboxes.forEach(cb => cb.checked = true); updateBulkActions(); });
            deselectAllBtn.addEventListener('click', () => { checkboxes.forEach(cb => cb.checked = false); updateBulkActions(); });
            checkboxes.forEach(cb => cb.addEventListener('change', updateBulkActions));

            deleteSelectedBtn.addEventListener('click', function() {
                const count = document.querySelectorAll('.gallery-checkbox:checked').length;
                if (count === 0) { alert('Sélectionnez au moins une galerie'); return; }

                const message = count === 1 ? 'Êtes-vous sûr de vouloir supprimer cette galerie ?' : `Êtes-vous sûr de vouloir supprimer ces ${count} galeries ?`;
                showConfirmModal({
                    title: 'Suppression en masse',
                    message: message,
                    actionText: 'Supprimer',
                    onConfirm: () => bulkDeleteForm.submit()
                });
            });
        });
    </script>
{% endblock %}