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

{% block title %}Nouvelle demande de changement{% endblock %}
{% block page_header %}{% endblock %}

{% block content %}
{% set month_names = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'] %}
{% set day_names = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'] %}
{% set selected_type = data.type|default('swap') %}
{% set selected_assignment = selected_assignment|default(assignments[0]|default(null)) %}
{% set selected_shift = selected_assignment ? selected_assignment.shift : null %}

<div class="data-page planning-employee-page planning-change-new-page">
    <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
        <span>Mon planning</span>
        <i class="ti ti-chevron-right" aria-hidden="true"></i>
        <a href="{{ path('planning_employee_my', {tab: 'change_requests'}) }}">Demandes</a>
        <i class="ti ti-chevron-right" aria-hidden="true"></i>
        <span class="fw-bold text-primary">Nouvelle demande</span>
    </nav>

    <div class="planning-change-new-hero">
        <a href="{{ path('planning_employee_my', {tab: 'change_requests'}) }}"><i class="ti ti-arrow-left" aria-hidden="true"></i>Retour à mes demandes</a>
        <h1>Nouvelle demande de changement</h1>
        <p>Formulez une demande de modification d'horaires, d'échange de shift ou signalez une indisponibilité.</p>
    </div>

    <form method="post" action="{{ path('planning_change_request_new') }}" class="planning-change-new-layout" enctype="multipart/form-data" data-controller="planning-change-request">
        <input type="hidden" name="_token" value="{{ csrf_token('planning_change_request_create') }}">
        <main>
            <section class="planning-employee-board planning-change-new-card">
                <header class="planning-employee-board__header">
                    <h2><i class="ti ti-edit" aria-hidden="true"></i>Détails de la demande</h2>
                </header>
                <div class="planning-change-new-body">
                    {% if errors|default([]) is not empty %}
                        <div class="alert alert-danger">{{ errors|join('<br>')|raw }}</div>
                    {% endif %}

                    <label class="planning-change-new-label">Nature du changement <span>*</span></label>
                    <div class="planning-change-type-grid">
                        {% for value, option in {
                            swap: {icon: 'ti-arrows-exchange', title: 'Échange', text: 'Permuter avec un collègue'},
                            time_change: {icon: 'ti-history', title: 'Modification', text: 'Ajuster mes horaires'},
                            unavailable: {icon: 'ti-ban', title: 'Indisponible', text: 'Empêchement majeur'}
                        } %}
                            <label class="planning-change-type-option">
                                <input type="radio" name="type" value="{{ value }}" {{ selected_type == value ? 'checked' : '' }} data-planning-change-request-target="type" data-action="planning-change-request#updateType">
                                <span>
                                    <i class="ti {{ option.icon }}" aria-hidden="true"></i>
                                    <strong>{{ option.title }}</strong>
                                    <small>{{ option.text }}</small>
                                </span>
                            </label>
                        {% endfor %}
                    </div>

                    <div class="planning-change-new-fields">
                        <label>
                            <span>Date du shift concerné <b>*</b></span>
                            <select name="assignment" required data-planning-change-request-target="assignment" data-action="planning-change-request#updateAssignment">
                                {% for assignment in assignments %}
                                    <option value="{{ assignment.id }}"
                                            data-summary="{{ day_names[assignment.plannedStartAt|date('N') - 1]|capitalize|slice(0, 3) }}. {{ assignment.plannedStartAt|date('d') }} {{ month_names[assignment.plannedStartAt|date('n') - 1]|capitalize }}{% if assignment.shift %} ({{ assignment.shift.title }}){% endif %}"
                                            data-time="{{ assignment.plannedStartAt|date('H:i') }} — {{ assignment.plannedEndAt|date('H:i') }}"
                                            data-slot="{{ assignment.plannedStartAt|date('H:i') }} — {{ assignment.plannedEndAt|date('H:i') }}{% if assignment.shift %} ({{ assignment.shift.title }}){% endif %}"
                                            {{ selected_assignment and selected_assignment.id == assignment.id ? 'selected' : '' }}>
                                        {{ day_names[assignment.plannedStartAt|date('N') - 1]|capitalize }} {{ assignment.plannedStartAt|date('d') }} {{ month_names[assignment.plannedStartAt|date('n') - 1]|capitalize }} {{ assignment.plannedStartAt|date('Y') }}
                                    </option>
                                {% endfor %}
                            </select>
                        </label>
                        <label>
                            <span>Créneau horaire <b>*</b></span>
                            <input type="text" value="{{ selected_assignment ? selected_assignment.plannedStartAt|date('H:i') ~ ' — ' ~ selected_assignment.plannedEndAt|date('H:i') ~ (selected_shift ? ' (' ~ selected_shift.title ~ ')' : '') : 'Aucun shift publié' }}" readonly data-planning-change-request-target="slot">
                        </label>
                    </div>

                    <label class="planning-change-new-field">
                        <span>Collègue de remplacement (optionnel)</span>
                        <select name="replacementSalarie" data-planning-change-request-target="replacement">
                            <option value="">Sélectionner un collègue disponible...</option>
                            {% for employee in employees|default([]) %}
                                {% set employee_assignment_ids = replacement_assignments_by_employee[employee.id]|default([]) %}
                                <option value="{{ employee.id }}" data-available-assignments="{{ employee_assignment_ids|join(',') }}" {{ data.replacementSalarie|default('') == employee.id ? 'selected' : '' }}>{{ employee }}</option>
                            {% endfor %}
                        </select>
                        <small><i class="ti ti-info-circle" aria-hidden="true"></i>Le collègue recevra une notification pour confirmer son accord.</small>
                    </label>

                    <div class="planning-change-new-fields">
                        <label>
                            <span>Nouvelle heure de début</span>
                            <input type="time" name="requestedStartAt" value="{{ data.requestedStartAt|default('') }}" data-planning-change-request-target="requestedStart">
                        </label>
                        <label>
                            <span>Nouvelle heure de fin</span>
                            <input type="time" name="requestedEndAt" value="{{ data.requestedEndAt|default('') }}" data-planning-change-request-target="requestedEnd">
                        </label>
                    </div>

                    <label class="planning-change-new-field">
                        <span>Motif de la demande <b>*</b></span>
                        <textarea name="reason" required placeholder="Précisez la raison (rendez-vous médical, contrainte familiale, etc.)">{{ data.reason|default('') }}</textarea>
                    </label>

                    <label class="planning-change-upload">
                        <span>Justificatif (optionnel)</span>
                        <input type="file" name="attachment" accept=".pdf,.jpg,.jpeg,.png" data-action="planning-change-request#updateUploadLabel">
                        <strong><i class="ti ti-cloud-upload" aria-hidden="true"></i><span data-planning-change-request-target="uploadLabel">Cliquez pour ajouter un document ou glissez-le ici</span></strong>
                        <small>PDF, JPG, PNG (max 5 Mo)</small>
                    </label>
                </div>
            </section>

            <footer class="planning-change-new-actions">
                <a class="data-button data-button--secondary" href="{{ path('planning_employee_my', {tab: 'change_requests'}) }}">Annuler</a>
                <button class="data-button data-button--primary" type="submit">Soumettre ma demande</button>
            </footer>
        </main>

        <aside class="planning-employee-side">
            <section class="planning-employee-side-card planning-change-summary">
                <header><h2>Récapitulatif</h2></header>
                <div class="planning-employee-info-row">
                    <span><i class="ti ti-calendar" aria-hidden="true"></i></span>
                    <div>
                        <small>Shift à modifier</small>
                        <strong data-planning-change-request-target="summaryShift">{{ selected_assignment ? day_names[selected_assignment.plannedStartAt|date('N') - 1]|capitalize|slice(0, 3) ~ '. ' ~ selected_assignment.plannedStartAt|date('d') ~ ' ' ~ month_names[selected_assignment.plannedStartAt|date('n') - 1]|capitalize ~ (selected_shift ? ' (' ~ selected_shift.title ~ ')' : '') : 'Aucun shift' }}</strong>
                        <em data-planning-change-request-target="summaryTime">{% if selected_assignment %}{{ selected_assignment.plannedStartAt|date('H:i') }} — {{ selected_assignment.plannedEndAt|date('H:i') }}{% endif %}</em>
                    </div>
                </div>
                <div class="planning-employee-info-row">
                    <span><i class="ti ti-user-check" aria-hidden="true"></i></span>
                    <div>
                        <small>Valideur</small>
                        <strong>{{ manager ?: 'Manager non renseigné' }}</strong>
                        <em>Manager d'équipe</em>
                    </div>
                </div>
            </section>

            <section class="planning-change-rules">
                <h2><i class="ti ti-alert-triangle" aria-hidden="true"></i>Règles en vigueur</h2>
                <ul>
                    <li>Les demandes doivent être faites au moins <strong>48h</strong> avant le début du shift.</li>
                    <li>Un échange ne peut se faire que si le remplaçant respecte le <strong>repos légal de 11h</strong>.</li>
                    <li>Une indisponibilité injustifiée pourra être refusée par la direction.</li>
                </ul>
            </section>

            <section class="planning-employee-help planning-change-new-help">
                <h2>Besoin d'aide ?</h2>
                <p>Pour toute situation d'urgence ou question sur la procédure de planning.</p>
                <a href="mailto:rh@staffelia.local">Contacter les RH</a>
            </section>
        </aside>
    </form>
</div>
{% endblock %}