{% extends 'base.html.twig' %}

{% set bodyClass = 'documentation_document list' %}
{% set menuItem = 'documentation' %}

{% set activeCategories = [] %}

{% for object in objects %}
    {% for cat in object.categories %}
        {% set activeCategories = activeCategories|merge([cat.name]) %}
    {% endfor %}
{% endfor %}

{% block title %}{{ 'documentation.document.title.title'|trans }} - {{ parent() }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
{% endblock %}

{% block body_head %}
    <h1>{{ 'documentation.document.title.title'|trans }}
    <small>{{ 'documentation.document.title.subtitle'|trans }}</small>
    </h1>
{% endblock %}

{% block breadcrumb %}
    {% set breadcrumb = [
        { 'name': 'documentation.document.title.title'|trans }
    ] %}
    {% include '_breadcrumb.html.twig' with {'breadcrumb': breadcrumb} %}
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-xs-12 mb-1">
            {% if is_granted('ROLE_ADMIN') %}
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <i aria-hidden="true" class="fa fa-plus"></i>
                        {{ 'documentation.document.action.new'|trans }}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="{{ path('documentation_document_create') }}">{{ 'documentation.document.action.file'|trans }}</a></li>
                        <li><a href="{{ path('documentation_document_create', {isLink: '1'}) }}">{{ 'documentation.document.action.url'|trans }}</a></li>
                    </ul>
                </div>
                <a href="{{ path('documentation_category_list') }}" class="btn btn-default">
                    <i aria-hidden="true" class="fas fa-tag"></i>
                    {{ 'documentation.category.action.list'|trans }}
                </a>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="box box-solid">
                <div class="box-body overflow-x-auto">
                    <div id="custom-buttons" style="float:left">
                        {# SWITCH GRID LIST #}
                        <a href="{{ path('documentation_document_grid') }}" class="btn btn-default" style="margin-right: 0.5rem;">
                            <i aria-hidden="true" class="fas fa-th"></i>
                            {{ 'documentation.document.action.grid'|trans }}
                        </a>
                    </div>
                    <table id="table" class="table table-bordered table-hover">
                        <caption class="sr-only">Liste des documents</caption>
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">
                                    <input type="checkbox" class="form-check-input" id="search_favorite">
                                    <label class="form-check-label" for="search_favorite">{{ 'documentation.document.list.favorite'|trans }}</label>
                                </th>
                                <th scope="col">
                                    <select class="form-control" id="search_type" style="width: 100%;">
                                        <option value="" selected>{{ 'documentation.document.list.type'|trans }}</option>
                                        {% for key, subject in dictionary('documentation_document_type') %}
                                            <option value="{{ key }}">{{ subject }}</option>
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col"></th>
                                <th scope="col">
                                    <input class="form-control" type="text" id="search_name" placeholder="{{ 'documentation.document.label.name'|trans }}" style="width: 100%;">
                                </th>
                                <th scope="col">
                                    <select class="form-control selectpicker" id="search_category" style="width: 100%;" multiple>
                                        {% for category in categories %}
                                            {% if category.name in activeCategories %}
                                                <option
                                                        value="{{ category.name }}"
                                                        {% if app.request.get('category') and app.request.get('category') == category.id  %}
                                                        selected="selected"
                                                        {% endif %}
                                                    >
                                                        {{ category.name }}
                                                    </option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </th>
                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_created_at" placeholder="{{ 'global.placeholder.date'|trans }}" style="max-width: 130px;left: inherit!important;top: 0;font-size: 14px;border-radius: 0;padding: 0 5px;">
                                </th>
                                <th scope="col" style="min-width:130px;position:relative;">
                                    <input class="daterangepicker form-control" type="text" id="search_updated_at" placeholder="{{ 'global.placeholder.date'|trans }}" style="max-width: 130px;left: inherit!important;top: 0;font-size: 14px;border-radius: 0;padding: 0 5px;">
                                </th>
                                <th scope="col"></th> <!-- Actions -->
                            </tr>

                            <tr>
                                <th scope="col">{{ 'documentation.document.label.pinned'|trans }}</th>
                                <th scope="col">{{ 'documentation.document.list.favorite'|trans }}</th>
                                <th scope="col">{{ 'documentation.document.list.type'|trans }}</th>
                                <th scope="col">{{ 'documentation.document.list.weight'|trans }}</th>
                                <th scope="col">{{ 'documentation.document.label.name'|trans }}</th>
                                <th scope="col">{{ 'documentation.document.label.categories'|trans }}</th>
                                <th scope="col">{{ 'global.label.created_at'|trans }}</th>
                                <th scope="col">{{ 'global.label.updated_at'|trans }}</th>
                                <th scope="col">{{ 'global.label.actions'|trans }}</th>
                            </tr>

                        </thead>
                        <tbody>
                            {% for object in objects %}
                                <tr>
                                    <td class="text-center">
                                        {%  if object.pinned == 1 %}
                                            <span style="visibility: hidden">{{ object.pinned }}</span>
                                            <i aria-hidden="true" class="fas fa-thumbtack"></i>
                                        {% endif %}
                                    </td>
                                    <td class="text-center favorite">
                                        <a href="{{ path('documentation_document_favorite', { 'id': object.id, 'back': app.request.uri }) }}" style="color:#f39c12;">
                                            {% if object.favoritedUsers |filter(f => f.id == app.user.id)|length > 0 %}
                                                1
                                            {% else %}
                                                0
                                            {% endif %}
                                        </a>
                                    </td>
                                    <td>
                                        {% if object.typeName == "Vidéo" %}
                                            <i aria-hidden="true" class="far fa-file-video"></i>
                                        {% elseif object.typeName == "PDF" %}
                                            <i aria-hidden="true" class="far fa-file-pdf"></i>
                                        {% elseif object.typeName == "Document" %}
                                            <i aria-hidden="true" class="far fa-file-word"></i>
                                        {% elseif object.typeName == "Lien" %}
                                            <i aria-hidden="true" class="fas fa-link"></i>
                                        {% elseif object.typeName == "Image" %}
                                            <i aria-hidden="true" class="fas fa-image"></i>
                                        {% elseif object.typeName == "PowerPoint" %}
                                            <i aria-hidden="true" class="fas fa-file-powerpoint"></i>
                                        {% elseif object.typeName == "Excel" %}
                                            <i aria-hidden="true" class="fas fa-file-excel"></i>
                                        {% elseif object.typeName == "Audio" %}
                                            <i aria-hidden="true" class="fas fa-file-audio"></i>
                                        {% endif %}
                                        {{ object.typeName }}
                                    </td>
                                    <td>
                                        {{ object.size }}
                                    </td>
                                    <td><a href="{{ object.url }}" target="_blank">{{ object.name }}</a></td>
                                    <td>
                                        {{ object.categories|map(c => "#{c.name}") | join(', ') }}
                                    </td>
                                    <td>{{ object.createdAt|date('d/m/Y H:i') }}</td>
                                    <td>{{ object.updatedAt|date('d/m/Y H:i') }}</td>

                                    <td>
                                        {% if is_granted('ROLE_ADMIN') %}
                                            <a href="{{ path('documentation_document_edit', { 'id': object.id }) }}">
                                                <i aria-hidden="true" class="fa fa-pencil"></i>&nbsp;{{ 'global.action.edit'|trans }}
                                            </a>
                                            <a href="{{ path('documentation_document_delete', { 'id': object.id }) }}">
                                                <i aria-hidden="true" class="fa fa-trash"></i>&nbsp;{{ 'global.action.delete'|trans }}
                                            </a>
                                            <a class="sharelink" href='#' data-id="{{ url('documentation_document_share', {id: object.id}) }}" data-toggle="modal" data-target="#shareModal">
                                                <i aria-hidden="true" class="fa fa-share"></i>&nbsp;{{ 'global.action.share'|trans }}
                                            </a>
                                        {% endif %}
                                        {% if is_granted('ROLE_REFERENT') and not is_granted('ROLE_ADMIN') %}
                                            <a class="sharelink" href='#' data-id="{{ url('documentation_document_share', {id: object.id}) }}" data-toggle="modal" data-target="#shareModal">
                                                <i aria-hidden="true" class="fa fa-share"></i>&nbsp;{{ 'global.action.share'|trans }}
                                            </a>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="shareModal" class="modal fade" >
        <div class="modal-dialog">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ 'documentation.document.title.share_link'|trans }}</h3>
                    <div class="box-tools pull-right">
                        <!-- Collapse Button -->
                        <button aria-label="{{ 'global.action.close'|trans }}" type="button" class="btn btn-box-tool" data-dismiss="modal">
                            <i aria-hidden="true" class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body text-center copyLink" style="display: none">
                    <i aria-hidden="true" class="fa fa-check fa-3x" style="color:green"></i>
                    <h4><b>{{ 'documentation.document.list.copied_link'|trans }}</b></h4>
                </div>
                <div class="box-body text-center">
                    <div class="input-group">
                        <input type="text" class="form-control linkDoc">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-primary btn-flat" data-dashlane-label="true" onclick="copyToClipBoard()" data-form-type="other">{{ 'documentation.document.action.copy'|trans }}</button>
                        </span>
                    </div>
                </div>
                <div class="box-body">
                    <p class="callout callout-default text-muted">
                        {{ 'documentation.document.list.help'|trans }}
                    </p>
                </div>
                <!-- box-footer -->
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.js"></script>

    {% set dataTableOptions = {
        columns: [
            {"data": "pinned"},
            {"data": "favorite"},
            {"data": "type"},
            {"data": "weight"},
            {"data": "name"},
            {"data": "category"},
            {"data": "created_at", "visible" : false},
            {"data": "updated_at", "visible" : false},
            {"data": "actions", "orderable": false, "class": 'noVis'},
        ],

        order: [[0,'desc'],[6,'desc']],
        language: {
            buttons: {
                colvis: "Colonnes"
            },
        },
        dom: 'Brtip',
        columnDefs: [
            {
                targets: 4,
                className: 'noVis'
            }
        ],
        buttons: [
            {
                extend: 'colvis',
                columns: ':not(.noVis)'
            }
        ]
    } %}

    {# {{ include('_Utils/_serverside_datatable.html.twig') }} #}
    {{ include('_Utils/_datatable.html.twig') }}
    <script>
        $(document).ready(function() {
            const isUser = {{ is_granted('ROLE_USER')|json_encode() }};
            const isReferent = {{ is_granted('ROLE_REFERENT')|json_encode() }};

            if (isUser && !isReferent){
                var oTable = $('#table').DataTable();
                oTable.column('7').visible(false);
            }

            $('.buttons-colvis').on('click', function(){
                if (!isUser && !isReferent){
                    $('button[data-cv-idx="7"]').hide();
                    var oTable = $('#table').DataTable();
                    oTable.column('7').visible(false);
                }
            })

            $('.sharelink').on('click', function() {
                $('.linkDoc').val($(this).data('id'));
                $('.copyLink').hide();
            })


            // SET FAVORITE ICON
            $('.favorite > a').each( (fav, obj) => {
                obj.innerHTML = obj.innerHTML.includes("1") ? '<i data-value="1" class="fas fa-star"></i>' : '<i data-value="0" class="far fa-star"></i>'
            })
        })

        function copyToClipBoard() {
            var text = $('.linkDoc').val();

            var dummy = document.createElement("textarea");
            document.body.appendChild(dummy);
            dummy.value = text;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);

            $('.copyLink').show();
        }

        $(function () {
            $('.selectpicker').selectpicker();
            setTimeout(function() {
                document.getElementById('search_category').dispatchEvent(new Event('change', { 'bubbles': true }));
            },200);
        });

        function resetFilters() {
            $('[id^=search_]').each(function() {
                $(this).val('');
            });
            $('#search_favorite').prop('checked', false);
            var table = $('#table').DataTable();
            table.columns().search('');
        }
        function setEvents() {
            var oTable = $('#table').DataTable();

            $('#search_created_at').show('slide',function(){
                $('input#search_created_at').val('');
            });
            $('#search_updated_at').show('slide',function(){
                $('input#search_updated_at').val('');
            });


            $('#search_favorite').off('change');
            $('#search_favorite').change(function(){
                oTable.column('1').search($(this).prop('checked') ? "1" : "").draw();
            });

            $('#search_type').off('change');
            $('#search_type').change(function(){
                oTable.column('2').search($(this).val()).draw() ;
            });

            $('#search_name').off('keyup');
            $('#search_name').keyup($.debounce(250, function(){
                oTable.column('4').search($(this).val()).draw() ;
            }));

            $('#search_category').off('change');
            $('#search_category').change(function() {
                if ($(this).val() && $(this).val().length) {
                    oTable.column('5').search($(this).val().join(' ')).draw()
                    $('button[data-id="search_category"] .filter-option-inner-inner').html($(this).val().join(', '))
                } else {
                    oTable.column('5').search('').draw();
                    $('button[data-id="search_category"] .filter-option-inner-inner').html("Catégories")
                }
            });

            $('#search_created_at').off('change');
            $('#search_created_at').change(function(){
                oTable.column('6').search($(this).val()).draw() ;
            });

            $('#search_updated_at').off('change');
            $('#search_updated_at').change(function(){
                oTable.column('7').search($(this).val()).draw() ;
            });
        }

        $(document).ready(function() {
            $('.dt-button-background').hide();
            setEvents();

            // Affichage/Masquage d'une colonne
            $('.toggle-vis').on( 'click', function (e) {
                e.preventDefault();
                var table = $('#table').DataTable();
                // Get the column API object
                var column = table.column( $(this).attr('data-column') );

                // Toggle the visibility
                column.visible( ! column.visible() );
            });
            $('.dt-button.buttons-colvisRestore').on('click', function() {
                resetFilters();
                var table = $('#table').DataTable();
                table.columns().search('').draw();
            })

            $('[id^="search_"]').on('change',function() {
                setTimeout(starShow,250);
            })
            $('.dataTables_paginate').on('click',function() {
                setTimeout(starShow,250);
            })
            $('[id^="search_"]').on('keyup',function() {
                setTimeout(starShow,250);
            })
        } );

        $('#table').on('column-visibility.dt', function() {
            setEvents();
        } );

        function starShow(){
            $('.favorite > a').each((fav, obj) => {
                obj.innerHTML = obj.innerHTML.includes("1") ? '<i data-value="1" class="fas fa-star"></i>' : '<i data-value="0" class="far fa-star"></i>'
            })
        }


    </script>

{% endblock %}