{% extends '@App/app.html.twig' %}

{% block title %}{{ salarie.id ? 'Modifier ' ~ salarie : 'Créer un salarié' }}{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
{% set is_edit = salarie.id is not empty %}
{% set form_action = is_edit ? path('employee_edit', {id: salarie.id}) : path('employee_new') %}
{% set csrf_token_id = is_edit ? 'employee_form_' ~ salarie.id : 'employee_form' %}
<div class="flow-wizard" data-controller="flow-wizard">
    <div class="flow-wizard__intro">
        <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                    <span class="text-black">Ressources humaines</span>
                    <i class="ti ti-chevron-right" aria-hidden="true"></i>
                    <a href="{{ path('employee_index') }}">Salariés</a>
                    <i class="ti ti-chevron-right" aria-hidden="true"></i>
                    <span class="text-black-75">{{ is_edit ? 'Modifier ' ~ salarie : 'Nouveau salarié' }}</span>
                </nav>

        <h1>{{ is_edit ? 'Modifier ' ~ salarie : 'Nouveau salarié' }}</h1>
        <p>{{ is_edit ? 'Mettez à jour les informations du dossier salarié.' : 'Renseignez chaque étape pour créer un dossier salarié complet.' }}</p>
    </div>

    <form method="post" action="{{ form_action }}" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token(csrf_token_id) }}">

        {% if errors|default([]) is not empty %}
            <div class="flow-wizard__notice flow-wizard__notice--danger mb-4">
                <iconify-icon icon="solar:danger-triangle-bold-duotone"></iconify-icon>
                <div>
                    <strong>Impossible d’enregistrer le salarié</strong>
                    {% for error in errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <ol class="flow-wizard__steps" aria-label="Progression">
            {% for step in [
                {label: 'Identité', icon: 'solar:user-id-bold-duotone'},
                {label: 'Professionnel', icon: 'solar:case-round-bold-duotone'},
                {label: 'Coordonnées', icon: 'solar:map-point-bold-duotone'},
                {label: 'Finalisation', icon: 'solar:flag-bold-duotone'}
            ] %}
                <li class="flow-wizard__step" data-flow-wizard-target="progress">
                    <a href="#" class="flow-wizard__step-button" data-action="flow-wizard#goTo" data-flow-wizard-step-index="{{ loop.index0 }}">
                        <span class="flow-wizard__step-number">{{ loop.index }}</span>
                    </a>
                    <span class="flow-wizard__step-label">{{ step.label }}</span>
                </li>
            {% endfor %}
        </ol>

        <section class="flow-wizard__panel" data-flow-wizard-target="step">
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><iconify-icon icon="solar:user-id-bold-duotone"></iconify-icon></span>
                    <div>
                        <h2>Identité du salarié</h2>
                        <p>Informations personnelles et état civil</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">Étape 1 / 4</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__grid">
                    <div class="flow-wizard__photo">
                        <button class="flow-wizard__photo-button {{ salarie.photo ? 'has-image' : '' }}" type="button" data-action="flow-wizard#choosePhoto" data-flow-wizard-target="photoPreview" {% if salarie.photo %}style="background-image: url('{{ asset(salarie.photo) }}')"{% endif %}>
                            <iconify-icon icon="solar:camera-bold-duotone"></iconify-icon>
                            <span>Photo</span>
                        </button>
                        <input class="d-none" type="file" name="photo" accept="image/*" data-flow-wizard-target="photoInput" data-action="flow-wizard#previewPhoto">
                        <span class="text-muted small">Facultatif</span>
                    </div>
                    <div class="flow-wizard__field--sm">
                        <label class="flow-wizard__label" for="employee_civilite">Civilité <span class="flow-wizard__required">*</span></label>
                        <select class="form-select" id="employee_civilite" name="civilite" {{ not is_edit ? 'required' : '' }}>
                            <option value="">--</option>
                            <option value="M" {{ salarie.civilite == 'M' ? 'selected' : '' }}>M.</option>
                            <option value="Mme" {{ salarie.civilite == 'Mme' ? 'selected' : '' }}>Mme</option>
                        </select>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_nom">Nom de famille <span class="flow-wizard__required">*</span></label>
                        <input class="form-control" id="employee_nom" name="nom" value="{{ salarie.nom }}" placeholder="DUPONT" required>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_prenom">Prénom <span class="flow-wizard__required">*</span></label>
                        <input class="form-control" id="employee_prenom" name="prenom" value="{{ salarie.prenom }}" placeholder="Jean" required>
                    </div>
                    <div class="flow-wizard__field--lg">
                        <label class="flow-wizard__label" for="employee_nom_naissance">Nom de naissance</label>
                        <input class="form-control" id="employee_nom_naissance" name="nomNaissance" value="{{ salarie.nomNaissance }}" placeholder="Nom de naissance">
                    </div>
                    <div class="flow-wizard__field--lg">
                        <label class="flow-wizard__label" for="employee_nom_usage">Nom d'usage</label>
                        <input class="form-control" id="employee_nom_usage" name="nomUsage" placeholder="Nom d'usage">
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><iconify-icon icon="solar:calendar-date-bold-duotone"></iconify-icon> Naissance & nationalité</div>
                    <div class="flow-wizard__grid">
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_date_naissance">Date de naissance <span class="flow-wizard__required">*</span></label>
                            <input class="form-control" type="date" id="employee_date_naissance" name="dateNaissance" value="{{ salarie.dateNaissance ? salarie.dateNaissance|date('Y-m-d') : '' }}" {{ not is_edit ? 'required' : '' }}>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_lieu_naissance">Lieu de naissance <span class="flow-wizard__required">*</span></label>
                            <input class="form-control" id="employee_lieu_naissance" name="lieuNaissance" value="{{ salarie.lieuNaissance }}" placeholder="Ville" {{ not is_edit ? 'required' : '' }}>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_departement_naissance">Département naissance</label>
                            <input class="form-control" type="number" min="0" step="1" id="employee_departement_naissance" name="departementNaissance" placeholder="ex. 75">
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_pays_naissance">Pays de naissance</label>
                            <select class="form-select" id="employee_pays_naissance" name="paysNaissance">
                                {% set pays_naissance = salarie.paysNaissance ?: 'France' %}
                                {% for value in ['France', 'Belgique', 'Suisse', 'Luxembourg', 'Autre'] %}
                                    <option value="{{ value }}" {{ pays_naissance == value ? 'selected' : '' }}>{{ value }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_nationalite">Nationalité <span class="flow-wizard__required">*</span></label>
                            <input class="form-control" id="employee_nationalite" name="nationalite" value="{{ salarie.nationalite ?: 'Française' }}" {{ not is_edit ? 'required' : '' }}>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_situation_familiale">Situation familiale</label>
                            <select class="form-select" id="employee_situation_familiale" name="situationFamiliale">
                                <option value="Célibataire">Célibataire</option>
                                <option value="Marié(e)">Marié(e)</option>
                                <option value="Pacsé(e)">Pacsé(e)</option>
                                <option value="Divorcé(e)">Divorcé(e)</option>
                                <option value="Veuf/veuve">Veuf/veuve</option>
                            </select>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_nombre_enfants">Nb. d'enfants à charge</label>
                            <input class="form-control" type="number" min="0" id="employee_nombre_enfants" name="nombreEnfants" value="0">
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_sexe">Sexe <span class="flow-wizard__required">*</span></label>
                            <select class="form-select" id="employee_sexe" name="sexe" {{ not is_edit ? 'required' : '' }}>
                                <option value="">--</option>
                                <option value="Masculin">Masculin</option>
                                <option value="Féminin">Féminin</option>
                                <option value="Non renseigné">Non renseigné</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><iconify-icon icon="solar:shield-user-bold-duotone"></iconify-icon> Numéros officiels</div>
                    <div class="flow-wizard__grid">
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="employee_numero_secu">N° de Sécurité Sociale</label>
                            <input class="form-control" id="employee_numero_secu" name="numeroSecuriteSociale" value="{{ salarie.numeroSecuriteSociale }}" placeholder="1 85 05 75 123 456 78" inputmode="numeric" maxlength="21" data-flow-mask="nir">
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="employee_cle_nir">Clé NIR</label>
                            <input class="form-control" id="employee_cle_nir" name="cleNir" placeholder="ex. 12" inputmode="numeric" maxlength="2" data-flow-mask="nirKey">
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="employee_titre_sejour">N° de titre de séjour</label>
                            <input class="form-control" id="employee_titre_sejour" name="numeroTitreSejour" placeholder="ABC 123 4567" maxlength="12" data-flow-mask="residencePermit">
                        </div>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><iconify-icon icon="solar:accessibility-bold-duotone"></iconify-icon> Reconnaissance & statuts</div>
                    <div class="flow-wizard__grid">
                        <label class="flow-wizard__option-card flow-wizard__field--lg">
                            <input class="form-check-input" type="checkbox" name="reconnaissanceHandicap" value="1" {{ salarie.reconnaissanceHandicap ? 'checked' : '' }}>
                            <span><strong>Travailleur Handicapé (RQTH)</strong><br><span class="text-muted small">Reconnaissance Qualité Travailleur Handicapé</span></span>
                        </label>
                        <label class="flow-wizard__option-card flow-wizard__field--lg">
                            <input class="form-check-input" type="checkbox" name="residentEtranger" value="1">
                            <span><strong>Salarié résident à l'étranger</strong><br><span class="text-muted small">Régime fiscal particulier applicable</span></span>
                        </label>
                    </div>
                </div>
            </div>
        </section>

        <section class="flow-wizard__panel" data-flow-wizard-target="step" hidden>
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><iconify-icon icon="solar:case-round-bold-duotone"></iconify-icon></span>
                    <div>
                        <h2>Détails professionnels</h2>
                        <p>Contrat, rattachement organisationnel et informations de travail</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">Étape 2 / 4</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__grid">
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_statut">Statut</label>
                        <select class="form-select" id="employee_statut" name="statut">
                            {% for value, label in {'actif': 'Actif', 'en_onboarding': 'En onboarding', 'sorti': 'Sorti', 'archive': 'Archive'} %}
                                <option value="{{ value }}" {{ salarie.statut == value ? 'selected' : '' }}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_date_entree">Date d'entrée</label>
                        <input class="form-control" type="date" id="employee_date_entree" name="dateEntree" value="{{ salarie.dateEntree ? salarie.dateEntree|date('Y-m-d') : '' }}">
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_temps_hebdo">Temps hebdo</label>
                        <input class="form-control" type="number" step="0.01" id="employee_temps_hebdo" name="tempsTravailHebdomadaire" value="{{ salarie.tempsTravailHebdomadaire ?: 35 }}">
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_type_collab">Type collaborateur</label>
                        <select class="form-select" id="employee_type_collab" name="typeCollaborateur">
                            {% set type_collaborateur = salarie.typeCollaborateur ?: 'CDI' %}
                            {% for value in ['CDI', 'CDD', 'Alternance', 'Stage', 'Freelance'] %}
                                <option value="{{ value }}" {{ type_collaborateur == value ? 'selected' : '' }}>{{ value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_etablissement">Établissement</label>
                        <select class="form-select" id="employee_etablissement" name="etablissement">
                            <option value=""></option>
                            {% for etablissement in etablissements %}
                                <option value="{{ etablissement.id }}" {{ salarie.etablissement and salarie.etablissement.id == etablissement.id ? 'selected' : '' }}>{{ etablissement.nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_service">Service</label>
                        <select class="form-select" id="employee_service" name="employeeService">
                            <option value=""></option>
                            {% for service in services %}
                                <option value="{{ service.id }}" {{ salarie.employeeService and salarie.employeeService.id == service.id ? 'selected' : '' }}>{{ service.nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_job">Poste</label>
                        <select class="form-select" id="employee_job" name="employeeJob">
                            <option value=""></option>
                            {% for job in jobs %}
                                <option value="{{ job.id }}" {{ salarie.employeeJob and salarie.employeeJob.id == job.id ? 'selected' : '' }}>{{ job.nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_category">Catégorie</label>
                        <select class="form-select" id="employee_category" name="employeeCategory">
                            <option value=""></option>
                            {% for category in categories %}
                                <option value="{{ category.id }}" {{ salarie.employeeCategory and salarie.employeeCategory.id == category.id ? 'selected' : '' }}>{{ category.nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_manager">Manager direct</label>
                        <select class="form-select" id="employee_manager" name="manager">
                            <option value="">Sélectionner...</option>
                            {% for manager in managers %}
                                {% if not is_edit or manager.id != salarie.id %}
                                    <option value="{{ manager.id }}" {{ salarie.manager and salarie.manager.id == manager.id ? 'selected' : '' }}>{{ manager }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_email_pro">Email professionnel</label>
                        <input class="form-control" type="email" id="employee_email_pro" name="emailProfessionnel" value="{{ salarie.emailProfessionnel }}" placeholder="prenom.nom@societe.com">
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_email_perso">Email personnel</label>
                        <input class="form-control" type="email" id="employee_email_perso" name="emailPersonnel" value="{{ salarie.emailPersonnel }}" placeholder="nom@example.com">
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_matricule">Matricule</label>
                        <input class="form-control" id="employee_matricule" name="matricule" value="{{ salarie.matricule }}" placeholder="Auto si vide">
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_date_anciennete">Date d'ancienneté</label>
                        <input class="form-control" type="date" id="employee_date_anciennete" name="dateAnciennete" value="{{ salarie.dateAnciennete ? salarie.dateAnciennete|date('Y-m-d') : '' }}">
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_type_temps">Type temps de travail</label>
                        <select class="form-select" id="employee_type_temps" name="typeTempsTravail">
                            {% set type_temps = salarie.typeTempsTravail ?: 'temps_plein' %}
                            {% for value, label in {'temps_plein': 'Temps plein', 'temps_partiel': 'Temps partiel', 'forfait_jours': 'Forfait jours'} %}
                                <option value="{{ value }}" {{ type_temps == value ? 'selected' : '' }}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_classification">Classification</label>
                        <input class="form-control" id="employee_classification" name="classification" value="{{ salarie.classification }}" placeholder="Classification">
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_coefficient">Coefficient</label>
                        <input class="form-control" id="employee_coefficient" name="coefficient" value="{{ salarie.coefficient }}" placeholder="Coefficient">
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_convention">Convention collective</label>
                        <input class="form-control" id="employee_convention" name="conventionCollective" value="{{ salarie.conventionCollective }}" placeholder="Convention collective">
                    </div>
                    {% if not is_edit %}
                        <label class="flow-wizard__option-card flow-wizard__field--full">
                            <input class="form-check-input" type="checkbox" name="generate_onboarding" value="1" checked>
                            <span><strong>Générer les tâches d'onboarding standard pour ce rôle</strong></span>
                        </label>
                    {% endif %}
                </div>
            </div>
        </section>

        <section class="flow-wizard__panel" data-flow-wizard-target="step" hidden>
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><iconify-icon icon="solar:map-point-bold-duotone"></iconify-icon></span>
                    <div>
                        <h2>Adresse & contacts</h2>
                        <p>Adresse personnelle et personnes à contacter</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">Données personnelles</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__section-title"><span class="flow-wizard__section-number">1</span> Adresse personnelle</div>
                <div class="flow-wizard__grid">
                    <div class="flow-wizard__field--xl">
                        <label class="flow-wizard__label" for="employee_adresse">Adresse <span class="flow-wizard__required">*</span></label>
                        <input class="form-control" id="employee_adresse" name="adresse" value="{{ salarie.adresse }}" placeholder="12 rue de la Paix" {{ not is_edit ? 'required' : '' }}>
                    </div>
                    <div class="flow-wizard__field--md">
                        <label class="flow-wizard__label" for="employee_complement">Complément</label>
                        <input class="form-control" id="employee_complement" name="complementAdresse" value="{{ salarie.complementAdresse }}" placeholder="Appartement, étage...">
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_code_postal">Code postal <span class="flow-wizard__required">*</span></label>
                        <input class="form-control" id="employee_code_postal" name="codePostal" value="{{ salarie.codePostal }}" placeholder="75008" inputmode="numeric" maxlength="5" data-flow-mask="postalCode" {{ not is_edit ? 'required' : '' }}>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_ville">Ville <span class="flow-wizard__required">*</span></label>
                        <input class="form-control" id="employee_ville" name="ville" value="{{ salarie.ville }}" placeholder="Paris" {{ not is_edit ? 'required' : '' }}>
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_region">Région</label>
                        <input class="form-control" id="employee_region" name="region" placeholder="Île-de-France">
                    </div>
                    <div class="flow-wizard__field">
                        <label class="flow-wizard__label" for="employee_pays">Pays <span class="flow-wizard__required">*</span></label>
                        <input class="form-control" id="employee_pays" name="pays" value="{{ salarie.pays ?: 'France' }}" {{ not is_edit ? 'required' : '' }}>
                    </div>
                    <div class="flow-wizard__map">
                        <span class="flow-wizard__panel-icon"><iconify-icon icon="solar:map-bold-duotone"></iconify-icon></span>
                        <strong><span data-flow-wizard-target="summary" data-source="adresse"></span>, <span data-flow-wizard-target="summary" data-source="codePostal"></span> <span data-flow-wizard-target="summary" data-source="ville"></span></strong>
                        <a href="#" class="small">Vérifier sur la carte</a>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><span class="flow-wizard__section-number">2</span> Contact personnel</div>
                    <div class="flow-wizard__grid">
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="employee_tel_perso">Téléphone personnel</label>
                            <input class="form-control" id="employee_tel_perso" name="telephonePersonnel" value="{{ salarie.telephonePersonnel ?: salarie.telephone }}" placeholder="06 12 34 56 78" inputmode="tel" maxlength="14" data-flow-mask="phone">
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="employee_tel_pro">Téléphone professionnel</label>
                            <input class="form-control" id="employee_tel_pro" name="telephoneProfessionnel" value="{{ salarie.telephoneProfessionnel }}" placeholder="01 23 45 67 89" inputmode="tel" maxlength="14" data-flow-mask="phone">
                        </div>
                        <div class="flow-wizard__field--md">
                            <label class="flow-wizard__label" for="employee_tel">Téléphone principal</label>
                            <input class="form-control" id="employee_tel" name="telephone" value="{{ salarie.telephone }}" placeholder="Téléphone" inputmode="tel" maxlength="14" data-flow-mask="phone">
                        </div>
                    </div>
                </div>

                <div class="flow-wizard__section">
                    <div class="flow-wizard__section-title"><span class="flow-wizard__section-number">3</span> Contact d'urgence</div>
                    <div class="flow-wizard__grid">
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_urgence_nom">Nom complet</label>
                            <input class="form-control" id="employee_urgence_nom" name="contactUrgenceNom" value="{{ salarie.contactUrgenceNom }}" placeholder="Marie Martin">
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_urgence_lien">Lien</label>
                            <select class="form-select" id="employee_urgence_lien" name="contactUrgenceLien">
                                <option value=""></option>
                                {% for value in ['Conjoint(e)', 'Parent', 'Enfant', 'Autre'] %}
                                    <option value="{{ value }}" {{ salarie.contactUrgenceLien == value ? 'selected' : '' }}>{{ value }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_urgence_tel">Téléphone</label>
                            <input class="form-control" id="employee_urgence_tel" name="contactUrgenceTelephone" value="{{ salarie.contactUrgenceTelephone }}" placeholder="06 98 76 54 32" inputmode="tel" maxlength="14" data-flow-mask="phone">
                        </div>
                        <div class="flow-wizard__field">
                            <label class="flow-wizard__label" for="employee_urgence_email">Email</label>
                            <input class="form-control" type="email" id="employee_urgence_email" name="emergencyEmail" placeholder="marie@example.com">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="flow-wizard__panel" data-flow-wizard-target="step" hidden>
            <header class="flow-wizard__panel-header">
                <div class="flow-wizard__panel-title">
                    <span class="flow-wizard__panel-icon"><iconify-icon icon="solar:flag-bold-duotone"></iconify-icon></span>
                    <div>
                        <h2>Vérification & finalisation</h2>
                        <p>{{ is_edit ? 'Vérifiez les informations avant enregistrement du dossier salarié' : 'Vérifiez les informations avant création du dossier salarié' }}</p>
                    </div>
                </div>
                <span class="flow-wizard__badge">3 étapes complétées</span>
            </header>
            <div class="flow-wizard__body">
                <div class="flow-wizard__summary-hero">
                    <span class="flow-wizard__avatar {{ salarie.photo ? 'has-image' : '' }}" data-flow-wizard-target="photoAvatar" {% if salarie.photo %}style="background-image: url('{{ asset(salarie.photo) }}')"{% endif %}><iconify-icon icon="solar:user-bold-duotone"></iconify-icon></span>
                    <div class="flex-grow-1">
                        <h3 class="mb-1"><span data-flow-wizard-target="summary" data-source="prenom"></span> <span data-flow-wizard-target="summary" data-source="nom"></span></h3>
                        <div class="text-success fw-semibold"><span data-flow-wizard-target="summary" data-source="employeeJob"></span> · <span data-flow-wizard-target="summary" data-source="employeeService"></span></div>
                    </div>
                    <span class="badge text-bg-warning">{{ is_edit ? 'Modification en attente' : 'Création en attente' }}</span>
                </div>

                <div class="flow-wizard__summary-cards">
                    <div class="flow-wizard__summary-card">
                        <h3><iconify-icon icon="solar:user-id-bold-duotone"></iconify-icon> Identité</h3>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Nom</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="nom"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Prénom</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="prenom"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Sexe</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="sexe"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Nationalité</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="nationalite"></span></div>
                    </div>
                    <div class="flow-wizard__summary-card">
                        <h3><iconify-icon icon="solar:case-round-bold-duotone"></iconify-icon> Professionnel</h3>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Poste</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="employeeJob"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Service</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="employeeService"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Manager</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="manager"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Email</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="emailProfessionnel"></span></div>
                    </div>
                    <div class="flow-wizard__summary-card">
                        <h3><iconify-icon icon="solar:map-point-bold-duotone"></iconify-icon> Adresse</h3>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Adresse</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="adresse"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Code postal</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="codePostal"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Ville</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="ville"></span></div>
                        <div class="flow-wizard__summary-row"><span class="flow-wizard__summary-label">Urgence</span><span class="flow-wizard__summary-value" data-flow-wizard-target="summary" data-source="contactUrgenceNom"></span></div>
                    </div>
                </div>

                {% if leave_initial_balances.enabled|default(false) and (not is_edit or leave_initial_balances.requires_input|default(false)) %}
                    <div class="flow-wizard__section">
                        <div class="flow-wizard__section-title"><iconify-icon icon="solar:calendar-mark-bold-duotone"></iconify-icon> Compteurs initiaux</div>
                        {% if leave_initial_balances.available|default(false) %}
                            <p class="text-muted small mb-3">
                                Période {{ leave_initial_balances.period.nom }}. Les jours restants sont calculés automatiquement.
                            </p>
                            <div class="flow-wizard__balance-grid">
                                {% for key, label in {'cp': 'Congés payés', 'rtt': 'RTT'} %}
                                    {% if leave_initial_balances.types[key]|default(null) and (not is_edit or leave_initial_balances.balances[key]|default(null) is empty) %}
                                        {% set balance_data = data.leaveInitialBalances[key]|default({}) %}
                                        <div class="flow-wizard__balance-card" data-flow-leave-balance-row>
                                            <h3>{{ label }}</h3>
                                            <div class="flow-wizard__grid">
                                                <div class="flow-wizard__field--md">
                                                    <label class="flow-wizard__label" for="employee_leave_{{ key }}_acquired">Jours acquis</label>
                                                    <input class="form-control" type="number" step="0.01" min="0" id="employee_leave_{{ key }}_acquired" name="leaveInitialBalances[{{ key }}][acquired]" value="{{ balance_data.acquired|default('') }}" data-flow-leave-acquired>
                                                </div>
                                                <div class="flow-wizard__field--md">
                                                    <label class="flow-wizard__label" for="employee_leave_{{ key }}_taken">Jours pris</label>
                                                    <input class="form-control" type="number" step="0.01" min="0" id="employee_leave_{{ key }}_taken" name="leaveInitialBalances[{{ key }}][taken]" value="{{ balance_data.taken|default('') }}" data-flow-leave-taken>
                                                </div>
                                                <div class="flow-wizard__field--md">
                                                    <label class="flow-wizard__label" for="employee_leave_{{ key }}_available">Jours restants</label>
                                                    <input class="form-control" id="employee_leave_{{ key }}_available" value="" data-flow-leave-available disabled>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="flow-wizard__notice">
                                Les compteurs initiaux seront disponibles après configuration d'une période de congés ouverte et des types CP/RTT actifs.
                            </div>
                        {% endif %}
                    </div>
                {% endif %}

                {% if not is_edit %}
                    {% set create_user_checked = data|default({}) is empty or data.create_user_account is defined %}
                    <div class="flow-wizard__section">
                        <div class="flow-wizard__section-title"><iconify-icon icon="solar:user-check-bold-duotone"></iconify-icon> Compte utilisateur</div>
                        <div class="flow-wizard__grid">
                            <label class="flow-wizard__option-card flow-wizard__field--lg">
                                <input class="form-check-input" type="checkbox" name="create_user_account" value="1" {{ create_user_checked ? 'checked' : '' }}>
                                <span><strong>Créer un compte utilisateur pour ce salarié</strong><br><span class="text-muted small">Utilise l’email professionnel, sinon l’email personnel.</span></span>
                            </label>
                            <label class="flow-wizard__option-card flow-wizard__field--lg">
                                <input class="form-check-input" type="checkbox" name="send_invitation" value="1" {{ data.send_invitation|default(false) ? 'checked' : '' }}>
                                <span><strong>Envoyer une invitation par email</strong><br><span class="text-muted small">Envoie un lien sécurisé permettant au salarié de définir son mot de passe.</span></span>
                            </label>
                            <label class="flow-wizard__option-card flow-wizard__field--lg">
                                <input class="form-check-input" type="checkbox" name="is_manager" value="1" {{ data.is_manager|default(false) ? 'checked' : '' }}>
                                <span><strong>Attribuer le rôle Manager</strong><br><span class="text-muted small">À cocher uniquement si le salarié doit manager une équipe.</span></span>
                            </label>
                        </div>
                    </div>

                    <div class="flow-wizard__section">
                        <div class="flow-wizard__section-title"><iconify-icon icon="solar:settings-bold-duotone"></iconify-icon> Options post-création</div>
                        <div class="flow-wizard__grid">
                            <label class="flow-wizard__option-card flow-wizard__field">
                                <input class="form-check-input" type="checkbox" name="sendWelcomeEmail" value="1" checked>
                                <span><strong>Email de bienvenue</strong><br><span class="text-muted small">Notifier le salarié</span></span>
                            </label>
                            <label class="flow-wizard__option-card flow-wizard__field">
                                <input class="form-check-input" type="checkbox" name="createEmployeePortal" value="1" checked>
                                <span><strong>Portail salarié</strong><br><span class="text-muted small">Accès self-service RH</span></span>
                            </label>
                            <label class="flow-wizard__option-card flow-wizard__field">
                                <input class="form-check-input" type="checkbox" name="scheduleOnboarding" value="1">
                                <span><strong>Planifier onboarding</strong><br><span class="text-muted small">Créer la liste de tâches</span></span>
                            </label>
                            <label class="flow-wizard__option-card flow-wizard__field">
                                <input class="form-check-input" type="checkbox" name="assignTimeclock" value="1">
                                <span><strong>Pointer</strong><br><span class="text-muted small">Lier au suivi temps</span></span>
                            </label>
                        </div>
                    </div>

                    <label class="flow-wizard__notice d-flex gap-3 mt-4">
                        <input class="form-check-input mt-1" type="checkbox" name="privacyConfirmed" value="1" required>
                        <span>Je confirme que les informations saisies sont exactes et que le salarié a été informé de la collecte et du traitement de ses données personnelles.</span>
                    </label>
                {% endif %}
            </div>
        </section>

        <div class="flow-wizard__footer">
            <button class="btn btn-outline-secondary" type="button" data-flow-wizard-target="back" data-action="flow-wizard#back">
                <iconify-icon icon="solar:arrow-left-linear" class="me-1"></iconify-icon>Retour
            </button>
            <div class="flow-wizard__footer-actions">
                <a class="btn btn-link text-muted text-decoration-none" href="{{ is_edit ? path('employee_show', {id: salarie.id}) : path('employee_index') }}">Annuler</a>
                <button class="btn btn-success" type="button" data-flow-wizard-target="next" data-action="flow-wizard#next">
                    Continuer <iconify-icon icon="solar:arrow-right-linear" class="ms-1"></iconify-icon>
                </button>
                <button class="btn btn-success" type="submit" data-flow-wizard-target="submit" hidden>
                    <iconify-icon icon="{{ is_edit ? 'solar:diskette-bold-duotone' : 'solar:user-plus-bold-duotone' }}" class="me-1"></iconify-icon>{{ is_edit ? 'Enregistrer' : 'Créer le salarié' }}
                </button>
            </div>
        </div>
    </form>

    <div class="flow-wizard__privacy">
        <iconify-icon icon="solar:shield-check-bold-duotone"></iconify-icon>
        Les données personnelles sont stockées dans le respect des règles RGPD.
    </div>
</div>
{% endblock %}