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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('desistimientos_index') }}">Desistimientos </a></li>
        <li><a class="active"> Nuevo Desistimiento </a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <i class="material-icons medium left identidad-color-text">list</i>
    <h4 style="margin-top: 12px;"> Nuevo Desistimiento </h4>
    <br>
{% 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();
    }

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

{% endblock %}

{% block js_document_ready %}
    $('#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"
        },
        initComplete: function() {
            $('.tooltipped').tooltip();
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            {"data" : "apellidos_nombres"},
            {"data" : "DNI"},
            {"data" : "FechaExamen"},
            {"data" : "cargos"},
            {"data" : "acciones",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                            "<button data-url='",
                                data['agregar'],
                                "' class='btn-floating btn-flat identidad-color darken-2 modalAgregarTerritorialidad' title='Seleccionar territorios' style='margin-right:2%;'>",
                                "<i class='material-icons'>add</i>",
                            "</button>",
                        ].join('');

                        
                        return $botones;
                    }
                    return data;
                },
            }, 
        ],
        order: [[ 0, 'desc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "apellidos_nombres", 
                "searchable": true, 
                "orderable": true, 
                "targets": 0,
            },
            { 
                "name": "dni",   
                "searchable": true, 
                "orderable": true, 
                "targets": 1 
            },
            { 
                "name": "FechaExamen", 
                "searchable": true, 
                "orderable": false, 
                "targets": 2,
            },
            { 
                "name": "cargos", 
                "searchable": true, 
                "orderable": true, 
                "targets": 3,
            },
           { 
                "searchable": false, 
                "orderable": false,  
                "targets": 4
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('desistimiento_new_datos') }}',
            type: 'POST'
        },
        fnDrawCallback: function( oSettings ) {
            $(".modalAgregarTerritorialidad").on("click", function (event) {
                event.stopPropagation();
                event.preventDefault();
                botonClick = event.currentTarget;
                //Hago una solicitud AJAX al controller
                $.ajax({
                    url: event.currentTarget.dataset.url ,
                    method: 'GET',
                    success: function (data) {
                            if (data.includes('form')) {
                                // Insertor el contenido en el div del modal
                                var modal = $("#modalAgregarTerritorialidad");
                                modal.find(".modal-content").html(data);
                                modal.modal('open');
                            } else {
                                location.href=data;
                            }
                            
                        },
                    error: function (error) {
                        swal({
                            title: "Error",
                            text: error.responseText,
                            icon: "warning",
                            //buttons: true,
                            })
                        //console.log(error);
                    }
                });
            });
        }
    });
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('select').formSelect();

    $('.limpiar2').click(function(){
        window.location.href="{{ path('new_desistimientos_limpiar') }}"
    });
{% endblock %}


{% block body %}
    <div class="card">
        <div class="card-content">
            {{ form_start(form) }}
                <div class="row">
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.fechaExamen) }}
                        {{ form_widget(form.fechaExamen) }}
                    </div>
                    <div class="input-field col" style="padding-left:0; padding-top: 1%; margin-right: 1%; padding-right: 0;">
                        <a id="btnFechaExamen" 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 s12 m2 l2">
                        {{ form_widget(form.dni) }}
                        {{ form_label(form.dni) }}
                    </div>
                    <div class="input-field col s12 m6 l3">
                        {{ form_widget(form.cargo) }}
                        {{ form_label(form.cargo) }}
                    </div>

                    <div class="input-field col s12 m2 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>
                    {% if form.children | filter(v => (v.vars.name != "_token" and not (v.vars.value == "" or v.vars.value == []))) | length > 0 %}
                        <div class="input-field col m2 s12 l2">
                            <button id="boton" class="limpiar2 btn orange darken-2 waves-effect waves-light col s12" type="button" >Limpiar<i class="material-icons right">close</i></button>
                        </div>
                    {% endif %}
                </div>
            {{ form_end(form) }}
        </div>
    </div>
    
    <div class="row">
        {% if form.children | filter(v => (v.vars.name != "_token" and not (v.vars.value == "" or v.vars.value == []))) | length > 0 %}
            <div class="col s12 m2 l12">
                <table id="datatable" class="row-border" >
                    <thead>
                        <tr>
                            <th>Nombre y Apellido</th>
                            <th>DNI</th>
                            <th>Fecha de Examen</th>
                            <th>Cargo</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>

                    <tbody>      
                    </tbody>
                </table>
            </div>    
        {% else %}
            <div class="col s12 m12 l12">
                <div class="card">
                    <div class="card-content">
                        <h6 class="center"> Por favor, busque una persona y/o exámen para comenzar con el Desistimiento.</h6>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <a class="btn waves-effect waves-light left-align" href="{{ path('desistimientos_index_limpiar') }}">Volver.
        <i class="material-icons right">undo</i>
    </a>
{% endblock %}

{% block dialogos_modales %}
    <div id="modalAgregarTerritorialidad" class="modal">
        <div class="modal-content">
            {# Contenido del Modal #}
        </div>
    </div>
{% endblock %}