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

{% block title %}Articles de blog{% endblock %}

{% block breadcrumb %}Blog <i class="fas fa-chevron-right"></i> Articles{% endblock %}

{% block description %}Gérez les articles de votre blog{% endblock %}

{% block stylesheets %}
    <style>
        .post-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .post-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            transform: translateY(-2px);
        }

        .post-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .post-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;
        }

        .post-row {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .post-row:hover {
            background-color: #f8fafc !important;
        }

        .post-excerpt {
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .post-image-thumbnail {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 8px;
        }

        .action-btn {
            margin: 0 2px;
        }

        .btn-add-post {
            background: var(--primary-gradient);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-add-post:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
    </style>
{% endblock %}

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

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

        <div class="post-body">
            {% if posts|length > 0 %}
                <!-- Barre d'actions en masse -->
                <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> article(s) sélectionné(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-blog-posts-bulk-delete') }}">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead style="background-color: #f8fafc;">
                                <tr>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem; width: 40px;">
                                        <input type="checkbox" id="selectAllCheckbox" class="form-check-input" style="cursor: pointer;">
                                    </th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Image</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Titre</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Catégorie</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Introduction</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem;">Date</th>
                                    <th style="font-weight: 600; color: #475569; padding: 1rem; text-align: center;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for post in posts %}
                                    <tr class="post-row">
                                        <td style="padding: 1rem;">
                                            <input type="checkbox" name="posts[]" value="{{ post.id }}" class="form-check-input post-checkbox" style="cursor: pointer;">
                                        </td>
                                        <td style="padding: 1rem;">
                                            {% if post.image %}
                                                <img src="{{ asset('uploads/' ~ post.image) }}" alt="{{ post.title }}" class="post-image-thumbnail">
                                            {% else %}
                                                <div class="post-image-thumbnail" style="background: #e2e8f0; display: flex; align-items: center; justify-content: center;">
                                                    <i class="fas fa-image" style="color: #94a3b8;"></i>
                                                </div>
                                            {% endif %}
                                        </td>
                                        <td style="padding: 1rem;">
                                            <strong style="color: #1e293b;">{{ post.title }}</strong>
                                        </td>
                                        <td style="padding: 1rem;">
                                            {% if post.category %}
                                                <span class="badge" style="background: var(--primary-gradient); color: white; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600;">
                                                    {{ post.category.name }}
                                                </span>
                                            {% else %}
                                                <span style="color: #cbd5e1; font-size: 0.875rem;">Sans catégorie</span>
                                            {% endif %}
                                        </td>
                                        <td style="padding: 1rem;">
                                            <div class="post-excerpt" style="color: #64748b;">
                                                {{ post.introduction|length > 80 ? post.introduction|slice(0, 80) ~ '...' : post.introduction }}
                                            </div>
                                        </td>
                                        <td style="padding: 1rem;">
                                            <small style="color: #94a3b8;">
                                                <i class="far fa-calendar-alt"></i>
                                                {{ post.creationDate|date('d/m/Y') }}
                                            </small>
                                        </td>
                                        <td style="padding: 1rem; text-align: center;">
                                            <a href="{{ path('bo-blog-post-edit', {id: post.id}) }}" class="btn btn-sm btn-primary action-btn" style="background: var(--primary-gradient); border: none;">
                                                <i class="fas fa-edit"></i> Modifier
                                            </a>

                                            <form method="post" action="{{ path('bo-blog-post-delete', {id: post.id}) }}" class="delete-post-form" style="display: inline;">
                                                <button class="btn btn-sm btn-danger action-btn" type="button" onclick="showConfirmModal({
                                                    title: 'Supprimer l\'article',
                                                    message: 'Êtes-vous sûr de vouloir supprimer cet article ?',
                                                    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-newspaper" style="font-size: 4rem; color: #cbd5e1; margin-bottom: 1rem;"></i>
                    <h3 style="color: #94a3b8; font-size: 1.25rem; font-weight: 600;">Aucun article publié</h3>
                    <p style="color: #cbd5e1; margin-bottom: 1.5rem;">Commencez à créer du contenu pour votre blog</p>
                    <a href="{{ path('bo-blog-post-new') }}" class="btn btn-add-post">
                        <i class="fas fa-plus"></i> Créer mon premier article
                    </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 postCheckboxes = document.querySelectorAll('.post-checkbox');
            const bulkActionsBar = document.getElementById('bulkActionsBar');
            const selectedCount = document.getElementById('selectedCount');
            const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
            const bulkDeleteForm = document.getElementById('bulkDeleteForm');

            if (!postCheckboxes.length) return;

            function updateBulkActions() {
                const checkedCount = document.querySelectorAll('.post-checkbox:checked').length;
                selectedCount.textContent = checkedCount;

                if (checkedCount > 0) {
                    bulkActionsBar.style.display = 'block';
                    deselectAllBtn.style.display = 'inline-block';
                    selectAllBtn.style.display = 'none';
                } else {
                    bulkActionsBar.style.display = 'none';
                    deselectAllBtn.style.display = 'none';
                    selectAllBtn.style.display = 'inline-block';
                }

                const allChecked = checkedCount === postCheckboxes.length;
                const someChecked = checkedCount > 0 && checkedCount < postCheckboxes.length;
                selectAllCheckbox.checked = allChecked;
                selectAllCheckbox.indeterminate = someChecked;
            }

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

            selectAllBtn.addEventListener('click', function() {
                postCheckboxes.forEach(checkbox => {
                    checkbox.checked = true;
                });
                updateBulkActions();
            });

            deselectAllBtn.addEventListener('click', function() {
                postCheckboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });
                updateBulkActions();
            });

            postCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateBulkActions);
            });

            deleteSelectedBtn.addEventListener('click', function() {
                const checkedCount = document.querySelectorAll('.post-checkbox:checked').length;

                if (checkedCount === 0) {
                    alert('Veuillez sélectionner au moins un article à supprimer');
                    return;
                }

                const confirmMessage = checkedCount === 1
                    ? 'Êtes-vous sûr de vouloir supprimer cet article ?'
                    : `Êtes-vous sûr de vouloir supprimer ces ${checkedCount} articles ?`;

                showConfirmModal({
                    title: 'Suppression en masse',
                    message: confirmMessage,
                    actionText: 'Supprimer',
                    onConfirm: () => bulkDeleteForm.submit()
                });
            });
        });
    </script>
{% endblock %}