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

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

{% block body %}
    {% include '/loader/loader.html.twig' %}

    <div id="insuredPage" class="Page">
        <div class="h-100 block">
            {% 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 tools blockContent h-100">
                <div class="row h-100">
                    <div class="col-9">
                        <div class="row h-25 m-auto" style="height: 90%; width: 90%">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="center-vertical">
                                    <h3 class="w-100 Size-2">Dossier N°{{ mission.filenumber }}</h3>
                                    <div class="PageTitle Size-4">{{ mission.insuredsAt(1).getGender() ~ ' ' ~ mission.insuredsAt(1).username }}</div>
                                    <div class="Size-4">{{ mission.insuredsAt(1).getPlace().getAddress() }}</div>
                                    <div class="Size-4">{{ mission.insuredsAt(1).getPlace().getPostcode() ~ ' ' ~ mission.insuredsAt(1).getPlace().getCity }}</div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div class="row h-100">
                                    <div class="col-12 center-vertical">
                                        <div class="wrap mb-2">
                                            <div class="links w-100">
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">OUVERTURE</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">RDV DEVIS</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">DEVIS VALIDÉ</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">TRAVAUX</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">CLOTÛRE</span>
                                                </div>
                                            </div>
                                        </div>
                                        {% set valueMission = 20 %}
                                        {% set date1 = mission.createdAt|date("d/m/Y") %}
                                        {% set date2 = "" %}
                                        {% set date3 = "" %}
                                        {% set date4 = "" %}
                                        {% set date5 = "" %}
                                        {% if mission.getATask("Prendre le rendez-vous") and mission.getATask("Prendre le rendez-vous").getStatut() == "Complétée" %}
                                            {% set valueMission = valueMission + 20 %}
                                            {% set date2 = mission.getATask("Prendre le rendez-vous").startAt()|date("d/m/Y") %}
                                        {% endif %}
                                        {% if mission.getATask("Controler le quote") and mission.getATask("Controler le quote").getStatut() == "Complétée" %}
                                            {% set valueMission = valueMission + 20 %}
                                            {% set date3 = mission.getATask("Controler le quote").startAt()|date("d/m/Y") %}
                                        {% endif %}
                                        {% if mission.getATask("Réaliser les travaux") and mission.getATask("Réaliser les travaux").getStatut() == "Complétée" %}
                                            {% set valueMission = valueMission + 20 %}
                                            {% set date4 = mission.getATask("Réaliser les travaux").startAt()|date("d/m/Y") %}
                                        {% endif %}
                                        {% if mission.getATask("Valider la fin de mission") and mission.getATask("Valider la fin de mission").getStatut() == "Complétée" %}
                                            {% set valueMission = valueMission + 20 %}
                                            {% set date5 = mission.getATask("Valider la fin de mission").startAt()|date("d/m/Y") %}
                                        {% endif %}
                                        <div class="progress">
                                            <div class="progress-bar"
                                                 style="width: calc({{ valueMission }}%)" role="progressbar"
                                                 aria-valuenow="20" aria-valuemin="0"
                                                 aria-valuemax="100">{{ valueMission }}%
                                            </div>
                                        </div>
                                        <div class="wrap mt-2">
                                            <div class="links w-100">
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">{{ date1 }}</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">{{ date2 }}</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">{{ date3 }}</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">{{ date4 }}</span>
                                                </div>
                                                <div class="progress-bar-action"
                                                     style="width: 20%">
                                                    <span class="center-vertical font-small-1">{{ date5 }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row h-75">
                            <div class="col col-12 center-vertical">
                                <div class="card m-auto" style="height: 90%; width: 90%">
                                    <div class="card-img-overlay d-flex justify-content-between flex-column">
                                        <div class="overlay-content h-100">
                                            <div class="row h-100">
                                                <div class="col-6 ml-auto mr-auto">
                                                    <div class="Size-2">{{ mission.sinister.type }}</div>
                                                    <div class="Size-3 Black Paragraph">{{ mission.damageEstimation }}</div>
                                                    <div class="Black Paragraph overflow-auto" style="height: 10rem">
                                                        <div class="Black Paragraph">
                                                            Super !! Merci beaucoup pour votre travail.
                                                            J’ai bien tout vérifier et c’est tip top. J’ai bien fait de
                                                            colorier ces WC en saumon bleu taupe, ça rend troop beau !!
                                                        </div>
                                                        <div class="Black Paragraph">Oui beaucoup
                                                        </div>
                                                    </div>
                                                    <div class="m-3">
                                                        <button class="btn btn-primary d-block w-auto m-auto">AJOUTER UN
                                                            COMMENTAIRE
                                                        </button>
                                                    </div>
                                                    <div class="Paragraph">
                                                        <div class="Black Paragraph Size-4">Franchise à régler : {Comming Soon}</div>
                                                        <div class="Black Paragraph Size-4">Pièces impliquées :
                                                            {% for item in mission.sinister.room|split(',') %}
                                                                {{ not loop.first ? ',' : '' }}
                                                                {{ item|split(':')[0]|trim(' ', 'left')|trim(' ', 'right')|capitalize }}
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="h-50">
                                                        <div id="content" style="height: 90%">
                                                            <div id="wrapper" class="h-100">
                                                                <div id="carte" class="carte">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="h-50">
                                                        <div class="w-100 h-100">
                                                            <div id="carousel" class="carousel slide h-100" data-ride="carousel">
                                                                <ol class="carousel-indicators ml-auto mr-auto center-vertical text-center" style="width: 100%;">
                                                                    {% if mission.getmissionDocumentsByType('Photo')|length == 0 %}
                                                                        <div>Aucune photo ajoutée au dossier pour le moment</div>
                                                                    {% endif %}
                                                                    {% for document in mission.getmissionDocumentsByType('Photo') %}
                                                                        <li data-target="#carousel" data-slide-to="{{ loop.index - 1 }}" class="{{ loop.first ? "active" : "" }}" style="border: 1px solid var(--color-grey-darked); width: 3rem !important; height: 2rem !important;">
                                                                            <img class="d-block w-100" src="{{ '/' ~ document.path ~ document.filename }}" alt="{{ document.name }}">
                                                                        </li>
                                                                    {% endfor %}
                                                                </ol>
                                                                <div class="carousel-inner h-100" role="listbox">
                                                                    {% for document in mission.getmissionDocumentsByType('Photo') %}
                                                                        <div class="carousel-item {{ loop.first ? "active" : "" }} h-100 w-100" data-interval="10000">
                                                                            <a href="{{ '/' ~ document.path ~ document.filename }}"  data-lightbox="image-{{ document.id }}">
                                                                                <img class="d-block w-100" src="{{ '/' ~ document.path ~ document.filename }}" alt="{{ document.name }}">
                                                                            </a>
                                                                        </div>
                                                                    {% endfor %}
                                                                </div>
                                                                <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                                                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                    <span class="sr-only">Previous</span>
                                                                </a>
                                                                <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                                                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                    <span class="sr-only">Next</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3">
                        {% set task = mission.getCurrentTask() %}
                        <div class="row h-25">
                            <div class="col col-12 center-vertical">
                                <button class="btn btn-warning w-50 m-auto">{{ task ? task.statut ~ ' ' ~ (task.action|lower) : "" }}</button>
                            </div>
                        </div>
                        <div class="row h-75">
                            <div class="col col-12 center-vertical">
                                <div class="card m-auto" style="height: 90%; width: 90%">
                                    <div class="card-img-overlay d-flex justify-content-between flex-column">
                                        <div class="overlay-content h-100 text-center">
                                            <div class="Size-3 Black Paragraph" style="height: 10%;">Artisan(s)
                                                intervenu(s)
                                            </div>
                                            <div class="w-100 mt-1 mb-1" style="height: 80%; overflow: auto">
                                                {% if mission.assignment|length == 0 %}
                                                    <div class="h-100 center-vertical text-center">Aucune intervention pour le moment</div>
                                                {% endif %}
                                                {% for assignment in mission.assignment %}
                                                    <div class="m-4 Black">
                                                        {% if assignment.agency.company.logo == null %}
                                                            <div class="avatar m-0 mr-50">
                                                                <div class="avatar-content"
                                                                     style="height: 6rem; width: 6rem">
                                                                    <div class="Size-2">
                                                                        {% 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 class="font-weight-bold">{{ assignment.agency.company.name }}</div>
                                                        <div>{{ assignment.agency.place.address }}</div>
                                                        <div>{{ assignment.agency.place.postcode ~ ' ' ~ assignment.agency.place.city }}</div>
                                                        <div>{{ assignment.agency.email }}</div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUfVQ2upnFTawcAJJefOPPGh1wVZFbQh0"></script>

    <script type="text/javascript" class="code-js">
        function displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("insuredPage").style.display = "block";
        }

        $(document).ready(function () {
            var myLatlng = new google.maps.LatLng({{ lat }}, {{ long }});

            var map = new google.maps.Map(document.getElementById('carte'), {
                zoom: 10,
                center: myLatlng,
                mapTypeControl: false,
                fullscreenControl: false,
            });
            var marker = new google.maps.Marker({
                position: myLatlng,
                name: "{{ mission.fileNumber }}",
                title: "{{ mission.fileNumber }}",
            });
            marker.setMap(map);
            displayOn();
        });
    </script>

{% endblock %}