<style>
  :root {
    --azul-primario: #2A4E6D;
    --azul-secundario: #3B6EA5;
    --azul-destacado: #4A90E2;
    --azul-suave: #E3F2FD;
    --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
    --amarillo-primario: #FFD54F;
    --amarillo-secundario: #FFECB3;
    --naranja-destacado: #FF9800;
    --verde-exito: #4CAF50;
    --rojo-error: #F44336;
    --gris-claro: #F5F7FA;
    --gris-medio: #E1E5E9;
    --gris-oscuro: #6C757D;
    --borde-principal: #D0D7DE;
    --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 6px 16px rgba(0, 0, 0, 0.08);
    --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --transicion: all 0.3s ease;
    --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --rojo-primario: #c30d0d;
    --amarillo-gradiente: linear-gradient(90deg, rgba(255,200,0,0.39) 0%, rgba(255,141,113,0.19) 100%);
  }

  /* Contenedor principal del formulario */
  .control-history-container {
    font-family: var(--fuente-principal);
    color: #333;
    line-height: 1.5;
    animation: fadeIn 0.5s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Secciones del formulario */
  .control-section {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid #dee2e6;
    box-shadow: var(--sombra-suave);
    transition: var(--transicion);
  }

  .control-section:hover {
    box-shadow: var(--sombra-media);
  }

  /* Información del paciente */
  .patient-info {
    background-color: #f9f9f9;
    border-left: 4px solid var(--rojo-primario);
  }

  .patient-info .row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .patient-info .row:last-child {
    border-bottom: none;
  }

  .info-label {
    font-weight: 600;
    color: var(--gris-oscuro);
  }

  .info-value {
    font-weight: 500;
  }

  /* Campos de formulario */
  .form-label {
    font-weight: 600;
    color: var(--gris-oscuro);
    margin-bottom: 10px;
    display: block;
    font-size: 0.95rem;
    transition: var(--transicion);
  }

  .form-control {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 10px 12px !important;
    margin-bottom: 20px;
    width: 100%;
    color: #333;
    font-size: 1rem;
    transition: var(--transicion);
    background-color: #fff;
  }

  .form-control:hover {
    border-color: var(--azul-secundario) !important;
  }
  
  .form-control:focus {
    border-color: var(--rojo-primario) !important;
    box-shadow: 0 0 0 0.2rem rgba(195, 13, 13, 0.15);
    outline: none;
  }

  /* Selects estilizados */
  select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c30d0d'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 35px !important;
    cursor: pointer;
  }

  /* Áreas de texto */
  textarea.form-control {
    min-height: 120px;
    resize: vertical;
  }

  /* Sección de enfermedades */
  #selected-diseases {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    background-color: #f8f9fa;
    min-height: 50px;
    border: 1px solid #dee2e6;
  }

  /* Estilos responsivos */
  @media (max-width: 768px) {
    .control-section {
      padding: 15px;
    }
    
    .form-control {
      padding: 8px 10px !important;
    }
  }
</style>

<div class="control-history-container">
    <input type="hidden" name="historyId" value="{{$history->id}}">
    
    <div class="control-section patient-info">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-lg-6 col-md-6 p-3 info-label">
                    {{__('com-form-history-control.name')}} 
                </div>
                <div class="col-12 col-lg-6 col-md-6 p-3 info-value">
                    {{$history->patient()->first()->firstname}} {{$history->patient()->first()->lastname}}
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6 col-md-6 p-3 info-label">
                    {{__('com-form-history-control.identification')}} 
                </div>
                <div class="col-12 col-lg-6 col-md-6 p-3 info-value">
                    {{$history->patient()->first()->identification}}
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6 col-md-6 p-3 info-label">
                    {{__('com-form-history-control.age')}} 
                </div>
                <div class="col-12 col-lg-6 col-md-6 p-3 info-value">
                    {{$history->patient()->first()->age}}
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6 col-md-6 p-3 info-label">
                    {{__('com-form-history-control.gender')}} 
                </div>
                <div class="col-12 col-lg-6 col-md-6 p-3 info-value">
                    {{$history->patient()->first()->gender}}
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6 col-md-6 p-3 info-label">
                    {{__('com-form-history-control.bloodType')}} 
                </div>
                <div class="col-12 col-lg-6 col-md-6 p-3 info-value">
                    {{$history->patient()->first()->blood_type}}
                </div>
            </div>
        </div>
    </div>
    
    <div class="control-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 p-4">
                    <label for="especiality" class="form-label">{{__("com-form-history-control.especiality")}}</label>
                    <select value="{{$model->especiality}}" class="form-control" name="especiality" id="especiality">
                        <option value="SELECT">{{__('com-form-history-control.selectValue')}}</option>
                        @foreach($optionsEspeciality as $key => $option)
                            <option value="{{$key}}">{{$option}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-12 p-4">
                    <label for="title" class="form-label">{{__("com-form-history-control.title")}}</label>
                    <input type="text" id="title" name="title" value="{{$model->title}}" class="form-control">
                </div>
            </div>
        </div>
    </div>
    
    <div class="control-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-5 col-lg-5 col-12 p-4">
                    <x-diseases />
                </div>
                <div class="col-md-7 col-lg-7 col-12 p-4">
                    <div class="row">
                        <div class="col-12 p-4">
                            <div id="selected-diseases"></div>
                            <label for="summary" class="form-label">{{__("com-form-history-control.summary")}}</label>
                            <textarea class="form-control" placeholder="{{__('com-form-history-control.placeholder1')}}" value="{{$model->summary}}" id="summary" name="summary" rows="5"></textarea>
                            <div id="hidden-fields"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 p-4">
                            <label for="diagnosis" class="form-label">{{__("com-form-history-control.diagnosis")}}</label>
                            <textarea class="form-control" placeholder="{{__('com-form-history-control.placeholder')}}" value="{{$model->diagnosis}}" id="diagnosis" name="diagnosis" rows="5"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Elemento para acceder a la información de los exámenes físicos -->
<div id="physical-exams-data" style="display:none;">
    @if(isset($physicalTest))
        @foreach($physicalTest->getFields() as $key => $field)
            <span data-key="{{$key}}" data-type="{{$field['type']}}" data-value="{{$key}}"></span>
        @endforeach
    @endif
</div>

<!-- Contenedor para traducciones -->
<script type="application/json" id="translations-data">
@php
    $translations = [];
    
    // Recopilar traducciones para physical exams
    if(isset($physicalTest)) {
        foreach($physicalTest->getFields() as $key => $field) {
            $examKey = "com-form-history.{$key}";
            $translations[$examKey] = __($examKey);
        }
    }
    
    echo json_encode($translations);
@endphp
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Variables para almacenar todos los exámenes físicos disponibles
        let allAvailableMedicalExams = [];
        let loadingTimeout = null;
        
        // Función para garantizar que el loading siempre se cierre después de cierto tiempo
        function ensureLoadingClosed(timeoutMs = 5000) {
            // Limpiar cualquier timeout existente
            if (loadingTimeout) {
                clearTimeout(loadingTimeout);
            }
            
            // Crear un nuevo timeout
            loadingTimeout = setTimeout(() => {
                if ($('#modalLoading').hasClass('show')) {
                    console.warn('Loading modal forzado a cerrarse después del timeout');
                    $('#modalLoading').modal('hide');
                }
            }, timeoutMs);
        }
        
        // Guardar todos los exámenes físicos disponibles al cargar la página
        function saveAllMedicalExams() {
            try {
                const examsData = document.querySelectorAll('#physical-exams-data span');
                examsData.forEach(span => {
                    const key = span.getAttribute('data-key');
                    if (key) {
                        allAvailableMedicalExams.push(key);
                    }
                });
                console.log('Exámenes físicos disponibles guardados:', allAvailableMedicalExams);
            } catch (error) {
                console.error('Error al guardar exámenes disponibles:', error);
                // Asegurar que haya un valor por defecto
                if (allAvailableMedicalExams.length === 0) {
                    allAvailableMedicalExams = ['Weight', 'Size', 'TA', 'Temp', 'C_FC', 'FR', 'General'];
                }
            }
        }
        
        // Llamar a la función para guardar los exámenes disponibles
        saveAllMedicalExams();

        // Actualizar pestañas de examen físico
        function updatePhysicalExamTabs(medicalExams) {
            const tabsContainer = document.getElementById('tabPhysicalExam');
            if (!tabsContainer) return;

            // Obtener todas las pestañas disponibles
            const allTabs = Array.from(document.querySelectorAll('#tabPhysicalExam .nav-item'));
            
            // Mostrar/ocultar pestañas según configuración
            allTabs.forEach(tab => {
                const link = tab.querySelector('a');
                const tabId = link.getAttribute('id').replace('-tab', '');
                const examKey = tabId.replace('physical-exam-', '');
                
                if (medicalExams.includes(examKey)) {
                    tab.style.display = '';
                } else {
                    tab.style.display = 'none';
                }
            });

            // Asegurarse de que haya una pestaña activa
            const visibleTabs = allTabs.filter(tab => tab.style.display !== 'none');
            if (visibleTabs.length > 0 && !visibleTabs.some(tab => tab.querySelector('a.active'))) {
                visibleTabs[0].querySelector('a').classList.add('active');
                visibleTabs[0].querySelector('a').setAttribute('aria-selected', 'true');
            }
        }

        // Actualizar contenido de examen físico
        function updatePhysicalExamContent(medicalExams) {
            const contentContainer = document.getElementById('tabPhysicalExamContent');
            if (!contentContainer) return;

            // Obtener todos los paneles de contenido
            const allPanels = Array.from(document.querySelectorAll('#tabPhysicalExamContent .tab-pane'));
            
            // Mostrar/ocultar paneles según configuración
            allPanels.forEach(panel => {
                const panelId = panel.getAttribute('id');
                const examKey = panelId.replace('physical-exam-', '');
                
                // Agregar clase 'phisycalExams' a los textareas
                const textarea = panel.querySelector('textarea');
                if (textarea && !textarea.classList.contains('phisycalExams')) {
                    textarea.classList.add('phisycalExams');
                }
                
                if (medicalExams.includes(examKey)) {
                    panel.style.display = '';
                } else {
                    panel.style.display = 'none';
                }
            });

            // Asegurarse de que haya un panel activo
            const visiblePanels = allPanels.filter(panel => panel.style.display !== 'none');
            if (visiblePanels.length > 0 && !visiblePanels.some(panel => panel.classList.contains('show'))) {
                visiblePanels[0].classList.add('show', 'active');
            }
        }
        
        // Escuchar cambios en el select de especialidad
        const especialitySelect = document.getElementById('especiality');
        if (especialitySelect) {
            especialitySelect.addEventListener('change', function() {
                const especialityId = this.value;
                if (especialityId && especialityId !== 'SELECT') {
                    // Mostrar loading usando el componente de loading del proyecto
                    $('#modalLoading').modal('show');
                    
                    // Iniciar el timeout de seguridad
                    ensureLoadingClosed();
                    
                    // Obtener la configuración para esta especialidad mediante AJAX
                    fetch(`/admin/get-history-configuration?especiality_id=${especialityId}`)
                        .then(response => response.json())
                        .then(data => {
                            console.log('Configuración recibida:', data);
                            
                            // Inicializar o reiniciar la variable global para exámenes médicos
                            if (typeof window.currentMedicalExams === 'undefined') {
                                window.currentMedicalExams = [];
                            }
                            
                            // Comprobar si hay configuración de exámenes médicos
                            if (data.medicalExams && data.medicalExams.length > 0) {
                                // Guardar la configuración para usarla al enviar el formulario
                                window.currentMedicalExams = data.medicalExams;
                                updatePhysicalExamTabs(window.currentMedicalExams);
                                updatePhysicalExamContent(window.currentMedicalExams);
                                console.log('Configuración de exámenes guardada:', window.currentMedicalExams);
                            } else {
                                // No hay configuración específica, usar todos los exámenes disponibles
                                window.currentMedicalExams = allAvailableMedicalExams;
                                updatePhysicalExamTabs(window.currentMedicalExams);
                                updatePhysicalExamContent(window.currentMedicalExams);
                                console.log('No hay configuración específica, usando todos los exámenes médicos disponibles');
                            }
                            
                            // Ocultar loading
                            $('#modalLoading').modal('hide');
                        })
                        .catch(error => {
                            console.error('Error al obtener la configuración:', error);
                            
                            // En caso de error, usar todos los exámenes disponibles
                            window.currentMedicalExams = allAvailableMedicalExams;
                            console.log('Error al obtener configuración, usando todos los exámenes médicos disponibles');
                            
                            // Ocultar loading en caso de error
                            $('#modalLoading').modal('hide');
                        })
                        .finally(() => {
                            // Asegurar que el loading se cierre en cualquier caso
                            setTimeout(() => {
                                $('#modalLoading').modal('hide');
                            }, 100);
                        });
                } else {
                    // Si no hay especialidad seleccionada, reiniciar la configuración a todos los exámenes
                    window.currentMedicalExams = allAvailableMedicalExams;
                }
            });
        }
        
        // Hacer la variable disponible globalmente para debug
        window.allAvailableMedicalExams = allAvailableMedicalExams;
    });
</script>