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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('lectura_notas_index') }}"> Lectura de Notas </a></li>
        <li><a class="active"> Nueva Lectura </a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row">
        <div class="col s12 l9">
        <i class="material-icons medium left identidad-color-text">person</i>
        <h4 style="margin-top: 12px;">Nueva Lectura</h4>
        </div>
    </div>
{% endblock %}

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

    <script>
        $(document).ready(function() {
            $('.fecha-input').keyup(function() {
                var fechaValue = $(this).val();
                if (fechaValue.length === 10) {
                    data ={};
                    data['fecha']=fechaValue;
                    //solicitud AJAX 
                    $.ajax({
                        data: data,
                        url: "{{ path('lectura_notas_listado_entrevistas') }}",
                        method: 'GET',
                        success: function(data) {
                            $('#tablaEntrevistas').html(data);
                            $('#tablaEntrevistas').parent().show();
                        }
                    });
                }
            });
        });

        function clickAgregarWarning(e){
            swal({
                title: "No se puede Agregar",
                text: "Esta Entrevista pertenece a otra Lectura de Notas.",
                icon: "warning",
                buttons: {
                    confirm: {
                        text: "Aceptar",
                        value: true,
                        visible: true,
                        className: "btn btn-success",
                        closeModal: true
                    }
                },
            });
        }

        function clickEntrevistaSinResultados(e){
            swal({
                title: "No se puede Agregar",
                text: "Esta Entrevista no tiene ningún Resultado cargado.",
                icon: "warning",
                buttons: {
                    confirm: {
                        text: "Aceptar",
                        value: true,
                        visible: true,
                        className: "btn btn-success",
                        closeModal: true
                    }
                },
            });
        }

        function clickAgregarVideo(event) {
            if (event.currentTarget.id == "agregarVideo"){
                $('#cajaInputVideo2').show();
                $('#agregarVideo').hide();
                $('#deleteVideo2').show();
                $('#agregarVideo3').show();
            } else {
                $('#cajaInputVideo3').show();
                $('#colVideo3').show();
                $('#deleteVideo3').show();
                $('#agregarVideo3').hide();
            }
          
        }

        function clickEliminarVideo(event){
            if (event.currentTarget.id == "delete1"){
                var divInput2 = document.getElementById('cajaInputVideo2');
                var divInput3 = document.getElementById('cajaInputVideo3');
                if ( divInput2.style.display === "none" & divInput3.style.display === "none"){
                    $('#lectura_notas_video1').val(null);
                    $('#lectura_notas_titulo_v1').val(null);
                } else if (divInput3.style.display === "none"){
                    var valorInput2= $('#lectura_notas_video2').val();
                    var valorTitulo2= $('#lectura_notas_titulo_v2').val();
                    $('#lectura_notas_video1').val(valorInput2);
                    $('#lectura_notas_titulo_v1').val(valorTitulo2);
                    $('#lectura_notas_video2').val(null);
                    $('#lectura_notas_titulo_v2').val(null);
                    $('#cajaInputVideo2').hide();
                    $('#deleteVideo2').hide();
                } else {
                    var valorInput2= $('#lectura_notas_video2').val();
                    var valorTitulo2= $('#lectura_notas_titulo_v2').val();
                    var valorInput3= $('#lectura_notas_video3').val();
                    var valorTitulo3= $('#lectura_notas_titulo_v3').val();
                    $('#lectura_notas_video1').val(valorInput2);
                    $('#lectura_notas_titulo_v1').val(valorTitulo2);
                    $('#lectura_notas_video2').val(valorInput3);
                    $('#lectura_notas_titulo_v2').val(valorTitulo3);
                    $('#lectura_notas_video3').val(null);
                    $('#lectura_notas_titulo_v3').val(null);
                    $('#cajaInputVideo3').hide();
                    $('#deleteVideo3').hide();
                    $('#agregarVideo3').show(); 
                    {# $('#lectura_notas_video1').siblings('label').addClass('active'); #}
                } 
            } else if (event.currentTarget.id == "delete2") {
                var divInput1 = document.getElementById('cajaInputVideo1');
                var divInput3 = document.getElementById('cajaInputVideo3');
                if (divInput3.style.display === "none"){
                    $('#lectura_notas_video2').val(null);
                    $('#lectura_notas_titulo_v2').val(null);
                    $('#cajaInputVideo2').hide();
                    $('#deleteVideo2').hide();
                    $('#agregarVideo').show(); 
                } else {
                    var valorInput2= $('#lectura_notas_video2').val();
                    var valorTitulo2= $('#lectura_notas_titulo_v2').val();
                    var valorInput3= $('#lectura_notas_video3').val();
                    var valorTitulo3= $('#lectura_notas_titulo_v3').val();
                    $('#lectura_notas_video2').val(valorInput3);
                    $('#lectura_notas_titulo_v2').val(valorTitulo3);
                    $('#lectura_notas_video3').val(null);
                    $('#lectura_notas_titulo_v3').val(null);
                    $('#cajaInputVideo3').hide();
                    $('#deleteVideo3').hide();
                    $('#agregarVideo3').show(); 
                } 
            } else {
                $('#lectura_notas_video3').val(null);
                $('#lectura_notas_titulo_v3').val(null);
                $('#cajaInputVideo3').hide();
                $('#deleteVideo3').hide();
                $('#agregarVideo3').show(); 
            }
        }  

    </script>
{% 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('#lectura_notas_fecha', {
        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 = $('#lectura_notas_fecha').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;
            $('#lectura_notas_fecha').val(fecha);
            $('#lectura_notas_fecha').siblings('label').addClass('active');
            if ($('.modal.datepicker-modal').prop('style').display != 'none'){
                $('#lectura_notas_fecha').keyup();
            }
        },
        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'
            ],
        }
    });

    // Agrego evento de click al botón de limpiar del datepicker
    $('.datepicker-clear').click(function(){
        $('#lectura_notas_fecha').val(''); // Vaciar el valor del input
    });
{% endblock %}

{% block body %}
    {{ form_start(form) }}
    
    <div class="card">
        <div class="card-content">
            <div class="row">
                <div class="col s12 m2 l2">
                    <div class="input-field col l10 s12">
                        {{ form_row(form.fecha, {'attr': {'class': 'fecha-input'}}) }}
                        {{ form_errors(form.fecha) }}
                    </div>
                    <div class="input-field col l1 s12" style="padding-left:0; padding-top: 10%; margin-right: 3%; padding-right: 1;">
                        <a id="btnFechaEntrevista" class="identidad-color-text datepicker " href="#"  style="background:transparent; border:none; ">
                            <i class="material-icons">calendar_today</i>
                        </a>
                    </div>
                </div>
            
                <div class="input-field col s12 m4 l4 grey lighten-5" style="border: solid 1px #004c82;" id="cajaInputVideo1">
                    {{ form_widget(form.titulo_v1) }}
                    <span class="helper-text" data-error="wrong" data-success="right">Título descriptivo del video</span>
                    <div id="inputVideo1">
                        {{ form_widget(form.video1) }}
                    </div>
                </div>                        
                <div class="input-field col s12 m1 l1">
                    <a class="btn-floating red" type="button" onclick="clickEliminarVideo(event)" title="Eliminar Video" id="delete1">
                        <i class="material-icons">delete</i>
                    </a>
                    <a type="button" onclick="clickAgregarVideo(event)" title="Agregar Video" class="btn-floating btn-flat" id="agregarVideo">
                        <i class="material-icons right">add</i>
                    </a>
                </div> 

                <div class="input-field col s12 m4 l4  grey lighten-5" style="border: solid 1px #004c82; display:none" id="cajaInputVideo2">
                    {{ form_widget(form.titulo_v2) }}
                    <span class="helper-text" data-error="wrong" data-success="right">Título descriptivo del video</span>
                    <div id="inputVideo2">
                        {{ form_widget(form.video2) }}
                    </div>
                </div>
                <div class="input-field col s12 m1 l1" style="display:none;"  id="deleteVideo2">
                    <a class="btn-floating red" onclick="clickEliminarVideo(event)" title="Eliminar Video" id="delete2">
                        <i class="material-icons">delete</i>
                    </a>
                    <a type="button" onclick="clickAgregarVideo(event)" style="display:none;" title="Agregar Video" class="btn-floating btn-flat" id="agregarVideo3">
                        <i class="material-icons right">add</i>
                    </a>
                </div> 

                <div class="col s12 m2 l2" style="display:none;" id="colVideo3"></div>

                <div class="input-field col s12 m4 l4  grey lighten-5" style="border: solid 1px #004c82; display:none" id="cajaInputVideo3">
                    {{ form_widget(form.titulo_v3) }}
                    <span class="helper-text" data-error="wrong" data-success="right">Título descriptivo del video</span>
                    <div id="inputVideo3">
                        {{ form_widget(form.video3) }}
                    </div>
                </div>
                <div class="input-field col s12 m1 l1" style="display:none;"  id="deleteVideo3">
                    <a class="btn-floating red" onclick="clickEliminarVideo(event)" title="Eliminar Video" id="delete3">
                        <i class="material-icons">delete</i>
                    </a>
                </div> 

                <div class="col s12">
                    {{ form_row(form.observaciones) }}
                </div>
            </div>
        </div>
    </div>

    <div class="card" {{ lectura.id ? '' : 'style="display:none;"' }}>
        <div class="card-content" id="tablaEntrevistas">
            {# pego ajax #}
        </div>
    </div>

    <div class="row">
        <div class="col s12 l12">
            {{ form_label(form.guardar) }}
            {{ form_widget(form.guardar) }}

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