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

{% load static %}

{% load widget_tweaks %}

{% block css_block %} 
    <link rel="stylesheet" href="{% static 'css/mission-create-filter-metier-searchbar.css' %}">  
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
{% endblock %}

{% block content %}

<div class="mx-4">
    <form action="" method="post">
        {% csrf_token %}

        

        <!-- <p class="mb-1">{{form.referenceNumber.label}}</p> -->
        <!-- <p class="mb-1">Numéro de référence : </p>
        <p>{{form.referenceNumber}}</p>  -->
        
        <!-- <p class="mb-1">{{form.available.label}} : {{form.available}}</p> -->
        <!-- <p>{{form.available}}</p>  -->

        <!-- testForm.birth_year 
        testForm.favorite_colors  -->
        
        <!-- <p class="mb-1">{{testForm.birth_year.label }}</p>
        <p>{{testForm.birth_year }}</p> 

        <div class="mb-3">
            {% for element in testForm.favorite_colors %}
            <div class="">
                {{ element }}
            </div>
            {% endfor %}
        </div> -->


        <!-- <p class="mb-1">{{form.type.label}}</p>
        <p>{{form.type}}</p>  -->

        <!-- TYPE MISSION -->
        <div class="row  mb-3">
            <div class="col col-lg-6">            
                <label for="id_Type" class="mb-1">Type</label>    
                {% render_field form.type class="form-control" id="id_Type"%}
            </div>
        </div>  


        <!-- ////////////////////////////////////////////////////// -->

        <div class="mb-3">
            {% for radio in form.isExpress %}
            <div class="myradio">
                {{ radio }}
            </div>
            {% endfor %}
        </div>



        <!-- ////////////////////////////////////////////////////// -->

        <!-- <p class="mb-1">{{form.structure.label}}</p>
        <p>{{form.structure}}</p>  -->

        <!-- STRUCTURE -->
        <div class="row  mb-3">
            <div class="col col-lg-6">            
                <label for="id_Structure" class="mb-1">Structure</label>    
                {% render_field form.structure class="form-control" id="id_Structure"%}
            </div>
        </div>   

        <!-- <p class="mb-1">{{form.service.label}}</p>
        <p>{{form.service}}</p>  -->

        <!-- SERVICE -->
        <div class="row  mb-3">
            <div class="col col-lg-6">            
                <label for="id_Service" class="mb-1">Service</label>    
                {% render_field form.service class="form-control" id="id_Service"%}
            </div>
        </div>        

        <!-- <p class="mb-1">{{form.start.label}}</p> -->

        <!-- START DIV -->
        <div class="row mb-3">
            
            <!-- Start date -->
            <div class="col-3">
                <!-- <p class="mb-1">Début</p>
                <p>{{form.startDate}}  -->
                <div class="">            
                    <label for="id_startDate" class="mb-1">Début</label>    
                    {% render_field form.startDate class="form-control" id="id_startDate"%}
                </div>
            </div>

            

            <!-- Start time -->
            <div class="col-3">
                <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>

        <!-- FINISH DIV -->
        <div class="row  mb-3">

            <!-- Start date -->
            <div class="col-3">
                <!-- <p class="mb-1">Fin</p>
                <p>{{form.finishDate}}  -->
                <div class="">
                    <!-- <p class="mb-1">Début</p>
                    <p>{{form.startDate}}  -->
                             
                    <label for="id_finishDate" class="mb-1">Fin</label>    
                    {% render_field form.finishDate class="form-control" id="id_finishDate"%}
                
                </div>
            </div>
            <!-- Start time -->
            <div class="col-3">
                <label for="endHour" class="mb-1">Heure de Fin</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>

        <!-- <p class="mb-1">{{form.finish.label}}</p> -->
        <!-- <p class="mb-1">Fin</p>
        <p>{{form.finishDate}}</p>  -->

        <!-- METIER -->
        <div class="row  mb-3">
            <div class="col col-lg-6">            
                <label for="id_Metier" class="mb-1">Profil</label>    
                {% render_field form.profil class="form-control" id="id_Metier"%}
            </div>
        </div>

        <!-- Select Dropdown with Search Bar -->
        <!-- <div class="wrapper">
            <div class="select-btn">
              <span>Choisir un métier</span>
              <i class="uil uil-angle-down"></i>
            </div>
            <div class="content">
              <div class="search">
                <i class="uil uil-search"></i>
                <input name="myProfil" spellcheck="false" type="text" placeholder="Rechercher">
              </div>
              <ul class="options"></ul>
            </div>
          </div> -->

        <!-- <p class="mb-1">{{form.motif.label}}</p>
        <p>{{form.motif}}</p>  -->


        <div class="row  mb-3">
            <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> -->              
                <label for="id_Motif" class="mb-1">Motif</label>    
                {% render_field form.motif class="form-control" id="id_Motif"%}
            </div>
        </div>

        <!-- <p class="mb-1">{{form.replacedFirstName.label}}</p> -->
        <!-- <p class="mb-1">Nom de la personne à remplacer</p>
        <p>{{form.replacedFirstName}}</p>  -->

        <!-- NOM REMPLACE -->
        <div class="col-6 mb-3">
            <!-- <p class="mb-1">Début</p>
            <p>{{form.startDate}}  -->
            <div class="">            
                <label for="id_replacedFirstName" class="mb-1">Nom de la personne à remplacer</label>    
                {% render_field form.replacedFirstName class="form-control" id="id_replacedFirstName"%}
            </div>
        </div>

        <!-- <p class="mb-1">{{form.replacedLastName.label}}</p> -->
        <!-- <p class="mb-1">Prénom de la personne à remplacer</p>
        <p>{{form.replacedLastName}}</p>  -->

        <!-- PRENOM REMPLACE -->
        <div class="col-6 mb-3">
            <!-- <p class="mb-1">Début</p>
            <p>{{form.startDate}}  -->
            <div class="">            
                <label for="id_replacedLastName" class="mb-1">Prénom de la personne à remplacer</label>    
                {% render_field form.replacedLastName class="form-control" id="id_replacedLastName"%}
            </div>
        </div>



        <!-- <p class="mb-1">{{form.worker.label}}</p> -->
        <!-- <p class="mb-1">Remplaçant</p>
        <p>{{form.worker}}</p>  -->

        <!-- <p class="mb-1">{{form.candidates.label}}</p> -->
        <!-- <p class="mb-1">Candidat(e)s</p>
        <p>{{form.candidates}}</p>  -->

        <!-- <p class="mb-1">{{form.administrator.label}}</p> -->
        <!-- <p class="mb-1">Gestionnaire</p>
        <p>{{form.administrator}}</p>  -->

        <!-- <p class="mb-1">{{form.isCancelled.label}} : {{form.isCancelled}}</p> -->
        <!-- <p class="mb-1">Annuler la mission : {{form.isCancelled}}</p> -->


        <!-- Raw form  -->
        <!-- {{form}}  -->

        <!-- Wrapp a p tag around any input filed the form has -->
        <!-- {{form.as_p}} -->
        <div class="">
            <a class="btn btn-outline-info  align-middle" href="{{request.META.HTTP_REFERER}}">Retour</a>
            <input class="btn btn-info align-middle" type="submit" value="Envoyer l'offre">
        </div>
            
    </form>
</div>

{% endblock content %}

{% block js_clock %} 
    <script src="{% static 'js/mission-create.js' %}"></script>
    <script src="{% static 'js/mission-create-filter-metier-searchbar.js' %}"></script>

    <script>
        $(document).ready(function() {
            // $('.js-example-basic-single').select2();
            $('#id_Type').select2({
                theme: "bootstrap-5",
                placeholder: "Choisir le type de mission",
                allowClear: true
            });
        });
        $(document).ready(function() {
            // $('.js-example-basic-single').select2();
            $('#id_Structure').select2({
                theme: "bootstrap-5",
                placeholder: "Choisir l'établissement",
                allowClear: true
            });
        });
        $(document).ready(function() {
            // $('.js-example-basic-single').select2();
            $('#id_Service').select2({
                theme: "bootstrap-5",
                placeholder: "Choisir le service",
                allowClear: true
            });
        });
        $(document).ready(function() {
            // $('.js-example-basic-single').select2();
            $('#id_Metier').select2({
                theme: "bootstrap-5",
                placeholder: "Choisir le profil",
                allowClear: true
            });
        });
        $(document).ready(function() {
            // $('.js-example-basic-single').select2();
            $('#id_Motif').select2({
                theme: "bootstrap-5",
                placeholder: "Choisir le motif de remplacement",
                allowClear: true
            });
        });
    </script>
{% endblock %}