@extends('main')

<!--<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>-->


@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>

@if($msg)
<div class="alert alert-success" role="alert">
    {{$msg}}
</div>
@endif

<div class="panel panel-default">
    <div class="panel-heading">
        Información de programas académicos a los cuales puede acceder cada perfil
    </div>
    <div class="panel-body">

        <div class="form-group" >
            <label for="nombre_plan" class="col-md-2 control-label">Profesional en:</label>
            <div class="col-md-4">
                <div>
                    <label class="form-label required">Profesional en</label>
                    <div class="input-group">
                        <select class="form-tom-select select-type-checkbox" id="plan_list" multiple>
                            <option value="">Seleccione</option>
                            @foreach($programas_pregrado_info as $programa_pregrado)
                            <option value="{{$programa_pregrado->id}}" data-label="{{$programa_pregrado->nombre}}">{{$programa_pregrado->nombre}}</option>
                            @endforeach
                        </select>
                        <div id="start-group" class="form-text">Seleccione uno o varios programas académicos</div>
                    </div>
                </div>
            </div>
            <!--<button id="clean_plan_list" class="btn btn-warning"><span class="glyphicon glyphicon-trash"></span> Limpiar seleccion</button>-->
            <div class="col-sm-12 col-md-3">
                      <h4>Lista de perfiles guardados previamente:</h4>
                      </div>
                <div class="col-sm-12 col-md-3">
                      <ul>
                          @forelse($perfiles_seleccionados as $perfil)
                          <li>{{$perfil->identificador}} - {{$perfil->area_desempeno}}</li>
                          @empty
                          <div class="alert alert-warning" role="alert">
                              No se encontraron perfiles seleccionados. Por favor, seleccione primero a que perfiles desea aplicar de la tabla <b>Lista completa de perfiles disponibles</b> y de clic en el botón <a href="#" data-path="perfiles" class="alert-link"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i>&nbsp;Guardar perfiles seleccionados</a> .
                          </div>
                          @endforelse
                      </ul>
                </div>
        </div>

    </div>
    <div class="panel-heading">
        Información de programas académicos a los cuales puede acceder cada perfil
    </div>
    <div class="alert alert-warning alert-dismissible select-fix" role="alert">
       <p>   <i class="fa fa-exclamation-circle" aria-hidden="true"></i> <strong> </strong> Recuerde que puede seleccionar hasta dos perfiles.
    </div>
    <form method="post" action="{{ env('APP_URL') }}perfiles" class="form-horizontal" style="margin:20px 0">
        <div class="panel-body">
            <p>
                A continuación, se mostrarán habilitados los títulos de pregrado requeridos para cada perfil seleccionado. Tenga en cuenta que, dependiendo de los títulos de pregrado seleccionados se habilitarán los perfiles del concurso a los cuales puede aplicar.
            </p>

            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="panel-heading">
                        <h4>Lista completa de perfiles disponibles</h4>
                    </div>
                    <div class="panel-body">
                        <table id="profiles" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th width="7%">¿Seleccionar?</th>
                                    <th width="5%">Identificador</th>
                                    <th width="10%" class="hidden-xs hidden-sm">Dedicación</th>
                                    <th width="2%" class="hidden-xs hidden-sm">Cargos</th>
                                    <th width="17%" class="hidden-xs hidden-sm">Departamento</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr id="not_selected_plan">
                                    <td colspan="8"> No se ha seleccionado ningun programa de pregrado todavia. Por favor, seleccione al menos un programa para mostrar la lista de perfiles asociados a dicho programa.</td>
                                </tr>
                                @foreach($perfiles_info as $perfil)
                                <tr data-id="{{$perfil->id}}" class="profile_row">
                                  <td>
                                      <input id="profile-{{$perfil->id}}" data-id="{{$perfil->id}}" class="profile"  name="profile" type="checkbox" value="{{$perfil->id}}" class="checkbox">
                                  </td>
                                    <td>{{$perfil->identificador}}</td>
                                    <td class="hidden-xs hidden-sm">{{$perfil->dedicacion}}</td>
                                    <td class="hidden-xs hidden-sm">{{$perfil->cargos}}</td>
                                    <td class="hidden-xs hidden-sm">{{$perfil->departamento}}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <button type="submit" id="submit"  class="btn btn-success form-control">
                    <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i>&nbsp;Guardar perfiles seleccionados
                </button>
            </div>
        </div>
        <input id="selected_profile_ids" name="selected_profile_ids" type="hidden" value="">
        {!! csrf_field() !!}

    </form>
</div>


<script type="text/javascript">
    (function () {
        var selectable_profiles_ids = {!!$perfiles_programas_pregrado_info!!};
        var selected_plan_ids = [];
        var selected_profile_ids = [];

        var planListSelectElement = document.getElementById("plan_list");
        var notSelectedPlanRow = document.getElementById("not_selected_plan");
        var profileRows = document.querySelectorAll("#profiles .profile_row");
        var profileCheckboxes = document.querySelectorAll(".profile");
        var submitButton = document.getElementById("submit");
        var selectedProfileIdsInput = document.getElementById("selected_profile_ids");
        var tomSelectPlanInstance = null;
        var hasPreviouslySelectedProfiles = {{ $perfiles_seleccionados->isEmpty() ? 'false' : 'true' }};
        var hasConfirmedEditProfiles = false;

        // Muestra la confirmación de edición de perfiles solo una vez por sesión
        function shouldAllowEditProfiles() {
            // Si no había perfiles previos, no hay nada que advertir
            if (!hasPreviouslySelectedProfiles) {
                return true;
            }

            // Si ya se confirmó una vez, no volvemos a preguntar
            if (hasConfirmedEditProfiles) {
                return true;
            }

            var r = confirm("¿Está seguro que desea editar su lista de perfiles?. Recuerde que \nsi lo hace debe cargar nuevamente sus ensayos.");
            if (r) {
                hasConfirmedEditProfiles = true;
            }
            return r;
        }

        // Ocultar todos los perfiles al inicio
        profileRows.forEach(function(row) {
            row.style.display = 'none';
        });
        
        // Función para inicializar Tom-select después de que las bibliotecas estén cargadas
        function initializeTomSelect() {
            if (typeof TomSelect !== 'undefined' && planListSelectElement) {
                try {
                    var selectElement = planListSelectElement;
                    var needsReinit = false;
                    
                    // Verificar si ya está inicializado (por el Kit UNAL u otro código)
                    if (selectElement.tomselect) {
                        tomSelectPlanInstance = selectElement.tomselect;
                        console.log('Tom-select ya estaba inicializado para plan_list');
                        
                        // Verificar si tiene el plugin remove_button habilitado
                        var settings = tomSelectPlanInstance.settings || {};
                        var plugins = settings.plugins || [];
                        var hasRemoveButton = Array.isArray(plugins) && plugins.includes('remove_button');
                        
                        if (!hasRemoveButton) {
                            console.log('Plugin remove_button no encontrado, reinicializando...');
                            needsReinit = true;
                        }
                    } else {
                        needsReinit = true;
                    }
                    
                    // Reinicializar si es necesario
                    if (needsReinit) {
                        var currentValues = [];
                        if (tomSelectPlanInstance) {
                            currentValues = tomSelectPlanInstance.getValue() || [];
                            tomSelectPlanInstance.destroy();
                            tomSelectPlanInstance = null;
                        }
                        
                        // Pequeño delay para asegurar que el DOM esté listo
                        setTimeout(function() {
                            tomSelectPlanInstance = new TomSelect('#plan_list', {
                                maxItems: null,
                                placeholder: 'Seleccione',
                                closeAfterSelect: false,
                                plugins: ['remove_button']
                            });
                            
                            // Restaurar valores si había selecciones previas
                            if (currentValues && currentValues.length > 0) {
                                tomSelectPlanInstance.setValue(currentValues);
                            }
                            
                            console.log('Tom-select reinicializado con plugin remove_button');
                        }, 100);
                        
                        return true;
                    }
                    
                    return true;
                } catch (e) {
                    console.error('Error al inicializar Tom-select:', e);
                    return false;
                }
            }
            return false;
        }
        
        // Esperar a que se carguen las bibliotecas
        function waitForLibraries() {
            if (typeof TomSelect !== 'undefined') {
                // Esperar un poco más para que el Kit UNAL termine de inicializar
                setTimeout(function() {
                    initializeTomSelect();
                    initializeEvents();
                }, 300);
            } else {
                // Reintentar después de un tiempo
                setTimeout(waitForLibraries, 100);
            }
        }
        
        // Iniciar la espera
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', waitForLibraries);
        } else {
            waitForLibraries();
        }

        function updateSelectableProfiles() {
            console.log("=== updateSelectableProfiles INICIO ===");
            
            // Obtener valores seleccionados del select (compatible con tom-select y select nativo)
            selected_plan_ids = [];
            
            if (tomSelectPlanInstance) {
                // Si es tom-select, usar la API de Tom-select
                var values = tomSelectPlanInstance.getValue() || [];
                selected_plan_ids = values.filter(function(value) {
                    return value !== null && value !== undefined && value !== '' && value !== 'select-all';
                }).map(String);
                console.log('Valores desde Tom-select:', selected_plan_ids);
            } else if (planListSelectElement) {
                // Fallback para select nativo
                var selectedOptions = planListSelectElement.selectedOptions || planListSelectElement.options;
                
                for (var i = 0; i < selectedOptions.length; i++) {
                    if (selectedOptions[i].selected) {
                        var value = selectedOptions[i].value;
                        if (value !== null && value !== undefined && value !== '' && value !== 'select-all') {
                            selected_plan_ids.push(String(value));
                        }
                    }
                }
            }
            
            console.log('Programas seleccionados:', selected_plan_ids);
            
            // Ocultar todo primero
            if (notSelectedPlanRow) {
                notSelectedPlanRow.style.display = 'none';
            }
            profileRows.forEach(function(row) {
                row.style.display = 'none';
            });
            
            // Desmarcar todos los checkboxes de perfiles
            profileCheckboxes.forEach(function(checkbox) {
                checkbox.checked = false;
            });

            if(selected_plan_ids.length <= 0){
                console.log('No hay programas seleccionados - mostrando mensaje');
                if (notSelectedPlanRow) {
                    notSelectedPlanRow.style.display = '';
                }
            }
            else {
                // Mostrar perfiles que corresponden a los programas seleccionados
                selected_plan_ids.forEach(function(selectedPlanId) {
                    selectable_profiles_ids.forEach(function(spids_item) {
                        if (String(spids_item.programas_pregrado_id) === String(selectedPlanId)) {
                            var profileRow = document.querySelector("#profiles .profile_row[data-id='" + spids_item.perfiles_id + "']");
                            if (profileRow) {
                                profileRow.style.display = '';
                            }
                        }
                    });
                });
            }
            
            console.log("=== updateSelectableProfiles FIN ===\n");
        }

        function updateSelectedProfiles() {
            selected_profile_ids = [];
            var checkedProfiles = document.querySelectorAll(".profile:checked");
            
            if (checkedProfiles.length < 1) {
                if (submitButton) {
                    submitButton.disabled = true;
                }
            } else {
                if (submitButton) {
                    submitButton.disabled = false;
                }
                
                if (checkedProfiles.length > 2) {
                    alert("No se permite seleccionar mas de dos perfiles. \n\nPor favor, verifíque los perfiles a los cuales desea aspirar.");
                    // Desmarcar el último checkbox marcado
                    if (checkedProfiles.length > 0) {
                        checkedProfiles[checkedProfiles.length - 1].checked = false;
                    }
                } else {
                    checkedProfiles.forEach(function(checkbox) {
                        var profileId = checkbox.getAttribute("data-id");
                        if (profileId) {
                            selected_profile_ids.push(profileId);
                        }
                    });
                    
                    if (selectedProfileIdsInput) {
                        selectedProfileIdsInput.value = selected_profile_ids.join(",");
                    }
                }
            }
        }

        function initializeEvents() {
            // Evento change en el select de programas
            if (tomSelectPlanInstance) {
                // Usar eventos de Tom-select para cambios
                tomSelectPlanInstance.on('change', function(values) {
                    console.log('Evento change de Tom-select disparado:', values);
                    var checkedProfiles = document.querySelectorAll(".profile:checked");
                    if (hasPreviouslySelectedProfiles && checkedProfiles.length < 1) {
                        if (!shouldAllowEditProfiles()) {
                            // Restaurar selección anterior si el usuario cancela
                            return;
                        }
                    }
                    updateSelectableProfiles();
                });
                
                // Evento cuando se remueve un item
                tomSelectPlanInstance.on('item_remove', function(value) {
                    console.log('Item removido:', value);
                    updateSelectableProfiles();
                });
                
                console.log('Event listener agregado a Tom-select');
            } else if (planListSelectElement) {
                // Fallback para select nativo
                planListSelectElement.addEventListener('change', function (e) {
                    var checkedProfiles = document.querySelectorAll(".profile:checked");
                    if (hasPreviouslySelectedProfiles && checkedProfiles.length < 1) {
                        if (!shouldAllowEditProfiles()) {
                            // Restaurar selección anterior si el usuario cancela
                            return;
                        }
                    }
                    updateSelectableProfiles();
                });
            }

            // Eventos en los checkboxes de perfiles
            profileCheckboxes.forEach(function(checkbox) {
                checkbox.addEventListener('change', function(e) {
                    updateSelectedProfiles();
                });
            });

            // Verificar estado inicial de los checkboxes
            updateSelectedProfiles();
        }

    })();

</script>

<style>
/* Estilos para los botones de remover en Tom-select */
.ts-wrapper.multi .ts-control .item .remove,
.ts-control .item .remove,
[data-ts-item] .remove {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 8px !important;
    margin-left: 8px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    color: #999 !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ts-wrapper.multi .ts-control .item .remove:hover,
.ts-control .item .remove:hover,
[data-ts-item] .remove:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #d00 !important;
}

/* Asegurar que los items removibles sean visibles */
.ts-wrapper.multi .ts-control .item,
.ts-control .item,
[data-ts-item] {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    margin: 2px !important;
    background-color: #e8e8e8 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* Asegurar visibilidad del botón X */
.ts-wrapper.multi .ts-control .item::after,
.ts-control .item::after {
    content: '' !important;
}

/* Forzar visibilidad de elementos de remover */
.ts-wrapper .ts-control .item .remove-button,
.ts-wrapper .ts-control .item [class*="remove"],
.ts-wrapper .ts-control .item [class*="Remove"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
</style>

@stop