<div>
    <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;
        }

        .nav-tabs {
            border-bottom: 2px solid var(--gris-medio);
            margin-bottom: 20px;
        }

        .nav-tabs .nav-item {
            margin-bottom: 0;
        }

        .nav-tabs .nav-link {
            color: var(--azul-secundario);
            font-weight: 600;
            border: none;
            padding: 12px 20px;
            border-radius: 8px 8px 0 0;
            position: relative;
            transition: var(--transicion);
        }

        .nav-tabs .nav-link:hover {
            color: var(--azul-destacado);
            background-color: var(--azul-suave);
        }

        .nav-tabs .nav-link.active {
            color: var(--azul-primario);
            background-color: transparent;
            font-weight: 700;
        }

        .nav-tabs .nav-link.active::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--azul-destacado);
            border-radius: 3px 3px 0 0;
        }

        .accordion-button:not(.collapsed) {
            color: var(--azul-primario);
            background-color: var(--azul-suave) !important;
            background: var(--degradado-azul) !important;
            box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
            opacity: 0.8;
        }

        /* Estilos para formulario y controles */
        #historyForm {
            background: #fff;
            border-radius: 16px;
            box-shadow: var(--sombra-media);
            max-width: 100%;
            margin: 0 auto;
            animation: fadeIn 0.5s ease-out;
            border: 1px solid var(--gris-medio);
        }

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

        .form-control, .selectpicker {
            border: 2px solid var(--borde-principal);
            border-radius: 10px;
            padding: 12px 15px;
            margin-bottom: 20px;
            width: 100%;
            color: #333;
            font-size: 1rem;
            transition: var(--transicion);
            background-color: var(--gris-claro);
        }

        .form-control:hover,
        .selectpicker:hover {
            border-color: var(--azul-secundario);
            background-color: #fff;
        }
        
        .form-control:focus,
        .selectpicker:focus {
            border-color: var(--azul-destacado);
            box-shadow: 0 0 0 4px rgba(74,144,226,0.15);
            outline: none;
            background-color: #fff;
        }

        label {
            font-weight: 600;
            color: var(--azul-primario);
            margin-bottom: 10px;
            display: block;
            font-size: 0.95rem;
            transition: var(--transicion);
        }

        .tab-pane {
            background-color: #fff;
            border-radius: 0 0 12px 12px;
            box-shadow: var(--sombra-suave);
        }

        /* Secciones con efecto de elevación */
        .container-fluid {
            background: #fff;
            border-radius: 12px;
            margin-bottom: 15px;
            padding: 15px;
            transition: var(--transicion);
        }
        
        .row {
            margin-bottom: 15px;
        }

        /* Botones para enviar el formulario */
        .btn-primary {
            background: var(--degradado-azul);
            color: #fff;
            padding: 12px 25px;
            border-radius: 50px;
            border: none;
            transition: var(--transicion);
            cursor: pointer;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(74,144,226,0.3);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(42,78,109,0.4);
        }
    </style>
    <form id="historyForm" class="form-control" action="{{ ($new === true) ? URL::route('/admin/create-history') : URL::route('/admin/update-history')  }}" method="POST" enctype="multipart/form-data">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="form-history-tab" data-toggle="tab" href="#form-history" role="tab" aria-controls="form-history" aria-selected="true">
                {{__("com-form-history.dataPatient")}}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="backgrounds-tab" data-toggle="tab" href="#backgrounds" role="tab" aria-controls="backgrounds" aria-selected="false">
            {{__("backgrounds.Background")}}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="test-tab" data-toggle="tab" href="#test" role="tab" aria-controls="test" aria-selected="false">
                {{__("backgrounds.Physical_Test")}}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="file-tab" data-toggle="tab" href="#file" role="tab" aria-controls="file" aria-selected="false">
                {{__("backgrounds.Files")}}
            </a>
        </li>
    </ul>
    <br>
    <br>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="form-history" role="tabpanel" aria-labelledby="form-history-tab">
            <div>
                <input type="hidden" name="id" value={{$history->id}}>
                <div class="container-fluid">
                    <div class="row">
                            <div class="col-12 col-lg-6 col-md-6">
                                <label for="patients_id">{{__("com-form-history.patient")}}</label>
                                <select data-style="bootstrap-select-color"  data-live-search="true"  class="form-control show-tick selectpicker" id="patients_id" name="patients_id" value="{{$history->patients_id}}">
                                    <option style="background-color:#fff !important; color:#000" value="SELECT">{{__('com-form-history.selectValue')}}</option>
                                    @foreach($patients as $patient)
                                        @if((isset($patientSelected)) && ($patient['id'] === $patientSelected->id))
                                            <option  data-tokens="{{$patient['representative']}}" value="{{$patient['id']}}" selected>{{$patient['name']}}</option>
                                        @else
                                            <option  data-tokens="{{$patient['representative']}}" value="{{$patient['id']}}">{{$patient['name']}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-lg-6 col-md-6">
                                <label for="especiality">{{__("com-form-history.especiality")}}</label>
                                <select value="{{$history->especiality}}" class="form-control" name="especiality" id="especiality">
                                    <option value="SELECT">{{__('com-form-history.selectValue')}}</option>
                                    @foreach($optionsEspeciality as $key => $option)
                                        @if($key === $history->especiality)
                                        <option value="{{$key}}" selected>{{$option}}</option>
                                        @else
                                         <option value="{{$key}}">{{$option}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                    </div>
                    <div class="row">
                        <div class="col-12 ">
                            <label for="title">{{__("com-form-history.title")}}</label>
                            <input type="text" id="title" name="title" value="{{$history->title}}" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-lg-5 col-12 p-0">
                            <x-diseases />
                        </div>
                        <div class="col-md-7 col-lg-7 col-12">
                            <div class="row">
                                <div class="col-12">
                                    <div id="selected-diseases" style="margin-top: 10px;"></div>
                                    <br>
                                    <label for="summary">{{__("com-form-history.summary")}}</label>
                                    <textarea  class="form-control" placeholder="{{__('com-form-history.placeholder')}}" value="{{$history->summary}}" id="summary" name="summary" rows="5">{{$history->summary}}</textarea>
                                    <div id="hidden-fields"></div>
                                </div>
                                <div class="col-12">
                                    <br>
                                    <label for="diagnosis">{{__("com-form-history.diagnosis")}}</label>
                                    <textarea  class="form-control" placeholder="{{__('com-form-history.placeholder1')}}" value="{{$history->diagnosis}}" id="diagnosis" name="diagnosis" rows="5">{{$history->diagnosis}}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div> 
        </div>
        <div class="tab-pane fade" id="backgrounds" role="tabpanel" aria-labelledby="backgrounds-tab">
            <ul class="nav nav-tabs" id="tabBackgrounds" role="tablist">
                @if(isset($configuration) && $configuration && !empty($configuration->section_types))
                    {{-- Mostrar los section types configurados --}}
                    @php
                        $firstTab = true;
                    @endphp
                    @foreach($sectionTypes as $section)
                        @if(in_array($section->id, $configuration->section_types))
                            @if($section->noHaveChildres())
                                <li class="nav-item">
                                    <a class="nav-link {{ $firstTab ? 'active' : '' }}" id='{{$section->key}}-tab' data-toggle="tab" href='#{{$section->key}}' role="tab" aria-controls='{{$section->key}}' aria-selected="{{ $firstTab ? 'true' : 'false' }}">
                                        {{__("backgrounds.".$section->value)}}
                                    </a>
                                </li>
                                @php
                                    if($firstTab) $firstTab = false;
                                @endphp
                            @else
                                @foreach($section::where('section_type_id', $section->id)->orderBy("position","asc")->get() as $key => $child)
                                    @if(in_array($child->id, $configuration->section_types))
                                        <li class="nav-item">
                                            <a class="nav-link {{ $firstTab ? 'active' : '' }}" id="{{$child->key}}-tab" data-toggle="tab" href="#{{$child->key}}" role="tab" aria-controls="{{$child->key}}" aria-selected="{{ $firstTab ? 'true' : 'false' }}">
                                                {{__("backgrounds.".$child->value)}}
                                            </a>
                                        </li>
                                        @php
                                            if($firstTab) $firstTab = false;
                                        @endphp
                                    @endif
                                @endforeach
                            @endif
                        @endif
                    @endforeach
                @else
                    {{-- Mostrar el formulario original --}}
                    @foreach($sectionTypes as $section)
                        @foreach($section::where('section_type_id',$section->id)->orderBy("position","asc")->get() as $key => $child)
                            @if($key === 0)
                                <li class="nav-item">
                                    <a class="nav-link active" id="{{$child->key}}-tab" data-toggle="tab" href="#{{$child->key}}" role="tab" aria-controls="{{$child->key}}" aria-selected="true">
                                        {{__("backgrounds.".$child->value)}}
                                    </a>
                                </li>
                            @else
                                <li class="nav-item">
                                    <a class="nav-link" id="{{$child->key}}-tab" data-toggle="tab" href="#{{$child->key}}" role="tab" aria-controls="{{$child->key}}" aria-selected="false">
                                        {{__("backgrounds.".$child->value)}}
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    @endforeach
                    @foreach($sectionTypes as $section)
                        @if($section->noHaveChildres())
                            <li class="nav-item">
                                <a class="nav-link" id='{{$section->key}}-tab' data-toggle="tab" href='#{{$section->key}}' role="tab" aria-controls='{{$section->key}}' aria-selected="false">
                                    {{__("backgrounds.".$section->value)}}
                                </a>
                            </li>
                        @endif
                    @endforeach
                @endif
                </ul>
                <div class="tab-content" id="tabBackgroundsContent">
                    @if(isset($configuration) && $configuration && !empty($configuration->section_types))
                        {{-- Mostrar el contenido de los section types configurados --}}
                        @php
                            $firstContent = true;
                        @endphp
                        @foreach($sectionTypes as $section)
                            @if(in_array($section->id, $configuration->section_types))
                                @if($section->noHaveChildres())
                                    <div class="tab-pane fade {{ $firstContent ? 'show active' : '' }}" id="{{$section->key}}" role="tabpanel" aria-labelledby="{{$section->key}}-tab">
                                        <div class="container-fluid ">
                                            <div class="row">
                                                <div class="col-12">
                                                    <br>
                                                    <textarea class="form-control" name="{{$section->key}}_value" id="" rows="10">{{$history->getSectionHistoryValueById($section->id)}}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @php
                                        if($firstContent) $firstContent = false;
                                    @endphp
                                @else
                                    @foreach($section::where('section_type_id', $section->id)->orderBy("position","asc")->get() as $key => $child)
                                        @if(in_array($child->id, $configuration->section_types))
                                            <div class="tab-pane fade {{ $firstContent ? 'show active' : '' }}" id='{{$child->key}}' role="tabpanel" aria-labelledby='{{$child->key}}-tab'>
                                                <div class="container-fluid ">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <br>
                                                            <textarea class="form-control" name="{{$child->key}}_value" id="" rows="10">{{$history->getSectionHistoryValueById($child->id)}}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @php
                                                if($firstContent) $firstContent = false;
                                            @endphp
                                        @endif
                                    @endforeach
                                @endif
                            @endif
                        @endforeach
                    @else
                        {{-- Mostrar el contenido original --}}
                        @foreach($sectionTypes as $section)
                            @foreach($section::where('section_type_id',$section->id)->orderBy("position","asc")->get() as $key => $child)
                                @if($key === 0)
                                <div class="tab-pane fade show active" id='{{$child->key}}' role="tabpanel" aria-labelledby='{{$child->key}}-tab'>
                                    <div class="container-fluid ">
                                        <div class="row">
                                            <div class="col-12">
                                                <br>
                                                <textarea class="form-control" name="{{$child->key}}_value" id="" rows="10">{{$history->getSectionHistoryValueById($child->id)}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @else
                                <div class="tab-pane fade" id='{{$child->key}}' role="tabpanel" aria-labelledby='{{$child->key}}-tab'>
                                    <div class="container-fluid ">
                                        <div class="row">
                                            <div class="col-12">
                                                <br>
                                                <textarea class="form-control" name="{{$child->key}}_value" id="" rows="10">{{$history->getSectionHistoryValueById($child->id)}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        @endforeach
                        @foreach($sectionTypes as $section)
                            @if($section->noHaveChildres())
                                <div class="tab-pane fade" id="{{$section->key}}" role="tabpanel" aria-labelledby="{{$section->key}}-tab">
                                    <div class="container-fluid ">
                                        <div class="row">
                                            <div class="col-12">
                                                <br>
                                                <textarea class="form-control" name="{{$section->key}}_value" id="" rows="10">{{$history->getSectionHistoryValueById($section->id)}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endif
                </div>
        </div>
        <div class="tab-pane fade" id="test" role="tabpanel" aria-labelledby="test-tab">
            <div class="container-fluid">
                <div class="row">
                    @if(isset($configuration) && $configuration && !empty($configuration->medical_exams))
                        {{-- Mostrar los exámenes físicos configurados (campos simples) --}}
                        @foreach($physicalTest->getFields() as $key => $field)
                            @if($field["type"] === "simple" && in_array($key, $configuration->medical_exams))
                                <div class="col-12 col-lg-4 col-md-4 p-3">
                                    <label>{{__("com-form-history.".$key)}}</label>
                                    <input type="text" class="form-control" id="physical-exam-{{$key}}" name="physical-exam-{{$key}}" value="{{$history->getSectionTestValueById($key)}}">
                                </div>
                            @endif
                        @endforeach
                    @else
                        {{-- Mostrar todos los exámenes físicos originales (campos simples) --}}
                        @foreach($physicalTest->getFields() as $key => $field)
                            @if($field["type"] === "simple")
                                <div class="col-12 col-lg-4 col-md-4 p-3">
                                    <label>{{__("com-form-history.".$key)}}</label>
                                    <input type="text" class="form-control" id="physical-exam-{{$key}}" name="physical-exam-{{$key}}" value="{{$history->getSectionTestValueById($key)}}">
                                </div>
                            @endif
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="container-fluid" style="margin-top:30px">
                <div class="row">
                    <div class="col-12">
                        <ul class="nav nav-tabs" id="tabTestPhysical" role="tablist">
                            @if(isset($configuration) && $configuration && !empty($configuration->medical_exams))
                                {{-- Mostrar los exámenes físicos configurados (campos longText) --}}
                                @php
                                    $firstTab = true;
                                @endphp
                                @foreach($physicalTest->getFields() as $key => $field)
                                    @if($field["type"] === "longText" && in_array($key, $configuration->medical_exams))
                                        <li class="nav-item">
                                            <a class="nav-link {{ $firstTab ? 'active' : '' }}" id="physical-exam-{{trim($key)}}-tab" data-toggle="tab" href="#physical-exam-{{trim($key)}}" role="tab" aria-controls="physical-exam-{{trim($key)}}" aria-selected="{{ $firstTab ? 'true' : 'false' }}">
                                                {{__("com-form-history.".trim($key))}}
                                            </a>
                                        </li>
                                        @php
                                            if($firstTab) $firstTab = false;
                                        @endphp
                                    @endif
                                @endforeach
                            @else
                                {{-- Mostrar todos los exámenes físicos originales (campos longText) --}}
                                @foreach($physicalTest->getFields() as $key => $field)
                                    @if($field["type"] === "longText")
                                        @if(isset($field["first"]))
                                            <li class="nav-item">
                                                <a class="nav-link active" id="physical-exam-{{$key}}-tab" data-toggle="tab" href="#physical-exam-{{$key}}" role="tab" aria-controls="physical-exam-{{$key}}" aria-selected="true">
                                                    {{__("com-form-history.".$key)}}
                                                </a>
                                            </li>
                                        @else
                                            <li class="nav-item">
                                                <a class="nav-link" id="physical-exam-{{$key}}-tab" data-toggle="tab" href="#physical-exam-{{$key}}" role="tab" aria-controls="physical-exam-{{$key}}" aria-selected="false">
                                                    {{__("com-form-history.".$key)}}
                                                </a>
                                            </li>
                                        @endif
                                    @endif
                                @endforeach
                            @endif
                        </ul>
                        <div class="tab-content" id="tabTestPhysicalContent">
                            @if(isset($configuration) && $configuration && !empty($configuration->medical_exams))
                                {{-- Mostrar el contenido de los exámenes físicos configurados (campos longText) --}}
                                @php
                                    $firstContent = true;
                                @endphp
                                @foreach($physicalTest->getFields() as $key => $field)
                                    @if($field["type"] === "longText" && in_array($key, $configuration->medical_exams))
                                        <div class="tab-pane fade {{ $firstContent ? 'show active' : '' }}" id='physical-exam-{{trim($key)}}' role="tabpanel" aria-labelledby='physical-exam-{{trim($key)}}-tab'>
                                            <div class="container-fluid ">
                                                <div class="row">
                                                    <div class="col-12 p-3">
                                                        <textarea class="form-control" name="physical-exam-{{trim($key)}}" id="physical-exam-{{trim($key)}}" rows="5">{{$history->getSectionTestValueById(trim($key))}}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @php
                                            if($firstContent) $firstContent = false;
                                        @endphp
                                    @endif
                                @endforeach
                            @else
                                {{-- Mostrar el contenido de todos los exámenes físicos originales (campos longText) --}}
                                @foreach($physicalTest->getFields() as $key => $field)
                                    @if($field["type"] === "longText")
                                        @if(isset($field["first"]))
                                            <div class="tab-pane fade show active" id='physical-exam-{{$key}}' role="tabpanel" aria-labelledby='physical-exam-{{$key}}-tab'>
                                                <div class="container-fluid ">
                                                    <div class="row">
                                                        <div class="col-12 p-3">
                                                            <textarea class="form-control" name="physical-exam-{{$key}}" id="physical-exam-{{$key}}" rows="5">{{$history->getSectionTestValueById($key)}}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="tab-pane fade" id='physical-exam-{{$key}}'  role="tabpanel" aria-labelledby='physical-exam-{{$key}}-tab'>
                                                <div class="container-fluid ">
                                                    <div class="row">
                                                        <div class="col-12 p-3">
                                                            <textarea class="form-control" name="physical-exam-{{$key}}" id="physical-exam-{{$key}}" rows="5">{{$history->getSectionTestValueById($key)}}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="file" role="tabpanel" aria-labelledby="file-tab">
                <x-FilesMultipleUpload></x-filesMultipleUpload>
        </div>
    </form>


</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Variables para almacenar la estructura original del formulario
        let originalBackgroundTabs = null;
        let originalBackgroundContent = null;
        let originalPhysicalExamFields = null;
        let originalPhysicalExamTabs = null;
        let originalPhysicalExamContent = null;
        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 estructura original del formulario para poder restaurarla
        function saveOriginalFormStructure() {
            if (!originalBackgroundTabs) {
                originalBackgroundTabs = document.querySelector('#tabBackgrounds').innerHTML;
            }
            if (!originalBackgroundContent) {
                originalBackgroundContent = document.querySelector('#tabBackgroundsContent').innerHTML;
            }
            
            // Examenes físicos simples (inputs)
            if (!originalPhysicalExamFields) {
                const fieldsContainer = document.querySelector('#test .container-fluid .row');
                if (fieldsContainer) {
                    originalPhysicalExamFields = fieldsContainer.innerHTML;
                }
            }
            
            // Pestañas de exámenes físicos
            if (!originalPhysicalExamTabs) {
                originalPhysicalExamTabs = document.querySelector('#tabTestPhysical').innerHTML;
            }
            
            // Contenido de exámenes físicos
            if (!originalPhysicalExamContent) {
                originalPhysicalExamContent = document.querySelector('#tabTestPhysicalContent').innerHTML;
            }
        }
        
        // Restaurar el formulario original completo
        function restoreOriginalForm() {
            if (originalBackgroundTabs && originalBackgroundContent) {
                // Restaurar las pestañas
                const tabBackgrounds = document.querySelector('#tabBackgrounds');
                tabBackgrounds.innerHTML = originalBackgroundTabs;
                
                // Restaurar el contenido
                const tabBackgroundsContent = document.querySelector('#tabBackgroundsContent');
                tabBackgroundsContent.innerHTML = originalBackgroundContent;
                
                // Inicializar Bootstrap Tab para mantener sincronizadas las pestañas y contenido
                $('#tabBackgrounds .nav-link').on('click', function (e) {
                    e.preventDefault();
                    const target = $(this).attr('href');
                    
                    // Desactivar todas las pestañas y contenidos
                    $('#tabBackgrounds .nav-link').removeClass('active');
                    $('#tabBackgroundsContent .tab-pane').removeClass('show active');
                    
                    // Activar la pestaña actual y su contenido
                    $(this).addClass('active');
                    $(target).addClass('show active');
                });
                
                // Activar la primera pestaña
                $('#tabBackgrounds .nav-link:first').trigger('click');
            }
            
            // Restaurar examenes físicos simples
            if (originalPhysicalExamFields) {
                const fieldsContainer = document.querySelector('#test .container-fluid .row');
                if (fieldsContainer) {
                    fieldsContainer.innerHTML = originalPhysicalExamFields;
                }
            }
            
            // Restaurar pestañas de exámenes físicos
            if (originalPhysicalExamTabs) {
                document.querySelector('#tabTestPhysical').innerHTML = originalPhysicalExamTabs;
                
                // Inicializar Bootstrap Tab para pestañas de exámenes físicos
                $('#tabTestPhysical .nav-link').on('click', function (e) {
                    e.preventDefault();
                    const target = $(this).attr('href');
                    
                    // Desactivar todas las pestañas y contenidos
                    $('#tabTestPhysical .nav-link').removeClass('active');
                    $('#tabTestPhysicalContent .tab-pane').removeClass('show active');
                    
                    // Activar la pestaña actual y su contenido
                    $(this).addClass('active');
                    $(target).addClass('show active');
                });
            }
            
            // Restaurar contenido de exámenes físicos
            if (originalPhysicalExamContent) {
                document.querySelector('#tabTestPhysicalContent').innerHTML = originalPhysicalExamContent;
            }
            
            // Activar primera pestaña de exámenes físicos
            $('#tabTestPhysical .nav-link:first').trigger('click');
        }
        
        // Función auxiliar para activar la primera pestaña
        function activateFirstTab(tabsSelector, contentSelector) {
            const firstTab = document.querySelector(`${tabsSelector} .nav-link`);
            if (firstTab) {
                document.querySelectorAll(`${tabsSelector} .nav-link`).forEach(link => {
                    link.classList.remove('active');
                    link.setAttribute('aria-selected', 'false');
                });
                firstTab.classList.add('active');
                firstTab.setAttribute('aria-selected', 'true');
                
                const targetId = firstTab.getAttribute('href').substring(1);
                const targetPane = document.getElementById(targetId);
                document.querySelectorAll(`${contentSelector} .tab-pane`).forEach(pane => {
                    pane.classList.remove('show', 'active');
                });
                if (targetPane) {
                    targetPane.classList.add('show', 'active');
                }
            }
        }
        
        // Guardar la estructura original del formulario al cargar
        saveOriginalFormStructure();
        
        // Hacer accesible la función updateFormSections globalmente
        window.updateFormSections = updateFormSections;
        
        // Escuchar cambios en el select de especialidad
        const especialitySelect = document.getElementById('especiality');
        function getHistoryConfiguration(){
            const especialityId = this.value;
                if (especialityId && especialityId !== 'SELECT') {
                    // Mostrar loading
                    $('#modalLoading').modal('show');
                    
                    // Iniciar el timeout de seguridad
                    ensureLoadingClosed();
                    
                    // Obtener la configuración para esta especialidad
                    fetch(`/admin/get-history-configuration?especiality_id=${especialityId}`)
                        .then(response => response.json())
                        .then(data => {
                            console.log('Configuración recibida:', data);
                            // En lugar de recargar la página, actualizar las secciones dinámicamente
                            updateFormSections(data.sections, data.medicalExams);
                            
                            // Ocultar loading
                            $('#modalLoading').modal('hide');
                        })
                        .catch(error => {
                            console.error('Error al obtener la configuración:', error);
                            
                            // Ocultar loading en caso de error
                            $('#modalLoading').modal('hide');
                        })
                        .finally(() => {
                            // Asegurar que el loading se cierre en cualquier caso
                            setTimeout(() => {
                                $('#modalLoading').modal('hide');
                            }, 100);
                        });
                }
        }
        if (especialitySelect) {
            especialitySelect.addEventListener('change', getHistoryConfiguration);
        }

        // Función para actualizar dinámicamente las secciones del formulario
        function updateFormSections(sectionTypes, medicalExams) {
            try {
                console.log('Actualizando formulario con secciones:', sectionTypes);
                console.log('Actualizando formulario con exámenes médicos:', medicalExams);
                
                // Mostrar loading durante la actualización
                $('#modalLoading').modal('show');
                
                // Iniciar el timeout de seguridad
                ensureLoadingClosed(8000); // Timeout más largo para actualizaciones complejas
                
                // Si no hay configuración, restaurar el formulario original completo
                if (!sectionTypes || !sectionTypes.length) {
                    console.log('No hay configuración específica. Restaurando formulario original completo');
                    
                    // Restaurar el formulario original
                    restoreOriginalForm();
                    
                    // Ocultar loading
                    $('#modalLoading').modal('hide');
                    return;
                }

                // Guardar valores actuales para restaurarlos después de la actualización
                const savedValues = saveCurrentFormValues();
                
                // Para section types, necesitamos un enfoque diferente
                // En lugar de ocultar/mostrar, vamos a crear dinamicamente el contenido
                createSectionTypesTabs(sectionTypes);
                createSectionTypesContent(sectionTypes);
                
                // Inicializar las pestañas de Bootstrap después de crear el contenido
                initializeTabs();
                
                // Para los exámenes médicos, el enfoque anterior puede funcionar
                updatePhysicalExamFields(medicalExams);
                updatePhysicalExamTabs(medicalExams);
                updatePhysicalExamContent(medicalExams);

                // Restaurar valores guardados
                restoreFormValues(savedValues);
                
                // Ocultar loading después de completar la actualización
                $('#modalLoading').modal('hide');
            } catch (error) {
                console.error('Error al actualizar secciones del formulario:', error);
                // En caso de error, restaurar formulario original
                try {
                    restoreOriginalForm();
                } catch (e) {
                    console.error('Error adicional al intentar restaurar el formulario:', e);
                }
                
                // Asegurar que el loading se cierre
                $('#modalLoading').modal('hide');
            }
        }

        // Inicializar las pestañas de Bootstrap para que funcionen correctamente
        function initializeTabs() {
            // Eliminar event listeners previos para evitar duplicación
            $('#tabBackgrounds .nav-link').off('click');
            
            // Configurar los eventos para las pestañas de antecedentes
            $('#tabBackgrounds .nav-link').on('click', function(e) {
                e.preventDefault();
                
                const target = $(this).attr('href');
                
                // Desactivar todas las pestañas y contenidos
                $('#tabBackgrounds .nav-link').removeClass('active');
                $('#tabBackgroundsContent .tab-pane').removeClass('show active');
                
                // Activar la pestaña actual y su contenido
                $(this).addClass('active');
                $(target).addClass('show active');
            });
            
            // Activar la primera pestaña de antecedentes
            $('#tabBackgrounds .nav-link:first').trigger('click');
            
            // Configurar los eventos para las pestañas de exámenes físicos
            $('#tabTestPhysical .nav-link').off('click');
            $('#tabTestPhysical .nav-link').on('click', function(e) {
                e.preventDefault();
                
                const target = $(this).attr('href');
                
                // Desactivar todas las pestañas y contenidos
                $('#tabTestPhysical .nav-link').removeClass('active');
                $('#tabTestPhysicalContent .tab-pane').removeClass('show active');
                
                // Activar la pestaña actual y su contenido
                $(this).addClass('active');
                $(target).addClass('show active');
            });
            
            // Activar la primera pestaña de exámenes físicos
            $('#tabTestPhysical .nav-link:first').trigger('click');
        }

        // Guardar los valores actuales del formulario
        function saveCurrentFormValues() {
            const values = {};
            
            // Guardar valores de los campos de antecedentes
            document.querySelectorAll('#tabBackgroundsContent textarea').forEach(textarea => {
                values[textarea.name] = textarea.value;
            });
            
            // Guardar valores de los campos de examen físico
            document.querySelectorAll('#test input, #test textarea').forEach(field => {
                values[field.name] = field.value;
            });
            
            return values;
        }

        // Restaurar valores guardados
        function restoreFormValues(savedValues) {
            Object.keys(savedValues).forEach(key => {
                const element = document.querySelector(`[name="${key}"]`);
                if (element) {
                    element.value = savedValues[key];
                }
            });
        }

        // Crear pestañas de antecedentes dinámicamente
        function createSectionTypesTabs(sectionTypes) {
            console.log('Creando pestañas para section types:', sectionTypes);
            
            // Obtener el contenedor de pestañas
            const tabsContainer = document.getElementById('tabBackgrounds');
            if (!tabsContainer) {
                console.error('No se encontró el contenedor de pestañas #tabBackgrounds');
                return;
            }
            
            // Limpiar el contenedor actual
            tabsContainer.innerHTML = '';
            
            // Obtener información de todos los section types desde la página
            let allSectionTypes = [];
            
            // Recolectar datos de los section types disponibles usando atributos data
            try {
                allSectionTypes = JSON.parse(document.getElementById('available-section-types').textContent);
                console.log('Section types disponibles:', allSectionTypes);
            } catch (e) {
                console.error('Error al parsear los section types disponibles:', e);
                // Fallback: intentar obtener los section types directamente del DOM
                document.querySelectorAll('.original-section-types li').forEach(li => {
                    const link = li.querySelector('a');
                    if (link) {
                        const id = link.getAttribute('id').replace('-tab', '');
                        const text = link.textContent.trim();
                        allSectionTypes.push({ id: id, key: id, value: text });
                    }
                });
            }
            
            // Crear pestañas para cada section type configurado
            let isFirstTab = true;
            sectionTypes.forEach(sectionTypeId => {
                console.log('Procesando section type:', sectionTypeId);
                const sectionType = allSectionTypes.find(st => st.id === sectionTypeId);
                if (sectionType) {
                    const tabItem = document.createElement('li');
                    tabItem.className = 'nav-item';
                    
                    const tabLink = document.createElement('a');
                    tabLink.className = isFirstTab ? 'nav-link active' : 'nav-link';
                    tabLink.id = `${sectionType.key}-tab`;
                    tabLink.setAttribute('data-toggle', 'tab');
                    tabLink.href = `#${sectionType.key}`;
                    tabLink.setAttribute('role', 'tab');
                    tabLink.setAttribute('aria-controls', sectionType.key);
                    tabLink.setAttribute('aria-selected', isFirstTab ? 'true' : 'false');
                    
                    // Usar traducción en lugar del valor directo
                    const translationKey = `backgrounds.${sectionType.value}`;
                    const translatedText = getTranslation(translationKey, sectionType.value);
                    tabLink.textContent = translatedText;
                    
                    tabItem.appendChild(tabLink);
                    tabsContainer.appendChild(tabItem);
                    
                    isFirstTab = false;
                } else {
                    console.warn(`No se encontró información para el section type ${sectionTypeId}`);
                }
            });
            
            if (tabsContainer.children.length === 0) {
                console.warn('No se crearon pestañas de section types. Manteniendo pestañas originales.');
            }
        }

        // Función para obtener traducción
        function getTranslation(key, defaultValue) {
            // Intentar obtener la traducción del elemento oculto con traducciones
            const translationsElement = document.getElementById('translations-data');
            if (translationsElement) {
                try {
                    const translations = JSON.parse(translationsElement.textContent);
                    return translations[key] || defaultValue;
                } catch (e) {
                    console.error('Error al parsear traducciones:', e);
                }
            }
            
            // Fallback: buscar en el DOM un elemento con esa traducción
            const existingTranslatedElement = document.querySelector(`[data-translation-key="${key}"]`);
            if (existingTranslatedElement) {
                return existingTranslatedElement.textContent.trim();
            }
            
            // Segundo fallback: intentar extraer la traducción de las pestañas originales
            const originalTab = document.querySelector(`a[data-original-value="${defaultValue}"]`);
            if (originalTab) {
                return originalTab.textContent.trim();
            }
            
            return defaultValue;
        }

        // Crear contenido de antecedentes dinámicamente
        function createSectionTypesContent(sectionTypes) {
            console.log('Creando contenido para section types:', sectionTypes);
            
            // Obtener el contenedor de contenido
            const contentContainer = document.getElementById('tabBackgroundsContent');
            if (!contentContainer) {
                console.error('No se encontró el contenedor de contenido #tabBackgroundsContent');
                return;
            }
            
            // Limpiar el contenedor actual
            contentContainer.innerHTML = '';
            
            // Obtener información de todos los section types
            let allSectionTypes = [];
            
            // Recolectar datos de los section types disponibles
            try {
                allSectionTypes = JSON.parse(document.getElementById('available-section-types').textContent);
            } catch (e) {
                console.error('Error al parsear los section types disponibles:', e);
                // Fallback: intentar obtener los section types directamente del DOM
                document.querySelectorAll('.original-section-types li').forEach(li => {
                    const link = li.querySelector('a');
                    if (link) {
                        const id = link.getAttribute('id').replace('-tab', '');
                        const text = link.textContent.trim();
                        allSectionTypes.push({ id: id, key: id, value: text });
                    }
                });
            }
            
            // Crear contenido para cada section type configurado
            let isFirstContent = true;
            sectionTypes.forEach(sectionTypeId => {
                const sectionType = allSectionTypes.find(st => st.id === sectionTypeId);
                if (sectionType) {
                    console.log('Creando contenido para:', sectionType);
                    
                    const contentDiv = document.createElement('div');
                    contentDiv.className = isFirstContent ? 'tab-pane fade show active' : 'tab-pane fade';
                    contentDiv.id = sectionType.key;
                    contentDiv.setAttribute('role', 'tabpanel');
                    contentDiv.setAttribute('aria-labelledby', `${sectionType.key}-tab`);
                    
                    const containerDiv = document.createElement('div');
                    containerDiv.className = 'container-fluid ';
                    
                    const rowDiv = document.createElement('div');
                    rowDiv.className = 'row';
                    
                    const colDiv = document.createElement('div');
                    colDiv.className = 'col-12';
                    
                    const br = document.createElement('br');
                    
                    const textarea = document.createElement('textarea');
                    textarea.className = 'form-control backgrounds';
                    textarea.name = `${sectionType.key}_value`;
                    textarea.id = `${sectionType.key}_value`;
                    textarea.rows = 10;
                    
                    // Obtener el valor existente del formulario actual si existe
                    const existingTextarea = document.querySelector(`textarea[name="${sectionType.key}_value"]`);
                    if (existingTextarea) {
                        textarea.value = existingTextarea.value;
                    }
                    
                    colDiv.appendChild(br);
                    colDiv.appendChild(textarea);
                    rowDiv.appendChild(colDiv);
                    containerDiv.appendChild(rowDiv);
                    contentDiv.appendChild(containerDiv);
                    
                    contentContainer.appendChild(contentDiv);
                    
                    isFirstContent = false;
                } else {
                    console.warn(`No se encontró información para el section type ${sectionTypeId}`);
                }
            });
            
            if (contentContainer.children.length === 0) {
                console.warn('No se creó contenido para section types. Manteniendo contenido original.');
            }
        }

        // Actualizar campos de examen físico (tipo simple)
        function updatePhysicalExamFields(medicalExams) {
            if (!medicalExams || !medicalExams.length) return;

            const fieldsContainer = document.querySelector('#test .container-fluid .row');
            if (!fieldsContainer) return;

            // Obtener todos los campos simples
            const allFields = Array.from(fieldsContainer.querySelectorAll('.col-12.col-lg-4'));
            
            // Mostrar/ocultar campos según configuración
            allFields.forEach(field => {
                const input = field.querySelector('input');
                if (input) {
                    // Añadir clase 'phisycalExams' al input si no la tiene
                    if (!input.classList.contains('phisycalExams')) {
                        input.classList.add('phisycalExams');
                    }
                    
                    const fieldKey = input.name.replace('physical-exam-', '');
                    
                    if (medicalExams.includes(fieldKey)) {
                        field.style.display = '';
                    } else {
                        field.style.display = 'none';
                    }
                }
            });
        }

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

            // Obtener todas las pestañas disponibles
            const allTabs = Array.from(document.querySelectorAll('#tabTestPhysical .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('tabTestPhysicalContent');
            if (!contentContainer) return;

            // Obtener todos los paneles de contenido
            const allPanels = Array.from(document.querySelectorAll('#tabTestPhysicalContent .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');
            }
        }
        getHistoryConfiguration.call(especialitySelect);

    });
</script>




<script type="application/json" id="available-section-types">
@php
    $allSections = [];
    
    // Primero recolectamos todos los sections en un array
    foreach($sectionTypes as $section) {
        $allSections[] = [
            'id' => $section->id,
            'key' => $section->key,
            'value' => $section->value
        ];
        
        // Agregamos los hijos
        $children = $section::where('section_type_id', $section->id)->orderBy("position","asc")->get();
        foreach($children as $child) {
            $allSections[] = [
                'id' => $child->id,
                'key' => $child->key,
                'value' => $child->value
            ];
        }
    }
    
    // Luego lo codificamos como JSON
    echo json_encode($allSections);
@endphp
</script>

<script type="application/json" id="translations-data">
@php
    $translations = [];
    
    // Recopilar traducciones para backgrounds
    foreach($sectionTypes as $section) {
        $key = "backgrounds.{$section->value}";
        $translations[$key] = __($key);
        
        $children = $section::where('section_type_id', $section->id)->orderBy("position","asc")->get();
        foreach($children as $child) {
            $childKey = "backgrounds.{$child->value}";
            $translations[$childKey] = __($childKey);
        }
    }
    
    // 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>

<div class="original-section-types" style="display: none;">
    <ul>
        @foreach($sectionTypes as $section)
            @foreach($section::where('section_type_id',$section->id)->orderBy("position","asc")->get() as $key => $child)
                <li>
                    <a id="{{$child->key}}-tab" data-original-value="{{$child->value}}">
                        {{__("backgrounds.".$child->value)}}
                    </a>
                </li>
            @endforeach
            
            @if($section->noHaveChildres())
                <li>
                    <a id="{{$section->key}}-tab" data-original-value="{{$section->value}}">
                        {{__("backgrounds.".$section->value)}}
                    </a>
                </li>
            @endif
        @endforeach
    </ul>
</div>

<script>
$(document).ready(function() {
    // Variable global para almacenar las configuraciones actuales
    let currentSectionTypes = [];
    let currentMedicalExams = [];

    // Interceptar el proceso de actualización para guardar las configuraciones actuales
    const originalUpdateFormSections = window.updateFormSections;
    window.updateFormSections = function(sectionTypes, medicalExams) {
        // Guardar las configuraciones actuales
        currentSectionTypes = sectionTypes || [];
        currentMedicalExams = medicalExams || [];
        
        // Llamar a la implementación original
        if (typeof originalUpdateFormSections === 'function') {
            originalUpdateFormSections(sectionTypes, medicalExams);
        }
    };

    // Sobrescribir el comportamiento del envío del formulario para incluir solo los elementos configurados
    $("#historyForm").off('submit').on("submit", function (e) {
        e.preventDefault();
        
        // Mostrar loading
        if (typeof showLoading === 'function') {
            showLoading();
        } else if ($("#loading").length) {
            $("#loading").show();
        }
        
        const form = document.querySelector("#historyForm");
        
        // Obtener valores directamente
        const especialityValue = $("#especiality").val();
        const patientValue = $("#patients_id").val();
        const titleValue = $("#title").val().trim();
        const summaryValue = $("#summary").val().trim();
        
        console.log("Valores al enviar:", {
            especialidad: especialityValue,
            paciente: patientValue,
            titulo: titleValue,
            resumen: summaryValue
        });
        
        // Crear un formulario temporal para enviar solo los datos necesarios
        const tempForm = document.createElement('form');
        tempForm.method = form.method;
        tempForm.action = form.action;
        tempForm.enctype = form.enctype;
        tempForm.style.display = 'none';
        
        // Añadir campos básicos (siempre necesarios)
        const requiredFields = ['id', 'patients_id', 'especiality', 'title', 'summary', 'diagnosis'];
        requiredFields.forEach(fieldName => {
            const field = form.querySelector(`[name="${fieldName}"]`);
            if (field) {
                const clone = field.cloneNode(true);
                tempForm.appendChild(clone);
            }
        });
        
        // Añadir campos de CIE
        form.querySelectorAll('[name^="cie-"]').forEach(field => {
            const clone = field.cloneNode(true);
            tempForm.appendChild(clone);
        });
        
        // Añadir sólo los section types configurados
        if (currentSectionTypes && currentSectionTypes.length > 0) {
            document.querySelectorAll('.backgrounds').forEach(field => {
                const fieldKey = field.name.replace('_value', '');
                
                // Buscar si este campo está en la configuración actual
                const sectionType = Array.from(document.querySelectorAll('#section-types-data span'))
                    .find(el => el.dataset.key === fieldKey);
                
                if (sectionType && currentSectionTypes.includes(sectionType.dataset.id)) {
                    const clone = field.cloneNode(true);
                    tempForm.appendChild(clone);
                }
            });
            
            // Si no pudimos encontrar por data-attributes, añadir todos los backgrounds visibles
            if (!tempForm.querySelector('.backgrounds')) {
                document.querySelectorAll('textarea.backgrounds:not([style*="display: none"])').forEach(field => {
                    const clone = field.cloneNode(true);
                    tempForm.appendChild(clone);
                });
            }
        } else {
            // Si no hay configuración específica, añadir todos los backgrounds
            document.querySelectorAll('.backgrounds').forEach(field => {
                const clone = field.cloneNode(true);
                tempForm.appendChild(clone);
            });
        }
        
        // Añadir sólo los exámenes físicos configurados
        if (currentMedicalExams && currentMedicalExams.length > 0) {
            document.querySelectorAll('.phisycalExams, [name^="physical-exam-"]').forEach(field => {
                const fieldKey = field.name.replace('physical-exam-', '');
                
                if (currentMedicalExams.includes(fieldKey)) {
                    const clone = field.cloneNode(true);
                    tempForm.appendChild(clone);
                }
            });
        } else {
            // Si no hay configuración específica, añadir todos los exámenes físicos
            document.querySelectorAll('.phisycalExams, [name^="physical-exam-"]').forEach(field => {
                const clone = field.cloneNode(true);
                tempForm.appendChild(clone);
            });
        }
        
        // Verificar si tenemos los campos necesarios
        var valid = true;
        
        // Validaciones mínimas
        if (!especialityValue || especialityValue === 'SELECT') {
            valid = false;
            alert(window.translations ? window.translations["create-history"].selectSpecialtyFirst : "Por favor seleccione una especialidad primero");
        } else if (!patientValue || patientValue === 'SELECT') {
            valid = false;
            alert("Por favor seleccione un paciente");
        } else if (!titleValue) {
            valid = false;
            alert("Por favor ingrese un título");
        } else if (!summaryValue) {
            valid = false;
            alert("Por favor ingrese un resumen");
        }
        
        if (valid) {
            // Asegurarse de que los valores importantes estén incluidos correctamente
            const fieldsToCheck = [
                { name: 'especiality', value: especialityValue },
                { name: 'patients_id', value: patientValue },
                { name: 'title', value: titleValue },
                { name: 'summary', value: summaryValue }
            ];
            
            fieldsToCheck.forEach(fieldInfo => {
                const field = tempForm.querySelector(`[name="${fieldInfo.name}"]`);
                if (field) {
                    field.value = fieldInfo.value;
                } else {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = fieldInfo.name;
                    input.value = fieldInfo.value;
                    tempForm.appendChild(input);
                }
            });
            
            // Mostrar información de depuración
            console.log("Enviando formulario con datos filtrados.");
            
            // Añadir el formulario al documento y enviarlo
            document.body.appendChild(tempForm);
            tempForm.submit();
            
            // El loading se ocultará cuando la página se recargue después del envío
        } else {
            // Ocultar loading si hay error de validación
            if (typeof hideLoading === 'function') {
                hideLoading();
            } else if ($("#loading").length) {
                $("#loading").hide();
            }
            
            $("#form-history-tab").tab('show');
        }
    });
    
    // Modificar el comportamiento del botón de envío
    $("#btnSubmitHistory").off('click').on("click", function(e) {
        e.preventDefault();
        
        // Mostrar loading
        if (typeof showLoading === 'function') {
            showLoading();
        } else if ($("#loading").length) {
            $("#loading").show();
        }
        
        // Obtener valores directamente
        const especialityValue = $("#especiality").val();
        const patientValue = $("#patients_id").val();
        
        console.log("Clic en guardar:", {
            especialidad: especialityValue,
            paciente: patientValue
        });
        
        if (!especialityValue || especialityValue === 'SELECT') {
            alert(window.translations ? window.translations["create-history"].selectSpecialtyFirst : "Por favor seleccione una especialidad primero");
            return false;
        } else if (!patientValue || patientValue === 'SELECT') {
            alert("Por favor seleccione un paciente");
            return false;
        }
        
        // Evitar eventos duplicados
        e.stopPropagation();
        
        // Enviar el formulario
        $("#historyForm").trigger("submit");
    });
    
    // Inicializar validación de botón de envío si la función existe
    if (typeof $.fn.onValidButtonSubmit === 'function') {
        $.fn.onValidButtonSubmit.call();
    } else {
        // Implementación alternativa si la función no existe
        function updateSubmitButton() {
            let isValid = (
                $("#patients_id").val() !== "SELECT" && 
                $("#especiality").val() !== "SELECT" && 
                $("#title").val().trim() !== "" && 
                $("#summary").val().trim() !== "" && 
                $("#diagnosis").val().trim() !== ""
            );
            $("#btnSubmitHistory").attr("disabled", !isValid);
        }
        
        // Aplicar validación inicial
        updateSubmitButton();
        
        // Agregar listeners para los campos
        $("#patients_id, #especiality").on("change", updateSubmitButton);
        $("#title, #summary, #diagnosis").on("input", updateSubmitButton);
    }
});
</script>


<!-- Elemento para acceder a la información de los section types -->
<div id="section-types-data" style="display:none;">
    @foreach($sectionTypes as $section)
        <span data-id="{{$section->id}}" data-key="{{$section->key}}"></span>
        
        @foreach($section::where('section_type_id', $section->id)->orderBy("position","asc")->get() as $child)
            <span data-id="{{$child->id}}" data-key="{{$child->key}}"></span>
        @endforeach
    @endforeach
</div>
