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

{% set documentStatusMap = {
    'en-attente': {'label':'En attente','class':'alert-en-attente'},
    'accepte': {'label':'Accepte','class':'alert-accepte'},
    'a-expedier': {'label':'A expedier','class':'alert-a-expedier'},
    'expedie': {'label':'Expedie','class':'alert-expedie'},
    'echange-recu': {'label':'Echange recu','class':'alert-echange-recu'},
    'livre': {'label':'Livre','class':'alert-livre'},
    'paye': {'label':'Paye','class':'alert-paye'},
    'non-paye': {'label':'Non paye','class':'alert-non-paye'},
    'partiellement-paye': {'label':'Partiellement paye','class':'alert-partiellement-paye'},
    'annule': {'label':'Annule','class':'alert-annule'},
    'retour-en-cours': {'label':'Retour en cours','class':'alert-retour-en-cours'},
    'retourne': {'label':'Retourne','class':'alert-retourne'},
    'brouillon': {'label':'Brouillon','class':'alert-en-attente'}
} %}

{% set paymentLineStatusMap = {
    'validated': {'label':'Paye','class':'bg-success'},
    'updated': {'label':'A valider','class':'bg-primary'},
    'not_found': {'label':'Introuvable','class':'bg-secondary text-dark'},
    'amount_mismatch': {'label':'Montant different','class':'bg-warning text-dark'},
    'invalid_status': {'label':'Statut invalide','class':'bg-danger'},
    'delivery_mismatch': {'label':'Societe differente','class':'bg-dark'},
    'already_paid': {'label':'Deja paye','class':'bg-info text-dark'}
} %}

{% set statCards = [
    {'label':'Lignes', 'value': lineStats.lines, 'icon':'fa-list-ol', 'variant':''},
    {'label':'A valider', 'value': lineStats.updated, 'icon':'fa-check-circle', 'variant':'is-success'},
    {'label':'Paiements valides', 'value': lineStats.validated, 'icon':'fa-check-double', 'variant':'is-success'},
    {'label':'Numeros introuvables', 'value': lineStats.not_found, 'icon':'fa-search', 'variant':'is-muted'},
    {'label':'Montants differents', 'value': lineStats.amount_mismatch, 'icon':'fa-exclamation-triangle', 'variant':'is-warning'},
    {'label':'Statuts invalides', 'value': lineStats.invalid_status, 'icon':'fa-ban', 'variant':'is-danger'},
    {'label':'Societes differentes', 'value': lineStats.delivery_mismatch, 'icon':'fa-truck', 'variant':'is-danger'},
    {'label':'Deja payes', 'value': lineStats.already_paid, 'icon':'fa-money-check-dollar', 'variant':'is-info'}
] %}

{% block subheader %}
    <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
        <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
            <span class="crm-badge me-2"><i class="fa fa-receipt"></i></span>
            <div>
                <h3 class="m-subheader__title m-0">Recapitulatif paiement livraison</h3>
                <small class="text-muted">{{ payment.delivery ? payment.delivery.name : '-' }} - {{ payment.documentDate ? payment.documentDate|date('d/m/Y') : '-' }}</small>
                <div class="mt-1">
                    {% if payment.status == 'validated' %}
                        <span class="badge bg-success">Paiement valide</span>
                        {% if payment.validatedAt %}
                            <small class="text-muted ms-2">Valide le {{ payment.validatedAt|date('d/m/Y H:i') }}</small>
                        {% endif %}
                    {% else %}
                        <span class="badge bg-warning text-dark">En attente de validation</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <form method="post" action="{{ path('delivery_payment_refresh', {id: payment.id}) }}" class="m-0">
                <input type="hidden" name="_token" value="{{ csrf_token('refresh_delivery_payment_' ~ payment.id) }}">
                <button type="submit" class="btn btn-light border btn-sm" {% if payment.status == 'validated' %}disabled{% endif %}>
                    <i class="fa fa-rotate-right me-1"></i> Mettre a jour
                </button>
            </form>
            <form method="post" action="{{ path('delivery_payment_validate', {id: payment.id}) }}" class="m-0 js-validate-delivery-payment-form">
                <input type="hidden" name="_token" value="{{ csrf_token('validate_delivery_payment_' ~ payment.id) }}">
                <button type="submit" class="btn btn-dark btn-sm" {% if payment.status == 'validated' or lineStats.updated < 1 %}disabled{% endif %}>
                    <i class="fa fa-check me-1"></i> Valider
                </button>
            </form>
            <a href="{{ path('delivery_payment_index') }}" class="btn btn-light border btn-sm">
                <i class="fa fa-arrow-left me-1"></i> Retour a la liste
            </a>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
    <div class="contentMargin">
        <style>
            .payment-kpi-card {
                background: #fff;
                border: 1px solid #e8edf4;
                border-radius: 16px;
                box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
                padding: 1rem 1.1rem;
                height: 100%;
            }
            .payment-kpi-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: .75rem;
                margin-bottom: .55rem;
            }
            .payment-kpi-icon {
                width: 2.2rem;
                height: 2.2rem;
                border-radius: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: #f5f7fb;
                color: #4b5563;
            }
            .payment-kpi-card.is-success .payment-kpi-icon { background: #eaf8ef; color: #198754; }
            .payment-kpi-card.is-muted .payment-kpi-icon { background: #f1f3f5; color: #6c757d; }
            .payment-kpi-card.is-warning .payment-kpi-icon { background: #fff4de; color: #d97706; }
            .payment-kpi-card.is-danger .payment-kpi-icon { background: #fdecec; color: #dc3545; }
            .payment-kpi-card.is-info .payment-kpi-icon { background: #e7f5ff; color: #0d6efd; }
            .payment-kpi-label {
                display: block;
                color: #6b7280;
                font-size: .82rem;
                font-weight: 600;
                margin-bottom: .2rem;
            }
            .payment-kpi-value {
                font-size: 1.7rem;
                line-height: 1;
                font-weight: 800;
                color: #111827;
            }
            .payment-doc-link {
                display: inline-flex;
                align-items: center;
                gap: .45rem;
                font-weight: 700;
            }
            .payment-doc-status {
                margin-top: .4rem;
            }
            .payment-doc-status .badge {
                font-size: .72rem;
                font-weight: 700;
                border-radius: 999px;
                padding: .35rem .6rem;
            }
            #deliveryPaymentLinesTable th,
            #deliveryPaymentLinesTable td {
                vertical-align: middle;
            }
            .payment-status-filters {
                display: flex;
                flex-wrap: wrap;
                gap: .55rem;
                justify-content: flex-end;
            }
            .payment-status-filter-option .btn {
                border-radius: 999px;
                padding: .4rem .9rem;
                font-size: .8rem;
                font-weight: 700;
                border-width: 1px;
                box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
            }
            .payment-status-filter-option .btn i {
                font-size: .72rem;
            }
            .payment-status-filter-all {
                border-color: #d6deea;
                color: #475569;
                background: #fff;
            }
            .payment-status-filter-validated {
                border-color: #b7e4c7;
                color: #166534;
                background: #fff;
            }
            .payment-status-filter-updated {
                border-color: #bfdbfe;
                color: #1d4ed8;
                background: #fff;
            }
            .payment-status-filter-not-found {
                border-color: #d1d5db;
                color: #4b5563;
                background: #fff;
            }
            .payment-status-filter-amount-mismatch {
                border-color: #fcd34d;
                color: #92400e;
                background: #fff;
            }
            .payment-status-filter-invalid-status {
                border-color: #fca5a5;
                color: #991b1b;
                background: #fff;
            }
            .payment-status-filter-delivery-mismatch {
                border-color: #cbd5e1;
                color: #111827;
                background: #fff;
            }
            .payment-status-filter-already-paid {
                border-color: #a5f3fc;
                color: #155e75;
                background: #fff;
            }
            .btn-check:checked + .btn.payment-status-filter-all {
                background: #e2e8f0;
                border-color: #94a3b8;
                color: #0f172a;
            }
            .btn-check:checked + .btn.payment-status-filter-validated {
                background: #dcfce7;
                border-color: #86efac;
                color: #166534;
            }
            .btn-check:checked + .btn.payment-status-filter-updated {
                background: #dbeafe;
                border-color: #93c5fd;
                color: #1d4ed8;
            }
            .btn-check:checked + .btn.payment-status-filter-not-found {
                background: #f3f4f6;
                border-color: #d1d5db;
                color: #374151;
            }
            .btn-check:checked + .btn.payment-status-filter-amount-mismatch {
                background: #fef3c7;
                border-color: #fbbf24;
                color: #92400e;
            }
            .btn-check:checked + .btn.payment-status-filter-invalid-status {
                background: #fee2e2;
                border-color: #fca5a5;
                color: #991b1b;
            }
            .btn-check:checked + .btn.payment-status-filter-delivery-mismatch {
                background: #e5e7eb;
                border-color: #9ca3af;
                color: #111827;
            }
            .btn-check:checked + .btn.payment-status-filter-already-paid {
                background: #cffafe;
                border-color: #67e8f9;
                color: #155e75;
            }
        </style>

        <div class="row g-3 mb-4">
            {% for card in statCards %}
                <div class="col-md-6 col-xl-3">
                    <div class="payment-kpi-card {{ card.variant }}">
                        <div class="payment-kpi-top">
                            <div>
                                <span class="payment-kpi-label">{{ card.label }}</span>
                                <div class="payment-kpi-value">{{ card.value }}</div>
                            </div>
                            <span class="payment-kpi-icon"><i class="fa {{ card.icon }}"></i></span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="m-portlet m-portlet--mobile p-3 mb-4">
            <div class="row g-3">
                <div class="col-md-3"><strong>Societe :</strong> {{ payment.delivery ? payment.delivery.name : '-' }}</div>
                <div class="col-md-3"><strong>Date document :</strong> {{ payment.documentDate ? payment.documentDate|date('d/m/Y') : '-' }}</div>
                <div class="col-md-3"><strong>Montant total :</strong> {{ payment.totalAmount|number_format(3, '.', ' ') }} TND</div>
                <div class="col-md-3"><strong>Fichier :</strong> {{ payment.sourceFilename ?: '-' }}</div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-12">
                <div class="card shadow-sm fade-in">
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="form-label fw-semibold mb-2 text-end">Filtrer par statut</div>
                            <div class="payment-status-filters">
                                <div class="payment-status-filter-option">
                                    <input type="checkbox" id="deliveryPaymentStatusFilter_all" class="btn-check js-payment-status-all-local" checked>
                                    <label for="deliveryPaymentStatusFilter_all" class="btn btn-outline-secondary payment-status-filter-all">
                                        <i class="fa fa-layer-group me-1"></i>Tous
                                    </label>
                                </div>
                                {% for statusValue, statusMeta in paymentLineStatusMap %}
                                    <div class="payment-status-filter-option">
                                        <input type="checkbox" id="deliveryPaymentStatusFilter_{{ statusValue }}" class="btn-check js-payment-status-filter-local" value="{{ statusValue }}">
                                        <label for="deliveryPaymentStatusFilter_{{ statusValue }}" class="btn btn-outline-secondary payment-status-filter-{{ statusValue|replace({'_': '-'}) }}">
                                            {{ statusMeta.label }}
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table id="deliveryPaymentLinesTable" class="table table-striped table-hover table-bordered w-100">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width:36px;">
                                            <input type="checkbox" id="checkAllPaymentLines" class="form-check-input" title="Selectionner toutes les lignes visibles">
                                        </th>
                                        <th class="text-center">No suivi</th>
                                        <th class="text-center">Montant import</th>
                                        <th class="text-center">Date paiement</th>
                                        <th>Document</th>
                                        <th class="text-center">Montant document</th>
                                        <th class="text-center">Ecart</th>
                                        <th class="text-center">Statut</th>
                                        <th>Note</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for line in payment.lines %}
                                        {% set doc = line.matchedDocument %}
                                        {% set docStatus = doc ? documentStatusMap[doc.status]|default({'label': doc.status|default('-'), 'class': 'bg-secondary text-white'}) : null %}
                                        <tr data-line-status="{{ line.status }}">
                                            <td class="text-center">
                                                <input type="checkbox" class="payment-line-check form-check-input" value="{{ line.id }}">
                                            </td>
                                            <td class="text-center">{{ line.parcelTrackingNbr ?: '-' }}</td>
                                            <td class="text-center">{{ line.declaredAmount is not null ? line.declaredAmount|number_format(3, '.', ' ') ~ ' TND' : '-' }}</td>
                                            <td class="text-center">{{ line.paidAt ? line.paidAt|date('d/m/Y') : '-' }}</td>
                                            <td>
                                                {% if doc %}
                                                    <a href="{{ path('document_show', {id: doc.id}) }}" target="_blank" class="payment-doc-link">{{ doc.internalNbr }}</a>
                                                    <div class="payment-doc-status">
                                                        <span class="badge {{ docStatus.class }}">{{ docStatus.label }}</span>
                                                    </div>
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </td>
                                            <td class="text-center">{{ doc and doc.totalToPay is not null ? doc.totalToPay|number_format(3, '.', ' ') ~ ' TND' : '-' }}</td>
                                            <td class="text-center">{{ line.amountDifference is not null ? line.amountDifference|number_format(3, '.', ' ') : '-' }}</td>
                                            <td class="text-center" data-search="{{ line.status }}">
                                                {% if line.status == 'validated' %}
                                                    <span class="d-none">validated</span><span class="badge bg-success">Paye</span>
                                                {% elseif line.status == 'updated' %}
                                                    <span class="d-none">updated</span><span class="badge bg-success">A valider</span>
                                                {% elseif line.status == 'not_found' %}
                                                    <span class="d-none">not_found</span><span class="badge bg-secondary text-dark">Introuvable</span>
                                                {% elseif line.status == 'amount_mismatch' %}
                                                    <span class="d-none">amount_mismatch</span><span class="badge bg-warning text-dark">Montant different</span>
                                                {% elseif line.status == 'invalid_status' %}
                                                    <span class="d-none">invalid_status</span><span class="badge bg-danger">Statut invalide</span>
                                                {% elseif line.status == 'delivery_mismatch' %}
                                                    <span class="d-none">delivery_mismatch</span><span class="badge bg-dark">Societe differente</span>
                                                {% elseif line.status == 'already_paid' %}
                                                    <span class="d-none">already_paid</span><span class="badge bg-info text-dark">Deja paye</span>
                                                {% else %}
                                                    <span class="d-none">unknown</span><span class="badge bg-secondary">-</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ line.note ?: '-' }}</td>
                                        </tr>
                                    {% else %}
                                        <tr data-line-status="">
                                            <td colspan="9" class="text-center text-muted py-4">Aucune ligne importee.</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var tableElement = document.getElementById('deliveryPaymentLinesTable');
            var allFilterInput = document.querySelector('.js-payment-status-all-local');
            var specificFilterInputs = Array.from(document.querySelectorAll('.js-payment-status-filter-local'));
            var checkAllInput = document.getElementById('checkAllPaymentLines');

            var getRows = function () {
                if (!tableElement) {
                    return [];
                }

                return Array.from(tableElement.querySelectorAll('tbody tr[data-line-status]')).filter(function (row) {
                    return row.querySelectorAll('td').length > 1;
                });
            };

            var syncAllFilterState = function (source) {
                var checkedSpecific = specificFilterInputs.filter(function (input) {
                    return input.checked;
                });

                if (source === 'all' && allFilterInput && allFilterInput.checked) {
                    specificFilterInputs.forEach(function (input) {
                        input.checked = false;
                    });
                    return;
                }

                if (checkedSpecific.length > 0) {
                    if (allFilterInput) {
                        allFilterInput.checked = false;
                    }
                    return;
                }

                if (allFilterInput) {
                    allFilterInput.checked = true;
                }
            };

            var applyLocalStatusFilter = function () {
                var activeStatuses = specificFilterInputs.filter(function (input) {
                    return input.checked;
                }).map(function (input) {
                    return input.value;
                });

                getRows().forEach(function (row) {
                    var rowStatus = row.getAttribute('data-line-status') || '';
                    var shouldShow = !activeStatuses.length || (allFilterInput && allFilterInput.checked) || activeStatuses.indexOf(rowStatus) !== -1;
                    row.classList.toggle('d-none', !shouldShow);

                    if (!shouldShow) {
                        var checkbox = row.querySelector('.payment-line-check');
                        if (checkbox) {
                            checkbox.checked = false;
                        }
                    }
                });

                if (checkAllInput) {
                    checkAllInput.checked = false;
                }
            };

            specificFilterInputs.forEach(function (input) {
                input.addEventListener('change', function () {
                    if (input.checked) {
                        specificFilterInputs.forEach(function (otherInput) {
                            if (otherInput !== input) {
                                otherInput.checked = false;
                            }
                        });
                    }

                    syncAllFilterState('specific');
                    applyLocalStatusFilter();
                });
            });

            if (allFilterInput) {
                allFilterInput.addEventListener('change', function () {
                    if (!allFilterInput.checked && !specificFilterInputs.some(function (input) { return input.checked; })) {
                        allFilterInput.checked = true;
                    }

                    syncAllFilterState('all');
                    applyLocalStatusFilter();
                });
            }

            if (checkAllInput) {
                checkAllInput.addEventListener('change', function () {
                    var checked = checkAllInput.checked;
                    getRows().forEach(function (row) {
                        if (row.classList.contains('d-none')) {
                            return;
                        }

                        var checkbox = row.querySelector('.payment-line-check');
                        if (checkbox) {
                            checkbox.checked = checked;
                        }
                    });
                });
            }

            syncAllFilterState('init');
            applyLocalStatusFilter();

            document.querySelectorAll('.js-validate-delivery-payment-form').forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    event.preventDefault();

                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        window.Swal.fire({
                            title: 'Valider ce paiement ?',
                            text: 'Les documents prets a etre valides passeront au statut paye. Cette action ne pourra pas etre relancee pour ce fichier.',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Oui, valider',
                            cancelButtonText: 'Annuler',
                            reverseButtons: true
                        }).then(function (result) {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                        return;
                    }

                    if (window.confirm('Valider ce paiement ?')) {
                        form.submit();
                    }
                });
            });
        });
    </script>
{% endblock %}