@extends('template.main')

@section('titulo','Verificar de Datos')

@section('cabecera')
    <script>
        $(document).ready(function () {
            $("#ActaNacimientoDocumento").click(function () {
                if ($("#ActaNacimientoDocumento").prop('checked')) {
                    $("#actaNacimientoFile").removeAttr("disabled");

                } else {
                    $("#actaNacimientoFile").attr("disabled", "disabled");

                }
            });
            $("#CertificadoBachilleratoDocumento").click(function () {
                if ($("#CertificadoBachilleratoDocumento").prop('checked')) {
                    $("#certificadoBachilleratoFile").removeAttr("disabled");

                } else {
                    $("#certificadoBachilleratoFile").attr("disabled", "disabled");

                }
            });
            $("#CURPDocumento").click(function () {
                if ($("#CURPDocumento").prop('checked')) {
                    $("#curpFile").removeAttr("disabled");

                } else {
                    $("#curpFile").attr("disabled", "disabled");

                }
            });

            $("#INEDocumento").click(function () {
                if ($("#INEDocumento").prop('checked')) {
                    $("#ineFile").removeAttr("disabled");

                } else {
                    $("#ineFile").attr("disabled", "disabled");

                }
            });
            $("#CertificadoLicenciaturaDocumento").click(function(){
                if($("#CertificadoLicenciaturaDocumento").prop('checked')){
                    $("#certificadoLicenciaturaFile").removeAttr("disabled");

                } else{
                    $("#certificadoLicenciaturaFile").attr("disabled","disabled");

                }
            });

            $("#TituloLicenciaturaDocumento").click(function(){
                if($("#TituloLicenciaturaDocumento").prop('checked')){
                    $("#tituloLicenciaturaFile").removeAttr("disabled");

                } else{
                    $("#tituloLicenciaturaFile").attr("disabled","disabled");

                }
            });
            $("#ComprobanteDomicilioDocumento").click(function () {
                if ($("#ComprobanteDomicilioDocumento").prop('checked')) {
                    $("#comprobanteDomicilioFile").removeAttr("disabled");

                } else {
                    $("#comprobanteDomicilioFile").attr("disabled", "disabled");

                }
            });
            $("#CertificadoMedicoDocumento").click(function(){
                if($("#CertificadoMedicoDocumento").prop('checked')){
                    $("#certificadoMedicoFile").removeAttr("disabled");

                } else{
                    $("#certificadoMedicoFile").attr("disabled","disabled");

                }
            });
        });
    </script>
    <style>
        body {
            margin-top: -35px;
        }
        #signature{
            width: 100%;
            height: auto;
            border: 1px solid black;
        }
    </style>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <!-- jSignature -->
    <script src="{{ asset('js/jSignature.min.js') }}"></script>
    <script src="{{ asset('js/modernizr.js') }}"></script>
@endsection

@section('contenido')

    <div class="row" >
        <div class="col-lg-12">
            <div class="col-lg-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><i class="fas fa-home"></i> Inscripción </li>
                        <li class="breadcrumb-item">Alumnos</li>
                        <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-user-graduate"></i> {{$datos->nombre}} {{$datos->apellidos}}</li>
                    </ol>
                </nav>
                <hr>
            </div>
            <div class="col-lg-9">
                <h3 class="contexto"> <i class="fas fa-user-graduate"></i> Verifación de Datos.</h3>
            </div>
            <div class="col-lg-12"><strong>* Por favor verifica que tus datos sean correctos.</strong><br><br></div>
            <div class="row">
                <div class="col-lg-10 offset-1">
                    <div class="row">
                        <div class="col-lg-3"> <label><strong>Nombre: </strong></label> {{$datos->nombre}} </div>
                        <div class="col-lg-3"> <label><strong>Apellidos: </strong></label> {{$datos->apellidos}} </div>
                        <div class="col-lg-3"> <label><strong>Fecha de nacimiento: </strong></label> {{$datos->fechaNacimiento}} </div>
                        <div class="col-lg-3"> <label><strong>Lugar de nacimiento: </strong></label>
                            @foreach($entidades as $ent)
                                @if($ent->idEntidad == $datos->nacimiento) {{$ent->entidad}} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Género: </strong></label>
                            @foreach($generos as $cr)
                                @if($datos->genero == $cr->idgenero) {{ $cr->genero }} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Estado civil: </strong></label>
                            @foreach($estadoCivil as $cr)
                                @if($datos->estadoCivil  == $cr->id) {{$cr->estadoCivil}} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Teléfono local: </strong></label> {{$datos->telefonoLocal}}</div>
                        <div class="col-lg-3"> <label><strong>Teléfono celular: </strong></label> {{$datos->telefonoCelular}} </div>
                        <div class="col-lg-3"> <label><strong>Estado: </strong></label>
                            @foreach($estados as $estado)
                                @if($estado->id == $datos->estado) {{$estado->estado}}@endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Delegación o Municipio: </strong></label> {{$datos->municipio}} </div>
                        <div class="col-lg-3"> <label><strong>Código postal: </strong></label> {{$datos->codigoPostal}} </div>
                        <div class="col-lg-3"> <label><strong>Colonia: </strong></label> {{$datos->colonia}} </div>
                        <div class="col-lg-3"> <label><strong>Calle y número: </strong></label> {{$datos->direccion}} </div>
                        <div class="col-lg-3"> <label><strong>Matrícula: </strong></label> {{$datos->matricula}} </div>
                        <div class="col-lg-3"> <label><strong>CURP: </strong></label> {{$datos->curp}} </div>
                        <div class="col-lg-3"> <label><strong>E-Mail: </strong></label> {{$datos->email}} </div>
                        <div class="col-lg-3"> <label><strong>Sede: </strong></label>
                            @foreach($sedes as $cr)
                                @if($datos->sede == $cr->idsede) {{$cr->sede}} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Nivel Educativo: </strong></label>
                            @foreach($modalidadInfo as $cr)
                                @if( $datos->tipoCarrera == $cr->idnivel) {{$cr->tipo}} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Carrera: </strong></label>
                            @foreach($carreras as $cr)
                                @if($datos->carrera == $cr->id) {{$cr->nombre}} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Plan: </strong></label> {{$datos->plan}} </div>
                        <div class="col-lg-3"> <label><strong>Modalidad: </strong></label>
                            @foreach($modalidades as $cr)
                                @if($datos->modalidad == $cr->idModalidad) {{$cr->modalidad}} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Generación: </strong></label> {{$datos->yearGeneracion}} </div>
                        <div class="col-lg-3"> <label><strong>Último grado de estudios: </strong> </label> {{$datos->ultimoGrado}} </div>
                        <div class="col-lg-3"> <label><strong>Pago actual de inscripción: </strong></label> ${{$datos->pagoInscripcion}} </div>
                        <div class="col-lg-3"> <label><strong>Pago actual de colegiatura: </strong></label> ${{$datos->pagoColegiatura}} </div>
                        <div class="col-lg-3"> <label><strong>Pago actual de re-inscripción: </strong></label> ${{$datos->pagoReInscripcion}} </div>
                        <div class="col-lg-3" hidden> <label><strong>Estatus: </strong></label> {{$datos->estatus}} </div>
                        <div class="col-lg-3" hidden> <label><strong>Tipo: </strong></label>
                            @foreach($tipos as $cr)
                                @if($datos->tipo == $cr->id) {{$cr->tipo}} @endif
                            @endforeach
                        </div>
                        <div class="col-lg-3"> <label><strong>Seguro: </strong></label>
                            @if($datos->seguro !='OTRO'){{$datos->seguro}} @else {{$datos->otro}} @endif </div>
                        <div class="col-lg-3"> <label><strong>Enfermedad: </strong></label>
                            @if($datos->seguro =='NO'){{$datos->seguro}} @else {{$datos->cual}} @endif </div></div>
                    </div>
                </div>
            </div>
            <form method="post" action="{{ route('signature_pad.store') }}" autocomplete="off" enctype="multipart/form-data">
                @csrf
                <div class="col-lg-12"><br><strong>* Si los datos son correctos, agrega los siguientes archivos.</strong><br><br></div>
                <div class="col-lg-12">

                    <div class="row">
                        <div class="col-lg-2"></div>
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="col-auto my-1">
                                        <div class="custom-control custom-checkbox mr-sm-2">
                                            <input type="checkbox" name="ActaNacimientoDocumento" value="1" class="custom-control-input" id="ActaNacimientoDocumento" required>
					    <label class="custom-control-label" for="ActaNacimientoDocumento">Acta de nacimiento</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <input type="file" name="actaNacimiento" id="actaNacimientoFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled required>
                                            <script>
						const MAXIMO_TAMANIO_BYTES = 9000000; // 1MB = 1 millón de bytes
						const $nacimiento = document.querySelector("#actaNacimientoFile");
						$nacimiento.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$nacimiento.value = "";
						} else {}
						});
					    </script>
				</div>
                                @if($datos->tipoCarrera==2)
                                <div class="col-lg-6">
                                    <div class="col-auto my-1">
                                        <div class="custom-control custom-checkbox mr-sm-2">
                                            <input type="checkbox" name="CertificadoBachilleratoDocumento" value="1" class="custom-control-input" id="CertificadoBachilleratoDocumento" required>
                                            <label class="custom-control-label" for="CertificadoBachilleratoDocumento">Certificado de bachillerato</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <input type="file" name="certificadoBachillerato" id="certificadoBachilleratoFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled required>
                                	    <script>
						const MAXIMO_TAMANIO_BYTES2 = 9000000; // 1MB = 1 millón de bytes
						const $bachillerato = document.querySelector("#certificadoBachilleratoFile");
						$bachillerato.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES2) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES2 / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$bachillerato.value = "";
						} else {}
						});
					    </script>

				</div>
                                @else
                                    <div class="col-lg-6">
                                        <div class="col-auto my-1">
                                            <div class="custom-control custom-checkbox mr-sm-2">
                                                <input type="checkbox" name="CertificadoLicenciaturaDocumento" value="1" class="custom-control-input" id="CertificadoLicenciaturaDocumento">
                                                <label class="custom-control-label" for="CertificadoLicenciaturaDocumento">Certificado de licenciatura</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="file" name="certificadoLicenciaturaFile" id="certificadoLicenciaturaFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled>
                                            <script>
						const MAXIMO_TAMANIO_BYTES3 = 9000000; // 1MB = 1 millón de bytes
						const $clicen = document.querySelector("#certificadoLicenciaturaFile");
						$clicen.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES3) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES3 / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$clicen.value = "";
						} else {}
						});
					    </script>

				    </div>
                                    <div class="col-lg-6">
                                        <div class="col-auto my-1">
                                            <div class="custom-control custom-checkbox mr-sm-2">
                                                <input type="checkbox" name="TituloLicenciaturaDocumento" value="1" class="custom-control-input" id="TituloLicenciaturaDocumento">
                                                <label class="custom-control-label" for="TituloLicenciaturaDocumento">Título de licenciatura</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="file" name="tituloLicenciaturaFile" id="tituloLicenciaturaFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled>
                                            <script>
						const MAXIMO_TAMANIO_BYTES4 = 9000000; // 1MB = 1 millón de bytes
						const $tlicen = document.querySelector("#tituloLicenciaturaFile");
						$tlicen.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES4) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES4 / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$tlicen.value = "";
						} else {}
						});
					    </script>
				    </div>
                                @endif
                                <div class="col-lg-6">
                                    <div class="col-auto my-1">
                                        <div class="custom-control custom-checkbox mr-sm-2">
                                            <input type="checkbox" name="CURPDocumento" value="1" class="custom-control-input" id="CURPDocumento" required>
                                            <label class="custom-control-label" for="CURPDocumento">CURP</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <input type="file" name="curpFile" id="curpFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled required>
                                	    <script>
						const MAXIMO_TAMANIO_BYTES5 = 9000000; // 1MB = 1 millón de bytes
						const $curp = document.querySelector("#curpFile");
						$curp.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES5) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES5 / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$curp.value = "";
						} else {}
						});
					    </script>

				</div>
                                <div class="col-lg-6">
                                    <div class="col-auto my-1">
                                        <div class="custom-control custom-checkbox mr-sm-2">
                                            <input type="checkbox" name="INEDocumento" value="1" class="custom-control-input" id="INEDocumento" required>
                                            <label class="custom-control-label" for="INEDocumento">INE</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <input type="file" name="ineFile" id="ineFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled required>
                                	<script>
						const MAXIMO_TAMANIO_BYTES6 = 9000000; // 1MB = 1 millón de bytes
						const $ine = document.querySelector("#ineFile");
						$ine.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES6) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES6 / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$ine.value = "";
						} else {}
						});
					    </script>

				</div>
                                <div class="col-lg-6">
                                    <div class="col-auto my-1">
                                        <div class="custom-control custom-checkbox mr-sm-2">
                                            <input type="checkbox" name="ComprobanteDomicilioDocumento" value="1" class="custom-control-input" id="ComprobanteDomicilioDocumento" required>
                                            <label class="custom-control-label" for="ComprobanteDomicilioDocumento">Comprobante de domicilio</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <input type="file" name="comprobanteDomicilioFile" id="comprobanteDomicilioFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled required>
                                	<script>
						const MAXIMO_TAMANIO_BYTES7 = 9000000; // 1MB = 1 millón de bytes
						const $domicilio = document.querySelector("#comprobanteDomicilioFile");
						$domicilio.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES7) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES7 / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$domicilio.value = "";
						} else {}
						});
					    </script>

				</div>
                                <div class="col-lg-6">
                                    <div class="col-auto my-1">
                                        <div class="custom-control custom-checkbox mr-sm-2">
                                            <input type="checkbox" name="CertificadoMedicoDocumento" value="1" class="custom-control-input" id="CertificadoMedicoDocumento" required>
                                            <label class="custom-control-label" for="CertificadoMedicoDocumento">Certificado médico</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <input type="file" name="certificadoMedicoFile" id="certificadoMedicoFile" accept=".jpg,.png,.jpeg,.gif,.pdf" title="Solo se acepta imagenes JPG,PNG,GIF y documentos PDF." disabled required>
                                	<script>
						const MAXIMO_TAMANIO_BYTES8 = 9000000; // 1MB = 1 millón de bytes
						const $medico = document.querySelector("#certificadoMedicoFile");
						$medico.addEventListener("change", function () {
						if (this.files.length <= 0) return;
						const archivo = this.files[0];
						if (archivo.size > MAXIMO_TAMANIO_BYTES8) {
							const tamanioEnMb = MAXIMO_TAMANIO_BYTES8 / 1000000;
							swal(``,`El tamaño máximo permitido es ${tamanioEnMb} MB`,`error`);
							$medico.value = "";
						} else {}
						});
					    </script>

				</div>
                                <div class="col-lg-6"></div>
                            </div>
                        </div>
                        <div class="col-lg-2"></div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="col-md-6 offset-md-3 mt-5">
                        <div class="card">
                            <div class="card-header">
                                <center><h5>Dibuja tu firma lo más claro posible.</h5></center>
                            </div>
                            <div class="card-body">
                                @if ($message = Session::get('success'))
                                    <div class="alert alert-success  alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert">×</button>
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @endif

                                <input type="text" name="nombre" value="{{$datos->nombre}}" hidden>
                                <input type="text" name="apellidos" value="{{$datos->apellidos}}" hidden>
                                <input type="date" name="fechaNacimiento" value="{{$datos->fechaNacimiento}}" hidden>
                                <input type="text" name="nacimiento" value="{{$datos->nacimiento}}" hidden>
                                <input type="text" name="genero" value="{{$datos->genero}}" hidden>
                                <input type="text" name="estadoCivil" value="{{$datos->estadoCivil}}" hidden>
                                <input type="text" name="telefonoLocal" value="{{$datos->telefonoLocal}}" hidden>
                                <input type="text" name="telefonoCelular" value="{{$datos->telefonoCelular}}" hidden>
                                <input type="text" name="estado" value="{{$datos->estado}}" hidden>
                                <input type="text" name="municipio" value="{{$datos->municipio}}" hidden>
                                <input type="text" name="codigoPostal" value="{{$datos->codigoPostal}}" hidden>
                                <input type="text" name="colonia" value="{{$datos->colonia}}" hidden>
                                <input type="text" name="direccion" value="{{$datos->direccion}}" hidden>
                                <input type="text" name="matricula" value="{{$datos->matricula}}" hidden>
                                <input type="text" name="curp" value="{{$datos->curp}}" hidden>
                                <input type="text" name="email" value="{{$datos->email}}" hidden>
                                <input type="text" name="sede" value="{{$datos->sede}}" hidden>
                                <input type="text" name="tipoCarrera" value="{{$datos->tipoCarrera}}" hidden>
                                <input type="text" name="carrera" value="{{$datos->carrera}}" hidden>
                                <input type="text" name="plan" value="{{$datos->plan}}" hidden>
                                <input type="text" name="modalidad" value="{{$datos->modalidad}}" hidden>
                                <input type="text" name="yearGeneracion" value="{{$datos->yearGeneracion}}" hidden>
                                <input type="text" name="ultimoGrado" value="{{$datos->ultimoGrado}}" hidden>
                                <input type="text" name="pagoInscripcion" value="{{$datos->pagoInscripcion}}" hidden>
                                <input type="text" name="pagoColegiatura" value="{{$datos->pagoColegiatura}}" hidden>
                                <input type="text" name="pagoReInscripcion" value="{{$datos->pagoReInscripcion}}" hidden>
                                <input type="text" name="estatus" value="{{$datos->estatus}}" hidden>
                                <input type="text" name="tipo" value="{{$datos->tipo}}" hidden>
                                <input type="text" name="seguro" value="{{$datos->seguro}}" hidden>
                                <input type="text" name="otro" value="{{$datos->otro}}" hidden>
                                <input type="text" name="enfermedad" value="{{$datos->enfermedad}}" hidden>
                                <input type="text" name="cual" value="{{$datos->cual}}" hidden>



                                <div id="signature"></div><br/>

                                <a href="{{ route('alumno.create') }}" class="btn btn-warning"><i class="fas fa-undo"></i> Regresar</a>
                                <button type="submit" id="click" class="btn btn-success">Guardar</button>
                                <textarea id="output" name="signed" style="display: none"></textarea>


                                <script>
                                    $(document).ready(function() {

                                        var $sigdiv = $("#signature").jSignature({'UndoButton':true});
                                        $('#click').click(function(){
                                            var data = $sigdiv.jSignature('getData', 'image');
                                            $('#output').val(data);
                                        });
                                    });
                                </script>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>

@endsection