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

{% block title %}Détail de l'entrée de planning{% 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">Détail de l'entrée de planning</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"><a href="{{ path('app_planning_agent_index') }}">Planning</a></li>
                    <li class="breadcrumb-item active">Détail</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Informations de l'entrée</h4>
                <p class="text-muted mb-4"><i class="bi bi-info-circle me-1"></i> Ces informations proviennent du planning client et ne sont pas modifiables.</p>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Agent</label>
                        <p class="form-control-plaintext border rounded px-3 py-2">{{ entry.agent.lastName|upper }} {{ entry.agent.firstName }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Site</label>
                        <p class="form-control-plaintext border rounded px-3 py-2">{{ entry.site ? entry.site.name : '—' }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Date</label>
                        <p class="form-control-plaintext border rounded px-3 py-2">{{ entry.date|date('d/m/Y') }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Heure de début</label>
                        <p class="form-control-plaintext border rounded px-3 py-2">{{ entry.startTime ? entry.startTime|date('H:i') : '—' }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Heure de fin</label>
                        <p class="form-control-plaintext border rounded px-3 py-2">{{ entry.endTime ? entry.endTime|date('H:i') : '—' }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Type</label>
                        <p class="form-control-plaintext border rounded px-3 py-2">{{ entry.entryType|entry_type_label }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Qualification</label>
                        <p class="form-control-plaintext border rounded px-3 py-2">{{ (entry.qualification ?: entry.agent.qualification)|qualification_label }}</p>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Notes</label>
                    <p class="form-control-plaintext border rounded px-3 py-2" style="min-height: 60px;">{{ entry.notes ?: '—' }}</p>
                </div>

                <div class="d-flex gap-2 mt-4">
                    <a href="{{ path('app_planning_agent_show', {id: entry.agent.id, year: entry.date|date('Y'), month: entry.date|date('n')}) }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left me-1"></i> Retour au planning
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        {# Bloc Indisponibilité — visible à l'agent propriétaire et à l'admin #}
        {% if entry.entryType == 'vacation' %}
        <div class="card border-danger mb-3">
            <div class="card-body">
                <h4 class="card-title text-danger mb-3">
                    <i class="bi bi-exclamation-triangle me-1"></i> Indisponibilité
                </h4>
                {% if pendingRequest %}
                    <div class="alert alert-warning mb-0">
                        <strong>Demande en attente</strong> envoyée le
                        {{ pendingRequest.createdAt|date('d/m/Y H:i') }}.<br>
                        Motif : <em>{{ pendingRequest.motifLabel }}</em><br>
                        En attente de validation par Mohammed ELABED.
                    </div>
                {% else %}
                    <p class="text-muted small mb-3">
                        Vous ne pouvez pas assurer cette vacation ? Signalez votre indisponibilité.
                        Une notification sera envoyée à Mohammed ELABED qui devra valider votre demande.
                    </p>
                    <button type="button" class="btn btn-danger w-100"
                            data-bs-toggle="modal" data-bs-target="#unavailModal">
                        <i class="bi bi-x-octagon me-1"></i> Indisponible
                    </button>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {% if is_granted('ROLE_ADMIN') %}
        <div class="card border-secondary">
            <div class="card-body">
                <h4 class="card-title text-secondary mb-4">Zone admin</h4>
                <p class="text-muted">Supprimer cette entrée de planning. Cette action est irréversible.</p>
                <form method="post" action="{{ path('app_planning_entry_delete', {id: entry.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette entrée ?');">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entry.id) }}">
                    <button type="submit" class="btn btn-outline-danger">
                        <i class="bi bi-trash me-1"></i> Supprimer l'entrée
                    </button>
                </form>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{# Modal Indisponibilité #}
{% if entry.entryType == 'vacation' and not pendingRequest %}
<div class="modal fade" id="unavailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" action="{{ path('app_unavailability_request_submit', {id: entry.id}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('unavailability_request_' ~ entry.id) }}">
            <div class="modal-content border-danger">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">
                        <i class="bi bi-exclamation-triangle me-2"></i> Signaler une indisponibilité
                    </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>Attention :</strong> cette modification donnera lieu à une
                        <strong>notification à Mohammed ELABED</strong>. Le planning ne sera mis à jour
                        qu'après sa validation. Vous recevrez un email de confirmation
                        (accord ou refus).
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Vacation concernée</label>
                        <p class="form-control-plaintext border rounded px-3 py-2 mb-0">
                            {{ entry.date|date('d/m/Y') }}
                            {% if entry.startTime %} • {{ entry.startTime|date('H:i') }} – {{ entry.endTime|date('H:i') }}{% endif %}
                            {% if entry.site %} • {{ entry.site.name }}{% endif %}
                        </p>
                    </div>

                    <div class="mb-3">
                        <label for="motif" class="form-label fw-semibold">Motif <span class="text-danger">*</span></label>
                        <select name="motif" id="motif" class="form-select" required>
                            {% for value, label in motifs %}
                                <option value="{{ value }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="comment" class="form-label fw-semibold">Commentaire (optionnel)</label>
                        <textarea name="comment" id="comment" class="form-control" rows="3"
                                  placeholder="Précisez si besoin"></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-send me-1"></i> Envoyer la demande
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% endblock %}