{% set current_request = request|default(null) %}
{% set is_edit = is_edit|default(current_request and current_request.id) %}
{% set is_salarie_self_service = is_granted('ROLE_SALARIE') and not is_granted('ROLE_RH') and not is_granted('ROLE_SOCIETE_ADMIN') and not is_granted('ROLE_MANAGER') %}
{% set selected_type_id = data.leaveType|default(current_request.leaveType.id|default('')) %}
{% set selected_salarie_id = data.salarie|default(current_request.salarie.id|default(default_salarie.id|default(user.salarie.id|default('')))) %}
{% if is_salarie_self_service and user.salarie %}
    {% set selected_salarie_id = user.salarie.id %}
{% endif %}
{% set selected_start = data.startDate|default(current_request and current_request.startDate ? current_request.startDate|date('Y-m-d') : '') %}
{% set selected_end = data.endDate|default(current_request and current_request.endDate ? current_request.endDate|date('Y-m-d') : '') %}
{% set selected_start_half = data.startHalfDay|default(current_request.startHalfDay|default('')) %}
{% set selected_end_half = data.endHalfDay|default(current_request.endHalfDay|default('')) %}
{% set selected_comment = data.employeeComment|default(current_request.employeeComment|default('')) %}
{% set selected_reason = data.reason|default(current_request.reason|default('')) %}
{% set selected_type = null %}
{% for type in types %}
    {% if selected_type_id and selected_type_id == type.id %}
        {% set selected_type = type %}
    {% endif %}
{% endfor %}
{% set selected_balance = selected_type and balances_by_type[selected_type.id] is defined ? balances_by_type[selected_type.id] : null %}
{% set current_duration = current_request ? current_request.durationDays : 0 %}
{% set current_available = selected_balance ? selected_balance.available : 0 %}
{% set remaining = selected_balance ? current_available - current_duration : null %}

<form class="data-page leave-request-page" method="post" enctype="multipart/form-data" data-controller="leave-request">
    <input type="hidden" name="_token" value="{{ csrf_token(is_edit ? 'leave_request_edit_' ~ current_request.id : 'leave_request_create') }}">

    <div class="data-page__header">
        <div>
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                {% for crumb in page_breadcrumbs|default(['Congés', 'Nouvelle demande']) %}
                    {% if not loop.first %}<i class="ti ti-chevron-right" aria-hidden="true"></i>{% endif %}
                    <span class="{{ loop.last ? 'fw-bold text-primary' : '' }}">{{ crumb }}</span>
                {% endfor %}
            </nav>
            <h1>{{ page_title|default(is_edit ? 'Modifier la demande' : 'Nouvelle demande') }}</h1>
        </div>
        {% if is_edit %}
            <span class="data-badge data-badge--warning"><i class="ti ti-clock" aria-hidden="true"></i>{{ status_labels[current_request.status]|default(current_request.status) }}</span>
        {% endif %}
    </div>

    <a class="leave-request-back" href="{{ back_path|default(path('app_leave_index')) }}"><i class="ti ti-arrow-left" aria-hidden="true"></i>{{ back_label|default('Retour') }}</a>

    {% if errors|default([]) %}
        <section class="settings-note settings-note--warning">
            <i class="ti ti-alert-triangle" aria-hidden="true"></i>
            <span>{% for error in errors %}{{ error }}{% if not loop.last %}<br>{% endif %}{% endfor %}</span>
        </section>
    {% endif %}

    <section class="settings-note settings-note--warning">
        <i class="ti ti-alert-triangle" aria-hidden="true"></i>
        <span>
            {% if is_edit %}
                <strong>Demande en cours de traitement</strong><br>
                Vous pouvez modifier cette demande tant qu'elle n'a pas été approuvée. Toute modification réinitialisera le processus de validation.
            {% else %}
                <strong>Nouvelle demande de congé</strong><br>
                Vérifiez les dates, le type d'absence et votre solde avant de soumettre la demande.
            {% endif %}
        </span>
    </section>

    <div class="leave-request-layout">
        <div class="leave-request-main">
            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--blue"><i class="ti ti-user" aria-hidden="true"></i></span>
                        <h2>Salarié</h2>
                    </div>
                </div>
                <div class="settings-form">
                    <label class="settings-field">
                        <span>Salarié concerné</span>
                        {% if is_salarie_self_service and user.salarie %}
                            <input type="hidden" name="salarie" value="{{ user.salarie.id }}">
                        {% endif %}
                        <select class="form-select" name="{{ is_salarie_self_service ? '_salarie_display' : 'salarie' }}" required {{ is_salarie_self_service ? 'disabled' : '' }}>
                            <option value="">Sélectionner un salarié</option>
                            {% for salarie in salaries %}
                                <option value="{{ salarie.id }}" {{ selected_salarie_id == salarie.id ? 'selected' : '' }}>{{ salarie }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
            </section>

            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--blue"><i class="ti ti-tag" aria-hidden="true"></i></span>
                        <h2>Type d'absence</h2>
                    </div>
                </div>
                <div class="leave-type-grid">
                    {% for type in types %}
                        {% set balance = balances_by_type[type.id] is defined ? balances_by_type[type.id] : null %}
                        {% set type_available = balance ? balance.available : 0 %}
                        {% set type_color = type.couleur|default('#3b82f6') %}
                        <label class="leave-type-card" data-leave-request-target="typeOption" data-type-name="{{ type.nom }}" data-type-available="{{ type_available }}" data-balance-managed="{{ type.balanceManaged ? '1' : '0' }}">
                            <input type="radio" name="leaveType" value="{{ type.id }}" {{ selected_type_id == type.id ? 'checked' : '' }} required data-leave-request-target="typeInput" data-action="change->leave-request#selectType">
                            <span class="leave-type-card__dot" style="--leave-type-color: {{ type_color }}"></span>
                            <span>
                                <strong>{{ type.nom }}</strong>
                                <small>{% if type.balanceManaged %}{{ type_available|number_format(1, ',', ' ') }} j disponibles{% else %}Non décompté{% endif %}</small>
                            </span>
                        </label>
                    {% endfor %}
                </div>
            </section>

            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--blue"><i class="ti ti-clock" aria-hidden="true"></i></span>
                        <h2>Période</h2>
                    </div>
                </div>
                <div class="settings-form">
                    <div class="settings-form__grid">
                        <label class="settings-field">
                            <span>Date de début</span>
                            <input class="form-control" type="date" name="startDate" value="{{ selected_start }}" required data-leave-request-target="start" data-action="change->leave-request#refresh">
                        </label>
                        <label class="settings-field">
                            <span>Date de fin</span>
                            <input class="form-control" type="date" name="endDate" value="{{ selected_end }}" required data-leave-request-target="end" data-action="change->leave-request#refresh">
                        </label>
                        <label class="settings-field">
                            <span>Demi-journée début</span>
                            <select class="form-select" name="startHalfDay" data-leave-request-target="startHalf" data-action="change->leave-request#refresh">
                                <option value="" {{ selected_start_half == '' ? 'selected' : '' }}>Journée entière</option>
                                <option value="morning" {{ selected_start_half == 'morning' ? 'selected' : '' }}>Matin uniquement</option>
                                <option value="afternoon" {{ selected_start_half == 'afternoon' ? 'selected' : '' }}>Après-midi uniquement</option>
                            </select>
                        </label>
                        <label class="settings-field">
                            <span>Demi-journée fin</span>
                            <select class="form-select" name="endHalfDay" data-leave-request-target="endHalf" data-action="change->leave-request#refresh">
                                <option value="" {{ selected_end_half == '' ? 'selected' : '' }}>Journée entière</option>
                                <option value="morning" {{ selected_end_half == 'morning' ? 'selected' : '' }}>Matin uniquement</option>
                                <option value="afternoon" {{ selected_end_half == 'afternoon' ? 'selected' : '' }}>Après-midi uniquement</option>
                            </select>
                        </label>
                    </div>
                    <span class="leave-request-info">
                        <i class="ti ti-info-circle" aria-hidden="true"></i>
                        <span data-leave-request-target="deductedNote">Sélectionnez une période pour calculer les jours ouvrés décomptés.</span>
                    </span>
                </div>
            </section>

            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--blue"><i class="ti ti-message-circle" aria-hidden="true"></i></span>
                        <h2>Commentaire <span>(facultatif)</span></h2>
                    </div>
                </div>
                <div class="settings-form">
                    <label class="settings-field">
                        <span>Motif interne</span>
                        <input class="form-control" name="reason" value="{{ selected_reason }}" placeholder="Vacances, récupération, événement familial...">
                    </label>
                    <label class="settings-field">
                        <span>Commentaire visible par le manager et les RH</span>
                        <textarea class="form-control" name="employeeComment" rows="4" placeholder="Ajoutez une précision utile à la validation...">{{ selected_comment }}</textarea>
                    </label>
                </div>
            </section>

            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--blue"><i class="ti ti-paperclip" aria-hidden="true"></i></span>
                        <h2>Pièce jointe <span>(facultatif)</span></h2>
                    </div>
                </div>
                <label class="leave-upload-zone" for="leave_attachment">
                    <i class="ti ti-cloud-upload" aria-hidden="true"></i>
                    <strong>Glissez-déposez un fichier ou parcourez</strong>
                    <span>PDF, JPG, PNG — max. 5 Mo</span>
                    <em data-leave-request-target="fileName"></em>
                </label>
                <input class="visually-hidden" id="leave_attachment" type="file" name="attachment" accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png" data-action="change->leave-request#showFileName">
            </section>

            <section class="leave-request-actions">
                {% if is_edit %}
                    <a class="data-button data-button--danger" href="{{ path('app_leave_show', {id: current_request.id}) }}"><i class="ti ti-circle-x" aria-hidden="true"></i>Annuler la modification</a>
                {% else %}
                    <a class="data-button data-button--danger" href="{{ path('app_leave_my') }}"><i class="ti ti-circle-x" aria-hidden="true"></i>Annuler la demande</a>
                {% endif %}
                <div>
                    <button class="data-button data-button--secondary" type="submit" name="action" value="draft"><i class="ti ti-device-floppy" aria-hidden="true"></i>Enregistrer en brouillon</button>
                    <button class="data-button data-button--primary" type="submit" name="action" value="submit"><i class="ti ti-send" aria-hidden="true"></i>{{ is_edit ? 'Enregistrer les modifications' : 'Soumettre' }}</button>
                </div>
            </section>
        </div>

        <aside class="leave-request-side">
            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--muted"><i class="ti ti-clipboard-text" aria-hidden="true"></i></span>
                        <h2>Récapitulatif</h2>
                    </div>
                </div>
                <dl class="leave-summary">
                    <dt>Référence</dt>
                    <dd>{{ current_request ? current_request.reference : 'Brouillon' }}</dd>
                    <dt>Type</dt>
                    <dd><span data-leave-request-target="summaryType">{{ selected_type ? selected_type.nom : '—' }}</span></dd>
                    <dt>Début</dt>
                    <dd data-leave-request-target="summaryStart">{{ selected_start ? selected_start|date('d/m/Y') : '—' }}</dd>
                    <dt>Fin</dt>
                    <dd data-leave-request-target="summaryEnd">{{ selected_end ? selected_end|date('d/m/Y') : '—' }}</dd>
                    <dt>Durée totale</dt>
                    <dd><strong class="text-primary" data-leave-request-target="duration">{{ current_duration ? current_duration|number_format(1, ',', ' ') ~ ' jour' ~ (current_duration > 1 ? 's' : '') : '—' }}</strong></dd>
                    {% if is_edit %}
                        <dt>Statut</dt>
                        <dd><span class="data-badge data-badge--warning">{{ status_labels[current_request.status]|default(current_request.status) }}</span></dd>
                    {% endif %}
                </dl>
                <div class="leave-balance-box">
                    <strong>Solde après demande</strong>
                    <span>Disponible actuel <b data-leave-request-target="available">{{ selected_balance ? selected_balance.available|number_format(1, ',', ' ') ~ ' j' : '—' }}</b></span>
                    <span>Cette demande <b class="text-danger" data-leave-request-target="requestDays">{{ current_duration ? '-' ~ current_duration|number_format(1, ',', ' ') ~ ' j' : '—' }}</b></span>
                    <span>Restant <b class="text-primary" data-leave-request-target="remaining">{{ remaining is not null ? remaining|number_format(1, ',', ' ') ~ ' j' : '—' }}</b></span>
                </div>
            </section>

            <section class="settings-panel">
                <div class="settings-panel__header">
                    <div class="settings-panel__title">
                        <span class="settings-panel__icon settings-panel__icon--muted"><i class="ti ti-history" aria-hidden="true"></i></span>
                        <h2>Historique</h2>
                    </div>
                </div>
                <div class="leave-mini-timeline">
                    {% if is_edit %}
                        <span class="leave-mini-timeline__item"><i class="ti ti-clock" aria-hidden="true"></i><strong>{{ status_labels[current_request.status]|default(current_request.status) }}</strong><small>{{ current_request.updatedAt|date('d/m/Y H:i') }}</small></span>
                    {% else %}
                        <span class="leave-mini-timeline__item is-muted"><i class="ti ti-circle" aria-hidden="true"></i><strong>Aucun événement</strong><small>La demande n'est pas encore créée.</small></span>
                    {% endif %}
                </div>
            </section>
        </aside>
    </div>
</form>