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

{% block title %}Demandes d'indisponibilité{% endblock %}

{% block body %}
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">Demandes d'indisponibilité</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ path('app_dashboard') }}">Accueil</a></li>
                    <li class="breadcrumb-item active">Indisponibilités</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    En attente
                    <span class="badge bg-warning">{{ pending|length }}</span>
                </h5>

                {% if pending is empty %}
                    <p class="text-muted">Aucune demande en attente.</p>
                {% else %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Demandée le</th>
                                    <th>Agent</th>
                                    <th>Date vacation</th>
                                    <th>Horaire</th>
                                    <th>Motif</th>
                                    <th>Commentaire</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for req in pending %}
                                    <tr>
                                        <td>{{ req.createdAt|date('d/m/Y H:i') }}</td>
                                        <td>
                                            <strong>{{ req.agent.lastName|upper }}</strong>
                                            {{ req.agent.firstName }}<br>
                                            <small class="text-muted">{{ req.agent.matricule }}</small>
                                        </td>
                                        <td>{{ req.entryDate|date('d/m/Y') }}</td>
                                        <td>
                                            {% if req.entryStartTime %}
                                                {{ req.entryStartTime|date('H:i') }} – {{ req.entryEndTime|date('H:i') }}
                                            {% else %} — {% endif %}
                                        </td>
                                        <td><span class="badge bg-secondary">{{ req.motifLabel }}</span></td>
                                        <td>{{ req.agentComment ?: '—' }}</td>
                                        <td class="text-end">
                                            <a href="{{ path('app_dashboard') }}#approve-{{ req.id }}"
                                               class="btn btn-sm btn-success">
                                                <i class="bi bi-check-lg"></i> Approuver
                                            </a>
                                            <button type="button"
                                                    class="btn btn-sm btn-danger"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#decisionModal"
                                                    data-action="reject"
                                                    data-req-id="{{ req.id }}"
                                                    data-agent="{{ req.agent.lastName|upper }} {{ req.agent.firstName }}"
                                                    data-date="{{ req.entryDate|date('d/m/Y') }}">
                                                <i class="bi bi-x-lg"></i> Refuser
                                            </button>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-3">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Historique récent</h5>
                {% if recent is empty %}
                    <p class="text-muted">Aucun historique.</p>
                {% else %}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Date demande</th>
                                    <th>Agent</th>
                                    <th>Vacation</th>
                                    <th>Motif</th>
                                    <th>Statut</th>
                                    <th>Traitée le</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for req in recent %}
                                    <tr>
                                        <td>{{ req.createdAt|date('d/m/Y H:i') }}</td>
                                        <td>{{ req.agent.lastName|upper }} {{ req.agent.firstName }}</td>
                                        <td>{{ req.entryDate|date('d/m/Y') }}
                                            {% if req.entryStartTime %}({{ req.entryStartTime|date('H:i') }}–{{ req.entryEndTime|date('H:i') }}){% endif %}
                                        </td>
                                        <td>{{ req.motifLabel }}</td>
                                        <td>
                                            {% if req.isPending %}<span class="badge bg-warning">En attente</span>
                                            {% elseif req.isApproved %}<span class="badge bg-success">Approuvée</span>
                                            {% else %}<span class="badge bg-danger">Refusée</span>{% endif %}
                                        </td>
                                        <td>{{ req.reviewedAt ? req.reviewedAt|date('d/m/Y H:i') : '—' }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# Modal décision #}
<div class="modal fade" id="decisionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" id="decisionForm">
            <input type="hidden" name="_token" id="decisionToken">
            <div class="modal-content">
                <div class="modal-header" id="decisionHeader">
                    <h5 class="modal-title" id="decisionTitle">Décision</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p id="decisionSummary"></p>
                    <div class="mb-2">
                        <label class="form-label">Commentaire (optionnel)</label>
                        <textarea name="admin_comment" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn" id="decisionSubmit">Confirmer</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const modal       = document.getElementById('decisionModal');
    const form        = document.getElementById('decisionForm');
    const title       = document.getElementById('decisionTitle');
    const summary     = document.getElementById('decisionSummary');
    const submitBtn   = document.getElementById('decisionSubmit');
    const tokenInput  = document.getElementById('decisionToken');

    modal.addEventListener('show.bs.modal', function (event) {
        const btn    = event.relatedTarget;
        const action = btn.dataset.action;
        const reqId  = btn.dataset.reqId;
        const agent  = btn.dataset.agent;
        const date   = btn.dataset.date;

        if (action === 'approve') {
            title.textContent = 'Approuver l\'indisponibilité';
            submitBtn.className = 'btn btn-success';
            submitBtn.innerHTML = '<i class="bi bi-check-lg"></i> Approuver';
            form.action = '{{ path('app_admin_unavailability_approve', {id: 0}) }}'.replace('/0/', '/' + reqId + '/');
        } else {
            title.textContent = 'Refuser l\'indisponibilité';
            submitBtn.className = 'btn btn-danger';
            submitBtn.innerHTML = '<i class="bi bi-x-lg"></i> Refuser';
            form.action = '{{ path('app_admin_unavailability_reject', {id: 0}) }}'.replace('/0/', '/' + reqId + '/');
        }
        tokenInput.value = '{{ '' }}'; // CSRF est par-req-id, géré côté form ci-dessous
        summary.innerHTML = 'Agent : <strong>' + agent + '</strong><br>Vacation : <strong>' + date + '</strong>';

        // CSRF token spécifique
        fetch('').catch(() => {}); // no-op
        tokenInput.value = decisionTokens[reqId] || '';
    });
});

// Tokens CSRF pré-générés côté serveur
const decisionTokens = {
    {% for req in pending %}
        '{{ req.id }}': '{{ csrf_token('unavailability_decision_' ~ req.id) }}'{% if not loop.last %},{% endif %}
    {% endfor %}
};
</script>
{% endblock %}