{% 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;
}

/* Main card */
.restitution-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

/* Header */
.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 */
.section-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Section title */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #111827;
}

.section-title i {
    color: #2563eb;
}

/* Labels & inputs */
label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

select,
input[type="number"] {
    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 emphasis */
.cash-box {
    background: #ecfdf5;
    border: 1px solid #10b981;
}

.cash-box .section-title i {
    color: #047857;
}

/* Button */
button.btn-primary {
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
}

/* Badge */
.badge-money {
    background: #e0e7ff;
    color: #1e40af;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    margin-left: 6px;
}
</style>

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

<!-- HEADER -->
<div class="restitution-header">
    <i class="bi bi-cash-coin"></i>
    <div>
        <h2>Restitution de fonds</h2>
        <div class="subtitle">
            Caisse active : <strong>{{ caisse.nom }}</strong>
        </div>
    </div>
</div>

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

<!-- TYPE -->
<div class="section-box">
    <div class="section-title">
        <i class="bi bi-list-check"></i>
        Type de transaction
    </div>

    <select name="transactionType" id="transactionType">
        <option value="DEPENSE" selected>Dépense</option>
        <option value="PRE">Prêt</option>
        <option value="JUSTIFICATION">Justification</option>
    </select>
</div>

<!-- ================= DEPENSE ================= -->
<div id="depenseContainer" class="section-box">

    <div class="section-title">
        <i class="bi bi-arrow-down-circle"></i>
        Dépenses à restituer
    </div>

    <label>Filtrer par agent</label>
    <select id="agentSelect">
        <option value="">-- Tous les agents --</option>
        {% for a in agents %}
            <option value="{{ a.id }}">{{ a.nom }} {{ a.prenom }}</option>
        {% endfor %}
    </select>

    <label class="mt-2">Transactions</label>
    <select name="transactionIds[]" id="depenseTransactions" multiple>
        {% for t in transactions %}
            {% if t.type == 'DEPENSE' 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>

    <label class="mt-3">Société</label>
    <select name="societeIdDepense">
        {% for s in societes %}
            <option value="{{ s.id }}">{{ s.nom }} ({{ s.solde }} DT)</option>
        {% endfor %}
    </select>

    <label class="mt-2">Montant justifié</label>
    <input type="number" step="0.01" name="montantJustifDepense" value="0">
</div>

<!-- ================= PRE ================= -->
<div id="preContainer" class="section-box" style="display:none;">

    <div class="section-title">
        <i class="bi bi-person-badge"></i>
        Prêts à restituer
    </div>

    <label>Filtrer par personnel</label>
    <select id="personelSelect">
        <option value="">-- Tous les personnels --</option>
        {% for p in personnels %}
            <option value="{{ p.id }}">{{ p.nom }} {{ p.prenom }}</option>
        {% endfor %}
    </select>

    <label class="mt-2">Transactions</label>
    <select name="transactionIds[]" id="preTransactions" multiple>
        {% for t in transactions %}
            {% if t.type == 'PRE' and t.personel and t.montantRest > 0 %}
            <option value="{{ t.id }}"
                    data-personel="{{ t.personel.id }}"
                    data-reste="{{ t.montantRest }}">
                {{ t.personel.nom }} {{ t.personel.prenom }}
                — Reste {{ t.montantRest }} DT
            </option>
            {% endif %}
        {% endfor %}
    </select>
</div>

<!-- ================= JUSTIFICATION ================= -->
<div id="justificationContainer" class="section-box" style="display:none;">

    <div class="section-title">
        <i class="bi bi-file-check"></i>
        Justification directe
    </div>

    <label>Agent</label>
    <select name="agentIdJustif">
        {% for a in agents %}
            <option value="{{ a.id }}">{{ a.nom }} {{ a.prenom }}</option>
        {% endfor %}
    </select>

    <label class="mt-2">Société</label>
    <select name="societeIdJustif">
        {% for s in societes %}
            <option value="{{ s.id }}">{{ s.nom }}</option>
        {% endfor %}
    </select>

    <label class="mt-2">Montant justifié</label>
    <input type="number" step="0.01" name="montantJustifJustif" value="0">
</div>

<!-- ================= CASH ================= -->
<div id="cashExtra" class="section-box cash-box">
    <div class="section-title">
        <i class="bi bi-safe"></i>
        Cash retourné à la caisse
    </div>

    <label>Montant retourné (DT)</label>
    <input type="number" step="0.01" name="cashRetour" value="0">
</div>

<button class="btn btn-primary w-100 mt-3">
    <i class="bi bi-check-circle me-2"></i>
    Valider la restitution
</button>

</form>
</div>
</div>

<script>
const type = document.getElementById('transactionType');
const depense = document.getElementById('depenseContainer');
const pre = document.getElementById('preContainer');
const justif = document.getElementById('justificationContainer');
const cash = document.getElementById('cashExtra');

function updateDisplay() {
    depense.style.display = 'none';
    pre.style.display = 'none';
    justif.style.display = 'none';
    cash.style.display = 'none';

    if (type.value === 'DEPENSE') {
        depense.style.display = 'block';
        cash.style.display = 'block';
    }
    if (type.value === 'PRE') {
        pre.style.display = 'block';
        cash.style.display = 'block';
    }
    if (type.value === 'JUSTIFICATION') {
        justif.style.display = 'block';
    }
}

type.addEventListener('change', updateDisplay);
window.addEventListener('DOMContentLoaded', updateDisplay);

function filterOptions(selectEl, attr, value) {
    [...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('agentSelect')?.addEventListener('change', e => {
    filterOptions(
        document.getElementById('depenseTransactions'),
        'agent',
        e.target.value
    );
});

document.getElementById('personelSelect')?.addEventListener('change', e => {
    filterOptions(
        document.getElementById('preTransactions'),
        'personel',
        e.target.value
    );
});
</script>

{% endblock %}