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

{% block title %}Tableau de bord{% endblock %}

{% block body %}
<!-- Page Title -->
<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">Tableau de bord</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item active">Accueil</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium">Agents</p>
                        <h4 class="mb-0">{{ agentsCount }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                            <span class="avatar-title">
                                <i class="bi bi-people font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium">Clients</p>
                        <h4 class="mb-0">{{ clientsCount }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-success">
                            <span class="avatar-title">
                                <i class="bi bi-building font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium">Sites</p>
                        <h4 class="mb-0">{{ sitesCount }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-info">
                            <span class="avatar-title">
                                <i class="bi bi-geo-alt font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="card mini-stats-wid">
            <div class="card-body">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <p class="text-muted fw-medium">Mois en cours</p>
                        <h4 class="mb-0">{{ "now"|date("F Y") }}</h4>
                    </div>
                    <div class="flex-shrink-0 align-self-center">
                        <div class="mini-stat-icon avatar-sm rounded-circle bg-warning">
                            <span class="avatar-title">
                                <i class="bi bi-calendar3 font-size-24"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Demandes d'indisponibilité en attente #}
{% if pendingRequests is not empty %}
<div class="row">
    <div class="col-12">
        <div class="card border-danger">
            <div class="card-body">
                <h4 class="card-title text-danger mb-3">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    Demandes d'indisponibilité en attente
                    <span class="badge bg-danger ms-2">{{ pendingRequests|length }}</span>
                </h4>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Demandée le</th>
                                <th>Agent</th>
                                <th>Date vacation</th>
                                <th>Horaire</th>
                                <th>Site</th>
                                <th>Motif</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for req in pendingRequests %}
                                <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>{{ req.planningEntry and req.planningEntry.site ? req.planningEntry.site.name : '—' }}</td>
                                    <td><span class="badge bg-secondary">{{ req.motifLabel }}</span></td>
                                    <td class="text-end">
                                        <button type="button"
                                                class="btn btn-sm btn-success btn-approve-req"
                                                data-req-id="{{ req.id }}"
                                                data-agent="{{ req.agent.lastName|upper }} {{ req.agent.firstName }}"
                                                data-date="{{ req.entryDate|date('d/m/Y') }}"
                                                data-entry-id="{{ req.planningEntry ? req.planningEntry.id : '' }}"
                                                data-site-id="{{ req.planningEntry and req.planningEntry.site ? req.planningEntry.site.id : '' }}"
                                                data-token="{{ csrf_token('unavailability_decision_' ~ req.id) }}">
                                            <i class="bi bi-check-lg"></i> Approuver
                                        </button>
                                        <button type="button"
                                                class="btn btn-sm btn-danger btn-reject-req"
                                                data-req-id="{{ req.id }}"
                                                data-agent="{{ req.agent.lastName|upper }} {{ req.agent.firstName }}"
                                                data-date="{{ req.entryDate|date('d/m/Y') }}"
                                                data-token="{{ csrf_token('unavailability_decision_' ~ req.id) }}">
                                            <i class="bi bi-x-lg"></i> Refuser
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{# Modal Approuver — réaffectation OBLIGATOIRE #}
<div class="modal fade" id="approveReqModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" id="approveReqForm">
            <input type="hidden" name="_token" id="approveReqToken">
            <div class="modal-content border-success">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title"><i class="bi bi-check-circle me-2"></i> Approuver et réaffecter</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <strong>Réaffectation obligatoire :</strong> vous devez sélectionner un autre
                        agent pour couvrir cette vacation avant d'approuver l'indisponibilité.
                    </div>
                    <p id="approveSummary" class="mb-3"></p>

                    <div class="mb-3 position-relative">
                        <label for="replacementAgentInput" class="form-label fw-semibold">
                            Agent remplaçant <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control" id="replacementAgentInput"
                               placeholder="Tapez 2 caractères minimum (nom, prénom ou matricule)…"
                               autocomplete="off" required>
                        <input type="hidden" name="replacement_agent_id" id="replacementAgentId" required>
                        <div id="replacementAgentDropdown"
                             class="list-group position-absolute w-100"
                             style="z-index:1080; display:none; max-height:240px; overflow:auto;"></div>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">Commentaire (optionnel)</label>
                        <textarea name="admin_comment" class="form-control" rows="2"></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 btn-success">
                        <i class="bi bi-check-lg"></i> Approuver et réaffecter
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{# Modal Refuser #}
<div class="modal fade" id="rejectReqModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" id="rejectReqForm">
            <input type="hidden" name="_token" id="rejectReqToken">
            <div class="modal-content border-danger">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title"><i class="bi bi-x-octagon me-2"></i> Refuser la demande</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p id="rejectSummary" class="mb-3"></p>
                    <div class="mb-2">
                        <label class="form-label">Motif du refus (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 btn-danger">
                        <i class="bi bi-x-lg"></i> Confirmer le refus
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
(function () {
    const approveBase = '{{ path('app_admin_unavailability_approve', {id: 0}) }}';
    const rejectBase  = '{{ path('app_admin_unavailability_reject',  {id: 0}) }}';
    const searchUrl   = '{{ path('app_planning_agents_search') }}';

    const approveForm = document.getElementById('approveReqForm');
    const rejectForm  = document.getElementById('rejectReqForm');

    document.querySelectorAll('.btn-approve-req').forEach(btn => {
        btn.addEventListener('click', () => {
            approveForm.action = approveBase.replace('/0/', '/' + btn.dataset.reqId + '/');
            document.getElementById('approveReqToken').value = btn.dataset.token;
            document.getElementById('approveSummary').innerHTML =
                'Indisponibilité de <strong>' + btn.dataset.agent +
                '</strong> le <strong>' + btn.dataset.date + '</strong>.';
            document.getElementById('replacementAgentInput').value = '';
            document.getElementById('replacementAgentId').value = '';
            document.getElementById('replacementAgentInput').dataset.date    = btn.dataset.date;
            document.getElementById('replacementAgentInput').dataset.entryId = btn.dataset.entryId;
            new bootstrap.Modal(document.getElementById('approveReqModal')).show();
        });
    });

    document.querySelectorAll('.btn-reject-req').forEach(btn => {
        btn.addEventListener('click', () => {
            rejectForm.action = rejectBase.replace('/0/', '/' + btn.dataset.reqId + '/');
            document.getElementById('rejectReqToken').value = btn.dataset.token;
            document.getElementById('rejectSummary').innerHTML =
                'Refuser l\'indisponibilité de <strong>' + btn.dataset.agent +
                '</strong> le <strong>' + btn.dataset.date + '</strong> ?';
            new bootstrap.Modal(document.getElementById('rejectReqModal')).show();
        });
    });

    // Autocomplete agent remplaçant
    const input    = document.getElementById('replacementAgentInput');
    const hidden   = document.getElementById('replacementAgentId');
    const dropdown = document.getElementById('replacementAgentDropdown');
    let searchTimer = null;

    input.addEventListener('input', () => {
        hidden.value = '';
        const q = input.value.trim();
        clearTimeout(searchTimer);
        if (q.length < 2) { dropdown.style.display = 'none'; return; }
        searchTimer = setTimeout(() => {
            const url = new URL(searchUrl, window.location.origin);
            url.searchParams.set('q', q);
            url.searchParams.set('date', input.dataset.date || '');
            fetch(url).then(r => r.json()).then(results => {
                dropdown.innerHTML = '';
                if (!results.length) {
                    dropdown.innerHTML = '<div class="list-group-item text-muted">Aucun résultat</div>';
                } else {
                    results.forEach(a => {
                        const item = document.createElement('button');
                        item.type = 'button';
                        item.className = 'list-group-item list-group-item-action' + (a.unavailable ? ' text-danger' : '');
                        item.textContent = a.label + (a.unavailable ? ' (indispo)' : '');
                        item.addEventListener('click', () => {
                            input.value  = a.label;
                            hidden.value = a.id;
                            dropdown.style.display = 'none';
                        });
                        dropdown.appendChild(item);
                    });
                }
                dropdown.style.display = 'block';
            });
        }, 250);
    });

    document.addEventListener('click', (e) => {
        if (e.target !== input && !dropdown.contains(e.target)) dropdown.style.display = 'none';
    });

    approveForm.addEventListener('submit', (e) => {
        if (!hidden.value) {
            e.preventDefault();
            alert('Vous devez sélectionner un agent remplaçant.');
        }
    });
})();
</script>
{% endif %}

{# Indispos déclarées récemment via agenda agent #}
{% if recentAgentUnavailabilities is not empty %}
<div class="row">
    <div class="col-12">
        <div class="card border-info">
            <div class="card-body">
                <h4 class="card-title text-info mb-3">
                    <i class="bi bi-calendar-x me-2"></i>
                    Indisponibilités déclarées
                    <span class="badge bg-info">{{ recentAgentUnavailabilities|length }}</span>
                </h4>
                <p class="text-muted small mb-3">
                    Indisponibilités saisies directement par les agents depuis leur agenda.
                </p>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Déclarée le</th>
                                <th>Agent</th>
                                <th>Date</th>
                                <th>Plage</th>
                                <th>Motif</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for u in recentAgentUnavailabilities %}
                                <tr>
                                    <td><small>{{ u.createdAt|date('d/m/Y H:i') }}</small></td>
                                    <td>
                                        <strong>{{ u.agent.lastName|upper }}</strong>
                                        {{ u.agent.firstName }}
                                    </td>
                                    <td>{{ u.date|date('d/m/Y') }}</td>
                                    <td>
                                        {% if u.allDay %}
                                            <span class="badge bg-warning">Journée entière</span>
                                        {% else %}
                                            {{ u.startTime|date('H:i') }} – {{ u.endTime|date('H:i') }}
                                        {% endif %}
                                    </td>
                                    <td>{{ u.reason ?: '—' }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-3 text-end">
                    <a href="{{ path('app_admin_agenda') }}" class="btn btn-sm btn-outline-info">
                        Voir l'agenda complet
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{# Notifications — historique décisions #}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">
                    <i class="bi bi-bell me-2"></i> Notifications
                    {% if processedRequests is not empty %}
                        <span class="badge bg-secondary">{{ processedRequests|length }}</span>
                    {% endif %}
                </h4>
                {% if processedRequests is empty %}
                    <p class="text-muted mb-0">Aucune notification.</p>
                {% else %}
                    <div class="list-group list-group-flush">
                        {% for req in processedRequests %}
                            <div class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="me-3">
                                    {% if req.isApproved %}
                                        <i class="bi bi-check-circle-fill text-success me-2"></i>
                                        <strong>Indisponibilité approuvée</strong>
                                    {% else %}
                                        <i class="bi bi-x-circle-fill text-danger me-2"></i>
                                        <strong>Indisponibilité refusée</strong>
                                    {% endif %}
                                    —
                                    <span>{{ req.agent.lastName|upper }} {{ req.agent.firstName }}</span>
                                    <span class="text-muted">
                                        ({{ req.entryDate|date('d/m/Y') }}
                                        {% if req.entryStartTime %}
                                            • {{ req.entryStartTime|date('H:i') }}–{{ req.entryEndTime|date('H:i') }}
                                        {% endif %})
                                    </span>
                                    <br>
                                    <small class="text-muted">
                                        Motif : {{ req.motifLabel }}
                                        {% if req.adminComment %}
                                            • <span class="fst-italic">{{ req.adminComment|nl2br }}</span>
                                        {% endif %}
                                    </small>
                                </div>
                                <small class="text-muted text-nowrap">
                                    {{ req.reviewedAt ? req.reviewedAt|date('d/m/Y H:i') : '—' }}
                                </small>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="mt-3 text-end">
                        <a href="{{ path('app_admin_unavailability_requests') }}" class="btn btn-sm btn-outline-secondary">
                            Voir tout l'historique
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Actions rapides</h4>
                <div class="row">
                    <div class="col-md-3">
                        <a href="{{ path('app_planning_agent_index') }}" class="btn btn-primary btn-lg w-100 mb-3">
                            <i class="bi bi-calendar-check me-2"></i>
                            Planning Salarié
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ path('app_planning_client_index') }}" class="btn btn-success btn-lg w-100 mb-3">
                            <i class="bi bi-calendar-range me-2"></i>
                            Planning Client
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ path('app_planning_entry_new') }}" class="btn btn-info btn-lg w-100 mb-3">
                            <i class="bi bi-plus-circle me-2"></i>
                            Nouvelle entrée
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ path('app_email_send') }}" class="btn btn-warning btn-lg w-100 mb-3">
                            <i class="bi bi-envelope me-2"></i>
                            Envoyer plannings
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activity -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Planning du mois</h4>
                <p class="text-muted">
                    Consultez et gérez les plannings pour le mois de <strong>{{ "now"|date("F Y") }}</strong>.
                </p>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ path('app_planning_agent_index', {month: currentMonth, year: currentYear}) }}" class="btn btn-outline-primary">
                        Voir plannings agents
                    </a>
                    <a href="{{ path('app_planning_client_index', {month: currentMonth, year: currentYear}) }}" class="btn btn-outline-success">
                        Voir plannings clients
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Envoi de plannings</h4>
                <p class="text-muted">
                    Envoyez les plannings par email aux agents et aux clients en un clic.
                </p>
                <a href="{{ path('app_email_send') }}" class="btn btn-outline-warning">
                    <i class="bi bi-envelope me-1"></i>
                    Gérer les envois
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}