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

{% block body %}
<style> .restitution-wrapper { max-width: 950px; margin: 40px auto; padding: 0 20px; font-family: 'Inter', sans-serif; color: #1f2937; } .restitution-card { background: #fff; border-radius: 18px; padding: 32px; box-shadow: 0 12px 35px rgba(0,0,0,0.1); } .restitution-header { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .restitution-header i { font-size: 34px; color: #2563eb; } .restitution-header h2 { margin: 0; font-size: 26px; font-weight: 600; } .subtitle { font-size: 14px; color: #6b7280; } .section-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px; margin-bottom: 20px; } .section-title { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 14px; color: #111827; } .section-title i { color: #2563eb; } label { font-size: 14px; font-weight: 500; margin-bottom: 6px; display: block; } select, input[type="number"], textarea { width: 100%; border-radius: 10px; padding: 10px 14px; font-size: 14px; border: 1px solid #d1d5db; } select[multiple] { min-height: 140px; } select option { font-family: monospace; } .cash-box { background: #ecfdf5; border: 1px solid #10b981; } .cash-box .section-title i { color: #047857; } button.btn-primary { padding: 14px; font-size: 16px; font-weight: 600; border-radius: 14px; } .table { width: 100%; margin-bottom: 1rem; color: #1f2937; border-collapse: collapse; } .table th, .table td { padding: 0.75rem; border: 1px solid #e5e7eb; text-align: left; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } .montantJustif { width: 100%; } </style>

<div class="restitution-wrapper">
<div class="restitution-card">

<h2>Restitution de fonds – {{ caisse.nom }}</h2>

<form method="POST" action="{{ path('transaction_restitution') }}">

{# ================= TYPE ================= #}
<div class="section-box">
    <label>Type de transaction</label>
    <select name="transactionType" id="typeSelect">
        <option value="DEPENSE" selected>Dépense</option>
        <option value="PRE">Pré</option>
        <option value="JUSTIFICATION">Dépense Direct</option>
    </select>
</div>

{# ================= DEPENSE ================= #}
<div class="section-box" id="depenseContainer">
    <label>Filtrer par agent</label>
    <select id="agentFilter">
        <option value="">-- Tous les agents --</option>
        {% for a in agents %}
            <option value="{{ a.id }}">{{ a.nom }} {{ a.prenom }}</option>
        {% endfor %}
    </select>

    <label>Transactions (Dépense)</label>
    <select name="transactionIds[]" id="depenseTransactions" multiple>
        {% for t in transactions %}
         {% if (t.type == 'DEPENSE' or t.type == 'correction') and t.agent and t.montantRest > 0 %}
                <option value="{{ t.id }}" data-agent="{{ t.agent.id }}" data-reste="{{ t.montantRest }}">
                    {{ t.agent.nom }} {{ t.agent.prenom }} — Reste {{ t.montantRest }} DT
                </option>
            {% endif %}
        {% endfor %}
    </select>
</div>

{# ================= PRE ================= #}
<div class="section-box" id="preContainer" style="display:none;">
    <label>Filtrer par personnel</label>
    <select id="personelFilter">
        <option value="">-- Tous les personnels --</option>
        {% for p in personnels %}
            <option value="{{ p.id }}">{{ p.nom }} {{ p.prenom }}</option>
        {% endfor %}
    </select>

    <label>Transactions (Pré)</label>
    <table id="preTable" class="table">
        <thead>
            <tr>
                <th>Personnel</th>
                <th>Montant restant</th>
                <th>Montant Justifié</th>
            </tr>
        </thead>
        <tbody>
        {% for t in transactions %}
            {% if t.type == 'PRE' and t.personel and t.montantRest > 0 %}
            <tr data-personel="{{ t.personel.id }}">
                <td>{{ t.personel.nom }} {{ t.personel.prenom }}</td>
                <td class="montantRest">{{ t.montantRest }} DT</td>
                <td>
                    <input type="hidden" name="transactionIds[]" value="{{ t.id }}">
                    <input type="number" step="0.001" 
                           name="preMontants[{{ t.id }}]" 
                           class="montantJustif" 
                           value="0" 
                           min="0" 
                           max="{{ t.montantRest }}" 
                           required>
                </td>
            </tr>
            {% endif %}
        {% endfor %}
        </tbody>
    </table>
</div>

{# ================= JUSTIFICATION ================= #}
<div class="section-box" id="justifContainer" style="display:none;">
    <label>Choisir l'agent </label>
    <select name="justifAgentId" id="justifAgentSelect"  disabled>
        <option value="">-- Sélectionner un agent --</option>
        {% for a in agents %}
            <option value="{{ a.id }}">{{ a.nom }} {{ a.prenom }}</option>
        {% endfor %}
    </select>
</div>

{# ================= SOCIETES (PAS POUR PRE) ================= #}
<div class="section-box" id="societeContainer">
    <h4>Sociétés</h4>
    <table id="societeTable" width="100%">
        <thead>
            <tr>
                <th>Société</th>
                <th>Montant justifié</th>
                <th>Description</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select name="societes[0][id]">
                        {% for s in societes %}
                            <option value="{{ s.id }}">{{ s.Bsociete.nom }} ( {{ s.solde }} )</option>
                        {% endfor %}
                    </select>
                </td>
                <td>
                    <input type="number" step="0.001" name="societes[0][montantJustif]" class="montantJustif" required>
                </td>
                <td>
                    <input type="text" name="societes[0][description]">
                </td>
                <td>
                    <button type="button" class="removeRow">✖</button>
                </td>
            </tr>
        </tbody>
    </table>
    <button type="button" id="addSociete">➕ Ajouter société</button>
</div>

{# ================= CASH ================= #}
<div class="section-box cash-box" id="cashContainer" style="display:none;">
    <label>
        <input type="checkbox" name="retourCashCheck" id="retourCashCheck"> Utiliser le reste comme cash
    </label>
    <div>
        Cash restant : <strong id="cashRestDisplay">0.00</strong> DT
    </div>
</div>

<button type="submit" class="btn-primary w-100 mt-3">Valider</button>
</form>
</div>
</div>

<script>
let index = 1;

// ===== Ajouter / supprimer lignes sociétés =====
document.getElementById('addSociete').addEventListener('click', () => {
    const tbody = document.querySelector('#societeTable tbody');
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>
            <select name="societes[${index}][id]">
                ${document.querySelector('select[name="societes[0][id]"]').innerHTML}
            </select>
        </td>
        <td><input type="number" step="0.001" name="societes[${index}][montantJustif]" class="montantJustif" required></td>
        <td><input type="text" name="societes[${index}][description]"></td>
        <td><button type="button" class="removeRow">✖</button></td>
    `;
    tbody.appendChild(row);
    index++;
    updateCash();
});

document.addEventListener('click', e => {
    if(e.target.classList.contains('removeRow')) {
        e.target.closest('tr').remove();
        updateCash();
    }
});

// ===== Filtrer transactions =====
function filterTransactions(selectEl, attr, value){
    if(!selectEl) return;
    [...selectEl.options].forEach(opt => {
        if(!opt.value) return;
        const match = !value || opt.dataset[attr] == value;
        const reste = parseFloat(opt.dataset.reste || 0);
        opt.hidden = !(match && reste > 0);
    });
}

document.getElementById('agentFilter')?.addEventListener('change', e => {
    filterTransactions(document.getElementById('depenseTransactions'), 'agent', e.target.value);
    updateCash();
});

document.getElementById('personelFilter')?.addEventListener('change', e => {

    const selectedId = e.target.value;
    const rows = document.querySelectorAll('#preTable tbody tr');

    rows.forEach(row => {
        const personelId = row.dataset.personel;

        if (!selectedId || personelId === selectedId) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });

    updateCash();
});


// ===== Changement type =====
const typeSelect = document.getElementById('typeSelect');
const depenseContainer = document.getElementById('depenseContainer');
const preContainer = document.getElementById('preContainer');
const justifContainer = document.getElementById('justifContainer');
const societeContainer = document.getElementById('societeContainer');
const justifAgentSelect = document.getElementById('justifAgentSelect');

function updateSections() {
    const type = typeSelect.value;

    depenseContainer.style.display = type === 'DEPENSE' ? 'block' : 'none';
    preContainer.style.display     = type === 'PRE' ? 'block' : 'none';
    justifContainer.style.display  = type === 'JUSTIFICATION' ? 'block' : 'none';
    societeContainer.style.display = (type === 'PRE') ? 'none' : 'block';
    cashContainer.style.display    = (type === 'DEPENSE') ? 'block' : 'none';


    // activer / désactiver required pour justifAgent
    justifAgentSelect.disabled = type !== 'JUSTIFICATION';
    justifAgentSelect.required = type === 'JUSTIFICATION';

    // activer / désactiver required sur inputs société
    document.querySelectorAll('#societeContainer input.montantJustif').forEach(input => {
        input.required = type !== 'PRE';
    });

    // deselection des options
    ['depenseTransactions','preTransactions'].forEach(id => {
        const sel = document.getElementById(id);
        sel?.querySelectorAll('option').forEach(o => o.selected = false);
    });

    updateCash();
}

typeSelect.addEventListener('change', updateSections);
updateSections();

// ===== Calcul cash restant =====
function updateCash() {
    let totalTransactions = 0;
    let totalJustif = 0;

    if(typeSelect.value === 'DEPENSE'){
        const depenseSelected = [...document.querySelectorAll('#depenseTransactions option:checked')];
        totalTransactions = depenseSelected.reduce((sum,opt)=>sum + parseFloat(opt.dataset.reste||0),0);
    } 
    else if(typeSelect.value === 'PRE'){
        const preRows = [...document.querySelectorAll('#preTable tbody tr')];
        preRows.forEach(row => {
            const resteEl = row.querySelector('.montantRest');
            const input = row.querySelector('.montantJustif');
            if(!resteEl || !input) return; // <-- protection

            const reste = parseFloat(resteEl.textContent.replace(' DT','') || 0);
            let val = parseFloat(input.value || 0);
            val = Math.min(val, reste); // ne pas dépasser le reste
            input.value = val;

            totalTransactions += reste;
            totalJustif += val;
        });
    } 
    else if(typeSelect.value === 'JUSTIFICATION'){
        const justifSelected = [...document.querySelectorAll('#depenseTransactions option:checked')];
        totalTransactions = justifSelected.reduce((sum,opt)=>sum + parseFloat(opt.dataset.reste || 0),0);
    }

    // Sociétés visibles seulement
    const societeInputs = [...document.querySelectorAll('#societeContainer .montantJustif')]
                            .filter(input => input.offsetParent !== null);
    totalJustif += societeInputs.reduce((sum,input)=>sum + parseFloat(input.value || 0),0);

    document.getElementById('cashRestDisplay').textContent = Math.max(totalTransactions - totalJustif,0).toFixed(3);
}


// ===== Events =====
document.addEventListener('input', e => { if(e.target.classList.contains('montantJustif')) updateCash(); });
document.getElementById('depenseTransactions')?.addEventListener('change', updateCash);

document.getElementById('retourCashCheck')?.addEventListener('change', updateCash);

updateCash();
</script>

{% endblock %}