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

{% block title %}Factures - Boutique{% endblock %}

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

{% block body %}
<div class="container-fluid mt-4">
    {% for type in ['success', 'error', 'warning'] %}
        {% for message in app.flashes(type) %}
            <div class="alert alert-{{ type == 'error' ? 'danger' : type }} alert-dismissible fade show" role="alert">
                <i class="fas {{ type == 'success' ? 'fa-check-circle' : (type == 'error' ? 'fa-exclamation-circle' : 'fa-exclamation-triangle') }} me-1"></i>
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <div class="row mb-4 align-items-center">
        <div class="col">
            <h1>
                <i class="fas fa-file-invoice"></i> Factures
                {% if invoices is not empty %}
                    <span class="badge bg-secondary fs-6 align-middle">{{ invoices|length }}</span>
                {% endif %}
            </h1>
        </div>
        {% if invoices is not empty %}
            <div class="col-auto">
                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteAllModal">
                    <i class="fas fa-trash-alt"></i> Supprimer toutes les factures
                </button>
            </div>
        {% endif %}
    </div>

    <div class="card">
        <div class="card-body">
            {% if invoices is empty %}
                <div class="text-center py-5">
                    <i class="fas fa-file-invoice fa-4x text-muted mb-3 d-block"></i>
                    <p class="text-muted">Aucune facture pour le moment</p>
                </div>
            {% else %}
                {# Filters #}
                <div class="row mb-3 g-2">
                    <div class="col-md-3">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" id="filterSearch" class="form-control" placeholder="Rechercher (n°, client, commande...)">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <input type="date" id="filterDateFrom" class="form-control form-control-sm" placeholder="Date début" title="Date début">
                    </div>
                    <div class="col-md-2">
                        <input type="date" id="filterDateTo" class="form-control form-control-sm" placeholder="Date fin" title="Date fin">
                    </div>
                    <div class="col-md-2">
                        <select id="filterPayment" class="form-select form-select-sm">
                            <option value="">Tous les paiements</option>
                            <option value="stripe">Carte bancaire</option>
                            <option value="paypal">PayPal</option>
                            <option value="bank_transfer">Virement</option>
                        </select>
                    </div>
                    <div class="col-md-auto">
                        <button type="button" id="btnClearFilters" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times"></i> Effacer
                        </button>
                    </div>
                    <div class="col-md-auto ms-auto">
                        <span id="filterCount" class="text-muted small align-middle"></span>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="invoicesTable">
                        <thead>
                            <tr>
                                <th class="sortable" data-sort="invoice" data-type="string" role="button">
                                    N° Facture <i class="fas fa-sort text-muted ms-1"></i>
                                </th>
                                <th class="sortable" data-sort="date" data-type="date" role="button">
                                    Date <i class="fas fa-sort text-muted ms-1"></i>
                                </th>
                                <th class="sortable" data-sort="order" data-type="string" role="button">
                                    Commande <i class="fas fa-sort text-muted ms-1"></i>
                                </th>
                                <th class="sortable" data-sort="client" data-type="string" role="button">
                                    Client <i class="fas fa-sort text-muted ms-1"></i>
                                </th>
                                <th class="sortable" data-sort="amount" data-type="number" role="button">
                                    Montant <i class="fas fa-sort text-muted ms-1"></i>
                                </th>
                                <th>Paiement</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for invoice in invoices %}
                                <tr data-invoice="{{ invoice.invoiceNumber|lower }}"
                                    data-date="{{ invoice.createdAt|date('Y-m-d') }}"
                                    data-order="{{ invoice.order.orderNumber|lower }}"
                                    data-client="{{ invoice.order.customerFullName|lower }} {{ invoice.order.customerEmail|lower }}"
                                    data-amount="{{ invoice.order.totalAmount }}"
                                    data-payment="{{ invoice.order.paymentMethod|default('') }}">
                                    <td>
                                        <strong>{{ invoice.invoiceNumber }}</strong>
                                    </td>
                                    <td data-sort-value="{{ invoice.createdAt|date('U') }}">
                                        {{ invoice.createdAt|date('d/m/Y') }}
                                    </td>
                                    <td>
                                        <a href="{{ path('admin_shop_order_detail', {siteId: site.id, orderId: invoice.order.id}) }}">
                                            {{ invoice.order.orderNumber }}
                                        </a>
                                    </td>
                                    <td>
                                        {{ invoice.order.customerFullName }}
                                        <br><small class="text-muted">{{ invoice.order.customerEmail }}</small>
                                    </td>
                                    <td data-sort-value="{{ invoice.order.totalAmount }}">
                                        <strong>{{ invoice.order.formattedTotal }}</strong>
                                    </td>
                                    <td>
                                        {% if invoice.order.paymentMethod == 'stripe' %}
                                            <span class="badge bg-primary-subtle text-primary"><i class="fas fa-credit-card me-1"></i>CB</span>
                                        {% elseif invoice.order.paymentMethod == 'paypal' %}
                                            <span class="badge bg-info-subtle text-info"><i class="fab fa-paypal me-1"></i>PayPal</span>
                                        {% elseif invoice.order.paymentMethod == 'bank_transfer' %}
                                            <span class="badge bg-secondary-subtle text-secondary"><i class="fas fa-university me-1"></i>Virement</span>
                                        {% else %}
                                            <span class="badge bg-light text-muted">{{ invoice.order.paymentMethod|default('-') }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end text-nowrap">
                                        <a href="{{ path('shop_invoice_download', {siteName: site.internalName, invoiceId: invoice.id}) }}"
                                           class="btn btn-sm btn-outline-primary" target="_blank" title="Télécharger">
                                            <i class="fas fa-download"></i>
                                        </a>
                                        <a href="{{ path('shop_invoice_print', {siteName: site.internalName, invoiceId: invoice.id}) }}"
                                           class="btn btn-sm btn-outline-secondary" target="_blank" title="Imprimer">
                                            <i class="fas fa-print"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteInvoiceModal"
                                                data-invoice-id="{{ invoice.id }}"
                                                data-invoice-number="{{ invoice.invoiceNumber }}"
                                                title="Supprimer">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# No results message (hidden by default) #}
                <div id="noResults" class="text-center py-4 d-none">
                    <i class="fas fa-filter fa-2x text-muted mb-2 d-block"></i>
                    <p class="text-muted mb-0">Aucune facture ne correspond aux filtres</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

{# Modal: Delete single invoice #}
{% if invoices is not empty %}
<div class="modal fade" id="deleteInvoiceModal" tabindex="-1" aria-labelledby="deleteInvoiceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="deleteInvoiceModalLabel">
                    <i class="fas fa-exclamation-triangle text-danger me-2"></i>Supprimer la facture
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p>Voulez-vous vraiment supprimer la facture <strong id="modalInvoiceNumber"></strong> ?</p>
                <p class="text-muted small mb-0">Le fichier PDF sera supprimé et cette action est irréversible.</p>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form id="deleteInvoiceForm" method="post" action="">
                    <input type="hidden" name="_token" value="">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{# Modal: Delete all invoices #}
<div class="modal fade" id="deleteAllModal" tabindex="-1" aria-labelledby="deleteAllModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="deleteAllModalLabel">
                    <i class="fas fa-exclamation-triangle text-danger me-2"></i>Supprimer toutes les factures
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger mb-3">
                    <i class="fas fa-exclamation-circle me-1"></i>
                    <strong>Attention :</strong> cette action est irréversible !
                </div>
                <p>Vous allez supprimer <strong>{{ invoices|length }} facture(s)</strong> ainsi que tous les fichiers PDF associés.</p>
                <p class="text-muted small mb-0">Les commandes associées ne seront pas affectées.</p>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <form method="post" action="{{ path('admin_shop_invoices_delete_all', {siteId: site.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_all_invoices') }}">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash-alt me-1"></i>Supprimer toutes les factures
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block javascripts %}
{{ parent() }}
{% if invoices is not empty %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('invoicesTable');
    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const filterSearch = document.getElementById('filterSearch');
    const filterDateFrom = document.getElementById('filterDateFrom');
    const filterDateTo = document.getElementById('filterDateTo');
    const filterPayment = document.getElementById('filterPayment');
    const btnClear = document.getElementById('btnClearFilters');
    const filterCount = document.getElementById('filterCount');
    const noResults = document.getElementById('noResults');
    const totalRows = rows.length;

    // ===== FILTERING =====
    function applyFilters() {
        const search = filterSearch.value.toLowerCase().trim();
        const dateFrom = filterDateFrom.value;
        const dateTo = filterDateTo.value;
        const payment = filterPayment.value;
        let visibleCount = 0;

        rows.forEach(function(row) {
            let visible = true;

            // Text search
            if (search) {
                const text = row.getAttribute('data-invoice') + ' '
                    + row.getAttribute('data-order') + ' '
                    + row.getAttribute('data-client');
                if (text.indexOf(search) === -1) visible = false;
            }

            // Date range filter
            if (visible && dateFrom) {
                if (row.getAttribute('data-date') < dateFrom) visible = false;
            }
            if (visible && dateTo) {
                if (row.getAttribute('data-date') > dateTo) visible = false;
            }

            // Payment filter
            if (visible && payment) {
                if (row.getAttribute('data-payment') !== payment) visible = false;
            }

            row.style.display = visible ? '' : 'none';
            if (visible) visibleCount++;
        });

        // Update counter
        if (search || dateFrom || dateTo || payment) {
            filterCount.textContent = visibleCount + ' / ' + totalRows + ' facture(s)';
        } else {
            filterCount.textContent = '';
        }

        // No results message
        noResults.classList.toggle('d-none', visibleCount > 0);
        table.style.display = visibleCount > 0 ? '' : 'none';
    }

    filterSearch.addEventListener('input', applyFilters);
    filterDateFrom.addEventListener('change', applyFilters);
    filterDateTo.addEventListener('change', applyFilters);
    filterPayment.addEventListener('change', applyFilters);

    btnClear.addEventListener('click', function() {
        filterSearch.value = '';
        filterDateFrom.value = '';
        filterDateTo.value = '';
        filterPayment.value = '';
        applyFilters();
    });

    // ===== SORTING =====
    let currentSort = { column: null, direction: 'asc' };

    table.querySelectorAll('th.sortable').forEach(function(th) {
        th.addEventListener('click', function() {
            const sortKey = th.getAttribute('data-sort');
            const sortType = th.getAttribute('data-type');

            // Toggle direction
            if (currentSort.column === sortKey) {
                currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort.column = sortKey;
                currentSort.direction = 'asc';
            }

            // Update icons
            table.querySelectorAll('th.sortable i').forEach(function(icon) {
                icon.className = 'fas fa-sort text-muted ms-1';
            });
            const icon = th.querySelector('i');
            icon.className = currentSort.direction === 'asc'
                ? 'fas fa-sort-up text-primary ms-1'
                : 'fas fa-sort-down text-primary ms-1';

            // Sort rows
            rows.sort(function(a, b) {
                let valA, valB;

                if (sortType === 'date' || sortType === 'number') {
                    // Use data-sort-value attribute for date and number types
                    const cellIndexMap = { 'invoice': 0, 'date': 1, 'order': 2, 'client': 3, 'amount': 4 };
                    const idx = cellIndexMap[sortKey];
                    valA = parseFloat(a.children[idx].getAttribute('data-sort-value') || '0');
                    valB = parseFloat(b.children[idx].getAttribute('data-sort-value') || '0');
                } else {
                    valA = a.getAttribute('data-' + sortKey) || '';
                    valB = b.getAttribute('data-' + sortKey) || '';
                }

                if (typeof valA === 'string') {
                    return currentSort.direction === 'asc'
                        ? valA.localeCompare(valB, 'fr')
                        : valB.localeCompare(valA, 'fr');
                } else {
                    return currentSort.direction === 'asc' ? valA - valB : valB - valA;
                }
            });

            rows.forEach(function(row) { tbody.appendChild(row); });
        });
    });

    // ===== DELETE SINGLE INVOICE MODAL =====
    const deleteModal = document.getElementById('deleteInvoiceModal');
    if (deleteModal) {
        deleteModal.addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const invoiceId = button.getAttribute('data-invoice-id');
            const invoiceNumber = button.getAttribute('data-invoice-number');

            document.getElementById('modalInvoiceNumber').textContent = invoiceNumber;

            const form = document.getElementById('deleteInvoiceForm');
            form.action = '{{ path("admin_shop_invoice_delete", {siteId: site.id, invoiceId: "__ID__"}) }}'.replace('__ID__', invoiceId);
            form.querySelector('input[name="_token"]').value = '{{ csrf_token("delete_invoice") }}';
        });
    }
});
</script>
{% endif %}
{% endblock %}