{% extends 'reseau/main.html' %}

{% load static %}

{% load widget_tweaks %}

{% block content %}

<div class="container-md bg-secondary py-4 rounded">
    <div class="bg-white text-dark rounded pb-4">
        <!-- Header -->
        <div class="row py-4">
            <div class="col">
                <h2 class="text-center">Déclarer une mission</h2>
            </div>
        </div>

        <form action="" method="post">
            {% csrf_token %}

            <!-- 1. Etablissement et service -->
            <div class="row px-4">
                <div class="col">
                    <h6 class="text-start">1. Etablissement et service</h6>
                </div>
            </div>
            <div class="row px-4">
                <div class="col">
                    <!-- <select class="form-select" aria-label="Default select example">
                        <option selected>Etablissement</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select> -->
                    <!-- {{form.structure}} -->
                    <label for="startDate" class="mb-1">Etablissement</label>
                    {% render_field form.structure class="form-control" id="id_Etablissement"%}
                </div>
                <div class="col">
                    <!-- <label for="startDate" class="mb-1">Pôle</label>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>Pôle non spécifié</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select> -->
                    <label for="startDate" class="mb-1">Type</label>
                    {% render_field form.type class="form-control" id="id_Type" %}
                </div>
                <div class="col">
                    <!-- <select class="form-select" aria-label="Default select example">
                        <option selected>Service</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select> -->
                    <label for="startDate" class="mb-1">Service</label>
                    {% render_field form.service class="form-control" id="id_Service" %}
                </div>
            </div>
            <!-- 2. Date et horaires de la mission -->
            <div class="row px-4  mt-4">
                <div class="col">
                    <h6 class="text-start">2. Date et horaires de la mission</h6>
                </div>
            </div>
            <div class="row px-4">
                <div class="col">
                    <label for="startDate" class="mb-1">Date de Début</label>
                    <!-- <input id="startDate" class="form-control" type="date" /> -->

                    {% render_field form.startDate class="form-control" placeholder="YYYY-MM-DD HH:MM:SS" id="startDate"%}
                    <!-- {% render_field form.start class="form-control" placeholder="YYYY-MM-DD HH:MM:SS" id="startDate"%} -->
                </div>
                <div class="col">
                    <!-- <label for="codeHoraire" class="mb-1">Code horaire</label>
                    <select class="form-select" aria-label="Default select example" id="codeHoraire">
                        <option selected>Select ...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select> -->
                    <label for="finishDate" class="mb-1">Date de Fin</label>
                    <!-- <input id="startDate" class="form-control" type="date" /> -->
                    {% render_field form.finishDate class="form-control" id="finishDate"%}
                    <!-- {% render_field form.finish class="form-control" placeholder="YYYY-MM-DD HH:MM:SS" id="finishDate"%} -->

                    <!-- {% render_field form.finishTime class="form-control" type="time" step="900" id="finishTime"%} -->
                
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <label for="startHour" class="mb-1">Heure de Début</label>
                            <select name="startHour" class="form-select" aria-label="startHour" id="startHour">
                                <!-- <option selected>Open this select menu</option> -->
                                <option selected value="00:00">00:00</option>
                                <option value="00:30">00:30</option>
                                <option value="01:00">01:00</option>
                                <option value="01:30">01:30</option>
                                <option value="02:00">02:00</option>
                                <option value="02:30">02:30</option>
                                <option value="03:00">03:00</option>
                                <option value="03:30">03:30</option>
                                <option value="04:00">04:00</option>
                                <option value="04:30">04:30</option>
                                <option value="05:00">05:00</option>
                                <option value="05:30">05:30</option>
                                <option value="06:00">06:00</option>
                                <option value="06:30">06:30</option>
                                <option value="07:00">07:00</option>
                                <option value="07:30">07:30</option>
                                <option value="08:00">08:00</option>
                                <option value="08:30">08:30</option>
                                <option value="09:00">09:00</option>
                                <option value="09:30">09:30</option>
                                <option value="10:00">10:00</option>
                                <option value="10:30">10:30</option>
                                <option value="11:00">11:00</option>
                                <option value="11:30">11:30</option>
                                <option value="12:00">12:00</option>
                                <option value="12:30">12:30</option>
                                <option value="13:00">13:00</option>
                                <option value="13:30">13:30</option>
                                <option value="14:00">14:00</option>
                                <option value="14:30">14:30</option>
                                <option value="15:00">15:00</option>
                                <option value="15:30">15:30</option>
                                <option value="16:00">16:00</option>
                                <option value="16:30">16:30</option>
                                <option value="17:00">17:00</option>
                                <option value="17:30">17:30</option>
                                <option value="18:00">18:00</option>
                                <option value="18:30">18:30</option>
                                <option value="19:00">19:00</option>
                                <option value="19:30">19:30</option>
                                <option value="20:00">20:00</option>
                                <option value="20:30">20:30</option>
                                <option value="21:00">21:00</option>
                                <option value="21:30">21:30</option>
                                <option value="22:00">22:00</option>
                                <option value="22:30">22:30</option>
                                <option value="23:00">23:00</option>
                                <option value="23:30">23:30</option>
                              </select>
                        </div>
                        <div class="col">
                            <label for="endHour" class="mb-1">Heure de Début</label>
                            <select name="endHour" class="form-select" aria-label="endHour" id="endHour">
                                <!-- <option selected>Open this select menu</option> -->
                                <option selected value="00:00">00:00</option>
                                <option value="00:30">00:30</option>
                                <option value="01:00">01:00</option>
                                <option value="01:30">01:30</option>
                                <option value="02:00">02:00</option>
                                <option value="02:30">02:30</option>
                                <option value="03:00">03:00</option>
                                <option value="03:30">03:30</option>
                                <option value="04:00">04:00</option>
                                <option value="04:30">04:30</option>
                                <option value="05:00">05:00</option>
                                <option value="05:30">05:30</option>
                                <option value="06:00">06:00</option>
                                <option value="06:30">06:30</option>
                                <option value="07:00">07:00</option>
                                <option value="07:30">07:30</option>
                                <option value="08:00">08:00</option>
                                <option value="08:30">08:30</option>
                                <option value="09:00">09:00</option>
                                <option value="09:30">09:30</option>
                                <option value="10:00">10:00</option>
                                <option value="10:30">10:30</option>
                                <option value="11:00">11:00</option>
                                <option value="11:30">11:30</option>
                                <option value="12:00">12:00</option>
                                <option value="12:30">12:30</option>
                                <option value="13:00">13:00</option>
                                <option value="13:30">13:30</option>
                                <option value="14:00">14:00</option>
                                <option value="14:30">14:30</option>
                                <option value="15:00">15:00</option>
                                <option value="15:30">15:30</option>
                                <option value="16:00">16:00</option>
                                <option value="16:30">16:30</option>
                                <option value="17:00">17:00</option>
                                <option value="17:30">17:30</option>
                                <option value="18:00">18:00</option>
                                <option value="18:30">18:30</option>
                                <option value="19:00">19:00</option>
                                <option value="19:30">19:30</option>
                                <option value="20:00">20:00</option>
                                <option value="20:30">20:30</option>
                                <option value="21:00">21:00</option>
                                <option value="21:30">21:30</option>
                                <option value="22:00">22:00</option>
                                <option value="22:30">22:30</option>
                                <option value="23:00">23:00</option>
                                <option value="23:30">23:30</option>
                              </select>
                        </div>
                        <!-- <div class="col">
                            <label for="startHour" class="mb-1">Heure de Début</label>
                            <input id="startHour" class="form-control" type="time" step="9000" name="startHour" onchange="console.log('Yo!');"/>
                        </div>
                        <div class="col">
                            <label for="endHour" class="mb-1">Heure de Fin</label>
                            <input id="endHour" class="form-control" type="time" name="endHour" />
                        </div> -->
                    </div>
                    <small id="workedHourDuration" class="text-danger">Durée effectivement travaillée : <span id="deltaHours"></span>h<span id="deltaMinutes"></span></small>
                </div>
            </div>
            <!-- <div class="row px-4 text-danger">
                <p class="ms-2"><i class="bi bi-plus-circle-fill"></i> Ajouter un jour</p>
            </div> -->
            <!-- <i class="bi bi-plus-circle-fill"></i> -->

            <!-- 3. Profil recherché -->
            <div class="row px-4  mt-4">
                <div class="col">
                    <h6 class="text-start">3. Profil recherché</h6>
                </div>
            </div>
            <div class="row px-4  mt-2">
                <div class="col col-lg-6">
                    <!-- <select class="form-select" aria-label="Default select example">
                        <option selected>Métier</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select> -->                  
                    {% render_field form.profil class="form-control" id="id_ProfilRecherche"%}
                </div>
            </div>

            <!-- 4. Motif (non visible par les remplacants) -->
            <div class="row px-4  mt-4">
                <div class="col">
                    <h6 class="text-start">4. Motif (non visible par les remplaçants)</h6>
                </div>
            </div>
            <div class="row px-4  mt-2">
                <div class="col col-lg-6">
                    <!-- <select class="form-select" aria-label="Default select example">
                        <option selected>Sélectionner</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select> -->
                    {% render_field form.motif class="form-control" id="id_Motif" %}
                </div>
            </div>

            <!-- 5. Remplacant selectionne -->
            <div class="row px-4  mt-4">
                <div class="col">
                    <h6 class="text-start">5. Remplaçant selectionné</h6>
                </div>
            </div>
            <div class="row px-4  mt-2">
                <div class="col col-lg-6">
                    <!-- <select class="form-select" aria-label="Default select example">
                        <option selected>Taper le nom du remplaçant</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select> -->
                    {% render_field form.worker class="form-control" id="id_RemplacantSelectionne" %}
                </div>

                <!-- <div class="col col-lg-6 d-flex align-items-center text-danger">
                    <i class="bi bi-info-circle-fill"></i><span class="ms-2">Aide</span>
                </div> -->
                
            </div>

            <!-- 6. Détails -->
            <!-- <div class="row px-4  mt-4">
                <div class="col">
                    <h6 class="text-start">6. Détails</h6>
                </div>
            </div>
            <div class="form-floating mx-4 mb-3">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
                <label for="floatingTextarea2">Indiquer ici tout détail important à transmettre aux remplaçants, si vous le souhaitez</label>
            </div> -->

            <!-- Bouton : Apercu avant creation -->
            <div class="d-grid  mx-auto px-4 pb-2 mt-4">
                <button class="btn btn-primary" type="submit">Déclarer la mission</button>
            </div> 
        </form>       
        <div class="d-grid  mx-auto px-4 pb-2 ">
            <a class="btn btn-outline-info" href="{{request.META.HTTP_REFERER}}">Retour</a>
        </div>        
        
        <!-- <div class="p-4">        
            <form method="post" novalidate>
                {% csrf_token %}

                {% for hidden_field in form.hidden_fields %}
                    {{ hidden_field }}
                {% endfor %}

                {% for field in form.visible_fields %}
                <div class="form-group">
                {{ field.label_tag }}
                {% render_field field class="form-control" %}
                {% if field.help_text %}
                    <small class="form-text text-muted">{{ field.help_text }}</small>
                {% endif %}
                </div>
                {% endfor %}

                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div> -->
    </div>
</div>

<!-- ******************* TEST ********************** -->


{% endblock content %}

{% block js_clock %} 
    <script src="{% static 'js/mission-declare.js' %}"></script>
    <script>
        // In your Javascript (external .js resource or <script> tag)
            $(document).ready(function() {
                // $('.js-example-basic-single').select2();
                $('#id_Etablissement').select2();
            });

            $(document).ready(function() {
                // $('.js-example-basic-single').select2();
                $('#id_Service').select2();
            });

            $(document).ready(function() {
                $('#id_Type').select2();
            });

            $(document).ready(function() {
                $('#id_ProfilRecherche').select2();
            });
            $(document).ready(function() {
                $('#id_Motif').select2();
            });
            $(document).ready(function() {
                $('#id_RemplacantSelectionne').select2();
            });
        </script>
{% endblock %}