{% extends "main/layout.html" %}
{% load static %}
{% block content %}
<div class="breadcrumb-holder">
    <div class="container-fluid">
        <ul class="breadcrumb">
        {% if group == "de" %}
            <li class="breadcrumb-item"><a href="{% url 'train-de-dash' %}">PAINEL TREINAMENTO & BOLSO ESTUDO</a></li>
        {% elif group == "hr" or group == "hr_s" %}
            <li class="breadcrumb-item"><a href="{% url 'train-hr-dash' %}">PAINEL TREINAMENTO & BOLSO ESTUDO</a></li>
        {% endif %}
            <li class="breadcrumb-item active">{{ legend|upper }}</li>
        </ul>
    </div>
</div>
<div class="container-fluid"><br/>
	<div class="row">
		<div class="col-sm-12">
			<div class="card shadow-lg pt-1 border-primary rounded">

                <div class="card-body">
                    <h5 align="center">{{ legend|upper }}</h5>
                    <hr/>
                    <table id="example" class="table table-sm table-bordered responsive" style="width:100%">
                        <thead>
                            <tr align="center">
                                <th rowspan="2">Nu.</th>
                                <th rowspan="2">Naran</th>
                                <th rowspan="2">Pozisaun</th>
                                <th rowspan="2">Kontrato Hahu</th>
                                <th colspan="5">Treinamento</th>
                            </tr>
                            <tr align="center">
                                <th>Naran Treinamento</th>
                                <th>Data Hahu</th>
                                <th>Data Remata</th>
                                <th>Fatin</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for i in  objects %}
                            <tr>
                                <td>{{forloop.counter}}</td>
                                <td>{{i.0}}</td>
                                <td>{{i.0.curempposition.position.name}}</td>
                                <td>{{i.0.contract.all.last.start_date}}</td>
                                <td>
                                    <table border="0">
                                        {% for obj in i.1 %}
                                            {% for obj1 in obj %}
                                            <tr>
                                                <td>{{forloop.counter}} ) - {{obj1.subject}}</td>
                                            </tr>
                                            {% endfor %}
                                        {% endfor %}
                                    </table>
                                </td>
                                <td>
                                    <table>
                                        {% for obj in i.1 %}
                                            {% for obj1 in obj %}
                                            <tr>
                                                <td>{{obj1.start_date}}</td>
                                            </tr>
                                            {% endfor %}
                                        {% endfor %}
                                    </table>
                                </td>
                                <td>
                                    <table>
                                        {% for obj in i.1 %}
                                            {% for obj1 in obj %}
                                            <tr>
                                                <td>{{obj1.end_date}} </td>
                                            </tr>
                                            {% endfor %}
                                        {% endfor %}
                                    </table>
                                </td>
                                <td>
                                    <table>
                                        {% for obj in i.1 %}
                                            {% for obj1 in obj %}
                                            <tr>
                                                <td>{{obj1.place}} </td>
                                            </tr>
                                            {% endfor %}
                                        {% endfor %}
                                    </table>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div> <!--end card-body-->
			</div> <!--end card-->
		</div> <!--end col-->
	</div> <!--end row-->
</div><!--end container-->
{% endblock %}
{% block scripts %}
<link href="{% static 'main/vendor/datatables/css/searchBuilder.dataTables.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/datatables/css/searchBuilder.bootstrap4.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/datatables/css/buttons.dataTables.min.css' %}" rel="stylesheet">
<style type="text/css">
    .dtsb-searchBuilder{
        background: #b9c7e6 !important;
        padding: 5px
    }
    .dt-button, .dtsb-add {
        background: white !important;
    }
</style>
<script src="{% static 'main/vendor/datatables/js/dataTables.searchBuilder.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/searchBuilder.bootstrap4.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/jszip.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/pdfmake.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/vfs_fonts.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/buttons.print.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/buttons.colVis.min.js' %}"></script>
<script>
    var doc = {
    pageSize: config.pageSize,
    pageOrientation: config.orientation,
    content: [
        {
            table: {
                headerRows: 1,
                body: rows
            },
            layout: 'Borders'
        }
    ],
    styles: {
        tableHeader: {
            bold: true,
            fontSize: 10,
            color: 'white',
            fillColor: '#2d4154',
            alignment: 'center'
        },
        tableBodyEven: {},
        tableBodyOdd: {
            fillColor: '#f3f3f3'
        },
        tableFooter: {
            bold: true,
            fontSize: 10,
            color: 'white',
            fillColor: '#2d4154'
        },
        title: {
            alignment: 'center',
            fontSize: 12
        },
        message: {}
    },
    defaultStyle: {
        fontSize: 9
    }
};
</script>
<script type="text/javascript">
    $(document).ready( function () {
        var table = $('#example').removeAttr('width').DataTable( {
            "scrollY": "50vh",
            "scrollX": true,
            "scrollCollapse": true,
            "paging": true,
            searchBuilder: true,
            buttons:[
                {
                    extend: 'excelHtml5', autoFilter: true, sheetName: 'Exported data'
                },
                {
                    extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'A4', messageTop: '',
                    title: "REPÚBLICA DEMOCRÁTICA DE TIMOR-LESTE" + "\n" + "MINISTÉRIO DO PLANO E ORDENAMENTO" +"\n"+ "AGÊNCIA DE DESENVOLVIMENTO NACIONAL, INSTITUTO PÚBLICO",
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 9; //<-- set fontsize to 16 instead of 10 
                    }
                },
                {
                    extend: 'print', orientation: 'landscape', pageSize: 'LEGAL',
                    exportOptions: { columns: ':visible' },
                    title: '<center><h5>REPÚBLICA DEMOCRÁTICA DE TIMOR-LESTE <br/>\
                        MINISTÉRIO DO PLANO E ORDENAMENTO<br/>\
                        AGÊNCIA DE DESENVOLVIMENTO NACIONAL, INSTITUTO PÚBLICO</h5></center><hr/>',
                    customize: function ( win ) {
                        $(win.document.body)
                            .css( 'font-size', '10pt' )
                            .prepend(
                                '<center><img src="#" style="width:80px;" /></center><br/>'
                            );
 
                        $(win.document.body).find( 'table' )
                            .addClass( 'compact' )
                            .css( 'font-size', 'inherit' );
                    }
                },
                'colvis',
            ],
            dom: 'Bfrtip',
            "deferRender": true
        });
        table.searchBuilder.container().prependTo(table.table().container());
    } );
</script>
{% endblock %}