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

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

{% block body %}

    <div id="loader">
        <div class="loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="mission" class="container-fluid Page">
        {% include '/mission/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="container-fluid" id="detailsMissionPage">
            {% include '/mission/details/top_menu.html.twig' %}

            <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="AssignCompany()">AFFECTER</button>
            </div>
            <div id="following" class="detailsMissionItem content-page">
                <div class="container-fluid progress-bar-item">
                    <div class="row">
                        {% set max = mission.getTimelineAuto|length %}
                        {% set timelines = mission.getTimelineAuto %}
                        <div class="col-2 subtitle align-self-center">
                            Progression Mission
                        </div>
                        <div class="col-10">
                            <div class="wrap mb-3">
                                <div class="links">
                                    {% for item in timelines %}
                                        {% if loop.index % 2 != 0 %}
                                            <div class="progress-bar-action"
                                                 style="left: 0; margin-right: 10%">
                                                <span class="center-vertical font-small-1">{{ item.shortDescription }}</span>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: calc({{ max }} * 10%)" role="progressbar"
                                     aria-valuenow="20" aria-valuemin="0"
                                     aria-valuemax="100">{{ max * 10 }}%
                                </div>
                            </div>
                            <div class="wrap mt-1">
                                <div class="links">
                                    {% for item in timelines %}
                                        {% if loop.index % 2 == 0 %}
                                            <div class="progress-bar-action"
                                                 style="left: 10%; margin-right: 10%">
                                                <span class="center-vertical font-small-1">{{ item.shortDescription }}</span>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-2"></div>
                        <div class="col-10">
                            <div class="wrap">
                                {% set lastTL = null %}
                                <div class="links">
                                    <hr>
                                    {% for item in timelines %}
                                        {% if lastTL == null or item.realizedAt|date("d/m/Y") != lastTL %}
                                            <div class="progress-bar-time"
                                                 style="margin-right: 0.5%">
                                                    <span class="center-vertical font-small-1"
                                                          style="height: 2rem !important;">{{ item.realizedAt|date("d/m/Y") }}</span>
                                            </div>
                                        {% endif %}
                                        {% set lastTL = item.realizedAt|date("d/m/Y") %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-2 subtitle">
                            Progression Chantier
                        </div>
                        <div class="col-10">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                     aria-valuemax="100" style="width: 80%"></div>
                            </div>
                            <div class="wrap">
                                <div class="links">
                                    {% for i in range(1, max) %}
                                        <div class="progress-bar-action"
                                             style="margin-right: calc(((100% / {{ max }}) - 6vw))">
                                            <span class="center-vertical">Action</span>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% if mission.assignment | length > 0 %}
                    <div class="container-fluid">
                        <hr style="border-top: 1px solid black">
                        <div class="row">
                            <div class="col-9 title">
                                Interventions
                            </div>
                        </div>
                        <div class="row">
                            {% for assignment in mission.assignment %}
                                <div id="accordion" class="mr-auto ml-auto" style="width: 95%">
                                    <div class="card">
                                        <div class="card-header" id="headingOne">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link w-100" data-toggle="collapse"
                                                        data-target="#collapse{{ assignment.id }}"
                                                        aria-expanded="true"
                                                        aria-controls="collapse{{ assignment.id }}">
                                                    <div class="row">
                                                        <div class="col-2 center-vertical">
                                                            <div class="col-12">
                                                                {% if assignment.agency.company.logo == null %}
                                                                    <div class="avatar m-0 mr-50">
                                                                        <div class="avatar-content">
                                                                            <div class="Size-4">
                                                                                {% if ' ' in assignment.agency.company.name %}
                                                                                    {{ assignment.agency.company.name|split(' ')[0]|first }}
                                                                                    {{ assignment.agency.company.name|split(' ')[1]|first }}
                                                                                {% else %}
                                                                                    {{ assignment.agency.company.name|first }}
                                                                                {% endif %}
                                                                            </div>
                                                                        </div>
                                                                        <!--span class="avatar-status-busy"></span-->
                                                                    </div>
                                                                {% else %}
                                                                    <img src="{{ '/' ~  assignment.agency.company.logo.path ~ assignment.agency.company.logo.filename }}"
                                                                         style="height: 100%; width: 100%"/>
                                                                {% endif %}
                                                            </div>
                                                            <div class="col-12 text-mission-summary text-bold-300">
                                                                <a onclick="window.location.replace('{{ path('agency_details', { id: assignment.agency.id }) }}')">
                                                                    {{ assignment.agency.company.name }}
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <div class="col-3 center-vertical">
                                                            <div class="col-12 subtitle">Type d'intervention :</div>
                                                            <div class="col-12 text-mission-summary text-bold-300">{{ assignment.type }}</div>
                                                        </div>
                                                        <div class="col-2 center-vertical">
                                                            <div class="col-12 subtitle">Corps de métiers :</div>
                                                            <div class="col-12 text-mission-summary text-bold-300">
                                                                {% for item in assignment.activity %}
                                                                    {{ item.name }}
                                                                    {{ not loop.last ? ',' }}
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                        <div class="col-2 center-vertical">
                                                            <div class="col-12 subtitle">Etape en cours:</div>
                                                            <div class="col-12 text-mission-summary text-bold-300">
                                                                {{ assignment.step }}
                                                            </div>
                                                        </div>
                                                        <div class="col-2 center-vertical">
                                                            <div class="col-12 subtitle">Statut:</div>
                                                            <div class="col-12 text-mission-summary text-bold-300">
                                                                {{ assignment.statut }}
                                                            </div>
                                                        </div>
                                                        {% if me.roles()[0] == "ROLE_SYMA" or me.roles()[0] == "ROLE_SUPERADMIN" %}
                                                        <div class="col-1 center-vertical">
                                                            <div class="dropdown">
                                                                <span class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu"></span>
                                                                <div class="dropdown-menu dropdown-menu-right" style="">
                                                                    <a class="dropdown-item cursor-pointer" onclick="deleteAssignment('{{ assignment.id }}')"><i class="bx bx-trash mr-1"></i> supprimer</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        {% endif %}
                                                    </div>
                                                </button>
                                            </h5>
                                        </div>

                                        <div id="collapse{{ assignment.id }}" class="collapse pb-2"
                                             aria-labelledby="headingOne" data-parent="#accordion">
                                            <div class="row">
                                                <div class="col-2 subtitle">
                                                </div>
                                                <div class="col-10">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar"
                                                             aria-valuenow="20" aria-valuemin="0"
                                                             aria-valuemax="100" style="width: 80%"></div>
                                                    </div>
                                                    <div class="wrap">
                                                        <div class="links">
                                                            {% for i in range(1, max) %}
                                                                <div class="progress-bar-action"
                                                                     style="margin-right: calc(((100% / {{ max }}) - 6vw))">
                                                                    <span class="center-vertical">Action</span>
                                                                </div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        <div id="dialogAssign" title="Assigner une entreprise" class="jquery_dialog">
            <select id="SelectType" class="select select2 custom-select"
                    aria-label="Default select example">
                <option selected disabled>Selectionnez le type d'intervention?</option>
                <option>Urgence</option>
                <option>Prévention</option>
                <option>Mesures conservatoire</option>
                <option>Remise en etat</option>
                <option>Renovation</option>
            </select>
        </div>
        <div id="dialogDelete" title="Suppression d'une intervention" class="jquery_dialog">
            <div>Êtes-vous sûr de vouloir supprimer cette intervention ?</div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script>
        function AssignCompany()
        {
            $("#dialogAssign").css("display", "block");
            $("#dialogAssign").dialog({
                resizable: false,
                modal: true,
                width: "fit-content",
                buttons: {
                    "Rechercher": function () {
                        displayOff();
                        $.ajax({
                            method: "POST",
                            url: "{{ path("storeMission", { id: mission.id }) }}",
                            data: {
                                type: $("#SelectType option:selected").text(),
                                postcode: "{{ mission.sinister.place.postcode }}".slice(0, 2)
                            },
                            success: function (responses) {
                                window.location.replace("{{ path("searchCompanies") }}");
                            },
                        });
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        function deleteAssignment(id)
        {
            $("#dialogDelete").css("display", "block");
            $("#dialogDelete").dialog({
                resizable: false,
                modal: true,
                width: "fit-content",
                buttons: {
                    "Supprimer": function () {
                        displayOff();
                        let url = "{{ path('deleteAssignment', { id: "id" }) }}";
                        url = url.replace("id", id);
                        $.ajax({
                            url: url,
                            type: "post",
                            data: {
                              mission: {{ mission.id }}
                            },
                            complete: function() {
                                location.reload();
                            }
                        });
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        function displayOff()
        {
            document.getElementById("loader").style.display = "block";
        }

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

        $(document).ready(function () {
            displayOn();
        });
    </script>

{% endblock %}