{% include 'partials/header.html.twig' %}

    <script src="{{ asset('assets/libs/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">
      <div class="body-wrapper">
<div class="container-fluid">
    <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Nouvel employé</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="card overflow-hidden">
        <div class="card-body p-4">
            <h4 class="card-title">Identité</h4>
            <p class="card-subtitle mb-4">Ajoutez ici les détails de l'identité du nouvel employé</p>
            <form id="newUser">
            <div class="row">
                
                <div class="col-lg-6">
                    <div class="mb-3">
                        <label for="exampleInputtext" class="form-label">Nom</label>
                        <input type="text" class="form-control" data-field="nom" id="nom" value="" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="exampleInputtext1" class="form-label">Email</label>
                        <input type="email" class="form-control" data-field="email" id="email" value="" required>
                        <small id="email_error" class="text-danger" style="display:none;">Cette adresse email est déjà utilisée pour un utilisateur</small>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="mb-3">
                        <label for="exampleInputtext2" class="form-label">Prénom</label>
                        <input type="text" class="form-control" data-field="prenom" id="prenom" value="" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="exampleInputtext3" class="form-label">Téléphone</label>
                        <input type="number" class="form-control" data-field="telephone" id="telephone" value="" required> 
                    </div>
                </div>
                <div class="col-12">
                    <div>
                        <label for="exampleInputtext4" class="form-label">Adresse</label>
                        <input type="text" class="form-control" data-field="adresse" id="adresse" value="" required>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="mb-3">
                        <label for="exampleInputtext2" class="form-label">CodePostal</label>
                        <input type="number" class="form-control" data-field="codePostal" id="codePostal" value="" required>
                    </div>
                </div>
                <div class="col-lg-6"> 
                    <div class="mb-3">
                        <label for="exampleInputtext3" class="form-label">Ville</label>
                        <input type="text" class="form-control" data-field="ville" id="ville" vvalue="" required>
                    </div>
                </div>
                <div class="col-lg-6"> 
                    <div class="mb-3">
                        <label for="exampleInputtext3" class="form-label">Date de naissance</label>
                        <input type="date" class="form-control" data-field="dateNaissance" id="dateNaissance" value="" required>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="mb-3">
                        <label for="pays" class="form-label">Pays</label>
                        <select id="pays" class="select2 form-control" data-field="pays" required>
                            <option value="" disabled selected>Choisissez votre pays</option>
                            <option value="Afghanistan">Afghanistan</option>
                            <option value="Albanie">Albanie</option>
                            <option value="Algérie">Algérie</option>
                            <option value="Andorre">Andorre</option>
                            <option value="Angola">Angola</option>
                            <option value="Antigua-et-Barbuda">Antigua-et-Barbuda</option>
                            <option value="Arabie Saoudite">Arabie Saoudite</option>
                            <option value="Argentine">Argentine</option>
                            <option value="Arménie">Arménie</option>
                            <option value="Australie">Australie</option>
                            <option value="Autriche">Autriche</option>
                            <option value="Azerbaïdjan">Azerbaïdjan</option>
                            <option value="Bahamas">Bahamas</option>
                            <option value="Bahreïn">Bahreïn</option>
                            <option value="Bangladesh">Bangladesh</option>
                            <option value="Barbade">Barbade</option>
                            <option value="Belgique">Belgique</option>
                            <option value="Belize">Belize</option>
                            <option value="Bénin">Bénin</option>
                            <option value="Bhoutan">Bhoutan</option>
                            <option value="Biélorussie">Biélorussie</option>
                            <option value="Birmanie">Birmanie</option>
                            <option value="Bolivie">Bolivie</option>
                            <option value="Bosnie-Herzégovine">Bosnie-Herzégovine</option>
                            <option value="Botswana">Botswana</option>
                            <option value="Brésil">Brésil</option>
                            <option value="Brunei">Brunei</option>
                            <option value="Bulgarie">Bulgarie</option>
                            <option value="Burkina Faso">Burkina Faso</option>
                            <option value="Burundi">Burundi</option>
                            <option value="Cambodge">Cambodge</option>
                            <option value="Cameroun">Cameroun</option>
                            <option value="Canada">Canada</option>
                            <option value="Cap-Vert">Cap-Vert</option>
                            <option value="Chili">Chili</option>
                            <option value="Chine">Chine</option>
                            <option value="Chypre">Chypre</option>
                            <option value="Colombie">Colombie</option>
                            <option value="Comores">Comores</option>
                            <option value="Congo">Congo</option>
                            <option value="Congo (Rép. dém.)">Congo (Rép. dém.)</option>
                            <option value="Corée du Nord">Corée du Nord</option>
                            <option value="Corée du Sud">Corée du Sud</option>
                            <option value="Costa Rica">Costa Rica</option>
                            <option value="Côte d'Ivoire">Côte d'Ivoire</option>
                            <option value="Croatie">Croatie</option>
                            <option value="Cuba">Cuba</option>
                            <option value="Danemark">Danemark</option>
                            <option value="Djibouti">Djibouti</option>
                            <option value="Dominique">Dominique</option>
                            <option value="Égypte">Égypte</option>
                            <option value="Émirats arabes unis">Émirats arabes unis</option>
                            <option value="Équateur">Équateur</option>
                            <option value="Érythrée">Érythrée</option>
                            <option value="Espagne">Espagne</option>
                            <option value="Estonie">Estonie</option>
                            <option value="États-Unis">États-Unis</option>
                            <option value="Éthiopie">Éthiopie</option>
                            <option value="Fidji">Fidji</option>
                            <option value="Finlande">Finlande</option>
                            <option value="France">France</option>
                            <option value="Gabon">Gabon</option>
                            <option value="Gambie">Gambie</option>
                            <option value="Géorgie">Géorgie</option>
                            <option value="Ghana">Ghana</option>
                            <option value="Grèce">Grèce</option>
                            <option value="Grenade">Grenade</option>
                            <option value="Guatemala">Guatemala</option>
                            <option value="Guinée">Guinée</option>
                            <option value="Guinée-Bissau">Guinée-Bissau</option>
                            <option value="Guyana">Guyana</option>
                            <option value="Haïti">Haïti</option>
                            <option value="Honduras">Honduras</option>
                            <option value="Hongrie">Hongrie</option>
                            <option value="Inde">Inde</option>
                            <option value="Indonésie">Indonésie</option>
                            <option value="Irak">Irak</option>
                            <option value="Iran">Iran</option>
                            <option value="Irlande">Irlande</option>
                            <option value="Islande">Islande</option>
                            <option value="Israël">Israël</option>
                            <option value="Italie">Italie</option>
                            <option value="Jamaïque">Jamaïque</option>
                            <option value="Japon">Japon</option>
                            <option value="Jordanie">Jordanie</option>
                            <option value="Kazakhstan">Kazakhstan</option>
                            <option value="Kenya">Kenya</option>
                            <option value="Kirghizistan">Kirghizistan</option>
                            <option value="Kiribati">Kiribati</option>
                            <option value="Kosovo">Kosovo</option>
                            <option value="Koweït">Koweït</option>
                            <option value="Laos">Laos</option>
                            <option value="Lesotho">Lesotho</option>
                            <option value="Lettonie">Lettonie</option>
                            <option value="Liban">Liban</option>
                            <option value="Libéria">Libéria</option>
                            <option value="Libye">Libye</option>
                            <option value="Liechtenstein">Liechtenstein</option>
                            <option value="Lituanie">Lituanie</option>
                            <option value="Luxembourg">Luxembourg</option>
                            <option value="Madagascar">Madagascar</option>
                            <option value="Malaisie">Malaisie</option>
                            <option value="Malawi">Malawi</option>
                            <option value="Maldives">Maldives</option>
                            <option value="Mali">Mali</option>
                            <option value="Malte">Malte</option>
                            <option value="Maroc">Maroc</option>
                            <option value="Maurice">Maurice</option>
                            <option value="Mauritanie">Mauritanie</option>
                            <option value="Mexique">Mexique</option>
                            <option value="Micronésie">Micronésie</option>
                            <option value="Moldavie">Moldavie</option>
                            <option value="Monaco">Monaco</option>
                            <option value="Mongolie">Mongolie</option>
                            <option value="Monténégro">Monténégro</option>
                            <option value="Mozambique">Mozambique</option>
                            <option value="Namibie">Namibie</option>
                            <option value="Nauru">Nauru</option>
                            <option value="Népal">Népal</option>
                            <option value="Niger">Niger</option>
                            <option value="Nigeria">Nigeria</option>
                            <option value="Norvège">Norvège</option>
                            <option value="Nouvelle-Zélande">Nouvelle-Zélande</option>
                            <option value="Oman">Oman</option>
                            <option value="Ouganda">Ouganda</option>
                            <option value="Ouzbékistan">Ouzbékistan</option>
                            <option value="Pakistan">Pakistan</option>
                            <option value="Palaos">Palaos</option>
                            <option value="Panama">Panama</option>
                            <option value="Papouasie-Nouvelle-Guinée">Papouasie-Nouvelle-Guinée</option>
                            <option value="Paraguay">Paraguay</option>
                            <option value="Pays-Bas">Pays-Bas</option>
                            <option value="Philippines">Philippines</option>
                            <option value="Pologne">Pologne</option>
                            <option value="Portugal">Portugal</option>
                            <option value="Qatar">Qatar</option>
                            <option value="République centrafricaine">République centrafricaine</option>
                            <option value="République dominicaine">République dominicaine</option>
                            <option value="Roumanie">Roumanie</option>
                            <option value="Royaume-Uni">Royaume-Uni</option>
                            <option value="Russie">Russie</option>
                            <option value="Rwanda">Rwanda</option>
                            <option value="Salvador">Salvador</option>
                            <option value="Samoa">Samoa</option>
                            <option value="Sénégal">Sénégal</option>
                            <option value="Serbie">Serbie</option>
                            <option value="Seychelles">Seychelles</option>
                            <option value="Singapour">Singapour</option>
                            <option value="Slovaquie">Slovaquie</option>
                            <option value="Slovénie">Slovénie</option>
                            <option value="Somalie">Somalie</option>
                            <option value="Soudan">Soudan</option>
                            <option value="Sri Lanka">Sri Lanka</option>
                            <option value="Suède">Suède</option>
                            <option value="Suisse">Suisse</option>
                            <option value="Suriname">Suriname</option>
                            <option value="Syrie">Syrie</option>
                            <option value="Tadjikistan">Tadjikistan</option>
                            <option value="Tanzanie">Tanzanie</option>
                            <option value="Tchad">Tchad</option>
                            <option value="Thaïlande">Thaïlande</option>
                            <option value="Timor oriental">Timor oriental</option>
                            <option value="Togo">Togo</option>
                            <option value="Tonga">Tonga</option>
                            <option value="Trinité-et-Tobago">Trinité-et-Tobago</option>
                            <option value="Tunisie">Tunisie</option>
                            <option value="Turkménistan">Turkménistan</option>
                            <option value="Turquie">Turquie</option>
                            <option value="Tuvalu">Tuvalu</option>
                            <option value="Ukraine">Ukraine</option>
                            <option value="Uruguay">Uruguay</option>
                            <option value="Vanuatu">Vanuatu</option>
                            <option value="Vatican">Vatican</option>
                            <option value="Venezuela">Venezuela</option>
                            <option value="Vietnam">Vietnam</option>
                            <option value="Yémen">Yémen</option>
                            <option value="Zambie">Zambie</option>
                            <option value="Zimbabwe">Zimbabwe</option>
                        </select>
                    </div>
                </div>
                <div class="col-12">
                    <div>
                        <label for="hastitresejour" class="form-label">Cet employé a-t-il un titre de séjour ?</label>
                        <input class="form-check-input switch-control" data-field="hastitresejour" type="checkbox" role="switch" id="hastitresejour">
                    </div>
                </div>

                

                <div class="col-lg-6">
                  <div class="mb-3">
                        <label for="exampleInputtext" class="form-label">Rôle</label>
                        <div class="row py-2">
                            <div class="col-md-8">
                                {% for roleuser in roles %}
                                    <input class="form-check-input success mt-2" data-field="role" type="radio" name="role" id="role" value="{{roleuser.idtoken}}" required>
                                    <label class="form-check-label mt-2" for="success-radio">{{roleuser.nom}}</label>
                                    <br/>
                                {% endfor %}                                   
                            </div>
                        </div>
                  </div>                  
                </div>
                <div class="col-lg-6">
                    <div class="mb-3">
                      <label for="affectation" class="form-label">Affectation(s)</label>
                        <select
                            id="affectationSelect"
                            class="select2 form-control"
                            multiple="multiple"
                            style="height: 36px; width: 100%"
                            data-field="affectation" 
                            required
                        >

                            {% for hotel in hotels %}
                                <option value="{{hotel.token}}">{{hotel.nom}}</option>
                            {% endfor %}

                        </select>
                    </div>
                </div>
                
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-end mt-4 gap-6">
                        <button id="btnSave" type="button" class="btn btn-primary" data-form="newUser" data-btn="enregistrer" data-route="{{ path('employe_save_profile') }}">Enregistrer</button>
                    </div>
                </div>
                
            </div>
            </form>
        </div>
    </div>
</div>
 </div>                 
<script>
    
    // Récupérer les éléments du DOM
    const hastitresejourCheckbox = document.getElementById('hastitresejour');
    const titresejourContainer = document.getElementById('titresejour-container');
    const validitetitresejourContainer = document.getElementById('validitetitresejour-container');

    // Fonction pour afficher ou masquer les champs
    const toggleTitreSejourFields = () => {
        if (hastitresejourCheckbox.checked) {
            titresejourContainer.style.display = 'block';
            validitetitresejourContainer.style.display = 'block';
        } else {
            titresejourContainer.style.display = 'none';
            validitetitresejourContainer.style.display = 'none';
        }
    };

    // Ajouter un écouteur d'événement sur le checkbox
    hastitresejourCheckbox.addEventListener('change', toggleTitreSejourFields);

    // Initialisation : cacher les champs au chargement de la page si non cochés
    document.addEventListener('DOMContentLoaded', toggleTitreSejourFields);

    $(document).ready(function() {
        $(".select2").select2();
    });

    document.addEventListener('DOMContentLoaded', function () {
        const email = document.getElementById('email');
        const errorEmail = document.getElementById('email_error');
        const btnEnregistrer = document.getElementById('btnSave');

        function checkEmail() {
            const emailValue = email.value;

            if (emailValue.length > 0) {
                fetch('{{ path("check_email_user") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-TOKEN': '{{ csrf_token("check_email_user") }}'
                    },
                    body: new URLSearchParams({
                        email: emailValue,
                    })
                })
                .then(response => response.json())
                .then(data => {
                    let disableSubmit = false;

                    // Vérification du nom
                    if (data.emailExists) {
                        errorEmail.style.display = 'block';
                        email.classList.add('is-invalid');
                        disableSubmit = true;
                    } else {
                        errorEmail.style.display = 'none';
                        email.classList.remove('is-invalid');
                    }

                    // Désactiver le bouton si une erreur est présente
                    btnEnregistrer.disabled = disableSubmit;
                })
                .catch(error => console.error('Erreur lors de la vérification des chambres:', error));
            }
        }

        email.addEventListener('input', checkEmail);
    });

</script>
{% include 'partials/footer.html.twig' %}