@extends('unal')

@section('content')

@if (Session::has('status'))
    <div class="alert alert-success">
        {{ Session::get('status') }}
    </div>
@endif

<div class="row upper-bar">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <p style="font-weight: bold; margin-top:7px; margin-bottom:5px;">Bienvenido/a {{ Auth::user()->name }}</p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 text-right">
        <p style="font-weight: bold; margin-top:7px; margin-bottom:5px;">
            Código del candidato: {{ Auth::user()->codigo }}
        </p>
    </div>
</div>

<div class="row">
    <!-- Menú lateral -->
    <div class="col-sm-2 col-md-2" style="padding-top: 0px; border-radius: 5px; box-shadow: 3px 3px 10px #888888; background-color: rgb(237, 237, 237); margin-left:20px;">
        <div style="height: 90%; collapse navbar-collapse;">
       
        <ul class="nav nav-pills nav-stacked menu-color border-radius: 4px;" style="font-weight: bold;">
    <li class="{{ Request::is('datos') ? 'active' : '' }}">
        <a class="full-link" href="{{ env('APP_URL') }}datos"><i class="fa fa-user"></i>&nbsp;Datos personales</a>
    </li>

    @if(App\Aspirante::where('correo', '=', Auth::user()->email)->first())

        <li class="{{ Request::is('perfiles') ? 'active' : '' }}">
            <a class="full-link" href="{{ env('APP_URL') }}perfiles"><i class="fa fa-user"></i>&nbsp;Perfiles</a>
        </li>

        @if(App\Perfil::join('aspirantes_perfiles', 'perfiles_id', '=', 'id')->where('aspirantes_id', '=', Auth::user()->id)->first())

            <li id="estudios_p" class="{{ Request::is('estudios') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}estudios"><i class="fa fa-graduation-cap"></i>&nbsp;Estudios [{{ $count['estudio'] }}]</a>
            </li>

            <li id="distincion_p" class="{{ Request::is('distinciones') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}distinciones"><i class="fa fa-trophy"></i>&nbsp;Distinciones [{{ $count['distincion'] }}]</a>
            </li>

            <li id="laboral_p" class="{{ Request::is('experiencia_laboral') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}experiencia_laboral"><i class="fa fa-list-ul"></i>&nbsp;Laboral [{{ $count['laboral'] }}]</a>
            </li>

            <li id="docente_p" class="{{ Request::is('experiencia_docente') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}experiencia_docente"><i class="fa fa-list-ul"></i>&nbsp;Docente [{{ $count['docente'] }}]</a>
            </li>

            <li id="investigativa_p" class="{{ Request::is('experiencia_investigativa') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}experiencia_investigativa"><i class="fa fa-list-ul"></i>&nbsp;Investigativa [{{ $count['investigativa'] }}]</a>
            </li>

            <li id="produccion_p" class="{{ Request::is('produccion_intelectual') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}produccion_intelectual"><i class="fa fa-lightbulb-o"></i>&nbsp;Producción [{{ $count['produccion'] }}]</a>
            </li>

            <li id="idioma_p" class="{{ Request::is('idiomas') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}idiomas"><i class="fa fa-language"></i>&nbsp;Idiomas [{{ $count['idioma'] }}]</a>
            </li>

            @if($count['show_tesis'] > 0)
                <li id="tesis_p" class="{{ Request::is('tesis') ? 'active' : '' }}">
                    <a class="full-link" href="{{ env('APP_URL') }}tesis"><i class="fa fa-book"></i>&nbsp;Tesis [{{ $count['tesis'] }}]</a>
                </li>
            @endif

            <li id="ensayo_p" class="{{ Request::is('perfiles/ensayos') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}perfiles/ensayos"><i class="fa fa-bars"></i>&nbsp;Ensayos</a>
            </li>

            <li id="resumen_p" class="{{ Request::is('perfiles/resumen') ? 'active' : '' }}">
                <a class="full-link" href="{{ env('APP_URL') }}perfiles/resumen"><i class="fa fa-check"></i>&nbsp;Enviar</a>
            </li>

        @else
            <li>
                <a class="full-link" href="#" disabled>
                    <i class="fa fa-arrow-left hidden-xs hidden-sm"></i>&nbsp;Debe seleccionar un perfil antes de continuar.
                </a>
            </li>
        @endif

    @else
        <li><a class="full-link" href="#" disabled>Seleccione su perfil y datos personales para continuar.</a></li>
    @endif

    <li>
        <a class="full-link" href="{{ env('APP_URL') }}auth/logout"><i class="glyphicon glyphicon-log-out"></i>&nbsp;Cerrar sesión</a>
    </li>
</ul>


        </div>
    </div>
    <!-- Contenido principal -->
    <div class="col-sm-9 col-md-9" style="border-radius: 5px; box-shadow: 3px 3px 10px #888888; padding: 10px; background-color:rgb(237, 237, 237); min-height: 100vh; margin-left:20px">
        @yield('form')
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
    var today = new Date();
    var todayDateStr = today.toISOString().split('T')[0];
    var adultLimitDate = new Date();
    adultLimitDate.setFullYear(adultLimitDate.getFullYear() - 18);
    var adultLimitDateStr = adultLimitDate.toISOString().split('T')[0];

    // Colorear elementos del menú según contadores
    function setMenuColor(elementId, count) {
        var element = document.getElementById(elementId);
        if (element) {
            if (count > 0) {
                element.style.backgroundColor = '#A1F58B';
            } else {
                element.style.backgroundColor = '#FFAAAA';
            }
        }
    }
    
    setMenuColor('estudios_p', {!!$count['estudio']!!});
    setMenuColor('distincion_p', {!!$count['distincion']!!});
    setMenuColor('laboral_p', {!!$count['laboral']!!});
    setMenuColor('docente_p', {!!$count['docente']!!});
    setMenuColor('investigativa_p', {!!$count['investigativa']!!});
    setMenuColor('produccion_p', {!!$count['produccion']!!});
    setMenuColor('idioma_p', {!!$count['idioma']!!});
    setMenuColor('tesis_p', {!!$count['tesis']!!});
    
    // Colorear ensayos con lógica especial
    var ensayosCount = {!!$count['ensayos']!!};
    var perfilesCount = {!!$count['perfiles']!!};
    var ensayoElement = document.getElementById('ensayo_p');
    if (ensayoElement) {
        if (ensayosCount == 0) {
            ensayoElement.style.backgroundColor = '#FFAAAA';
        } else if (ensayosCount > 0 && ensayosCount < perfilesCount) {
            ensayoElement.style.backgroundColor = '#FFFD8F';
        } else {
            ensayoElement.style.backgroundColor = '#A1F58B';
        }
    }

    // Timer para countdown
    var limit_date = new Date('{{App\Configuracion::where('llave', '=', 'limit_date')->first()["valor"]}}');
    var time_remaining = (limit_date.getTime()-today.getTime())/1000; // En segundos
    var display = document.getElementById('countdown');

    function startTimer(displayElement) {
        if (!displayElement) return;
        
        var days, minutes, seconds, hours;
        setInterval(function () {
            days = parseInt(time_remaining/(3600*24),10);
            hours = parseInt((time_remaining-(days*3600*24))/3600,10);
            minutes = parseInt((time_remaining-(days*3600*24)-(hours*3600))/60,10);
            seconds = parseInt(time_remaining%60,10);

            displayElement.textContent = " " + days + " dias ," + hours + " horas, " + minutes + " minutos y " + seconds + " segundos";

            time_remaining -= 1;
        }, 1000);
    }
    startTimer(display);

    // Agregar clase 'active' al elemento del menú actual
    var currentPath = "{{Request::path()}}";
    var menuLink = document.querySelector('a[data-path="' + currentPath + '"]');
    if (menuLink && menuLink.parentElement) {
        menuLink.parentElement.classList.add('active');
    }

    // Evita números negativos en todos los campos numéricos.
    document.querySelectorAll('input[type="number"]').forEach(function(input) {
        if (!input.hasAttribute('min')) {
            input.setAttribute('min', '0');
        }

        function clampNonNegative() {
            if (input.value === '') {
                return;
            }
            var value = Number(input.value);
            if (!isNaN(value) && value < 0) {
                input.value = input.getAttribute('min') || '0';
            }
        }

        input.addEventListener('input', clampNonNegative);
        input.addEventListener('change', clampNonNegative);
    });

    // Configuración especial para fecha de nacimiento: valor por defecto y mayoría de edad.
    var fechaNacimientoInput = document.querySelector('input.birth-date, input#fecha_nacimiento');
    if (fechaNacimientoInput) {
        if (!fechaNacimientoInput.value) {
            fechaNacimientoInput.value = '1990-01-01';
        }
        fechaNacimientoInput.setAttribute('max', adultLimitDateStr);

        var validateEdad = function() {
            if (fechaNacimientoInput.value && fechaNacimientoInput.value > adultLimitDateStr) {
                fechaNacimientoInput.setCustomValidity('Debe ser mayor de 18 años.');
            } else {
                fechaNacimientoInput.setCustomValidity('');
            }
        };

        fechaNacimientoInput.addEventListener('change', validateEdad);
        fechaNacimientoInput.addEventListener('input', validateEdad);
        validateEdad();
    }

    // Aplica tope de fecha máxima al día actual para fechas de formulario.
    document.querySelectorAll('input[type="date"].maxToday, input[type="date"].start-date, input[type="date"].end-date').forEach(function(input) {
        if (!input.classList.contains('birth-date')) {
            input.setAttribute('max', todayDateStr);
        }
    });

    // Validaciones para fechas de inicio/fin (sin futuro y orden correcto).
    document.querySelectorAll('form').forEach(function(form) {
        var startInput = form.querySelector('input[type="date"].start-date');
        var endInput = form.querySelector('input[type="date"].end-date');

        if (!startInput || !endInput) {
            return;
        }

        function syncDateRangeConstraints() {
            var startValue = startInput.value;
            var endValue = endInput.value;

            startInput.setAttribute('max', endValue && endValue < todayDateStr ? endValue : todayDateStr);
            endInput.setAttribute('max', todayDateStr);

            if (startValue) {
                endInput.setAttribute('min', startValue);
            } else {
                endInput.removeAttribute('min');
            }

            if (!endInput.disabled && startValue && endValue && startValue > endValue) {
                endInput.setCustomValidity('La fecha de finalización no puede ser anterior a la fecha de inicio.');
            } else {
                endInput.setCustomValidity('');
            }
        }

        startInput.addEventListener('change', syncDateRangeConstraints);
        endInput.addEventListener('change', syncDateRangeConstraints);
        syncDateRangeConstraints();
    });

    // Configuración opcional para Flatpickr si es necesario
    if (typeof flatpickr !== 'undefined') {
        var todayDate = new Date();
        var oldyear = new Date();
        oldyear.setFullYear(oldyear.getFullYear() - 10);
        
        // Configurar fecha máxima para inputs con clase maxToday o end-date
        document.querySelectorAll('input[type="date"].maxToday, input[type="date"].end-date').forEach(function(input) {
            if (!input.flatpickr) {
                flatpickr(input, {
                    maxDate: todayDate,
                    dateFormat: "Y-m-d",
                    locale: "es"
                });
            }
        });
        
        // Configurar rango de fechas para inputs start-date y end-date relacionados
        document.querySelectorAll('input[type="date"].start-date').forEach(function(startInput) {
            var endInput = startInput.closest('.form-group, .row') ? 
                          startInput.closest('.form-group, .row').querySelector('input[type="date"].end-date') : 
                          document.querySelector('input[type="date"].end-date');
            
            if (endInput && !startInput.flatpickr) {
                var startFp = flatpickr(startInput, {
                    maxDate: todayDate,
                    dateFormat: "Y-m-d",
                    locale: "es",
                    onChange: function(selectedDates, dateStr, instance) {
                        if (selectedDates[0] && endInput.flatpickr) {
                            endInput.flatpickr.set('minDate', selectedDates[0]);
                        }
                    }
                });
                
                if (endInput && !endInput.flatpickr) {
                    var endFp = flatpickr(endInput, {
                        maxDate: todayDate,
                        dateFormat: "Y-m-d",
                        locale: "es",
                        onChange: function(selectedDates, dateStr, instance) {
                            if (selectedDates[0] && startInput.flatpickr) {
                                startInput.flatpickr.set('maxDate', selectedDates[0]);
                            }
                        }
                    });
                }
            }
        });
    }

    // Estilos para campos requeridos
    var requiredFields = document.querySelectorAll("input[required], select[required], textarea[required]");
    requiredFields.forEach(function(field) {
        field.style.borderLeft = "4px solid red";
    });

    // MutationObserver para campos requeridos
    var list = document.querySelectorAll('input, select, textarea');
    var config = { attributes: true, childList: true, characterData: true };

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var target = mutation.target;
            if (mutation.attributeName === 'required') {
                if (target.hasAttribute && target.hasAttribute('required') && target.getAttribute('required') === 'required') {
                    target.style.borderLeft = "4px solid red";
                } else {
                    target.style.borderLeft = "";
                }
            }
        });
    });

    for (var i = 0; i < list.length; i++) {
        if (list[i] instanceof Node) {
            observer.observe(list[i], config);
        }
    }
});
</script>
<style>
    .upper-bar{
        margin-top: 25px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: rgb(237, 237, 237);
        box-shadow: 3px 3px 10px #888888;
        border-radius: 4px;
    }
    
    .nav-pills > li > a.full-link {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        padding: 4px 10px;
        text-decoration: none;
        color: #333;
    }

    .full-link{
        border: 0.1px solid black;
        border-radius: 5px;
        overflow: hidden;
    }

    .nav-pills > li {
        height: 40px;
        width: 100%;
        margin-bottom: 1px;
        gap:0.7rem !important;
        /*line-height: 50px;*/
    }
    
    .nav-pills {
        margin-bottom: 0;
        gap:0.4rem !important;
    }

    .nav-pills > li:hover {
        background-color: #e6e6e6;
    }
    .nav-pills > li.active > a.full-link {
        background-color: #428bca !important;
        color: white !important;
    }

    .nav-pills > li > a.full-link:hover {
        background-color: #3071a9;
        color: white;
    }
</style>

@stop