{% 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 blockContent h-100">
                <div class="row h-100 w-100">
                    <div class="col-12 h-100">
                        <div class="row m-auto" style="height: 15%; width: 90%">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="center-vertical">
                                    <h3 class="w-100 Size-2">Documents</h3>
                                </div>
                            </div>
                        </div>
                        <div class="row tab-content contentPage" id="tabContent4" style="height: 85%">
                            <div class="container-fluid tab h-100">
                                <div class="row h-100">
                                    <div class="col-2 h-100" id="">
                                        <div class="nav flex-column nav-pills" id="v-pills-tab2" role="tablist"
                                             aria-orientation="vertical">
                                            <a class="nav-link active" id="form-tab" data-toggle="tab"
                                               href="#form-d" role="tab"
                                               aria-controls="form-d" aria-selected="true">
                                                <i class="bx bxs-briefcase"></i>Formulaires
                                            </a>
                                            <a class="nav-link" id="devis-tab" data-toggle="tab" href="#devis-d"
                                               role="tab"
                                               aria-controls="devis-d" aria-selected="false">
                                                <i class="bx bx-file-blank"></i>Devis
                                            </a>
                                            <a class="nav-link" id="photos-tab" data-toggle="tab"
                                               href="#photos-d" role="tab"
                                               aria-controls="photos-d" aria-selected="false">
                                                <i class="bx bx-image"></i>Photos
                                            </a>
                                            <a class="nav-link" id="videos-tab" data-toggle="tab"
                                               href="#videos-d" role="tab"
                                               aria-controls="videos-d" aria-selected="false">
                                                <i class="bx bxs-video"></i>Vidéos
                                            </a>
                                            <button class="btn btn-primary m-1" onclick="addDocument()">Ajouter</button>
                                        </div>
                                    </div>
                                    <div class="col-3 h-100">
                                        <div class="card m-auto" style="height: 90%; width: 90%">
                                            <div class="d-block justify-content-between flex-column h-100"
                                                 style="overflow: auto">
                                                <div class="tab-content h-100" id="v-pills-tabContent2">
                                                    <div class="container-fluid tab-pane fade show active h-100" id="form-d"
                                                         role="tabpanel">
                                                        {% if mission.getmissionDocumentsByType("Form")|length == 0 %}
                                                            <div class="Size-3 Black center-vertical text-center">Aucun document</div>
                                                        {% endif %}
                                                        {% for item in mission.getmissionDocumentsByType("Form") %}
                                                            <div class="row p-2" id="document-{{ item.id }}">
                                                                <div class="col-12">
                                                                    <div class="card border shadow-none mb-1 app-file-info cursor-pointer"
                                                                         onclick="readDocument({{ item.id }})">
                                                                        <div class="app-file-content-logo card-img-top"
                                                                             style="background: var(--color-grey-darked)">
                                                                        
                                                                            {% if item.filename|split('.')[1] == "pdf" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/pdf.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "docx" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/psd.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "mp4" %}
                                                                                <video src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                       style="height: 10rem; width: 100%"/>
                                                                            {% elseif item.filename|split('.')[1] == "jpg" or
                                                                                item.filename|split('.')[1] == "jpeg" or
                                                                                item.filename|split('.')[1] == "png" %}
                                                                                <img src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                     style="height: 10rem; width: 100%"/>
                                                                            {% else %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/document.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% endif %}
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="app-file-recent-details">
                                                                                <div class="card-text">
                                                                                    {{ item.name|length > 30 ? '...'  ~ item.name|slice(item.name|length - 27, item.name|length): item.name }}
                                                                                </div>
                                                                                <p class="card-text text-ellipsis">
                                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="container-fluid tab-pane fade h-100" id="devis-d" role="tabpanel">
                                                        {% if mission.getmissionDocumentsByType("Devis")|length == 0 %}
                                                            <div class="Size-3 Black center-vertical text-center">Aucun document</div>
                                                        {% endif %}
                                                        {% for item in mission.getmissionDocumentsByType("Devis") %}
                                                            <div class="row p-2" id="document-{{ item.id }}">
                                                                <div class="col-12">
                                                                    <div class="card border shadow-none mb-1 app-file-info cursor-pointer"
                                                                         onclick="readDocument({{ item.id }})">
                                                                        <div class="app-file-content-logo card-img-top"
                                                                             style="background: var(--color-grey-darked)">
                                                                        
                                                                            {% if item.filename|split('.')[1] == "pdf" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/pdf.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "docx" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/psd.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "mp4" %}
                                                                                <video src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                       style="height: 10rem; width: 100%"/>
                                                                            {% elseif item.filename|split('.')[1] == "jpg" or
                                                                                item.filename|split('.')[1] == "jpeg" or
                                                                                item.filename|split('.')[1] == "png" %}
                                                                                <img src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                     style="height: 10rem; width: 100%"/>
                                                                            {% else %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/document.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% endif %}
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="app-file-recent-details">
                                                                                <div class="card-text">
                                                                                    {{ item.name|length > 30 ? '...'  ~ item.name|slice(item.name|length - 27, item.name|length): item.name }}
                                                                                </div>
                                                                                <p class="card-text text-ellipsis">
                                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="container-fluid tab-pane fade h-100" id="photos-d" role="tabpanel">
                                                        {% if mission.getmissionDocumentsByType("Photo")|length == 0 %}
                                                            <div class="Size-3 Black center-vertical text-center">Aucun document</div>
                                                        {% endif %}
                                                        {% for item in mission.getmissionDocumentsByType("Photo") %}
                                                            <div class="row p-2" id="document-{{ item.id }}">
                                                                <div class="col-12">
                                                                    <div class="card border shadow-none mb-1 app-file-info cursor-pointer"
                                                                         onclick="readDocument({{ item.id }})">
                                                                        <div class="app-file-content-logo card-img-top"
                                                                             style="background: var(--color-grey-darked)">
                                                                        
                                                                            {% if item.filename|split('.')[1] == "pdf" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/pdf.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "docx" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/psd.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "mp4" %}
                                                                                <video src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                       style="height: 10rem; width: 100%"/>
                                                                            {% elseif item.filename|split('.')[1] == "jpg" or
                                                                                item.filename|split('.')[1] == "jpeg" or
                                                                                item.filename|split('.')[1] == "png" %}
                                                                                <img src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                     style="height: 10rem; width: 100%"/>
                                                                            {% else %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/document.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% endif %}
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="app-file-recent-details">
                                                                                <div class="card-text">
                                                                                    {{ item.name|length > 30 ? '...'  ~ item.name|slice(item.name|length - 27, item.name|length): item.name }}
                                                                                </div>
                                                                                <p class="card-text text-ellipsis">
                                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="container-fluid tab-pane fade h-100" id="videos-d" role="tabpanel">
                                                        {% if mission.getmissionDocumentsByType("Vidéo")|length == 0 %}
                                                            <div class="Size-3 Black center-vertical text-center">Aucun document</div>
                                                        {% endif %}
                                                        {% for item in mission.getmissionDocumentsByType("Vidéo") %}
                                                            <div class="row p-2" id="document-{{ item.id }}">
                                                                <div class="col-12">
                                                                    <div class="card border shadow-none mb-1 app-file-info cursor-pointer"
                                                                         onclick="readDocument({{ item.id }})">
                                                                        <div class="app-file-content-logo card-img-top"
                                                                             style="background: var(--color-grey-darked)">
                                                                        
                                                                            {% if item.filename|split('.')[1] == "pdf" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/pdf.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "docx" %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/psd.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% elseif item.filename|split('.')[1] == "mp4" %}
                                                                                <video src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                       style="height: 10rem; width: 100%"/>
                                                                            {% elseif item.filename|split('.')[1] == "jpg" or
                                                                                item.filename|split('.')[1] == "jpeg" or
                                                                                item.filename|split('.')[1] == "png" %}
                                                                                <img src="{{ '/' ~ item.path ~ item.filename }}"
                                                                                     style="height: 10rem; width: 100%"/>
                                                                            {% else %}
                                                                                <img class="d-block mt-2 mb-2 ml-auto mr-auto"
                                                                                     src="{{ asset('/app-assets/images/icon/document.png') }}"
                                                                                     alt="Card image cap"
                                                                                     style="width: 50%">
                                                                            {% endif %}
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="app-file-recent-details">
                                                                                <div class="card-text">
                                                                                    {{ item.name|length > 30 ? '...'  ~ item.name|slice(item.name|length - 27, item.name|length): item.name }}
                                                                                </div>
                                                                                <p class="card-text text-ellipsis">
                                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-7 h-100">
                                        <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 id="dialog" class="h-100 w-100"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="dialog-confirm" class="jquery_dialog" title="Ajouter des documents">
            <form id="myform" method="post">
                <input type="file" name="files[]" id="files" multiple/>
                <pre id="filelist" style="display:none;"></pre>
            </form>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript" class="code-js">
        var AllDocuments = [];
        var entry = false;
        var selectedDocument = 0;

        document.getElementById('files').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 addDocument()
        {
            $(".dialog-confirm").css.display = "block";
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "Ajouter": function() {
                        var form = document.getElementById("myform");
                        $.ajax({
                            url: "{{ path('AddDocumentsByInsured', { id: mission.id }) }}",
                            data: new FormData(form),// the formData function is available in almost all new browsers.
                            type: "post",
                            contentType: false,
                            processData: false,
                            cache: false,
                            dataType: "json"
                        });
                        location.reload();
                        $( this ).dialog( "close" );
                    },
                    "Annuler": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        }

        function readDocument(id) {
            if (entry === true) {
                entry = false;
                return;
            }
            let i = 0;
            let selectedDoc = {};
            while (AllDocuments[i] != null) {
                if (AllDocuments[i].id === id) {
                    selectedDoc = AllDocuments[i];
                    break;
                }
                i++;
            }
            if (selectedDoc == null)
                return;
            $("#modalDocumentName").html(selectedDoc.name)
            $("#ModalDisplayDocument").modal();

            var fileName = "/" + selectedDoc.path + selectedDoc.filename;
            var object = "<object id=\"objectDoc\" data=\"{FileName}\" class=\"h-100 w-100 objectDoc Size-3 Black\">";
            object += "Si vous ne pouvez pas lire le document, vous pouvez le télécharger en cliquant sur <a class=\"p-0 m-0\"' href = \"{FileName}\">ce lien</a>";
            object += "</object>";
            object = object.replace(/{FileName}/g, fileName);
            $("#dialog").html(object);
            $("#dialog iframe").contents().find("img").css({
                'width': '100%',
                'height': '100%'
            });
        }

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

        $(document).ready(function () {
            let obj = {};
            {% for document in mission.missiondocument %}
            obj = {
                name: "{{ document.name }}",
                filename: "{{ document.filename }}",
                path: "{{ document.path }}",
                id: {{ document.id }},
                status: "{{ document.status }}",
                type: "{{ document.type }}",
            }
            AllDocuments.push(obj);
            {% endfor %}
            displayOn();
        });
    </script>

{% endblock %}