@extends('layouts.app')

@section('content')
<div class="page-header" style="background-color: #6382a6;;">
  <div class="modulo"><img class="imagenmodulo1" src="dashboardimage/contract2.png">
  <img class="imagenmodulo2" src="dashboardimage/linea.png">&nbsp   CONTROL DE DOCUMENTOS</div>
</div>



<!--<div class="p-5">-->
<div class="toolbar-nav">
		<div class="row">
			<div class="col-md-6 text left" >
				
			</div>
			<div class="col-md-6 " >
		   			

				<a href="controldocumentos" class="tips btn btn-sm float-left "  style="border-color:#ff7a7a;outline: none !important;box-shadow: none;">Salir</a>						
			</div>	

			
		</div>
	</div>	
<div class="p-4 canvas_div_pdf" style="background-color: white;">
    	
   	<form class="form-horizontal" action="uploaddoc.php" method="post" style="text-align: left;" name="file" id="file" enctype="multipart/form-data">
             <fieldset style="border-color:#7fb3e3;"><legend id="titulo"><i class="fas fa-cloud-upload-alt" style="color:#e3b10b;"></i> Anexar documento</legend> 
              <p>

              <label style="font-size:13px;"></i> Adjuntar Archivo :</label><br>
              <input style="margin-top: 10px; margin-left:22px;" type="file" name="my_file" id="picture" accept=" " class="input-large"  style="margin: 0 auto;" multiple="">
              </p>
<p id="error1" style="display:none; color:#FF0000;">
Formato Invalido! El Formato debe ser: pdf, xls, xlsx, doc, docx.
</p>
<p id="error2" style="display:none; color:#FF0000;">
Tamaño Maximo del Archivo : 3MB.
</p>

                    <div align="center" style= "height: 5px;margin-bottom: -15px;margin-top: 40px;" >
                     <INPUT type="hidden" name="Email" id="Email" value="" style="width: 100%" >
                     <INPUT type="hidden" name="id" id="id" value="" style="width: 100%" >       
                     <input name="submit" type="submit" value="Enviar" id="submit" class="btn btn-default btn-sm" style="border-color: #f29f41; font-size: 12px;outline: none !important;box-shadow: none;"/> 
                   
                        </div>
                        </fieldset>
                        </form>
  </div> 

<script>
$('input[type="submit"]').prop("disabled", true);
var a=0;
//binds to onchange event of your input field
$('#picture').bind('change', function() {
if ($('input:submit').attr('disabled',false)){
	$('input:submit').attr('disabled',true);
	}
var ext = $('#picture').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['xlsx','docx','xls','doc','pdf']) == -1){
	$('#error1').slideDown("slow");
	$('#error2').slideUp("slow");
	a=0;
	}else{
	var picsize = (this.files[0].size);
	if (picsize > 1000000){
	$('#error2').slideDown("slow");
	a=0;
	}else{
	a=1;
	$('#error2').slideUp("slow");
	}
	$('#error1').slideUp("slow");
	if (a==1){
		$('input:submit').attr('disabled',false);
		}
}
});
</script>  
<style>

@media (max-width: 350px) {

#titulo {
    
font-size: 10px;    
  
}    
    
}   

@media (min-width: 351px) and (max-width: 600px)  {

#titulo {
    
font-size: 13px;    
  
}    
    
}   

@media (min-width: 601px){
    
#titulo {
    
font-size: 14px;    
  
}        
}
    
</style>
@endsection