{% extends'ReadingBundle:Default:noMenu-base.html.twig' %}
{% block content %}
    <style>
        body{
            background:transparent;
        }
        .error{
            border-color:red;
        }
    </style>
{#<div class="container-fluid">#}
    <div class="modal-content">
        <div class="modal-body">
    <h3>{{ 'labels.request_second_opinion'|trans([], 'LocalizationBundle') }}</h3><hr>
    <h4>{{ 'labels.comments'|trans([], 'LocalizationBundle') }}</h4>
    <div class="form-group" >
        <div class="row">
            <div class="col-md-12">
                {% if rowQuery|length > 0 %}
                    {% set comentario = rowQuery.0.requestingComment %}
                {% else %}    
                    {% set comentario = '' %}
                {% endif %}    
                <textarea id="comentSecOpi" class="comments-request" style="min-height:100px;width:100%;display:block;">{{ comentario }}</textarea>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="margin-bottom:30px;">
                <h4>{{ 'labels.priority'|trans([], 'LocalizationBundle') }}</h4>
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" class="inlineRadioOptions" id="inlineRadio3" value="3" checked > {{ 'labels.low'|trans([], 'LocalizationBundle') }}
                </label>
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" class="inlineRadioOptions" id="inlineRadio2" value="2"> {{ 'labels.medium'|trans([], 'LocalizationBundle') }}
                </label>
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" class="inlineRadioOptions" id="inlineRadio1" value="1"> {{ 'labels.high'|trans([], 'LocalizationBundle') }}
                </label>
            </div>
        </div>
        <div class="row" style="margin-bottom:30px;">
            <div class="col-md-12">
                <h4>{{ 'labels.select_physician'|trans([], 'LocalizationBundle') }}</h4><hr>
            </div>
            <div class="col-md-6">
                <select class="form-control selectpicker" id="SecOpiRad" style="background:transparent;" name="SecOpiRad" data-style="btn-primary" data-id="selSecOpiRad" data-live-search="true" title='{{ 'messages.selectAll'|trans([], 'LocalizationBundle') }}'  >
                    {% for radiologist in listUsersRadiologist %}
                        <option value="{{ radiologist.id }}" > {{ radiologist.firstname }} {{ radiologist.lastname }}</option>        
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="divSel" >
                    <div class="col-md-12">
                        <ui id="lista" class="text-uppercase">
                            {# {% for radList in rowQuery %}
                                <li class="listRequestOpinion">
                                    <div class="row">
                                        <div class="col-md-4 col-sm-4">
                                            {{ radList.firstname }} {{ radList.lastname }}
                                        </div>
                                        <div class="col-md-4 col-sm-4">
                                            <a class="btn btn-primary itemList" id="{{ radList.idUser }}" >x</a>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </li>
                            {% endfor %}    #}
                        </ui>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="modal-footer">
            <div class="row" style="margin-top:20px;"><hr></div>
            <div class="row">
                <div class="col-md-12 text-right">
                    <button  id="cerrarB" class="btn btn-primary">{{ 'button.cancel'|trans([], 'LocalizationBundle') }}</button>
                    <button  id="send" class="btn btn-primary">{{ 'button.send'|trans([], 'LocalizationBundle') }}</button>
                </div>
            </div>
        </div>
    </div>
    </div>
{#</div>#}
{% endblock content%}
{% block script %}
    <script>
        $(document).ready(function(){
            var idList = new Array();
            
            
            {% for radList in rowQuery %}  
                var text = '<li class="listRequestOpinion"><div class="row"><div class="col-md-4 col-sm-4"><h5 class="text-uppercase">'
                        +'{{ radList.firstname }} {{ radList.lastname }}'
                        +'</h5></div><div class="col-md-4 col-sm-4"><a class="btn btn-primary itemList" id="{{ radList.idUser }}" data-radnombre="{{ radList.firstname }} {{ radList.lastname }}" >x</a></div></div><div class="clearfix"></div></li>';
                $('#lista').append(text);
                idList[idList.length] = '{{ radList.idUser }}'; 
                $(".selectpicker option[value='{{ radList.idUser }}']").remove();
                $('#inlineRadio{{ rowQuery.0.priority }}').prop('checked' , true);
            {% endfor %}
            $('#cerrarB').click(function(){
                window.parent.$.unblockUI();
            });
            
            $('.selectpicker').change(function(){
                var valor = $(this).val();
                var val = valor.slice(0,-1);
                var text = '<li class="listRequestOpinion"><div class="row"><div class="col-md-4 col-sm-4"><h5 class="text-uppercase">'
                        +$(this).find('[value='+valor+']').text()
                        +'</h5></div><div class="col-md-4 col-sm-4"><a class="btn btn-primary itemList" id="'+valor+'" data-radnombre="'+$(this).find('[value='+valor+']').text()+'">x</a></div></div><div class="clearfix"></div></li>';
                $('#lista').append(text);
                idList[idList.length] = valor;
                $(".selectpicker option[value='"+valor+"']").remove();
                $(".selectpicker").selectpicker('refresh');
                $('[data-id="SecOpiRad"]').removeClass('btn-danger').addClass('btn-primary');
                               
            });
            
            $('#lista').on('click', '.itemList',function() {
                var id = $(this).attr('id');
                var RadNom = $(this).data('radnombre');
                $(this).closest('li').remove();
                var idex = idList.indexOf(id);
                idList.splice(idex, 1);
                $('#'+idex).remove();
                
                $('.selectpicker').append('<option value="'+id+'" >'+RadNom+'</option>').selectpicker('refresh');
            });
            
            $('#send').click(function(){
                
                $('#comentSecOpi').removeClass('error');
                $('[data-id="SecOpiRad"]').removeClass('btn-danger').addClass('btn-primary');
                
                $.blockUI({
                    css: {
                        border: 'none',
                        padding: '20px',
                        '-webkit-border-radius': '5px',
                        '-moz-border-radius': '5px',
                        'border-radius': '5px',
                        backgroundColor: '#2E3137',
                        color: '#fff'

                    },
                    message: '<h4>{{ 'labels.sending'|trans([], 'LocalizationBundle') }}</h4>',
                    baseZ: 99999
                });
                var coment = $('#comentSecOpi').val();
                var inlineRadioOptions = $('.inlineRadioOptions:checked').val();
                
                var error = 0;
                if(coment == ''){
                    error++;
                    $('#comentSecOpi').addClass('error');
                }
                
                if( idList.length == 0){
                    error++;
                    $('[data-id="SecOpiRad"]').removeClass('btn-primary').addClass('btn-danger');
                }
                
                
                if(error == 0){
                    $.ajax({
                        url: '{{ path('request_second_opinion_template', {'appCodePost': appCodePost}) }}',
                        type: 'POST',
                        data: {coment:coment , idList:idList , inlineRadioOptions:inlineRadioOptions },
                        success: function(data){
                            var jsonResp = JSON.parse(data);
                            if(jsonResp[0]=='true'){
                                $.blockUI({
                                    css: {
                                        border: 'none',
                                        padding: '20px',
                                        '-webkit-border-radius': '5px',
                                        '-moz-border-radius': '5px',
                                        'border-radius': '5px',
                                        backgroundColor: '#2E3137',
                                        color: '#fff'

                                    },
                                    message: '<div><h4>{{ 'messages.processOk'|trans([], 'LocalizationBundle') }}</h4></div>',
                                    baseZ: 99999
                                });                            
                                setTimeout(function(){
                                    window.parent.$.unblockUI();
                                    var respPre = jsonResp[2]+"/"+jsonResp[1];
                                    window.parent.$('#respPreg').html(respPre);
                                }, 3000);
                            }else{
                                $.blockUI({ 
                                    css: {
                                        border: 'none',
                                        padding: '20px',
                                        backgroundColor: '#2E3137',
                                        '-webkit-border-radius': '5px',
                                        '-moz-border-radius': '5px',
                                        'border-radius': '5px',
                                        color: '#fff'
                                    },
                                    message: '<div><h4>{{ 'messages.ajax.errorProcess'|trans([], 'LocalizationBundle') }}</h4></div>', baseZ: 99999                     
                                });
                                setTimeout($.unblockUI, 3000);
                            }
                        }
                    })
                    return false;
                }else{
                    $.blockUI({ 
                        css: {
                            border: 'none',
                            padding: '20px',
                            backgroundColor: '#2E3137',
                            '-webkit-border-radius': '5px',
                            '-moz-border-radius': '5px',
                            'border-radius': '5px',
                            color: '#fff'
                        },
                        message: '<div><h4>{{ 'messages.camposObligatorios'|trans([], 'LocalizationBundle') }}</h4></div>', baseZ: 99999                     
                    });
                    setTimeout($.unblockUI, 3000);
                }
            });
        });
    </script>
{% endblock script %}