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

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
{% endblock %}

{%block dashboard %}


    {% set  selectTypeActivity = ""%}
    {% set  visiaFallida = ""%}
    {% set  selectSiteOwner = ""%}
    {% set  selectCategory = ""%}
    {% set  selectSubcategory = ""%}
    {% set  selectFailure = ""%}
    {% set subTipificacionCalidad = "" %}
    {% set tipificacionCalidad = "" %}
    {% if ticketDatos == true  %}
        {% for ticketDato in ticketDatos %}
            {% if ticketDato.idetiquetas == 255 %}
                {% set  selectTypeActivity = ticketDato.valor %}
            {% endif  %}
            {% if ticketDato.idetiquetas == 256 %}
                {% set  selectSiteOwner = ticketDato.valor %}
            {% endif  %}
            {% if ticketDato.idetiquetas == 257 %}
                {% set  selectCategory = ticketDato.valor %}
            {% endif  %}
            {% if ticketDato.idetiquetas == 258 %}
                {% set  selectSubcategory = ticketDato.valor %}
            {% endif  %}
            {% if ticketDato.idetiquetas == 259 %}
                {% set  selectFailure = ticketDato.valor %}
            {% endif  %}
            {% if ticketDato.idetiquetas == 261 %}
                {% set  visiaFallida = ticketDato.valor %}
            {% endif  %}
            {% if ticketDato.idetiquetas == 267 %}
                {% set  subTipificacionCalidad = ticketDato.valor %}
            {% endif  %}
            {% if ticketDato.idetiquetas == 266 %}
                {% set  tipificacionCalidad = ticketDato.valor %}
            {% endif  %}
        {% endfor %}
    {% endif %}
    <style>
        #upfile .row{
            margin-top: 5px;
        }
        .btn-file {
            position: relative;
            overflow: hidden;
        }
        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }
    </style>
<script>
    $(function () {

        $("#segundaTipifacion").change(function () {
            valor = $(this).val();
            valor2 =$("#segundaTipifacion option[value='"+valor+"']").attr('idclasif');

            $("#primTipif option[value='"+valor2+"']").attr('selected','selected');
            $('#select2-chosen-1').empty();
            $('#select2-chosen-1').append(valor2);
            $('#s2id_primTipif a').removeClass('select2-default');
        });

        $(".js-example-basic-single").select2({
            placeholder: "Elegir...",
            allowClear: true
        });
        $("#cargar").css("display", "none");
        var detalle = []
        {% for failure in failure %}
            item = {
                value:"{{ failure.DETALLE |escape("js")}}",
                label:"{{ failure.DETALLE |escape("js")}}",
                cate:"{{ failure.Categoria|escape("js") }}",
                subcate:"{{ failure.Subcategoria|escape("js") }}"
            };
        detalle.push(item);
        {% endfor %}

        $("#inputSearch").autocomplete({
            source:detalle,
            focus: function(event, ui) {
                $("#item").val(ui.item.label);
                return false;
            },
            select: function(event, ui) {
                $("#selectCategory").val(ui.item.cate);
                $("#selectSubcategory").val(ui.item.subcate);
               // $('#selectSubcategory').change();
                $("#selectFailure").val(ui.item.label);

                $(this).val("");
                event.preventDefault();
            }
        });

        $("#selectCategory").change(function(){
            $("#selectSubcategory").load("{{ path('subCategoriaUpload',{'idproyectos':idproyectos}) }}", {$category:$("#selectCategory").val()}, function () {
                $("#selectFailure").load("{{ path('detalleUpload',{'idproyectos':idproyectos}) }}", {$subcategory:$("#selectSubcategory").val()})
            })
        });

        $("#selectSubcategory").change(function(){
            $("#selectFailure").load("{{ path('detalleUpload',{'idproyectos':idproyectos}) }}", {$subcategory:$("#selectSubcategory").val()})
        });
        $("#primTipif").change(function () {
            $("#segundaTipifcacion").html('<img class="loading" width="16" src="{{asset('loadings/spin.GIF')}}" style="margin: auto; margin-top: 50px; margin-left: 48%;" />');
            $("#segundaTipifcacion").load('{{ path('showSegundClasf',{'idproyectos':idproyectos, 'tas': tas}) }}',{$clasif:$(this).val()});

        });
/*
        $('#visiaFallida').prop('disabled', true);
        $('#selectTypeActivity').change(function(){
            var actividad = $('#selectTypeActivity').val();
            $('#fallida').css('display', 'none');
            $('#visiaFallida').prop('disabled', true);
            if(actividad=='VISITA FALLIDA'){
                $('#fallida').css('display', 'block');
                $('#visiaFallida').prop('disabled', false);
            }
        }); */
        {% for ticketDato in ticketDatos %}
            {% if ticketDato.idetiquetas == 255 %}
            $('#selectTypeActivity').val('{{ ticketDato.valor }}');
            {% endif  %}

            {% if ticketDato.idetiquetas == 261 %}
                {% if ticketDato.valor != 'ACTIVIDAD EJECUTADA'%}
                $('#catBL').css('display', 'none');
                $('#selectCategory').prop('disabled', true);

                $('#subcatBL').css('display', 'none');
                $('#selectSubcategory').prop('disabled', true);

                $('#busBL').css('display', 'none');

                $('#eleBL').css('display', 'none');
                $('#selectFailure').prop('disabled', true);

                $('#eleFalla').css('display', 'none');
                $('#selectAction').prop('disabled', true);
                {% endif %}
            {% endif %}
        {% endfor %}

        $('#visiaFallida').change(function(){
            var opt = $('#visiaFallida').val();
            var act = $('#visiaFallida option:selected').attr('sta');

            if(act == 1){activity = 'VISITA FALLIDA'}else{activity = 'ACTIVIDAD EJECUTADA'}

            $('#selectTypeActivity').val(activity);

            if(opt == 'ACTIVIDAD EJECUTADA'){
                $('#catBL').css('display', '');
                $('#selectCategory').prop('disabled', false);

                $('#subcatBL').css('display', '');
                $('#selectSubcategory').prop('disabled', false);

                $('#busBL').css('display', '');

                $('#eleBL').css('display', '');
                $('#selectFailure').prop('disabled', false);

                $('#eleFalla').css('display', '');
                $('#selectAction').prop('disabled', false);

            }else{
                $('#catBL').css('display', 'none');
                $('#selectCategory').prop('disabled', true);

                $('#subcatBL').css('display', 'none');
                $('#selectSubcategory').prop('disabled', true);

                $('#busBL').css('display', 'none');

                $('#eleBL').css('display', 'none');
                $('#selectFailure').prop('disabled', true);

                $('#eleFalla').css('display', 'none');
                $('#selectAction').prop('disabled', true);

            }

        });


    });

</script>

    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 table-bordered">
                <label style="font-size: small">WO</label><p class="lead" style="font-size: medium">{{ registro.0.NOCRefId }}</p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 table-bordered">
                <label style="font-size: small">Ods</label><p class="lead" style="font-size: medium">{{ registro.0.PONumber }}</p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 table-bordered">
                <label style="font-size: small">WoType</label><p class="lead" style="font-size: medium">{{ registro.0.WOType }}</p>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 table-bordered">
                <label style="font-size: small">Zone</label><p class="lead" style="font-size: medium">{{ registro.0.ServiceArea2 }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 table-bordered">
                <label style="font-size: small">Site</label><p class="lead" style="font-size: medium">{{ registro.0.Site }}</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 table-bordered">
                <label style="font-size: small">CreationDate</label><p class="lead" style="font-size: medium">{{ registro.0.CreationDate }}</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 table-bordered">
                <label style="font-size: small">FinishDate</label><p class="lead" style="font-size: medium">{{ registro.0.AssignmentFinishDate }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 table-bordered">
                <label style="font-size: small">DescriptionLog</label><p class="lead" style="font-size: medium">{{ registro.0.DescriptionLog }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12"><p></p></div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12"><p></p></div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-3 "></div>
            <div class="col-lg-6 col-md-6">
                <form action=" {{ path('validaCalidad', {'idproyectos': idproyectos, 'tas':tas})}} " method="POST" id="upfile" enctype="multipart/form-data">
                    <input type="hidden" name="task" id="task" value={{ registro.0.TaskKey }}>
                    <input type="hidden" name="noc" id="noc" value={{ registro.0.NOCRefId }}>
                    <input type="hidden" name="typ" id="typ" value={{ registro.0.WOType }}>
                    <input type="hidden" name="sit" id="sit" value={{ registro.0.Site }}>
                    <input type="hidden" name="cdt" id="cdt" value={{ registro.0.CreationDate }}>
                    <input type="hidden" name="fdt" id="fdt" value={{ registro.0.AssignmentFinishDate }}>
                    <textarea style="display:none;" name="dlo" id="dlo">{{ registro.0.DescriptionLog }}</textarea>
                    <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12"><p></p></div>
                    </div>
                    <div class="row">
                        <!--
                        <div class="col-lg-5 col-md-5  ">
                            <p class="hidden-lg hidden-md "><strong>Seleccione Tipo Actividad</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Seleccione Tipo Actividad</strong></p>
                        </div>
                        -->
                        <div class="col-lg-12 col-md-12 ">
                            <input type="hidden" id="selectTypeActivity" class="form-control" name="selectTypeActivity">
                            <!--
                            <select id="selectTypeActivity" class="form-control" name="selectTypeActivity" required>
                                {% for status in status %}
                                    <option {% if selectTypeActivity == status  %}selected{% endif %}>{{status}}</option>
                                {% endfor %}
                            </select>
                            -->
                        </div>
                    </div>
                    <div class="row" id="fallida">
                        <!--
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>Seleccione motivo de la visita Fallida</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Seleccione motivo de la visita Fallida</strong></p>
                        </div>
                        -->
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>Seleccione que Paso en la Estacion</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Seleccione que Paso en la Estacion</strong></p>
                        </div>
                        <div class="col-lg-7 col-md-7 ">
                            <select id="visiaFallida" name="visiaFallida" class="form-control" required>
                                {% for fallida in visitaFallida %}
                                    <option  {% if visiaFallida == fallida.razon   %}selected{% endif %} value="{{ fallida.razon }}" value="{{ fallida.razon }}" sta="{{ fallida.grupo }}">{{fallida.razon}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-5 col-md-5  ">
                            <p class="hidden-lg hidden-md "><strong>Seleccione Tipificacion Calidad</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Seleccione Tipificacion Calidad</strong></p>
                        </div>
                        <div class="col-lg-7 col-md-7 ">
                            <select class="js-example-basic-single" id="primTipif" name="primeraTipificacion" required>
                                <option></option>
                                {% for primera in primeras %}
                                    <option value="{{primera.clasif}}">{{primera.clasif}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                        <div class="row">
                            <div class="col-lg-5 col-md-5  ">
                                <p class="hidden-lg hidden-md "><strong>Seleccione Sub Tipificacion Calidad</strong></p>
                                <p class="text-right hidden-sm hidden-xs"><strong>Seleccione Sub Tipificacion Calidad</strong></p>
                            </div>
                            <div class="col-lg-7 col-md-7 " id="segundaTipifcacion">
                                <select class="js-example-basic-single" id="segundaTipifacion" name="segundaTipifacion" required>
                                    <option></option>
                                    {% for segunda in segundas %}
                                        <option  idclasif="{{segunda.clasif}}" value="{{segunda.nombre}}">{{segunda.nombre}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="row">
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>Seleccione SO a Notificar</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Seleccione SO a Notificar</strong></p>
                        </div>
                        <div class="col-lg-7 col-md-7 ">
                            <select id="selectSiteOwner" name="selectSiteOwner" class="form-control" required>
                                {% for siteowner in siteowner %}
                                    <option  {% if selectSiteOwner == siteowner.nombre  %}selected{% endif %}>{{siteowner.nombre}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row" id="catBL">
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>{{'site.category' | trans}}</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>{{'site.category' | trans}}</strong></p>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <select id="selectCategory" name="selectCategory" class="form-control" required>
                                {% for category in category %}
                                    <option  {% if selectCategory == category.Categoria  %}selected{% endif %}>{{category.Categoria}}</option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>
                    <div class="row" id="subcatBL">
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>Sub-Categoria</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Sub-Categoria</strong></p>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <select id="selectSubcategory" name="selectSubcategory" class="form-control" required>
                                {% for subcategory in subcategory %}
                                    <option  {% if selectSubcategory == subcategory.SubCategoria  %}selected{% endif %}>{{subcategory.SubCategoria}}</option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>
                    <div class="row" id="busBL">
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md" ><small>buscardor--></small></p>
                            <p class="text-right hidden-sm hidden-xs" ><small>buscardor--></small></p>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <input type="text" class="form-control" id="inputSearch">
                        </div>
                    </div>
                    <div class="row" id="eleFalla">
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>Seleccione Elemento de Falla</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Seleccione Elemento de Falla</strong></p>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <select id="selectFailure" name="selectFailure" class="form-control" required>
                                {% for failure in failure %}
                                    <option  {% if selectFailure == failure.DETALLE  %}selected{% endif %}>{{failure.DETALLE}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>Seleccione Archivo</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>Seleccione Archivo</strong></p>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <input type="file" style="font-size: 11px;" id="load" name="load" class="form-control btn" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-5 col-md-5">
                            <p class="hidden-lg hidden-md "><strong>{{'ticketDetail.comments.comentario' | trans}}</strong></p>
                            <p class="text-right hidden-sm hidden-xs"><strong>{{'ticketDetail.comments.comentario' | trans}}</strong></p>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <textarea id="note" name="note" class="form-control" required></textarea>
                        </div>
                        <div class="col-lg-1 col-md-1 col-sm-1">
                            <button type="submit" class="btn btn-danger">Cargar</button>
                        </div>
                    </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12"><p></p></div>
        </div>
    </div>
{% endblock %}