{% 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">
            <div>
                <div id="wrapper">
                    <div id="carte" class="carte">
                    </div>
                    <div id="over_map">
                        Mission : {{ mission.fileNumber }}
                    </div>
                </div>
                <div id="filenumber" style="display: none; height: fit-content; background: var(--color-red-secondary)">
                    <div id="not_over_map">
                        Mission : {{ mission.fileNumber }}
                    </div>
                </div>
            </div>

            {% include '/mission/details/top_menu.html.twig' %}

            <div class="outil-space center-vertical-no-height">
            </div>
            <div id="content" class="detailsMissionItemMap Black">
                <div class="container-fluid overflow-auto h-100" id="mission-summary">
                    <div class="row">
                        <div class="col-12">

                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <h4 class="title-mission-summary">
                                Informations du dossier
                            </h4>
                            <div class="text-mission-summary">
                                N° de la mission : <b>{{ mission.fileNumber }}</b>
                            </div>
                            <div class="text-mission-summary">
                                Date du sinistre : <b>{{ mission.sinister.occuredAt|date('d/m/Y') }}</b>
                                - {{ mission.sinister.occuredAt|date('G:i') }}
                            </div>
                            <div class="text-mission-summary">
                                Type d'intervention :
                                <b>
                                {% for item in mission.assignment %}
                                    {{  not loop.first ? ", " : "" }}
                                    {{ item.type|trim(' ', 'right')|trim(' ', 'left') }}
                                {% endfor %}
                                </b>
                            </div>
                            <div class="text-mission-summary">
                                Type de mission : <b>{{ mission.type }}</b>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6">
                            <h4 class="title-mission-summary">
                                Informations de la mission
                            </h4>
                            <div class="text-mission-summary">
                                <div class="Red">*</div>N° de dossier client : <b>{{ mission.delegateClientNumber }}</b>
                            </div>
                            <div class="text-mission-summary">
                                Mission crée le : <b>{{ mission.createdAt|date("d/m/Y H:i") }}</b>
                            </div>
                            <div class="text-mission-summary">
                                Mission affecté le :
                                <b>{{ mission.assignment|length > 0 ? mission.assignment[0].addedAt|date("d/m/Y H:i") : "-" }}</b>
                            </div>
                            <div class="text-mission-summary">
                                Mission fermée le : -
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <h4 class="title-mission-summary">
                                Informations du sinistre
                            </h4>
                            <div class="text-mission-summary col-12">
                                Type de sinistre : <b>{{ mission.sinister.type }}</b>
                            </div>
                            <div class="text-mission-summary col-12">
                                <div class="repeater-default">
                                    <div data-repeater-list="contact">
                                        <div class="row">
                                            <div class="col-12 mb-2" style="display: none">
                                                <button class="btn btn-icon rounded-circle btn-primary" type="button" data-repeater-create="">
                                                    <i class="bx bx-plus"></i>
                                                </button>
                                                <span class="ml-1 font-weight-bold text-primary">Ajouté une pièce</span>
                                            </div>
                                            <div class="col-md-5 col-5 mb-50">
                                                <div class="text-mission-summary">Pièce impliquée</div>
                                            </div>
                                            <div class="col-md-5 col-5 mb-50">
                                                <div class="text-mission-summary">Etage</div>
                                            </div>
                                        </div>
                                        {% if mission.sinister.room != null %}
                                            {% for item in mission.sinister.room|split(',') %}
                                            <div id="list" class="row justify-content-between" data-repeater-item="">
                                                <div class="col-md-5 col-12 form-group d-flex align-items-center">
                                                    <i class="bx bx-menu mr-1"></i>
                                                    <input type="text" class="form-control text-mission-summary" name="room" placeholder="Pièce impliqué" value="{{ item|split(' : ')[0]|replace({' ': ''})|capitalize }}" readonly>
                                                </div>
                                                <div class="col-md-5 col-12 form-group">
                                                    <input type="text" class="form-control text-mission-summary" name="floor" placeholder="Etage" value="{{ item|split(' : ')[1]|replace({' ': ''})|capitalize }}" readonly>
                                                </div>
                                                <div class="col-md-2 col-12 form-group">
                                                    <button class="btn btn-icon btn-danger rounded-circle" type="button" data-repeater-delete="" style="display: none">
                                                        <i class="bx bx-x"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <h4 class="title-mission-summary">
                                Informations complémentaires
                            </h4>
                            <div class="row">
                                <div class="card">
                                    Déclaration originale pour perte de biens
                                    <textarea disabled>{{ mission.declarationLossProperty }}</textarea>
                                </div>
                                <div class="card">
                                    Cause(s) du sinistre
                                    <textarea disabled>{{ mission.cause }}</textarea>
                                </div>
                                <div class="card">
                                    Evaluation des dégats initiale
                                    <textarea disabled>{{ mission.damageEstimation }}</textarea>
                                </div>
                                <div class="card">
                                    Commentaire
                                    <textarea disabled>{{ mission.comments }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

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


        var el = document.getElementById('mission-summary');
        el.addEventListener('scroll', function(event) {
            if (scrollbarVisible(el) === true) {
                if (event.target.scrollTop === 0) {
                    $('#over_map').css("display", "block");
                    $('.detailsMissionItemMap').css("height",
                        "calc(100% - var(--mission-map) - var(--mission-menu-secondary) - var(--mission-outil)");
                    $("#detailsMissionTC a").css("margin-top", "-1rem");
                    $("#detailsMissionTC").css("height", "3rem");
                    $('#wrapper').css("height", "14rem");
                } else {
                    $('#wrapper').css("height", "0");
                    $("#detailsMissionTC").css("height", "4rem")
                    $("#detailsMissionTC a").css("margin-top", "0")
                    $('.detailsMissionItemMap').css("height",
                        "calc(100% - var(--mission-menu-secondary) - var(--mission-outil) - 1rem");
                    $('#over_map').css("display", "none");
                }
            }
        }, false);

        el.addEventListener('mousewheel', function(event) {
            if (scrollbarVisible(el) === false) {
                if (event.deltaY < 0)
                {
                    $('#over_map').css("display", "block");
                    $('.detailsMissionItemMap').css("height",
                        "calc(100% - var(--mission-map) - var(--mission-menu-secondary) - var(--mission-outil)");
                    $("#detailsMissionTC a").css("margin-top", "-1rem");
                    $("#detailsMissionTC").css("height", "3rem");
                    $('#wrapper').css("height", "14rem");
                }
            }
        }, false);

        function scrollbarVisible(element) {
            if (element.scrollHeight > element.clientHeight)
                return true;
            else
                return false;
        }

        /* Details */

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

        $(document).ready(function () {
            /* Détails */
            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);

            $('.repeater-default').repeater({
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });
            /* End Détails */

            displayOn();

        });
    </script>

{% endblock %}