@extends('layouts.horizontal', ['title' => 'Historial Clínico'])

@section('content')
@push('css')
<style>
.card h6 {
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

textarea {
    resize: none;
}
</style>
@endpush
@include('layouts.partials.page-title', [
  'subtitle' => 
    '<a href="' . route('pacientes.index') . '" class="text-decoration-none text-primary">Pacientes</a>
     <span class="mx-1">></span>
     <a href="' . route('pacientes.edit', $paciente->idPaciente) . '" class="text-decoration-none text-primary">'
        . $paciente->nombre . ' ' . $paciente->apPaterno .
     '</a>',
     
  'title' => 'Historial Clínico'
])
@php
    function hc($historial, $seccion, $campo, $tipo = 'valor') {
        return $historial['secciones'][$seccion][$campo][$tipo] ?? null;
    }
@endphp
<div class="container-fluid">

    @if (session('ok'))
        <div class="alert alert-success">{{ session('ok') }}</div>
    @endif


    {{-- 🔥 RESUMEN --}}
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="mb-3">Resumen Clínico</h5>

            <div class="d-flex flex-wrap gap-2">
                @if(($historial['resumen']['diabetes'] ?? null) == 'si')
                    <span class="badge bg-warning text-dark">Diabetes</span>
                @endif

                @if(($historial['resumen']['hipertension'] ?? null) == 'si')
                    <span class="badge bg-danger">Hipertensión</span>
                @endif

                @if(!empty($historial['resumen']['alergias']))
                    <span class="badge bg-info text-dark">
                        Alergias: {{ $historial['resumen']['alergias'] }}
                    </span>
                @endif

                @if(($historial['resumen']['usa_lentes'] ?? null) == 'si')
                    <span class="badge bg-primary">Usa lentes</span>
                @endif

                @if(($historial['resumen']['tinnitus'] ?? null) == 'si')
                    <span class="badge bg-secondary">Tinnitus</span>
                @endif
            </div>
        </div>
    </div>

    {{-- 🔥 FORMULARIO --}}
    <form method="POST" action="{{ route('pacientes.historial_clinico.store', $paciente->idPaciente) }}" class="card shadow-sm">
        @csrf

        <div class="card-body">
            <h5 class="mb-3">Modifica Historial Clínico</h5>
            <div class="row g-4">
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#gen">Generales</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#oftalmo">Oftalmología</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#audio">Audiología</a>
                    </li>
                </ul>
                <div class="tab-content">

                    <div class="tab-pane fade show active" id="gen">
                         {{-- ANTECEDENTES GENERALES --}}
                        <div class="col-md-6">
                            <h6 class="fw-bold">Antecedentes Generales</h6>

                            @foreach([
                                'diabetes' => 'Diabetes',
                                'hipertension' => 'Hipertensión',
                                'alergias' => 'Alergias',
                                'medicamentos_actuales' => 'Medicamentos',
                            ] as $campo => $label)

                                <div class="mb-3">
                                    <label class="form-label">{{ $label }}</label>

                                    <select name="historial[antecedentes_generales][{{ $campo }}][valor]" class="form-select">
                                        <option value="">Seleccionar...</option>
                                        <option value="si" {{ hc($historial,'antecedentes_generales',$campo) == 'si' ? 'selected' : '' }}>Sí</option>
                                        <option value="no" {{ hc($historial,'antecedentes_generales',$campo) == 'no' ? 'selected' : '' }}>No</option>
                                    </select>

                                    <textarea
                                    name="historial[antecedentes_generales][{{ $campo }}][detalle]"
                                    class="form-control mt-1"
                                    placeholder="Notas generales del paciente, antecedentes relevantes, etc."
                                >{{ hc($historial,'antecedentes_generales',$campo,'detalle') }}</textarea>
                                </div>

                            @endforeach
                        </div>
                    </div>

                    <div class="tab-pane fade" id="oftalmo">
                            {{-- OFTALMOLOGÍA --}}
                            <div class="col-md-6">
                                <h6 class="fw-bold">Oftalmología</h6>

                                @foreach([
                                    'usa_lentes' => 'Usa lentes',
                                    'cirugia_ocular_previa' => 'Cirugía ocular',
                                    'vision_borrosa' => 'Visión borrosa',
                                    'perdida_subita_vision' => 'Pérdida súbita de visión',
                                ] as $campo => $label)

                                    <div class="mb-3">
                                        <label class="form-label">{{ $label }}</label>

                                        <select name="historial[oftalmologia][{{ $campo }}][valor]" class="form-select">
                                            <option value="">Seleccionar...</option>
                                            <option value="si" {{ hc($historial,'oftalmologia',$campo) == 'si' ? 'selected' : '' }}>Sí</option>
                                            <option value="no" {{ hc($historial,'oftalmologia',$campo) == 'no' ? 'selected' : '' }}>No</option>
                                        </select>

                                        <textarea
                                        name="historial[oftalmologia][{{ $campo }}][detalle]"
                                        class="form-control mt-1"
                                        placeholder="Notas generales del paciente, antecedentes relevantes, etc."
                                    >{{ hc($historial,'oftalmologia',$campo,'detalle') }}</textarea>
                                    </div>

                                @endforeach
                            </div>
                    </div>

                    <div class="tab-pane fade" id="audio">
                         {{-- AUDIOLOGÍA --}}
                        <div class="col-md-6">
                            <h6 class="fw-bold">Audiología</h6>

                            @foreach([
                                'disminucion_auditiva' => 'Disminución auditiva',
                                'tinnitus' => 'Tinnitus',
                                'vertigo' => 'Vértigo',
                            ] as $campo => $label)

                                <div class="mb-3">
                                    <label class="form-label">{{ $label }}</label>

                                    <select name="historial[audiologia][{{ $campo }}][valor]" class="form-select">
                                        <option value="">Seleccionar...</option>
                                        <option value="si" {{ hc($historial,'audiologia',$campo) == 'si' ? 'selected' : '' }}>Sí</option>
                                        <option value="no" {{ hc($historial,'audiologia',$campo) == 'no' ? 'selected' : '' }}>No</option>
                                    </select>

                                    <textarea
                                    name="historial[audiologia][{{ $campo }}][detalle]"
                                    class="form-control mt-1"
                                    placeholder="Notas generales del paciente, antecedentes relevantes, etc."
                                >{{ hc($historial,'audiologia',$campo,'detalle') }}</textarea>
                                </div>

                            @endforeach
                        </div>
                    </div>
                </div>
            
               

            </div>

        </div>
        <hr>
        <div class="card-body">
             {{-- OBSERVACIONES --}}
                <div class="col-md-12">
                    <label class="form-label fw-bold">Observaciones Generales</label>
                    <textarea name="observaciones_generales" class="form-control" rows="3">
                        {{ $historial['historial']->observaciones_generales ?? '' }}
                    </textarea>
                </div>
        </div>
        <div class="card-footer text-end">
            <button class="btn btn-primary">
                <i class="ti ti-device-floppy"></i> Guardar Historial
            </button>
        </div>

    </form>

</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('select').forEach(select => {

        const textarea = select.closest('.mb-3').querySelector('textarea');

        function toggle() {
            if(select.value === 'si'){
                textarea.style.display = 'block';
            } else {
                textarea.style.display = 'none';
                textarea.value = '';
            }
        }

        select.addEventListener('change', toggle);
        toggle();
    });

});
</script>
@endpush