{% 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') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/doclist.css') }}">

{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="container-fluid top-buffer70">
        <a id="top"></a>
        <div class="container content justify">
            <div class="box-header">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-sm-8">
                            <h3>All Doclists</h3>
                            <ul>
                            {% for doclistGroup, doclistInfo in data %}
                                <li>
                                    <a
                                            href="#{{ doclistGroup }}"
                                            target="_self">
                                        {{ doclistGroup }}
                                    </a>
                                </li>
                            {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                {% for doclistGroup, doclistInfo in data %}

                <div class="row" style="height: 50px;">
                    <a id="{{ doclistGroup }}" ></a>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-sm-8">
                            <h4> {{ doclistGroup }} </h4>
                        </div>
                    </div>
                </div>
                    <div class="row">
                    <div class="col-sm-12">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <tbody>
                                    {% for doclist in doclistInfo %}
                                    <tr>
                                        <td>
                                            <a href="{{ path('view_doclist',{idDoclist: doclist.idDoclist}) }}">{{ doclist.idDoclist }}</a>
                                        </td>
                                        <td>
                                            <a href="{{ path('view_doclist',{idDoclist: doclist.idDoclist}) }}">{{ doclist.title }}</a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div>
                    <a
                            href="#top"
                            target="_self">
                        back to top
                    </a>
                </div>
                {% endfor %}
            </div>
        </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>
    <script type="text/javascript">

        var documentDownloadBlock = "{{ path('document_download_block') }}";
        var removeDocumentFromList = "{{ path('remove_document_from_list') }}";
        var deleteDocumentList = "{{ path('remove_document_from_list') }}";
        var admindashboard = "{{ path('admin_dashboard') }}";

        {% if data.doclist.idDoclist is defined %}
        
        $(".removefromlist").click(function () {
            var $this = $(this);
            var idDoc = $this.data("iddoc");
            $.confirm({
                escapeKey: "cancel",
                title: 'Confirm!',
                content: 'Are you sure you want to remove this document from the list?',
                buttons: {
                    confirm:{
                        keys: ['enter'],
                        btnClass: 'btn-primary',
                        text: "OK",
                        action: function(){
                            $.ajax({
                               url: removeDocumentFromList, 
                                data:{idDoclist: {{ data.doclist.idDoclist}}, idDoc: idDoc},
                                method: "POST"
                            }).done(function (response) {
                                if(response.status ==1 ){
                                    window.location.reload();
                                }
                            });
                        }
                    },
                    cancel: function () {
                        btnClass: 'btn-danger'
                    }
                }
            });
        });

        $("#deleteList").click(function () {
            var $this = $(this);
            var idDoclist = $this.data("iddoclist");
            $.confirm({
                escapeKey: "cancel",
                title: 'Confirm!',
                content: 'The removal of this list is an irreversible process. Are you sure you want to delete it forever?',
                buttons: {
                    confirm:{
                        keys: ['enter'],
                        btnClass: 'btn-primary',
                        text: "OK",
                        action: function(){
                            $.ajax({
                                url:deleteDocumentList,
                                data:{idDoclist: idDoclist},
                                method: "POST"
                            }).done(function (response) {
                                if(response.status==1 ){
                                    window.location.href = admindashboard;
                                }
                            });
                        }
                    },
                    cancel: function () {
                        btnClass: 'btn-danger'
                    }
                }
            });
        });
        
        {% endif %}
    </script>
    <script src="{{ asset('js/event-view.js') }}" type="text/javascript"></script>
   
{% endblock %}