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

{% block title %}{{ diagnosticPro.id ? 'Modifier' : 'Créer' }} le diagnostic professionnel - {{ beneficiaire.nom }} {{ beneficiaire.prenom }}{% endblock %}

{% block body %}
    <div class="d-flex">
        <!-- Include de la sidebar -->
        {% include '_sidebar.html.twig' with {
            'beneficiaire': beneficiaire,
            'sectionActive': 'diagnostic'
        } %}

        <!-- Contenu principal -->
        <div class="main-content">
            <!-- Header avec breadcrumb -->
            <div class="dossier-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <div class="beneficiaire-info text-header">
                            <h4 class="mb-0">
                                {{ beneficiaire.civilite ? beneficiaire.civilite|lower|title ~ ' ' : '' }}
                                {{ beneficiaire.nom }} {{ beneficiaire.prenom }}
                            </h4>
                            <small class="sous-titre">
                                {{ diagnosticPro.id ? 'Modifier' : 'Créer' }} le diagnostic professionnel
                            </small>
                        </div>
                    </div>
                    <div class="header-actions">
                        {% if diagnosticPro.id %}
                            <button type="button"
                                    class="btn-action btn-danger"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal">
                                <i class="fas fa-trash me-1"></i>
                                <span>Supprimer</span>
                            </button>
                        {% endif %}
                        <a href="{{ path('app_diagnostic_show', {'beneficiaireId': beneficiaire.id}) }}"
                           class="btn-action btn-retour">
                            <i class="fa-solid fa-x"></i>
                            <span>Annuler</span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contenu du formulaire -->
            <div class="container-fluid p-4">
                <!-- Info utilisateur qui édite -->
                {% if app.user %}
                    <div class="alert alert-info mb-4 border-0 shadow-sm">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Information :</strong> Vous éditez en tant que <strong>{{ app.user.prenom }} {{ app.user.nom }}</strong>.
                    </div>
                {% endif %}

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-gradient-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-clipboard-check me-2"></i>
                            Informations du diagnostic
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <form method="post" id="diagnosticForm">
                            <!-- Informations générales -->
                            <div class="row g-4 mb-4">
                                <div class="col-md-4">
                                    <label for="dateEntretien" class="form-label fw-bold">
                                        <i class="fas fa-calendar me-1 text-header"></i>
                                        Date de l'entretien <span class="text-danger">*</span>
                                    </label>
                                    <input type="date"
                                           class="form-control form-control-lg"
                                           id="dateEntretien"
                                           name="dateEntretien"
                                           value="{{ diagnosticPro.dateEntretien ? diagnosticPro.dateEntretien|date('Y-m-d') : '' }}"
                                           max="{{ 'now'|date('Y-m-d') }}"
                                           required>
                                </div>
                                <div class="col-md-4">
                                    <label for="nomConseiller" class="form-label fw-bold">
                                        <i class="fas fa-user me-1 text-header"></i>
                                        Nom du conseiller en insertion professionnelle <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                           class="form-control form-control-lg"
                                           id="nomConseiller"
                                           name="nomConseiller"
                                           value="{{ diagnosticPro.nomConseiller }}"
                                           required
                                           maxlength="200">
                                </div>
                                <div class="col-md-4">
                                        <label for="structure" class="form-label fw-bold"> <i class="fas fa-map-marker-alt me-1 text-header"></i>
                                            Structure <span class="text-danger">*</span>
                                        </label>
                                        <input type="text"
                                               id="structure"
                                               name="structure"
                                               class="form-control form-control-lg"
                                               value="{{ diagnosticPro.structure|default('') }}"
                                               placeholder="Structure">
                                </div>
                            </div>

                            <!-- Question principale -->
                            <div class="mb-4">
                                <label for="reponseProjection" class="form-label beneficiaire-info text-header fw-bold h5">
                                    <i class="fas fa-question-circle me-2"></i>
                                    Est-ce que la personne se projette dans l'activité ?
                                </label>
                                <textarea class="form-control form-control-lg"
                                          id="reponseProjection"
                                          name="reponseProjection"
                                          rows="10"
                                          placeholder="Décrivez ici la réponse du bénéficiaire concernant sa projection dans l'activité professionnelle...">{{ diagnosticPro.reponseProjection }}</textarea>
                                <div class="form-text">
                                    <i class="fas fa-lightbulb me-1"></i>
                                    Saisissez les observations et réponses du bénéficiaire concernant sa projection dans l'activité professionnelle.
                                </div>
                            </div>

                            <!-- Boutons d'action -->
                            <div class="d-flex justify-content-start align-items-center mt-4 pt-4 border-top">
                                <div class="btn-group">
                                    <button type="submit" class="btn btn-save-inline">
                                        <i class="fas fa-save me-1"></i>
                                        Sauvegarder
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de confirmation de suppression -->
    {% if diagnosticPro.id %}
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title" id="deleteModalLabel">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Confirmer la suppression
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0">Êtes-vous sûr de vouloir supprimer ce diagnostic professionnel ?</p>
                        <p class="text-danger mb-0 mt-2"><strong>Cette action est irréversible.</strong></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>
                            Annuler
                        </button>
                        <form method="post" action="{{ path('app_diagnostic_delete', {'beneficiaireId': beneficiaire.id}) }}" style="display: inline;">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ diagnosticPro.id) }}">
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-trash me-1"></i>
                                Supprimer définitivement
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <style>
        .question-label {
            color: #667eea;
            font-size: 1.2rem;
            padding: 15px 0;
        }

        #reponseProjection {
            min-height: 250px;
            font-size: 1.05rem;
            line-height: 1.8;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        #reponseProjection:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .form-control-lg {
            border-radius: 8px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }

        .form-control-lg:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-lg {
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(25, 135, 84, 0.3);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let formModified = false;
            const form = document.getElementById('diagnosticForm');

            if (form) {
                // Détecter les modifications
                const inputs = form.querySelectorAll('input, textarea');
                inputs.forEach(input => {
                    input.addEventListener('change', () => {
                        formModified = true;
                    });
                });

                // Protection avant soumission
                form.addEventListener('submit', function(e) {
                    formModified = false;

                    // Désactiver le bouton
                    const submitBtn = form.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Enregistrement...';
                    }
                });
            }

            // Avertissement avant de quitter
            window.addEventListener('beforeunload', function(e) {
                if (formModified) {
                    e.preventDefault();
                    e.returnValue = '';
                }
            });
        });
    </script>
{% endblock %}