{% 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 class="btn btn-primary height-80-per ml-auto mr-0 float-right" onclick="addDocument()">AJOUTER
                </button>
            </div>
            <div class="detailsMissionItem Black p-0">
                <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">
                                <a class="nav-link active" id="form-tab" data-toggle="tab" href="#form-d" role="tab"
                                   aria-controls="form-d" aria-selected="true">Formulaires</a>
                                <a class="nav-link" id="photos-tab" data-toggle="tab" href="#photos-d" role="tab"
                                   aria-controls="photos-d" aria-selected="false">Photos</a>
                                <a class="nav-link" id="videos-tab" data-toggle="tab" href="#videos-d" role="tab"
                                   aria-controls="videos-d" aria-selected="false">Vidéos</a>
                                <a class="nav-link" id="pdf-tab" data-toggle="tab" href="#pdf-d" role="tab"
                                   aria-controls="pdf-d" aria-selected="false">PDF</a>
                                <a class="nav-link" id="myDocuments-tab" data-toggle="tab" href="#myDocuments-d"
                                   role="tab"
                                   aria-controls="myDocuments-d" aria-selected="false">Mes Documents</a>
                            </div>
                        </div>
                        <div class="col-10 detailsMissionItem">
                            <div class="tab-content" id="v-pills-tabContent2">
                                <div class="container-fluid tab-pane fade show active" id="form-d" role="tabpanel">
                                    <div class="detailsMissionItem">
                                        <div class="row files">
                                            {% for item in mission.getmissionDocumentsByType("Formulaire") %}
                                                <div class="col-md-3 col-6" id="document-{{ item.id }}">
                                                    <div class="card border shadow-none mb-1 app-file-info m-2 cursor-pointer"
                                                         onclick="readDocument({{ item.id }})">
                                                        <div class="app-file-content-logo card-img-top"
                                                             style="background: var(--color-grey-darked)">
                                                <span id="deleteFile" onclick="deleteFile({{ item.id }})" class="close"
                                                      style="position: absolute; right: 0; padding-right: 5px">&times;</span>
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% endif %}
                                                        </div>
                                                        <div class="card-body p-50">
                                                            <div class="app-file-recent-details">
                                                                <h4 class="card-title mb-50"> {{ item.name|length > 20 ? '...'  ~ item.name|slice(item.name|length - 17, item.name|length): item.name }}
                                                                </h4>
                                                                <p class="card-text text-ellipsis">
                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                <div class="container-fluid tab-pane fade" id="photos-d" role="tabpanel">
                                    <div class="detailsMissionItem">
                                        <div class="row files">
                                            {% for item in mission.getmissionDocumentsByType("Photo") %}
                                                <div class="col-md-3 col-6" id="document-{{ item.id }}">
                                                    <div class="card border shadow-none mb-1 app-file-info m-2 cursor-pointer"
                                                         onclick="readDocument({{ item.id }})">
                                                        <div class="app-file-content-logo card-img-top"
                                                             style="background: var(--color-grey-darked)">
                                                <span onclick="deleteFile({{ item.id }})" class="close"
                                                      style="position: absolute; right: 0; padding-right: 5px">&times;</span>
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% endif %}
                                                        </div>
                                                        <div class="card-body p-50">
                                                            <div class="app-file-recent-details">
                                                                <h4 class="card-title mb-50"> {{ item.name|length > 20 ? '...'  ~ item.name|slice(item.name|length - 17, item.name|length): item.name }}
                                                                </h4>
                                                                <p class="card-text text-ellipsis">
                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                <div class="container-fluid tab-pane fade" id="videos-d" role="tabpanel">
                                    <div class="detailsMissionItem">
                                        <div class="row files">
                                            {% for item in mission.getmissionDocumentsByType("Vidéo") %}
                                                <div class="col-md-3 col-6" id="document-{{ item.id }}">
                                                    <div class="card border shadow-none mb-1 app-file-info m-2 cursor-pointer"
                                                         onclick="readDocument({{ item.id }})">
                                                        <div class="app-file-content-logo card-img-top"
                                                             style="background: var(--color-grey-darked)">
                                                <span onclick="deleteFile({{ item.id }})" class="close"
                                                      style="position: absolute; right: 0; padding-right: 5px">&times;</span>
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% endif %}
                                                        </div>
                                                        <div class="card-body p-50">
                                                            <div class="app-file-recent-details">
                                                                <h4 class="card-title mb-50"> {{ item.name|length > 20 ? '...'  ~ item.name|slice(item.name|length - 17, item.name|length): item.name }}
                                                                </h4>
                                                                <p class="card-text text-ellipsis">
                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                <div class="container-fluid tab-pane fade" id="pdf-d" role="tabpanel">
                                    <div class="detailsMissionItem">
                                        <div class="row app-file-files">
                                            {% for item in mission.getmissionDocumentsByType("PDF") %}
                                                <div class="col-md-3 col-6" id="document-{{ item.id }}">
                                                    <div class="card border shadow-none mb-1 app-file-info m-2 cursor-pointer"
                                                         onclick="readDocument({{ item.id }})">
                                                        <div class="app-file-content-logo card-img-top"
                                                             style="background: var(--color-grey-darked)">
                                                <span onclick="deleteFile({{ item.id }})" class="close"
                                                      style="position: absolute; right: 0; padding-right: 5px">&times;</span>
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% endif %}
                                                        </div>
                                                        <div class="card-body p-50">
                                                            <div class="app-file-recent-details">
                                                                <h4 class="card-title mb-50"> {{ item.name|length > 20 ? '...'  ~ item.name|slice(item.name|length - 17, item.name|length): item.name }}
                                                                </h4>
                                                                <p class="card-text text-ellipsis">
                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                <div class="container-fluid tab-pane fade" id="myDocuments-d" role="tabpanel">
                                    <div class="detailsMissionItem">
                                        <div class="row files">
                                            {% for item in mission.getmissionDocumentsByType("Mes Documents") %}
                                                <div class="col-md-3 col-6" id="document-{{ item.id }}">
                                                    <div class="card border shadow-none mb-1 app-file-info m-2 cursor-pointer"
                                                         onclick="readDocument({{ item.id }})">
                                                        <div class="app-file-content-logo card-img-top"
                                                             style="background: var(--color-grey-darked)">
                                                <span onclick="deleteFile({{ item.id }})" class="close"
                                                      style="position: absolute; right: 0; padding-right: 5px">&times;</span>
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% 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: 100px; height: 100px">
                                                            {% endif %}
                                                        </div>
                                                        <div class="card-body p-50">
                                                            <div class="app-file-recent-details">
                                                                <h4 class="card-title mb-50"> {{ item.name|length > 20 ? '...'  ~ item.name|slice(item.name|length - 17, item.name|length): item.name }}
                                                                </h4>
                                                                <p class="card-text text-ellipsis">
                                                                    {{ item.addedAt()| date("j/m/Y") }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="dialogAdd" title="Ajout de document" class="jquery_dialog">
                        <form id="myform" method="post">
                            <label id="document" for="files" class="inputfile">Choisir les documents</label>
                            <input type="file" name="files[]" id="files" multiple/>
                            <pre id="filelist" style="display:none;"></pre>
                        </form>
                    </div>
                    <div id="dialogEdit" title="Classer les documents" class="jquery_dialog">
                        <div class="table-responsive bg-white" id="modalPage2">
                            <table id="documentsTable" class="table dt-responsive nowrap"
                                   style="width:100%">
                                <thead>
                                <tr>
                                    <th>name</th>
                                    <th>type</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal fade text-left w-100" id="ModalDisplayDocument" tabindex="-1"
                     aria-labelledby="myModalLabel20" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-full">
                        <div id="documentReader" class="modal-content w-100 h-100">
                            <div class="modal-header">
                                <h4 class="modal-title" id="modalDocumentName">Full Screen Modal</h4>
                                <div id="btn-push-document" class="m-1">
                                </div>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <i class="bx bx-x"></i>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="dialog" class="h-100 w-100"></div>
                            </div>
                            <div class="modal-footer">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="dialogDelete" title="Suppression de document" class="jquery_dialog">
                    <div>Êtes-vous sûr de vouloir supprimer ce document ?</div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script>

        var AllDocuments = [];
        var entry = false;
        var selectedDocument = 0;

        function deleteFile(id) {
            $("#dialogDelete").css("display", "block");
            $("#dialogDelete").dialog({
                resizable: false,
                modal: true,
                width: "fit-content",
                buttons: {
                    "Supprimer": function () {
                        entry = true;
                        selectedDocument = id;
                        let url = "{{ path('deleteDocument', { id: "id" }) }}";
                        url = url.replace("id", selectedDocument);
                        $.ajax({
                            url: url,
                            data: {
                                document: selectedDocument
                            },
                            type: "post",
                            complete: function() {
                                $("#document-" + selectedDocument).remove();
                            }
                        });
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        function readDocument(id) {

            if (entry === true) {
                entry = false;
                return;
            }
            console.log("enter");
            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\">";
            object += "If you are unable to view file, you can download from <a href = \"{FileName}\">here</a>";
            object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
            object += "</object>";
            object = object.replace(/{FileName}/g, fileName);
            $("#dialog").html(object);

            if (selectedDoc.type == "Formulaire") {
                var btn = "<button class=\"btn\">Soumettre le document</button>"
                $("#btn-push-document").html(btn);
            }

            $("#dialog iframe").contents().find("img").css({
                'width': '100%',
                'height': '100%'
            });
        }

        function editDocument()
        {
            displayOn();
            $("#dialogEdit").css("display", "block");
            $("#dialogEdit").dialog({
                resizable: false,
                modal: true,
                width: "fit-content",
                buttons: {
                    "Ajouter": function () {
                        var tbl = $('#documentsTable tr:has(td)').map(function (i, v) {
                            var $td = $('td', this);
                            return {
                                id: ++i,
                                name: $td.eq(0).text(),
                                type: $td.eq(1).find('input:radio').is(":checked") ? $td.eq(1).text() : $td.eq(2).find('input:radio').is(":checked") ? $td.eq(2).text() : $td.eq(3).find('input:radio').is(":checked") ? $td.eq(3).text() : $td.eq(4).find('input:radio').is(":checked") ? $td.eq(4).text() : $td.eq(5).find('input:radio').is(":checked") ? $td.eq(5).text() : $td.eq(6).find('input:radio').is(":checked") ? $td.eq(6).text() : $td.eq(7).find('input:radio').is(":checked") ? $td.eq(7).text() : "tmp"
                            }
                        }).get();
                        $.ajax({
                            url: "{{ path('SetDocumentsType', { id: mission.id }) }}",
                            data: {
                                table: tbl
                            },
                            type: "post",
                            complete: function () {
                                location.reload();
                            }
                        });
                        document.getElementById("mission").style.display = "none";
                        document.getElementById("loader").style.display = "block";
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        function addDocument() {
            $("#dialogAdd").css("display", "block");
            $("#dialogAdd").dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "Ajouter": function () {
                        var form = document.getElementById("myform");
                        document.getElementById("loader").style.display = "block";
                        $.ajax({
                            url: "{{ path('AddDocuments_To_mission', { 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", // Change this according to your response from the server.
                            success: function (data) {
                                $("#modalPage2 tbody").empty();
                                let i = 0;
                                while (data && data.documents[i] != null) {
                                    $("#modalPage2 tbody").append("<tr id=\"tr-doc-" + data.documents[i].id + "\"> " +
                                        "                                        <td><span class=\"\">" + data.documents[i].name + "</span></td>\n" +
                                        "                                        <td><input type=\"radio\" id=\"Formulaire\" name=\"type" + data.documents[i].id + "\" value=\"Formulaire\"><label for=\"type" + data.documents[i].id + "\">Formulaire</label></td>\n" +
                                        "                                        <td><input type=\"radio\" id=\"Photo\" name=\"type" + data.documents[i].id + "\" value=\"Photo\"><label for=\"type" + data.documents[i].id + "\">Photo</label></td>\n" +
                                        "                                        <td><input type=\"radio\" id=\"Vidéo\" name=\"type" + data.documents[i].id + "\" value=\"Video\"><label for=\"type" + data.documents[i].id + "\">Vidéo</label></td>\n" +
                                        "                                        <td><input type=\"radio\" id=\"PDF\" name=\"type" + data.documents[i].id + "\" value=\"PDF\"><label for=\"type" + data.documents[i].id + "\">PDF</label></td>\n" +
                                        "                                        <td><input type=\"radio\" id=\"mesDocuments\" name=\"type" + data.documents[i].id + "\" value=\"mesDocuments\"><label for=\"type" + data.documents[i].id + "\">Mes Documents</label></td>\n" +
                                        "                                    </tr>");
                                    i++;
                                }
                                editDocument();
                            },
                        });
                        $(this).dialog("close");
                    },
                    "Annuler": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }

        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 displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("mission").style.display = "flex";
        }

        $(document).ready(function () {
            dragula([document.getElementById('drag-elements')], {});
            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 %}

            $('#ModalDisplayDocument').on("hidden.bs.modal", function () {
                $("#objectDoc").remove();
            });

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

{% endblock %}