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

{% block title %}Accepter Absences{% endblock %}

{% block body %}
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h1>Compléter les informations d'absences pour ce salarié</h1>
                        {{ form_start(form) }}
                        {% if not form.vars.valid %}
                        <ul>
                            {% for child in form.children %}
                            {% for error in child.vars.errors %}
                            <li>{{ error.message }}</li>
                            {% endfor %}
                            {% endfor %}
                        </ul>
                        {% endif %}
                        <div class="mb-3">
                            {{ form_label(form.salarie, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.salarie, {'attr': {'class': 'form-select', 'id': 'salarie_field'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.libelle, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.libelle, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.type, null, {'label_attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.type, {'attr': {'class': 'form-select'}, 'id': 'typeAbsence' }) }}
                        </div>
                        <div class="mb-3 row">
                            <div class="col-md-6">
                                {{ form_label(form.dateDebut, '', {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.dateDebut, {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateDebut'}}) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_label(form.dateFin, '', {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.dateFin, {'attr': {'class': 'form-control', 'type': 'date', 'name': 'dateFin'}}) }}
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <div class="col-md-6" id="heureDebutContainer" style="display: none;">
                                {{ form_label(form.heureDebut, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.heureDebut, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-6" id="momentDebutContainer" style="display: none;">
                                <label for="debutMoment">Moment de début</label>
                                <div class="radio-container">
                                    {{ form_widget(form.debutMoment, {'attr': {'class': 'form-check'}}) }}
                                </div>
                            </div>
                            <div class="col-md-6" id="heureFinContainer" style="display: none;">
                                {{ form_label(form.heureFin, null, {'label_attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.heureFin, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-6" id="momentFinContainer" style="display: none;">
                                <label for="finMoment">Moment de fin</label>
                                <div class="radio-container">
                                    {{ form_widget(form.finMoment, {'attr': {'class': 'form-check'}}) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit">Modifier</button>
                            {{ form_end(form) }}
                            <button class="retour-custom" onclick="retourPage(event);">
                                <i class="ri-reply-line font-14"></i> Retour
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>
$(document).ready(function() {
    // Affichage conditionnel des champs moment en fonction du type de congé sélectionné
    $('#typeAbsence').on('change', function() {
        var selectedType = $(this).val();
        if (selectedType === 'rtt' || selectedType === 'reposCompensatoire') {
            $('#momentDebutContainer').show();
            $('#momentFinContainer').show();
            $('#heureDebutContainer').hide();
            $('#heureFinContainer').hide();
        } else if (selectedType === 'congesIntemperies') {
            $('#heureDebutContainer').show();
            $('#heureFinContainer').show();
            $('#momentDebutContainer').hide();
            $('#momentFinContainer').hide();
        } else {
            $('#momentDebutContainer').hide();
            $('#momentFinContainer').hide();
            $('#heureDebutContainer').hide();
            $('#heureFinContainer').hide();
            $('#heureDebut').val('');
            $('#heureFin').val('');
        }
    });

    // Initialiser l'affichage à la chargement de la page
    $('#typeAbsence').trigger('change');

    // Gérer la sélection de moment
    $('input[name="nouveau_absences_form[debutMoment]"]').on('change', function() {
        if ($(this).val() === 'matin') {
            $('#heureDebut').val('08:00:00');
        } else if ($(this).val() === 'apres-midi') {
            $('#heureDebut').val('14:00:00');
        }
    });

    $('input[name="nouveau_absences_form[finMoment]"]').on('change', function() {
        if ($(this).val() === 'matin') {
            $('#heureFin').val('12:00:00');
        } else if ($(this).val() === 'apres-midi') {
            $('#heureFin').val('18:00:00');
        }
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Désactiver le champ au chargement de la page
    document.getElementById('salarie_field').disabled = true;

    // Réactiver le champ juste avant la soumission du formulaire
    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault(); // Empêche la soumission immédiate pour s'assurer que le champ est réactivé
        document.getElementById('salarie_field').disabled = false;
        this.submit(); // Soumettre le formulaire après avoir réactivé le champ
    });
});

</script>
{% endblock %}