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

{% block titulo_body %}
        <i class="material-icons medium left identidad-color-text">today</i>
        <h4 style="margin-top: 12px;">Cronograma de Entrevistas</h4>
        <br>
{% endblock %}

{% block titulo_acciones_body %}
{% endblock %}

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
    {{parent()}}
{% endblock %}

{% block javascripts_base %}
    function initDateFormat( datePicker ) {
        var selectedDate = ( typeof datePicker.date === 'undefined' || datePicker.date === null ) ? datePicker.options.defaultDate : datePicker.date;
        var shortWeekdays = datePicker.options.i18n.weekdaysShort; 
        var shortMonths = datePicker.options.i18n.monthsShort; 
        var day     = selectedDate.getDate();
        var weekday = shortWeekdays[ selectedDate.getDay() ];
        var month   = shortMonths[ selectedDate.getMonth() ];

        var formattedDate = weekday + ', ' + day + ' ' + month;
        document.querySelector(".datepicker-date-display .date-text").innerHTML = formattedDate;
        document.querySelector(".datepicker-date-display .year-text").innerHTML = selectedDate.getFullYear();
    }

    function comprobarInputs() { 
        a=$('#cronograma_entrevistas_control_filtro_fechaEntrevista');
        b=$('#cronograma_entrevistas_control_filtro_cargo');
        if (a.val() != "" || b.val().length > 0){
            $('.limpiar').show();
        } else {
            $('.limpiar').hide();
        }
    }

    var cleave = new Cleave('#cronograma_entrevistas_control_filtro_fechaEntrevista', {
        date: true,
        delimiter: '/',
        datePattern: ['d', 'm', 'Y']
    });    
{% endblock %}

{% block js_document_ready %}

    $('.datepicker').datepicker({
        autoClose: true,
        showClearBtn: true,
        format: 'dd/mm/yyyy',
        container: 'body',
        onDraw: function (datePicker) { 
            // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
            $('.datepicker-container').find('.datepicker-select').addClass('browser-default');
            $(".datepicker-container .select-dropdown.dropdown-trigger").remove();
        },
        onOpen: function (p) {
            var instance = M.Datepicker.getInstance(this.el);
            var d = $('#cronograma_entrevistas_control_filtro_fechaEntrevista').val().split(/[^0-9]/);
            var newDate = new Date(d[2], d[1] - 1, d[0]);
            instance.setDate(newDate);
            initDateFormat(instance);
        },
        onSelect: function(date) {
            var day = String(date.getDate()).padStart(2, '0');
            var month = String(date.getMonth() + 1).padStart(2, '0');
            var year = String(date.getFullYear());
            var fecha = day + '/' + month + '/' + year;
            $('#cronograma_entrevistas_control_filtro_fechaEntrevista').val(fecha);
            $('#cronograma_entrevistas_control_filtro_fechaEntrevista').siblings('label').addClass('active');
        },
        i18n: {
            cancel:	'Cancelar',
            clear: 'Limpiar',
            done: 'Aceptar',
            weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            weekdaysShort: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            weekdaysAbbrev: ["D", "L", "M", "M", "J", "V", "S"],
            today: 'Hoy',
            months: [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ],
            monthsShort: [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ],
        }
    });

    $('.timepicker').timepicker({
        container: 'body',
        autoClose: true,
        twelveHour: false,
        showClearBtn: true,
        onDraw: function () {
            // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
            $('.timepicker-container').find('.timepicker-select').addClass('browser-default');
            $(".timepicker-container .select-dropdown.dropdown-trigger").remove()
    },
    i18n: {
        cancel:	'Cancelar',
        clear: 'Limpiar',
        done: 'Aceptar',
    }
    });

    $('#datatable').dataTable({
         createdRow: function(row, data, dataIndex) {
                        $(row).css({"background-color":"transparent"});
                },
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
           {
                "data": "fechaEntrevista",
                "render": function(data, type, row) {
                    if (type === 'display') {

                        var date = new Date(data);
                        var date2 = new Date(data);
                        var options = { weekday: 'long'};
                        var options2 = { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'};
                        var formattedDate = date2.toLocaleDateString('es-AR', options) + ', ' + date2.toLocaleDateString('es-ar', options2);
                        formattedDate = formattedDate.replace(',', ''); 
                        formattedDate = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1); 
                        return formattedDate + ' hs';
                    }
                    return data;
                }
            },
            { "data": "cargo",
                render: function(data, type, row, meta) {
                    let string_compacto = "";
                    if(data != null)
                    {
                        tooltiptext = data;
                        string_compacto = data.length >= 80 ? data.substring(0, 80)+"..." : data;
                    }
                    else{ tooltiptext = ""; }
                    let string_final = "<div title='"+tooltiptext+"'>";
                    string_final += string_compacto;
                    string_final += '</div>';
                    return string_final;
                } 
            },
            { 
                "data": "presentacionAntecedentes",
                "render": function(data, type, row) {
                    if (type === 'display') {
                        return "<div class='center'><div class='center-align; chip'>"+ data+ "</div></div>"; 
                    }
                    return data;
                }
            },
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                             "<a href='",
                            data['seleccionar'],
                            "' class='btn-floating btn-flat identidad-color darken-2' title='Ver Cronograma'>",
                            "<i class='material-icons'>visibility</i>",
                            "</a>",
                        ].join('');
                        $botones += [
                            " <a href='",
                            data['excell'],
                            "' class='btn-floating btn-flat identidad-color darken-2' title='Descargar Excell' style='margin-right:2%;'>",
                            "<i class='material-icons'>download</i>",
                            "</a>",
                        ].join('');
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[ 0, 'desc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "c.fechaEntrevista", 
                "searchable": true, 
                "orderable": true, 
                "targets": 0,
            },
            { 
                "name": "c.cargo",   
                "searchable": true, 
                "orderable": false, 
                "targets": 1 
            },
            { 
                "name": "c.presentacionAntecedentes",
                "searchable": true, 
                "orderable": false,    
                "targets": 2 
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 3
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('entrevistas_listado_index') }}',
            type: 'POST'
        }
    });
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('select').formSelect();

    $('.limpiar').click(function(){
        window.location.href="{{ path('entrevistas_limpiar_index') }}"
    });

    $('#cronograma_entrevistas_control_filtro_fechaEntrevista').keyup(function() {
        if ($(this).val() != '') {
            $('.limpiar').show();
        } else {
           comprobarInputs();
        }
    });

    $('#cronograma_entrevistas_control_filtro_cargo').change(function() {
        if ($(this).val().length > 0) {
            $('.limpiar').show();
        } else {
           comprobarInputs();
        }
    });

    comprobarInputs();
{% endblock %}

{% block body %}
        <div class="card">
            <div class="card-content">
                <div class="row">
                    {{ form_start(form) }}
                        <div class="input-field col s12 m6 l4">
                            {{ form_widget(form.cargo) }}
                            {{ form_label(form.cargo) }}
                        </div>
                        <div class="input-field col s12 m2 l2">
                            {{ form_label(form.fechaEntrevista) }}
                            {{ form_widget(form.fechaEntrevista) }}
                        </div>
                        <div class="input-field col" style="padding-left:0; padding-top: 1%; margin-right: 1%; padding-right: 0;">
                            <a id="btnFechaEntrevista" class="identidad-color-text datepicker" href="#"  style="background:transparent; border:none; ">
                                <i class="material-icons">calendar_today</i>
                            </a>
                        </div>
                        <div class="input-field col m2 s12 l2">
                            <button id="boton" class="btn identidad-color darken-2 waves-effect waves-light col s12" type="submit" >Buscar<i class="material-icons right">search</i></button>
                        </div>
                        
                        <div class="input-field col m2 s12 l2">
                            <button id="boton" class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="button" style="display: none;">Limpiar<i class="material-icons right">close</i></button>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>

        <table id="datatable" class="row-border">
            <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Cargo</th>
                    <th class="center">Cant. Postulantes</th>
                    <th>Acciones</th>
                </tr>
            </thead>

            <tbody>      
            </tbody>
        </table>
{% endblock %}