@extends('main')

@section('form')

<div class="alert alert-warning alert-dismissible" role="alert">
  <p><i class="fa fa-exclamation-circle" aria-hidden="true"></i> <strong>Nota: </strong>Por favor, tenga en cuenta que toda la información que digite en el formulario, debe registrarse únicamente en español</p>
</div>

<div class="panel panel-default">
	@if(session()->has('message'))
		<div class="alert alert-danger" role="alert">
			{{ session()->get('message') }}
		</div>
	@endif

    <div class="panel-heading">
        <strong>Datos personales</strong>
    </div>
    <form method="post" action="{{ env('APP_URL') }}datos" class="form-horizontal" style="margin:20px 0"  enctype="multipart/form-data">

        {!! csrf_field() !!}

        <div class="panel-body">
            <div class="form-group">
                <label for="apellido" class="col-sm-2 control-label">Apellidos completos</label>
                <div class="col-sm-10">
		  <input type="text" class="form-control" id="apellido" name="apellido" maxlength="100" placeholder="" value="{{$candidate_info->apellido}}" required/>
		</div>
	    </div>
	    <div class="form-group">
	      <label for="nombre" class="col-sm-2 control-label">Nombres completos</label>
	      <div class="col-sm-10">
		<input type="text" class="form-control" id="nombre" name="nombre" maxlength="100" placeholder="" value="{{$candidate_info->nombre}}" required/>
	      </div>
	    </div>
	    <div class="form-group">
              <label for="tipo_documento" class="col-md-2 col-sm-12 control-label">Tipo de documento de identidad</label>
              <div class="col-md-2">
                <select id="tipo_documento" name="tipo_documento_id" class="form-control" required>
                  @foreach($tipos_documento as $tipo_documento)
                  <option value="{{$tipo_documento->id}}"
                          @if($tipo_documento->id == $candidate_info->tipo_documento_id)
                          selected
                    @endif
                    >{{$tipo_documento->nombre}}
                  </option>
                  @endforeach
                </select>
              </div>
              <label for="documento" class="col-md-2 col-sm-12 control-label">Número de documento</label>
              <div class="col-md-2">
                <input type="text" class="form-control" id="documento" name="documento" maxlength="45" placeholder="##########" value="{{$candidate_info->documento}}" required/>
                </div>
                <label for="ciudad_expedicion_documento" class="col-md-2 col-sm-12 control-label">Ciudad de expedición</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="ciudad_expedicion_documento" maxlength="130" name="ciudad_expedicion_documento" placeholder="" value="{{$candidate_info->ciudad_expedicion_documento}}" required/>
                </div>
            </div>

            <div class="form-group">
                <label for="fecha_nacimiento" class="col-md-2 control-label">Fecha de nacimiento</label>
                <div class="col-md-2">
                    <div>
                        <label class="form-label required">Fecha de nacimiento</label>
                        <div class="input-group">
                            <input type="date" placeholder="dd/mm/aaaa" class="form-control birth-date" id="fecha_nacimiento" name="fecha_nacimiento" value="{{ $candidate_info->fecha_nacimiento ?: '1990-01-01' }}" max="{{ \Carbon\Carbon::now()->subYears(18)->format('Y-m-d') }}" aria-describedby="fecha_nacimiento-help" required/>
                        </div>
                    </div>
                </div>
                <label for="pais_nacimiento" class="col-md-2 control-label">País de nacimiento</label>
                <div class="col-md-2">
                    <select id="pais_nacimiento" class="form-control" name="pais_nacimiento" required>
                        @foreach($paises as $pais)
                        <option value="{{$pais->id}}"
                                @if($pais->id == $candidate_info->pais_nacimiento)
                                selected
                                @endif
                                >{{$pais->nombre}}</option>
                        @endforeach
                    </select>
                </div>
                <label for="pais_residencia" class="col-md-2 control-label">País de residencia</label>
                <div class="col-md-2">
                    <select id="pais_residencia" class="form-control" name="pais_residencia" required>
                        @foreach($paises as $pais)
                        <option value="{{$pais->id}}"
                                @if($pais->id == $candidate_info->pais_residencia)
                                selected
                                @endif
                                >{{$pais->nombre}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="direccion_residencia" class="col-md-2 control-label">Dirección de residencia</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="direccion_residencia" maxlength="200" name="direccion_residencia" placeholder="" value="{{$candidate_info->direccion_residencia}}" required>
                </div>
                <label for="ciudad_aplicante" class="col-md-2 control-label">Ciudad desde la cual aplica</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="ciudad_aplicante" maxlength="60" name="ciudad_aplicante" placeholder="" value="{{$candidate_info->ciudad_aplicante}}" required>
                </div>
                <label for="codigo" class="col-md-2 control-label">Código del candidato</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="_codigo" maxlength="200" name="_codigo" placeholder="" value="{{$candidate_info->codigo}}"   readonly disabled>
                </div>
            </div>
            <div class="form-group">
                <label for="telefono_fijo" class="col-sm-2 control-label">Teléfono fijo</label>
                <div class="col-md-4">
                    <input type="number" class="form-control" id="telefono_fijo" name="telefono_fijo" placeholder="#######" value="{{$candidate_info->telefono_fijo}}" min="0" step="1">
                </div>
                 <label for="telefono_movil" class="col-sm-2 control-label">Teléfono móvil</label>
                <div class="col-md-4">
                    <input type="number" class="form-control" id="telefono_movil" name="telefono_movil" placeholder="#######" value="{{$candidate_info->telefono_movil}}" min="0" step="1">
                </div>
            </div>
            <div class="form-group">
                <label for="correo" class="col-sm-2 control-label">Correo electrónico</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="_correo" name="_correo" placeholder="" value="{{$correo}}" readonly disabled>
                </div>
            </div>
            <div class="form-group">
                <label for="adjunto" class="col-sm-12 col-md-2 control-label">Documento de identidad: </label>
                <div class="col-md-4">
                    <input id="adjunto" type="file" class="form-control select-fix" name="adjunto_documento" accept=".pdf,application/pdf" @if(!$candidate_info->ruta_adjunto_documento) required @endif >
                    <em style="font-size: 15px;">Por favor, tenga en cuenta que el archivo adjunto debe estar en formato PDF y no tener un tamaño superior a 9MB</em>
                    <br>
                    @if($candidate_info->ruta_adjunto_documento)
                    <div style="
                        margin-top: 12px;
                        padding: 10px 12px;
                        border: 1px solid #6c757d;
                        background: #f8f9fa;
                        border-radius: 4px;
                        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
                    ">
                    <h6 style="font-weight: 500;">
                    Archivo cargado previamente: <a style="color:#428bca;" href="{{env('APP_URL').$candidate_info->ruta_adjunto_documento}}" download>Documento</a>
                    </h6>
                    <em style="font-size: 15px;">Por favor, tenga en cuenta que al cargar un nuevo archivo, se actualizará el archivo previamente cargado</em>
                    </div>
                    @endif
                </div>
            </div>
            <div class="form-group">
                <label for="adjunto" class="col-sm-12 col-md-2 control-label">Tarjeta profesional: </label>
                <div class="col-md-4">
                    <input id="adjunto" type="file" class="form-control select-fix" name="adjunto_tarjetaprofesional" accept=".pdf,application/pdf" @if(!$candidate_info->ruta_adjunto_tarjetaprofesional) required @endif />
                    <em style="font-size: 15px;">- Si su título de pregrado no tiene tarjeta profesional puede cargar su título o diploma en esta sección.</em>
                    <br>
                    <em style="font-size: 15px;">- Por favor, tenga en cuenta que el archivo adjunto debe estar en formato PDF y no tener un tamaño superior a 9MB</em>
                    <br>
                    @if($candidate_info->ruta_adjunto_tarjetaprofesional)
                    <div style="
                        margin-top: 12px;
                        padding: 10px 12px;
                        border: 1px solid #6c757d;
                        background: #f8f9fa;
                        border-radius: 4px;
                        box-shadow: 0 1px 2px rgba(0,0,0,0.08);
                    ">
                    <h6 style="font-weight: 500;">
                    Archivo cargado previamente: <a style="color:#428bca;" href="{{env('APP_URL').$candidate_info->ruta_adjunto_tarjetaprofesional}}" download>Tarjeta profesional</a>
                    </h6>
                    <em>Por favor, tenga en cuenta que al cargar un nuevo archivo, se actualizará el archivo previamente cargado</em>
                    </div>
                    @endif
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-4">
                    <button id="submit" type="submit" class="btn btn-success form-control">
                        <i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;Guardar datos personales
                    </button>
                </div>
            </div>
        </div>

        <input type="hidden" class="form-control" id="correo" name="correo" value="{{$correo}}">
        <input type="hidden" class="form-control" id="codigo" name="codigo" value="{{$codigo}}">
        <input type="hidden" class="form-control" id="id" name="id" value="{{$id}}">
    </form>

</div>

<script>

    (function () {
        document.addEventListener('DOMContentLoaded', function() {
            var adjuntoDocumento = document.querySelector('[name=adjunto_documento]');
            var adjuntoTarjeta = document.querySelector('[name=adjunto_tarjetaprofesional]');
            var submitButton = document.getElementById("submit");
            
            // Constantes de validación
            var MAX_FILE_SIZE = 9 * 1024 * 1024; // 9MB en bytes
            var ALLOWED_EXTENSIONS = ['pdf'];
            var ALLOWED_MIME_TYPES = ['application/pdf'];

            // Función de validación de archivos
            function validateFile(file, inputElement) {
                var errors = [];
                
                // Validar extensión
                var fileName = file.name.toLowerCase();
                var fileExtension = fileName.split('.').pop();
                if (!ALLOWED_EXTENSIONS.includes(fileExtension)) {
                    errors.push('El archivo debe estar en formato PDF.');
                }
                
                // Validar tipo MIME
                if (!ALLOWED_MIME_TYPES.includes(file.type)) {
                    errors.push('El archivo debe estar en formato PDF.');
                }
                
                // Validar tamaño
                if (file.size > MAX_FILE_SIZE) {
                    errors.push('El archivo no puede tener un tamaño superior a 9MB.');
                }
                
                return errors;
            }

            // Función para mostrar errores
            function showError(inputElement, errors) {
                // Remover errores previos
                var existingError = inputElement.parentElement.querySelector('.file-error-message');
                if (existingError) {
                    existingError.remove();
                }
                
                if (errors.length > 0) {
                    var errorDiv = document.createElement('div');
                    errorDiv.className = 'file-error-message';
                    errorDiv.style.color = '#d9534f';
                    errorDiv.style.marginTop = '5px';
                    errorDiv.style.fontSize = '0.9em';
                    errorDiv.innerHTML = '<strong>Error:</strong> ' + errors.join(' ');
                    inputElement.parentElement.appendChild(errorDiv);
                    inputElement.value = ''; // Limpiar el input
                    return false;
                }
                return true;
            }

            // Validar adjunto documento
            if (adjuntoDocumento) {
                adjuntoDocumento.addEventListener('change', function(e) {
                    if (this.files && this.files[0]) {
                        var file = this.files[0];
                        var errors = validateFile(file, this);
                        
                        if (!showError(this, errors)) {
                            if (submitButton) {
                                submitButton.disabled = true;
                            }
                        } else {
                            // Remover mensaje de error si existe
                            var existingError = this.parentElement.querySelector('.file-error-message');
                            if (existingError) {
                                existingError.remove();
                            }
                            if (submitButton) {
                                submitButton.disabled = false;
                            }
                        }
                    }
                });
            }

            // Validar adjunto tarjeta profesional
            if (adjuntoTarjeta) {
                adjuntoTarjeta.addEventListener('change', function(e) {
                    if (this.files && this.files[0]) {
                        var file = this.files[0];
                        var errors = validateFile(file, this);
                        
                        if (!showError(this, errors)) {
                            if (submitButton) {
                                submitButton.disabled = true;
                            }
                        } else {
                            // Remover mensaje de error si existe
                            var existingError = this.parentElement.querySelector('.file-error-message');
                            if (existingError) {
                                existingError.remove();
                            }
                            if (submitButton) {
                                submitButton.disabled = false;
                            }
                        }
                    }
                });
            }
        });
	})();

</script>

<style>
</style>
@endsection