{% extends 'base.html.twig' %}
{% block title %}
    OceanExpert | Document
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/ionicons.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jquery-confirm.min.css') }}">
    <style>
        .files{
            margin-top: 15px;
        }
        .bg-info{
            padding: 20px;
        }
        .addDoclist{
            width:550px;}
    </style>

{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="container-fluid top-buffer70">
        <div class="container content justify">
            {% if data.idDoc is defined and data.idDoc is not null %}
                <div class="box-header">
                    <div class="row">
                        <div class="col-sm-8">
                            <h4>{{ data.docCode }}</h4>
                            <h3>{{ data.title }}</h3>
                        </div>
                        {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                            <div class="col-sm-4 pull-right">
                                <a
                                        href="{{ path('edit_document',{idDoc:data.idDoc}) }}">
                                    [Edit this Document]
                                </a>
                                {% if data.docGroupList | length > 0 %}
                                    <br/>
                                    unable to delete, used in a doclist
                                {% endif %}
                                {% if data.docEventList | length > 0 %}
                                    <br/>
                                    unable to delete, used in an event
                                {% endif %}
                                {% if data.docGroupList | length == 0
                                    and data.docEventList | length == 0 %}
                                    <br/>
                                <a
                                        href="javascript:void(0);"
                                        id="deleteDocument"
                                        data-idDoc="{{ data.idDoc }}">
                                    [Delete this Document]
                                </a>
                                {% endif %}
                            </div>
                        {% endif %}

                    </div>
                    <div class="table-responsive col-md-10">
                        <table class="table documentDetails">
                            <tbody>
                            {% if data.authorText is defined and data.authorText != "" %}
                                <tr>
                                    <th>Author(s)</th>
                                    <td>{{ data.authorText }}</td>
                                </tr>
                            {% endif %}
                            {% if data.summary is defined and data.summary != "" %}
                                <tr>
                                    <th>Summary</th>
                                    <td>{{ data.summary | raw }}</td>
                                </tr>
                            {% endif %}
                            {% if data.doctypename is defined and data.doctypename != "" %}
                                <tr>
                                    <th>Doc Type</th>
                                    <td>{{ data.doctypename }}</td>
                                </tr>
                            {% endif %}
                            {% if data.idDoctype is defined and data.idDoctype == 9 %}
                                <tr>
                                    <th>URL</th>
                                    <td>
                                        <a
                                                href="{{ data.url }}"
                                                target="_blank">
                                            {{ data.url }}
                                        </a>
                                    </td>
                                </tr>
                            {% endif %}
                            {% if data.idDocstatus == 1  %}
                                {% set status = "Draft" %}
                            {% elseif data.idDocstatus == 2 %}
                                {% set status = "Published" %}
                            {% elseif data.idDocstatus == 3 %}
                                {% set status = "Pending" %}
                            {% endif %}
                            <tr>
                                <th>Status</th>
                                <td>
                                    {{ status }}
                                    {% if data.publishedOn is defined and data.publishedOn != "" %}
                                        on {{ data.publishedOn|date('d M Y') }}
                                    {% endif %}
                                </td>
                            </tr>
                            {% if data.notes is defined and data.notes != "" %}
                                <tr>
                                    <th>Notes</th>
                                    <td>{{ data.notes | raw }}</td>
                                </tr>
                            {% endif %}
                            {% if data.keywords is defined and data.keywords != "" %}
                                <tr>
                                    <th>Keywords</th>
                                    <td>{{ data.keywords }}</td>
                                </tr>
                            {% endif %}
                            {% if data.docGroupList | length > 0 %}
                                <tr>
                                    <th>This document is in the list(s):</th>
                                    <td>
                                        {% for docGroupList in  data.docGroupList %}
                                            <a
                                                    href="{{ path('view_doclist',{idDoclist:docGroupList.idDoclist}) }}">
                                                {{ docGroupList.title }}
                                            </a>
                                            <br/>
                                        {% endfor %}
                                    </td>
                                </tr>
                            {% endif %}
                            {% if data.docEventList | length > 0 %}
                                <tr>
                                    <th>This document is used in the event(s):</th>
                                    <td>
                                        {% for docEventList in data.docEventList %}
                                            <a
                                                    href="{{ path('view_event',{event:docEventList.idEvent}) }}"
                                                    target="_blank">
                                                {{ docEventList.title }}
                                            </a>
                                            <br/>
                                        {% endfor %}
                                    </td>
                                </tr>
                            {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>

                {% if data.docFiles | length > 0 %}
                    <div class="row">
                    <div class="col-xs-10">
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <i class="fa fa-download fa-fw fa-2x" aria-hidden="true"></i>
                                Download
                            </div>
                            <div class="panel-body">
                                {% for file in data.docFiles %}
                                    <div class="files col-md-4">
                                        <a
                                            href="{{ path('download_document',{idFile:file.idFile}) }}"
                                            target="_blank"
                                            onclick="ga('send', 'event', 'documents', 'download', '{{ data.idDoc }}-{{ file.languagename }}-{{ data.title }}');"
                                            download="">
                                            {% if file.idFileformat == 1 %}
                                                <img src="{{ asset('images/fileicons/pdf.png') }}" alt="PDF" class="fileicon">
                                            {% elseif file.idFileformat == 2 %}
                                                <img src="{{ asset('images/fileicons/doc.png') }}" alt="DOC" class="fileicon">
                                            {% elseif file.idFileformat == 3 %}
                                                <img src="{{ asset('images/fileicons/txt.png') }}" alt="TXT" class="fileicon">
                                            {% elseif file.idFileformat == 4 %}
                                                <img src="{{ asset('images/fileicons/rtf.png') }}" alt="RTF" class="fileicon">
                                            {% elseif file.idFileformat == 5 %}
                                                <img src="{{ asset('images/fileicons/xls.png') }}" alt="XLS" class="fileicon">
                                            {% elseif file.idFileformat == 6 %}
                                                <img src="{{ asset('images/fileicons/ppt.png') }}" alt="PPT" class="fileicon">
                                            {% elseif file.idFileformat == 7 %}
                                                <img src="{{ asset('images/fileicons/ppt.png') }}" alt="PPT" class="fileicon">
                                            {% elseif file.idFileformat == 8 %}
                                                <img src="{{ asset('images/fileicons/gif.png') }}" alt="GIF" class="fileicon">
                                            {% elseif file.idFileformat == 9 %}
                                                <img src="{{ asset('images/fileicons/jpg.png') }}" alt="JPG" class="fileicon">
                                            {% elseif file.idFileformat == 10 %}
                                                <img src="{{ asset('images/fileicons/jpg.png') }}" alt="JPG" class="fileicon">
                                            {% elseif file.idFileformat == 11 %}
                                                <img src="{{ asset('images/fileicons/png.png') }}" alt="PNG" class="fileicon">
                                            {% elseif file.idFileformat == 12 %}
                                                <img src="{{ asset('images/fileicons/bmp.png') }}" alt="BMP" class="fileicon">
                                            {% elseif file.idFileformat == 13 %}
                                                <img src="{{ asset('images/fileicons/zip.png') }}" alt="ZIP" class="fileicon">
                                            {% elseif file.idFileformat == 14 %}
                                                <img src="{{ asset('images/fileicons/xlsx.png') }}" alt="XLSX" class="fileicon">
                                            {% elseif file.idFileformat == 15 %}
                                                <img src="{{ asset('images/fileicons/ppt.png') }}" alt="PPT" class="fileicon">
                                            {% elseif file.idFileformat == 16 %}
                                                <img src="{{ asset('images/fileicons/ppt.png') }}" alt="PPT" class="fileicon">
                                            {% elseif file.idFileformat == 17 %}
                                                <img src="{{ asset('images/fileicons/doc.png') }}" alt="DOC" class="fileicon">
                                            {% endif %}
                                            {{ file.languagename }}
                                        <span class="small">
                                            (v{{ file.version }}, {{ file.size|format_bytes }})
                                        </span>
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
                </div>
                    <div class="row">
                    <hr/>
                    <div class="col-xs-12">
                        <div class="pull-right text-right stats">
                            {% if data.documentGroup is defined and data.documentGroup | length >0 %}
                                <div>Group(s):
                                    {% for documentGroup in  data.documentGroup %}
                                        {{ documentGroup.groupname }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <div>
                                {% if data.createdAt is defined and data.createdAt != "" %}
                                    {{ "Created at " ~ data.createdAt | date("H:i") ~ ' on ' ~ data.createdAt | date("d M Y") }}
                                {% endif %}
                                {% if data.createdBy is defined and data.createdBy != "" %}
                                    {{ ' by ' ~ data.createdBy }}
                                {% endif %}
                            </div>
                            <div>
                                {% if data.updatedAt is defined and data.updatedAt != "" %}
                                    {{ "Updated at " ~ data.updatedAt | date("H:i") ~ ' on ' ~ data.updatedAt | date("d M Y") }}
                                {% endif %}
                                {% if data.updatedBy is defined and data.updatedBy != "" %}
                                    {{ ' by ' ~ data.updatedBy }}
                                {% endif %}

                            </div>
                        </div>
                    </div>
                </div>
                    {% if is_granted('ROLE_GLOBAL_EDITOR') %}
                    <div class="row">
                        <hr/>
                        <div class="col-xs-12 bg-info">
                            <div class="form-group">
                                <label for="" class="col-sm-3 control-label">Add this document to a list</label>
                                <div class="col-sm-9">
                                    <select name="addDocGroup" id="addDocGroup" class="addDoclist">
                                        <option value="">Select Group</option>
                                        {% for groups in data.docGroupListAll %}
                                            {% if groups.idDoclist not in data.docGroupListArr %}
                                                <option value="{{ groups.idDoclist }}">{{ groups.title }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                    <button
                                            class="btn btn-md btn-success"
                                            id="addGroupList"
                                            type="button">
                                        Add
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            {% else %}
                <div class="alert alert-danger" role="alert">
                    <i class="fa fa-exclamation-triangle fa-fw fa-2x"></i>
                    The requested document could not be found. (maybe it has not been approved yet)
                </div>
                <a
                        class="btn btn-success"
                        href="{{ path('frontend_homepage') }}">
                    Click here to go to Home
                </a>
            {% endif %}

        </div>
    </div>
    {% include "footer.html.twig" %}
    <script src="{{ asset('js/jquery-confirm.min.js') }}"></script>
    <script type="text/javascript" class="init">
        $(document).ready(function() {
            //set the top nav menu style
            $(".documents").addClass('navactive');
        });
    </script>
    {% if data.idDoc is defined and data.idDoc is not null %}
        <script type="text/javascript">
            var deleteDocument = "{{ path('delete_document') }}"
            var documentsPage = "{{ path('view_documents') }}";

        $("#addGroupList").click(function () {
            $(".error").remove();
            var $this=$(this);
            $this.parents(".form-group").removeClass("has-error");
            $("#addDocGroup").css("border-color","none");
            var idDoclist = $("#addDocGroup option:selected").val();
            var idDoc = {{ data.idDoc }};
            if (idDoclist != "") {
                $.ajax({
                    url: "{{ path('add_document_to_doc_list') }}",
                    data: {idDoclist: idDoclist, idDoc: idDoc},
                    method: "POST",
                }).done(function (response) {
                    if(response.status == 1){
                        window.location.reload();
                    }
                });
            } else {
                $("#addDocGroup").css("border-color","red");
                $this.parents(".form-group").addClass('has-error');
                $this.after("<div class='text-danger error'>Please select documentlist</div>");
            }
        });

        $("#deleteDocument").click(function () {
            var $this = $(this);
            var idDoc = $this.data("iddoc");
            let warningText = 'The removal of this document is an irreversible process. ' +
                'It will no longer be visible to other users. ' +
                'Are you sure you want to delete it forever?';
            $.confirm({
                escapeKey: "cancel",
                title: 'Confirm!',
                content: warningText,
                buttons: {
                    confirm:{
                        keys: ['enter'],
                        btnClass: 'btn-primary',
                        text: "OK",
                        action: function(){
                            $.ajax({
                                url: deleteDocument,
                                data:{idDoc: idDoc},
                                method: "POST"
                            }).done(function (response) {
                                if(response.status==1 ){
                                    window.location.href = documentsPage;
                                } else {
                                    alert(response.message);
                                }
                            });
                        }
                    },
                    cancel: function () {
                        btnClass: 'btn-danger'
                    }
                }
            });
        });

    </script>
    {% endif %}
{% endblock %}