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

{% block title %}displayClaims{% endblock %}

{% block body %}

    {% include '/loader/loader.html.twig' %}
    <div id="mission" class="container-fluid Page">
        {% include '/mission/top_menu.html.twig' %}
        <div class="container-fluid" id="detailsMissionPage">
            {% include '/mission/details/top_menu.html.twig' %}
            {% for message in app.flashes('success') %}
                <div class="alert alert-success">
                    {{ message }}
                </div>
            {% endfor %}
            {% for message in app.flashes('warning') %}
                <div class="alert alert-warning">
                    {{ message }}
                </div>
            {% endfor %}
            <div class="outil-space center-vertical-no-height">
                <button id="assign" class="btn btn-primary height-80-per ml-auto mr-0 float-right" onclick="downloadDevis()">Importer</button>
            </div>
            <div class="detailsMissionItem Black p-0" id="quote">
                <div class="container-fluid h-100">
                    <div class="row h-100">
                        <div class="col-2" id="detailsMissionTab3">
                            <div class="nav flex-column nav-pills" id="v-pills-tab2" role="tablist"
                                 aria-orientation="vertical">
                                {% set newArray = [] %}
                                {% for assign in mission.assignment %}
                                    {% if assign.agency.id not in newArray %}
                                        <a class="nav-link {{ loop.first == true ? "active" : "" }}"
                                           id="assign{{ assign.id }}-tab" data-toggle="tab"
                                           href="#assign{{ assign.id }}" role="tab"
                                           aria-controls="assign{{ assign.id }}"
                                           aria-selected="false">{{ assign.agency.company.name }}</a>
                                        {% set newArray = newArray|merge([assign.agency.id]) %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-10">
                            <div class="tab-content h-100" id="v-pills-tabContent2">
                                {% for assign in mission.assignment %}
                                    <div class="container-fluid tools tab-pane fade {{ loop.first == true ? "show active" : "" }}"
                                         id="assign{{ assign.id }}" role="tabpanel">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="Size-2 Bold mt-2 mb-2">Devis de la mission
                                                    <button class="btn btn-primary float-right" id="btnSave"
                                                            onclick="addDevis('{{ assign.agency.id }}')">Ajouter un
                                                        devis
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            {% if assign.agency.missionQuotes|length == 0 %}
                                                <div class="Size-3 p-2">Aucun devis n'a été ajouté pour le moment.</div>
                                            {% endif %}
                                            {% for quote in assign.agency.missionQuotes %}
                                                <a class="col-lg-3 col-md-6 col-sm-12 Black" id="{{ quote.id }}"
                                                   href="{{ path('quote', { id: quote.id }) }}">
                                                    <div class="card">
                                                        <div class="p-0 m-0 card-img-overlay d-flex justify-content-between flex-column">
                                                            <div class="overlay-content h-100">
                                                                <div class="height-10-per border-bottom-black {{ quote.state|replace({' ': ''}) }}">
                                                                    <div class="center-vertical text-center White h-100">{{ quote.state }}</div>
                                                                </div>
                                                                <div class="height-80-per p-1">
                                                                    <div class="Size-2 Bold text-center height-40-per center-vertical">{{ quote.type }}</div>
                                                                    <div class="Size-3 text-center height-30-per center-vertical">{{ quote.price ~ " €" }}</div>
                                                                    <div class="text-center height-30-per center-vertical">
                                                                        Soumis
                                                                        le {{ quote.addedAt|date('d/m/Y') }}</div>
                                                                </div>
                                                                <div class="height-10-per position-absolute position-bottom-0 border-top-black w-100"
                                                                     style="background: whitesmoke">
                                                                    <div class="center-vertical px-2">{{ quote.initial == true ? "Devis Initial" : "Devis révisé" }}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog" title="Ajout de devis" class="jquery_dialog">
        {{ form_start(form) }}
        <label for="selectIntervention">Intervention Concernée</label>
        <select id="selectIntervention" class="form-control select2">
        </select>
        {{ form_row(form.type) }}
        <div class="mt-1 mb-1"></div>
        {{ form_label(form.price) }}
        <fieldset class="form-group position-relative">
            {{ form_widget(form.price) }}
            <div class="form-control-position">
                <i class="fa fa-euro-sign"></i>
            </div>
        </fieldset>
        <div class="mt-1 mb-1"></div>
        <div class="text-center">
            {{ form_row(form.file) }}
            <pre id="filelist" style="display:none;"></pre>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block javascripts %}

    <script>

        document.getElementById('mission_devis_file').addEventListener('change', function (e) {
            var list = document.getElementById('filelist');
            list.innerHTML = '';
            for (var i = 0; i < this.files.length; i++) {
                list.innerHTML += (i + 1) + '. ' + this.files[i].name + '\n';
            }
            if (list.innerHTML == '') list.style.display = 'none';
            else list.style.display = 'block';
        });

        function displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("mission").style.display = "block";
        }

        function downloadDevis()
        {
            $.ajax({
                method: "POST",
                url: "{{ path('pdf') }}",
                success: function (responses) {

                }
            });
        }

        function addDevis(id) {
            let selectedAgency = id;
            $("#selectIntervention").find("option").remove().end()
            {% for assign in mission.assignment %}
            if ("{{ assign.agency.id }}" === id)
                $("#selectIntervention").append(new Option("{{ assign.type }}"))
            {% endfor %}
            $("#mission_devis_id").val(id);
            $("#dialog").css("display", "block");
            $("#dialog").dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "Ajouter": function () {
                        $("#mission_devis_type").val($("#selectIntervention option:selected").text());
                        $('form').submit();
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        $(document).ready(function () {
            $("#document").html("<i class='fa fa-upload'/>Ajouter un document")
            displayOn();
        });
    </script>

{% endblock %}