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

{% block stylesheets %}
    <link rel="stylesheet" href="/css/intervention.css">
{% endblock %}

{% block body %}

    <datalist id="client">
        {% for client in clients %}
            <option value="{{ client }}">{{ client }}</option>
        {% endfor %}
    </datalist>


    <div class="absolute ">

        <div class="banner-container">


        </div>


        {{ form_start(form) }}

        {{ form_row(form.date) }}
        <div>
            <label for="client">Client :</label>
            <input type="text" name='client' id="input_client" class="form-control" autocomplete="off"
                   required="required"
                   list="client" {% if client is defined %} value="{{ client }}" readonly {% elseif client is defined %} value="{{ client }}" readonly {% endif %}>

        </div>


        {{ form_row(form.description) }}

        <div class="m-3 d-flex flex-column">

            <div><input type="radio" name="type" value="direct"
                        id="direct" {% if intervention is defined and intervention.type=='direct' %} checked {% endif %}>
                <label for="direct">Intervention direct</label>
            </div>

            <div><input type="radio" name="type" value="diagnostique_sur_place"
                        id="diagnostique_sur_place" {% if intervention is defined and intervention.type=='diagnostique_sur_place' %} checked {% endif %}>
                <label for="diagnostique_sur_place">Diagnostique sur place</label>
            </div>
            <div><input type="radio" name="type" value="retour_atelier"
                        id="retour_atelier" {% if intervention is defined and intervention.type=='retour_atelier' %} checked {% endif %}>
                <label for="retour_atelier">Retour Atelier</label>
            </div>
        </div>

        <div id="reparation_infos" {% if intervention is defined and intervention.type == 'retour_atelier' %} class="show" {% endif %}>

            <fieldset>
                <legend>Equipements :</legend>


                <div>
                    <label for="equipement_1">Equipement 1 :</label>
                    <input type="text" name="equipement_1"
                           class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{ intervention.reparation.materiel }}" {% endif %}>
                </div>
                <div>
                    <label for="equipement_1">Equipement 2 :</label>
                    <input type="text" name="equipement_2"
                           class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{ intervention.reparation.getEquipement2 }}" {% endif %}>
                </div>
                <div>
                    <label for="equipement_1">Equipement 3 :</label>
                    <input type="text" name="equipement_3"
                           class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{ intervention.reparation.getEquipement3 }}" {% endif %}>
                </div>
                <div>
                    <label for="equipement_1">Equipement 4 :</label>
                    <input type="text" name="equipement_4"
                           class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{ intervention.reparation.getEquipement4 }}" {% endif %}>
                </div>
                <div class="d-flex justify-content-between">
                    <div>
                        <label for="casier">Casier :</label>
                        <input type="text" name="casier"
                               class="form-control" {% if intervention is defined and intervention.reparation != null %} value="{{ intervention.reparation.casier }}" {% endif %}>

                    </div>
                    {% if intervention is defined  and intervention.reparation is not null %}
                        {% set lockinfo = intervention.reparation.getLockInfo() %}
                    {% else %}
                        {% set lockinfo = "" %}

                    {% endif %}
                    <div>
                        <label for="lockInfos">Informations de verouillage :</label>
                        <textarea type="text" name="lockInfos" class="form-control" rows="3"
                                  cols="50">{{ lockinfo | trim }}</textarea>
                    </div>
                </div>
            </fieldset>
            <hr>

            <div class="my-3">
                <label for="livraison">Livraison :</label>
                <input type="radio" name="livraison" value="oui"
                       id="livraison_oui" {% if intervention is defined and intervention.reparation != null and intervention.reparation.livraison %} checked {% endif %}>
                <label for="livraison_oui">Oui</label>
                <input type="radio" name="livraison" value="non"
                       id="livraison_non" {% if intervention is defined and intervention.reparation != null and not intervention.reparation.livraison %} checked {% endif %}>
                <label for="livraison_non">Non</label>

            </div>
            <hr>

            <div>
                <fieldset>
                    <legend>Problèmes</legend>
                    <div class="d-flex">
                        <select name="problèmes" id="select_problemes" class="form-select w-50">
                            {% for item in problemes %}
                                <option value="{{ item.id }}">{{ item }}</option>
                            {% endfor %}
                        </select>
                        <button type="button" class="btn btn-success mx-3"
                                onclick="addPbToList('{{ path('reparation.template') }}')"><img src="/img/check.svg"
                                                                                                alt="check" width="30">
                        </button>
                        <button type="button" class="btn btn-success" data-bs-toggle="modal"
                                data-bs-target="#createProblemeModal"><img src="/img/plus.svg" alt="plus" width="30">
                        </button>
                    </div>

                    <div class="probleme_list container my-1">
                        {% if intervention is defined and intervention.reparation != null %}
                            {% for pb in intervention.reparation.getProblemes() %}
                                {% include "reparations/templates/problemeLine.html.twig" with {value : pb.getDescription()} %}
                            {% endfor %}
                        {% endif %}
                    </div>
                </fieldset>
            </div>
            <hr>
            <div class="d-flex flex-column">
                {% set textareaValue = "" %}
                {% if intervention is defined and intervention.reparation != null %}
                    {% set textareaValue = intervention.reparation.getInfosSup | trim %}
                {% endif %}
                <label for="infos_sup">Informations Supplémentaires</label>
                <textarea name="infos_sup" id="infos_sup" cols="30" rows="10"
                          class="form-control">{{ textareaValue }}</textarea>
            </div>
        </div>

        <div class="my-3 d-flex align-items-center">
            {{ form_row(form.distance) }}

            {{ form_row(form.heure) }}


        </div>
        <div>
            {{ form_row(form.images) }}
            {% if intervention is defined %}
                <div class="d-flex my-3">
                    {% for item in intervention.getImages() %}

                        <div class="d-flex flex-column align-items-center justify-items-center" id="{{ item }}">
                            <a href="/img/reparation/{{ item }}" target="_blank">
                                <img src="/img/reparation/{{ item }}" alt="image" height="100">
                            </a>

                            <div class="d-flex my-3 justify-content-center align-content-center">
                                <div>
                                    <button class="btn btn-danger mx-3 " type="button"
                                            onclick="removeImg('{{ path('intervention.remove.img') }}','{{ intervention.id }}','{{ item }}')">
                                        <img src="/img/trash.svg" alt="delete" width="20"></button>
                                </div>
                                <div>
                                    <a href="/img/reparation/{{ item }}" target="_blank">
                                        <img src="/img/eye.svg" alt="voir" width="30">
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

            {% endif %}
        </div>

        <div class="d-flex my-3">
            <a href="{{ path('intervention',{submenu :'all'}) }}" class="btn btn-danger">Annuler</a>
            <button type="submit" class="btn btn-success mx-3">
                {% if intervention is defined %}
                    Modifier
                {% else %}

                    Créer
                {% endif %}
            </button>
        </div>
        {{ form_end(form) }}


    </div>

    <!-- Modal Create Probleme-->
    <div class="modal fade" id="createProblemeModal" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Creer un probleme</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <label for="description">Description :</label>
                    <input type="text" id="descrCreatePb" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-success" data-bs-dismiss="modal"
                            onclick="createPb('{{ path('reparation.create.pb') }}')">Créer
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src='/js/intervention.js'></script>
    <script>
        document.getElementById('input_client').addEventListener('input', (e) => {


            $.ajax({
                method: "POST",
                url: "{{ path('client.get.banner') }}",
                data: {
                    ref: e.target.value,
                    align : 'text-start'
                },
                success: function (data) {
                $('.banner-container').html(data);

                }
            });
        });

        function getTxHeure() {

        }

        function getTarifKm() {

        }
    </script>

{% endblock %}