<script>
//Este string contiene una imagen de 1px*1px color blanco
window.imagenVacia = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

window.mostrarprevIMGprod = function mostrarprevIMGprod() {
	
    var Archivos, Lector;
	
    Archivos = jQuery('#file-agregaimgprod')[0].files;
    if (Archivos.length > 0) {

        Lector = new FileReader();
        Lector.onloadend = function(e) {
            var origen, tipo;

            //Envia la imagen a la pantalla
            origen = e.target; //objeto FileReader
            //Prepara la información sobre la imagen
            tipo = window.obtenerTipoMIME(origen.result.substring(0, 30));

            //Si el tipo de archivo es válido lo muestra, 
            //sino muestra un mensaje 
            if (tipo !== 'image/jpeg' && tipo !== 'image/png' && tipo !== 'image/gif') {
                jQuery('#prevIMGprod').attr('src', window.imagenVacia);
                alert('El formato de imagen no es válido: debe seleccionar una imagen JPG, PNG o GIF.');
            } else {
                jQuery('#prevIMGprod').attr('src', origen.result);
                window.obtenerMedidas();
            }

        };
        Lector.onerror = function(e) {
            console.log(e)
        }
        Lector.readAsDataURL(Archivos[0]);

    } else {
        var objeto = jQuery('#file-agregaimgprod');
        objeto.replaceWith(objeto.val('').clone());
        jQuery('#prevIMGprod').attr('src', window.imagenVacia);
    };


};

//Lee el tipo MIME de la cabecera de la imagen
window.obtenerTipoMIME = function obtenerTipoMIME(cabecera) {
    return cabecera.replace(/data:([^;]+).*/, '\$1');
}

//Obtiene las medidas de la imagen y las agrega a la 


jQuery(document).ready(function() {

    //Cargamos la imagen "vacía" que actuará como Placeholder
    jQuery('#prevIMGprod').attr('src', window.imagenVacia);

    //El input del archivo lo vigilamos con un "delegado"
    jQuery('#input-addprod').on('change', '#file-agregaimgprod', function(e) {
        window.mostrarprevIMGprod();
    });

    //El botón cancel_96ar lo vigilamos normalmente
    jQuery('#btn-cancel-addprod').on('click', function(e) {
        var objeto = jQuery('#file-agregaimgprod');
        objeto.replaceWith(objeto.val('').clone());

        jQuery('#prevIMGprod').attr('src', window.imagenVacia);
    });
    
    jQuery('#cierraModalAddProd').on('click', function(e) {
        var objeto = jQuery('#file-agregaimgprod');
        objeto.replaceWith(objeto.val('').clone());

        jQuery('#prevIMGprod').attr('src', window.imagenVacia);
    });
    
    jQuery('#form_add_prod').on('submit', function(e) {
        var objeto = jQuery('#file-agregaimgprod');
        objeto.replaceWith(objeto.val('').clone());

        jQuery('#prevIMGprod').attr('src', window.imagenVacia);
    });

});
</script>

<!-- Modal -->
<div class="modal fade" id="agrega-alumno" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="tituloFormAlumno">Registro de Alumno</h5>
        <button id="cierraModalAddProd" type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="form_add_alum" onsubmit="return agregaAlumPers()">
            <div class="row">            
                <div class="col-lg-6 col-md-12">                     
                    <div class="form-group">
                        <h5>Selecciona la Persona</h5>
                        <div class="controls">
                                <select id="int_persona" name="int_persona" class="form-control select2" required>
                                    <option selectedV value="" ><b>Selecciona</b></option>

                                    <?php while ($row_personas = mysqli_fetch_assoc($queryPersonaAlum)) {?>
                                    <option value="<?php echo $row_personas['Persona_id']?>" > <?php echo $row_personas['Nombre'].' '.$row_personas['Apellido']?></option>
                                    <?php	};	?>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">      
                    <div class="form-group">
                        <label>Fecha de Nacimiento:</label>

                        <div class="input-group date">
                        <div class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" name="fecha_nac" id="fecha_nac" class="form-control pull-right" id="datepicker">
                        </div>
                        <!-- /.input group -->
                    </div>
                </div>
                    
                <div class="col-lg-6 col-md-12">   
                    <div class="form-group">
                        <h5>Foto Carnet</h5>
                        <div class="controls">
                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                <input type="hidden">
                                <div class="input-append" id='input-addprod'>
                                    <span class="btn btn-default btn-file" >
                                        <span class="fileupload-exists">Cambiar</span>
                                        <span class="fileupload-new">Seleccionar</span>
                                        <input type="file" id="file-agregaimgprod" name="portada" required accept="image/*" />
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
                    
                <div class="col-lg-6 col-md-12">   
                    <div class="form-group">
                        <label>Vista previa</label>
                            <img id="prevIMGprod" style='max-width: 80%; margin-left: 10%;'> 
                    </div>
                </div>
                
                <div class="col-lg-6 col-md-12">                
                    <div class="form-group">
                        <h5>Grupo Sanguineo</h5>
                        <div class="controls">
                            <input type="text" id="grupo_sang" name="grupo_sang" class="form-control"/>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">                    
                    <div class="form-group">
                        <h5>Observación</h5>
                        <div class="controls">
                            <input type="text" id="obs_alumno" name="obs_alumno" class="form-control">
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 col-md-12">                
                    <div class="form-group">
                        <h5>Nombre del Padre</h5>
                        <div class="controls">
                            <input type="text" id="nom_padre" name="nom_padre" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">         
                    <div class="form-group">
                        <h5>Teléfono del Padre</h5>
                        <div class="controls">
                            <input type="text" id="tel_padre" name="tel_padre" class="form-control">
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 col-md-12">                
                    <div class="form-group">
                        <h5>Nombre de la Madre</h5>
                        <div class="controls">
                            <input type="text" id="nom_madre" name="nom_madre" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">         
                    <div class="form-group">
                        <h5>Teléfono de la Madre</h5>
                        <div class="controls">
                            <input type="text" id="tel_madre" name="tel_madre" class="form-control">
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 col-md-12">                
                    <div class="form-group">
                        <h5>Nombre de Encargado</h5>
                        <div class="controls">
                            <input type="text" id="nom_encargado" name="nom_encargado" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">         
                    <div class="form-group">
                        <h5>Teléfono de Encargado</h5>
                        <div class="controls">
                            <input type="text" id="tel_encargado" name="tel_encargado" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">         
                    <div class="form-group">
                        <h5>Comentario sobre Encargado</h5>
                        <div class="controls">
                                <textarea id="coment_encarg" name="coment_encarg" class="form-control" ></textarea>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">         
                    <div class="form-group">
                        <h5>Línea Baja</h5>
                        <div class="controls">
                            <input type="text" id="linea_baja" name="linea_baja" class="form-control">
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 col-md-12">                
                    <div class="form-group">
                        <h5>Nombre de Referencia</h5>
                        <div class="controls">
                            <input type="text" id="nom_ref" name="nom_ref" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">         
                    <div class="form-group">
                        <h5>Teléfono de Referencia</h5>
                        <div class="controls">
                            <input type="text" id="tel_ref" name="tel_ref" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">         
                    <div class="form-group">
                        <h5>Domicilio de Referencia</h5>
                        <div class="controls">
                                <textarea id="domicilio_ref" name="domicilio_ref" class="form-control" ></textarea>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <div class="pull-right">
                    <input type="hidden" id="idalumno" name="idalumno"/>
                    <input type="hidden" id="proceso" name="proceso"/>
                    <button type="submit" id="btn_submit" class="btn btn-info">Agregar</button>
                    <button id="btn-cancel-addprod" value="Cancelar" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Cancelar</button> 
                </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>