@extends('layouts.admin')

@section('content')
@php
    if ($historial instanceof \Illuminate\Database\Eloquent\Collection || $historial instanceof \Illuminate\Support\Collection) {
        $historial = $historial->first();
    }
@endphp

@if(!$historial)
    <div class="alert alert-warning shadow-sm border-0 my-4" style="border-radius: 12px;">
        <div class="d-flex align-items-center">
            <i class="fas fa-exclamation-triangle fa-2x mr-3 text-warning"></i>
            <div>
                <h5 class="mb-1 font-weight-bold">No se encontró registro de historial clínico</h5>
                <p class="mb-0">No se ha registrado ninguna consulta médica previa para este paciente.</p>
            </div>
        </div>
        <div class="mt-3">
            <a href="{{ url('admin/pacientes/'.$paciente->id.'/historialcreate') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus-circle mr-1"></i> Registrar Historial Ahora
            </a>
            <a href="{{ route('admin.pacientes.index') }}" class="btn btn-secondary btn-sm ml-2">Volver</a>
        </div>
    </div>
@else
<div class="content-header p-0 mb-3">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-sm-6">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb bg-transparent p-0 mb-1">
                        <li class="breadcrumb-item"><a href="{{ url('/admin') }}"><i class="fas fa-home"></i> Inicio</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.pacientes.index') }}">Pacientes</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.pacientes.historialindex', $paciente->id) }}">Historial Clínico</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Consulta #{{ $historial->id }}</li>
                    </ol>
                </nav>
                <h1 class="m-0 font-weight-bold" style="font-size: 1.55rem; color: var(--dm-text-main, #1e293b);">
                    <i class="fas fa-notes-medical text-info mr-2"></i> Detalles de Consulta Médica
                </h1>
            </div>
            <div class="col-sm-6 text-right">
                <a href="{{ url('admin/historial/'.$historial->id.'/pdf') }}" target="_blank" class="btn btn-success btn-sm shadow-sm mr-2 font-weight-bold" title="Imprimir PDF Oficial">
                    <i class="fas fa-print mr-1"></i> Imprimir PDF Oficial
                </a>
                <button type="button" onclick="window.print()" class="btn btn-outline-secondary btn-sm shadow-sm mr-2 font-weight-bold" title="Imprimir Pantalla">
                    <i class="fas fa-desktop mr-1"></i> Imprimir Pantalla
                </button>
                @unlessrole('paciente')
                <a href="{{ url('admin/pacientes/'.$paciente->id.'/historialcreate') }}" class="btn btn-primary btn-sm shadow-sm mr-2 font-weight-bold">
                    <i class="fas fa-plus mr-1"></i> Nueva Consulta
                </a>
                @endunlessrole
                <a href="{{ route('admin.pacientes.historialindex', $paciente->id) }}" class="btn btn-outline-secondary btn-sm shadow-sm">
                    <i class="fas fa-arrow-left mr-1"></i> Historiales
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Banner del Paciente y Consulta -->
<div class="card shadow-sm border-0 mb-4" style="border-radius: 14px; overflow: hidden; background: var(--dm-bg-card, #ffffff);">
    <div class="card-body p-4" style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%); border-bottom: 1px solid var(--dm-border, #e2e8f0);">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-12">
                <div class="d-flex align-items-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center text-white mr-3 shadow-sm"
                         style="width: 60px; height: 60px; font-size: 1.5rem; font-weight: 700; flex-shrink: 0;
                                background: {{ strtolower($paciente->genero) == 'femenino' ? 'linear-gradient(135deg, #ec4899, #db2777)' : 'linear-gradient(135deg, #2563eb, #0284c7)' }};">
                        {{ strtoupper(substr($paciente->nombres, 0, 1)) }}{{ strtoupper(substr($paciente->apellidos, 0, 1)) }}
                    </div>
                    <div>
                        <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                            <h3 class="font-weight-bold mb-0 mr-2" style="font-size: 1.35rem; color: var(--dm-text-main, #0f172a);">
                                {{ $paciente->nombres }} {{ $paciente->apellidos }}
                            </h3>
                            <span class="badge badge-pill badge-primary px-3 py-1" style="font-size: 0.8rem;">
                                <i class="fas fa-folder mr-1"></i> H.C. #{{ $paciente->nro_historia_clinica }}
                            </span>
                            @if(!empty($paciente->alergias) && strtolower($paciente->alergias) != 'ninguna' && strtolower($paciente->alergias) != 'no')
                                <span class="badge badge-pill badge-danger px-2 py-1" style="font-size: 0.78rem;">
                                    <i class="fas fa-exclamation-triangle mr-1"></i> Alergias: {{ $paciente->alergias }}
                                </span>
                            @else
                                <span class="badge badge-pill badge-success px-2 py-1" style="font-size: 0.78rem;">
                                    <i class="fas fa-check-circle mr-1"></i> Sin alergias conocidas
                                </span>
                            @endif
                        </div>
                        <div class="text-muted d-flex flex-wrap align-items-center" style="font-size: 0.88rem; gap: 1rem;">
                            <span><i class="fas fa-id-card text-primary mr-1"></i> <b>Cédula:</b> {{ $paciente->cedula }}</span>
                            <span><i class="fas fa-birthday-cake text-info mr-1"></i> <b>Edad:</b> {{ $historial->edad ?: $paciente->edad }} años</span>
                            <span><i class="fas fa-venus-mars text-purple mr-1"></i> <b>Sexo:</b> {{ $historial->sexo ?: $paciente->genero }}</span>
                            <span><i class="fas fa-tint text-danger mr-1"></i> <b>G. Sanguíneo:</b> {{ $paciente->grupo_sanguineo ?: 'No registrado' }}</span>
                            <span><i class="fas fa-phone text-secondary mr-1"></i> {{ $paciente->telefono }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 mt-3 mt-lg-0 text-lg-right">
                <div class="d-inline-flex p-3 rounded-lg shadow-sm border bg-white align-items-center" style="border-radius: 10px;">
                    <div class="rounded-circle text-primary p-2 mr-3 d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background: rgba(37, 99, 235, 0.1);">
                        <i class="fas fa-calendar-alt text-primary" style="font-size: 1.25rem;"></i>
                    </div>
                    <div class="text-left">
                        <div class="font-weight-bold text-dark" style="font-size: 1.05rem;">
                            {{ \Carbon\Carbon::parse($historial->fecha_visita)->format('d/m/Y') }}
                        </div>
                        <span class="text-muted" style="font-size: 0.8rem;">Fecha de la Consulta</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pestañas de Vista Rápida -->
    <div class="card-header border-0 p-2" style="background: var(--dm-bg-card, #ffffff);">
        <ul class="nav nav-pills nav-fill clinical-nav-pills" id="showHistorialTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="show-motivo-link" data-toggle="pill" href="#show-motivo" role="tab">
                    <i class="fas fa-clipboard-list mr-1"></i> 1. Motivo & Enfermedad
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="show-antecedentes-link" data-toggle="pill" href="#show-antecedentes" role="tab">
                    <i class="fas fa-dna mr-1"></i> 2. Antecedentes
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="show-organos-link" data-toggle="pill" href="#show-organos" role="tab">
                    <i class="fas fa-heartbeat mr-1"></i> 3. Órganos & Sistemas
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="show-signos-link" data-toggle="pill" href="#show-signos" role="tab">
                    <i class="fas fa-tachometer-alt mr-1"></i> 4. Signos Vitales & IMC
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="show-examen-link" data-toggle="pill" href="#show-examen" role="tab">
                    <i class="fas fa-user-md mr-1"></i> 5. Examen Físico
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="show-diagnostico-link" data-toggle="pill" href="#show-diagnostico" role="tab">
                    <i class="fas fa-pills mr-1"></i> 6. Diagnóstico & Tratamiento
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- Contenido de las Pestañas de Lectura -->
<div class="tab-content" id="showHistorialTabsContent">

    <!-- 1. Motivo & Enfermedad -->
    <div class="tab-pane fade show active" id="show-motivo" role="tabpanel">
        <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h5 class="mb-0 font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                    <i class="fas fa-comment-medical text-primary mr-2"></i> 1. Motivo de Consulta y 4. Enfermedad Actual
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="mb-4">
                    <h6 class="font-weight-bold text-primary mb-2">1. Motivo de Consulta</h6>
                    <div class="p-3 rounded-lg border bg-light" style="border-radius: 10px; font-size: 0.95rem; line-height: 1.6;">
                        {!! nl2br(e($historial->motivo_consulta)) ?: '<span class="text-muted font-italic">No se especificó motivo de consulta.</span>' !!}
                    </div>
                </div>

                <hr class="my-4">

                <div>
                    <h6 class="font-weight-bold text-primary mb-2">4. Enfermedad o Problema Actual</h6>
                    <div class="p-3 rounded-lg border bg-light" style="border-radius: 10px; font-size: 0.95rem; line-height: 1.6;">
                        {!! nl2br(e($historial->enfermedad_actual)) ?: '<span class="text-muted font-italic">No se detalló evolución de la enfermedad actual.</span>' !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 2. Antecedentes -->
    <div class="tab-pane fade" id="show-antecedentes" role="tabpanel">
        <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h5 class="mb-0 font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                    <i class="fas fa-dna text-primary mr-2"></i> 2. Antecedentes Personales y 3. Familiares
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="mb-4">
                    <h6 class="font-weight-bold text-primary mb-2">2. Antecedentes Personales (Patológicos, Quirúrgicos, Alergias, Hábitos)</h6>
                    <div class="p-3 rounded-lg border bg-light" style="border-radius: 10px; font-size: 0.95rem; line-height: 1.6;">
                        {!! nl2br(e($historial->antecedentes_personales)) ?: '<span class="text-muted font-italic">Sin antecedentes personales relevantes reportados.</span>' !!}
                    </div>
                </div>

                <hr class="my-4">

                <div>
                    <h6 class="font-weight-bold text-primary mb-3">3. Antecedentes Familiares</h6>
                    @php
                        $famItems = [
                            ['label' => 'Cardiopatía', 'val' => $historial->cardiopatia, 'icon' => 'fa-heartbeat'],
                            ['label' => 'Diabetes', 'val' => $historial->deabetes, 'icon' => 'fa-tint'],
                            ['label' => 'Enf. Vascular', 'val' => $historial->enf_vascular, 'icon' => 'fa-stethoscope'],
                            ['label' => 'Hipertensión', 'val' => $historial->hipertension, 'icon' => 'fa-tachometer-alt'],
                            ['label' => 'Cáncer', 'val' => $historial->cancer, 'icon' => 'fa-ribbon'],
                            ['label' => 'Tuberculosis', 'val' => $historial->tuberculosis, 'icon' => 'fa-lungs'],
                            ['label' => 'Enf. Mental', 'val' => $historial->enf_mental, 'icon' => 'fa-brain'],
                            ['label' => 'Enf. Infecciosa', 'val' => $historial->enf_infecciosa, 'icon' => 'fa-biohazard'],
                            ['label' => 'Malformación', 'val' => $historial->malformacion, 'icon' => 'fa-child'],
                            ['label' => 'Otra Enfermedad', 'val' => $historial->otro, 'icon' => 'fa-plus-circle'],
                        ];
                    @endphp

                    <div class="row">
                        @foreach($famItems as $f)
                            <div class="col-md-6 col-lg-4 mb-3">
                                <div class="p-3 border rounded-lg d-flex justify-content-between align-items-center {{ !empty($f['val']) && strtolower($f['val']) != 'no refiere' && strtolower($f['val']) != 'no' ? 'border-primary bg-light' : '' }}" style="border-radius: 10px;">
                                    <span class="font-weight-600" style="font-size: 0.88rem;">
                                        <i class="fas {{ $f['icon'] }} text-primary mr-2"></i> {{ $f['label'] }}
                                    </span>
                                    @if(!empty($f['val']) && strtolower($f['val']) != 'no refiere' && strtolower($f['val']) != 'no')
                                        <span class="badge badge-primary px-2 py-1 font-weight-bold text-wrap" style="max-width: 130px; text-align: right;">
                                            {{ $f['val'] }}
                                        </span>
                                    @else
                                        <span class="badge badge-light border text-muted">No refiere</span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3. Órganos & Sistemas -->
    <div class="tab-pane fade" id="show-organos" role="tabpanel">
        <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h5 class="mb-0 font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                    <i class="fas fa-heartbeat text-primary mr-2"></i> 5. Revisión Actual de Órganos y Sistemas
                </h5>
            </div>
            <div class="card-body p-4">
                @php
                    $orgList = [
                        ['label' => '1. Órganos de los Sentidos', 'cp' => $historial->organos_sentidos_cp, 'sp' => $historial->organos_sentidos_sp, 'icon' => 'fa-eye'],
                        ['label' => '2. Respiratorio', 'cp' => $historial->respiratorio_cp, 'sp' => $historial->respiratorio_sp, 'icon' => 'fa-lungs'],
                        ['label' => '3. Cardiovascular', 'cp' => $historial->cardio_vascular_cp, 'sp' => $historial->cardio_vascular_sp, 'icon' => 'fa-heartbeat'],
                        ['label' => '4. Digestivo', 'cp' => $historial->digestivo_cp, 'sp' => $historial->digestivo_sp, 'icon' => 'fa-utensils'],
                        ['label' => '5. Genital', 'cp' => $historial->genital_cp, 'sp' => $historial->genital_sp, 'icon' => 'fa-venus-mars'],
                        ['label' => '6. Urinario', 'cp' => $historial->urinario_cp, 'sp' => $historial->urinario_sp, 'icon' => 'fa-tint'],
                        ['label' => '7. Músculo Esquelético', 'cp' => $historial->musculo_esqueletico_cp, 'sp' => $historial->musculo_esqueletico_sp, 'icon' => 'fa-walking'],
                        ['label' => '8. Endocrino', 'cp' => $historial->endocrino_cp, 'sp' => $historial->endocrino_sp, 'icon' => 'fa-pills'],
                        ['label' => '9. Hemo Linfático', 'cp' => $historial->hemo_linfatico_cp, 'sp' => $historial->hemo_linfatico_sp, 'icon' => 'fa-shield-virus'],
                        ['label' => '10. Nervioso', 'cp' => $historial->nerviso_cp ?: $historial->nervioso_cp, 'sp' => $historial->nerviso_sp ?: $historial->nervioso_sp, 'icon' => 'fa-brain'],
                    ];
                @endphp

                <div class="row">
                    @foreach($orgList as $o)
                        <div class="col-md-6 col-lg-6 mb-3">
                            <div class="p-3 border rounded-lg d-flex justify-content-between align-items-center" style="border-radius: 10px;">
                                <span class="font-weight-600" style="font-size: 0.9rem;">
                                    <i class="fas {{ $o['icon'] }} text-primary mr-2"></i> {{ $o['label'] }}
                                </span>
                                <div>
                                    @if(strtoupper($o['cp']) == 'CP')
                                        <span class="badge badge-danger px-3 py-1 font-weight-bold" style="font-size: 0.85rem;">CP (Patológico)</span>
                                    @elseif(strtoupper($o['sp']) == 'SP')
                                        <span class="badge badge-success px-3 py-1 font-weight-bold" style="font-size: 0.85rem;">SP (Normal)</span>
                                    @else
                                        <span class="badge badge-light border text-muted">No evaluado</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if(!empty($historial->revision_organos))
                    <div class="mt-3">
                        <h6 class="font-weight-bold text-primary mb-2">Descripción de Hallazgos en Órganos y Sistemas</h6>
                        <div class="p-3 rounded-lg border bg-light" style="border-radius: 10px; font-size: 0.92rem; line-height: 1.6;">
                            {!! nl2br(e($historial->revision_organos)) !!}
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- 4. Signos Vitales & Antropometría -->
    <div class="tab-pane fade" id="show-signos" role="tabpanel">
        <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h5 class="mb-0 font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                    <i class="fas fa-tachometer-alt text-primary mr-2"></i> 6. Signos Vitales y Antropometría
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="row">
                    <!-- Temperatura -->
                    <div class="col-md-4 col-sm-6 mb-3">
                        <div class="p-3 border rounded-lg text-center" style="border-radius: 12px;">
                            <span class="text-muted d-block mb-1" style="font-size: 0.85rem;">
                                <i class="fas fa-thermometer-half text-danger mr-1"></i> Temperatura
                            </span>
                            <div class="font-weight-bold text-dark" style="font-size: 1.5rem;">
                                {{ $historial->temperatura ? $historial->temperatura.' °C' : '--' }}
                            </div>
                        </div>
                    </div>

                    <!-- Presión Arterial -->
                    <div class="col-md-4 col-sm-6 mb-3">
                        <div class="p-3 border rounded-lg text-center" style="border-radius: 12px;">
                            <span class="text-muted d-block mb-1" style="font-size: 0.85rem;">
                                <i class="fas fa-heartbeat text-danger mr-1"></i> Presión Arterial
                            </span>
                            <div class="font-weight-bold text-dark" style="font-size: 1.5rem;">
                                {{ $historial->presion_arterial ? $historial->presion_arterial.' mmHg' : '--' }}
                            </div>
                        </div>
                    </div>

                    <!-- Pulso -->
                    <div class="col-md-4 col-sm-6 mb-3">
                        <div class="p-3 border rounded-lg text-center" style="border-radius: 12px;">
                            <span class="text-muted d-block mb-1" style="font-size: 0.85rem;">
                                <i class="fas fa-wave-square text-primary mr-1"></i> Pulso / Frec. Cardíaca
                            </span>
                            <div class="font-weight-bold text-dark" style="font-size: 1.5rem;">
                                {{ $historial->pulso ? $historial->pulso.' lpm' : '--' }}
                            </div>
                        </div>
                    </div>

                    <!-- Frecuencia Respiratoria -->
                    <div class="col-md-4 col-sm-6 mb-3">
                        <div class="p-3 border rounded-lg text-center" style="border-radius: 12px;">
                            <span class="text-muted d-block mb-1" style="font-size: 0.85rem;">
                                <i class="fas fa-lungs text-info mr-1"></i> Frecuencia Respiratoria
                            </span>
                            <div class="font-weight-bold text-dark" style="font-size: 1.5rem;">
                                {{ $historial->frecuencia_respiratoria ? $historial->frecuencia_respiratoria.' rpm' : '--' }}
                            </div>
                        </div>
                    </div>

                    <!-- Peso -->
                    <div class="col-md-4 col-sm-6 mb-3">
                        <div class="p-3 border rounded-lg text-center" style="border-radius: 12px;">
                            <span class="text-muted d-block mb-1" style="font-size: 0.85rem;">
                                <i class="fas fa-weight text-warning mr-1"></i> Peso Corporal
                            </span>
                            <div class="font-weight-bold text-dark" style="font-size: 1.5rem;">
                                {{ $historial->peso ? $historial->peso.' kg' : '--' }}
                            </div>
                        </div>
                    </div>

                    <!-- Talla -->
                    <div class="col-md-4 col-sm-6 mb-3">
                        <div class="p-3 border rounded-lg text-center" style="border-radius: 12px;">
                            <span class="text-muted d-block mb-1" style="font-size: 0.85rem;">
                                <i class="fas fa-ruler-vertical text-purple mr-1"></i> Talla / Estatura
                            </span>
                            <div class="font-weight-bold text-dark" style="font-size: 1.5rem;">
                                {{ $historial->talla ? $historial->talla.' cm' : '--' }}
                            </div>
                        </div>
                    </div>

                    <!-- Cálculo de IMC -->
                    @php
                        $imcVal = null;
                        $imcText = '';
                        $imcBadge = 'badge-secondary';
                        $pesoFloat = (float)$historial->peso;
                        $tallaFloat = (float)$historial->talla;
                        if ($tallaFloat > 3) { $tallaFloat = $tallaFloat / 100; }
                        if ($pesoFloat > 0 && $tallaFloat > 0) {
                            $imcVal = round($pesoFloat / ($tallaFloat * $tallaFloat), 1);
                            if ($imcVal < 18.5) { $imcText = 'Bajo Peso'; $imcBadge = 'badge-info'; }
                            elseif ($imcVal < 25) { $imcText = 'Peso Normal (Eutrófico)'; $imcBadge = 'badge-success'; }
                            elseif ($imcVal < 30) { $imcText = 'Sobrepeso'; $imcBadge = 'badge-warning'; }
                            else { $imcText = 'Obesidad'; $imcBadge = 'badge-danger'; }
                        }
                    @endphp

                    @if($imcVal)
                        <div class="col-12 mt-2">
                            <div class="p-3 rounded-lg border d-flex justify-content-between align-items-center" style="border-radius: 12px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center text-primary mr-3" style="width: 44px; height: 44px; background: rgba(37, 99, 235, 0.15);">
                                        <i class="fas fa-calculator" style="font-size: 1.25rem;"></i>
                                    </div>
                                    <div>
                                        <h6 class="font-weight-bold mb-0">Índice de Masa Corporal (IMC)</h6>
                                        <small class="text-muted">Calculado a partir de {{ $historial->peso }} kg y {{ $historial->talla }} cm</small>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="font-weight-bold text-primary mr-2" style="font-size: 1.5rem;">{{ $imcVal }} kg/m²</span>
                                    <span class="badge {{ $imcBadge }} px-3 py-2 font-weight-bold" style="font-size: 0.9rem;">
                                        {{ $imcText }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- 5. Examen Físico Regional -->
    <div class="tab-pane fade" id="show-examen" role="tabpanel">
        <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h5 class="mb-0 font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                    <i class="fas fa-user-md text-primary mr-2"></i> 7. Examen Físico Regional
                </h5>
            </div>
            <div class="card-body p-4">
                @php
                    $regList = [
                        ['label' => '1. Cabeza', 'cp' => $historial->cabeza_cp, 'sp' => $historial->cabeza_sp, 'icon' => 'fa-smile'],
                        ['label' => '2. Cuello', 'cp' => $historial->cuello_cp, 'sp' => $historial->cuello_sp, 'icon' => 'fa-user'],
                        ['label' => '3. Tórax', 'cp' => $historial->torax_cp, 'sp' => $historial->torax_sp, 'icon' => 'fa-lungs'],
                        ['label' => '4. Abdomen', 'cp' => $historial->abdomen_cp, 'sp' => $historial->abdomen_sp, 'icon' => 'fa-shield-alt'],
                        ['label' => '5. Pelvis', 'cp' => $historial->pelvis_cp, 'sp' => $historial->pelvis_sp, 'icon' => 'fa-bone'],
                        ['label' => '6. Extremidades', 'cp' => $historial->extemidades_cp ?: $historial->extremidades_cp, 'sp' => $historial->extemidades_sp ?: $historial->extremidades_sp, 'icon' => 'fa-walking'],
                    ];
                @endphp

                <div class="row">
                    @foreach($regList as $r)
                        <div class="col-md-6 col-lg-4 mb-3">
                            <div class="p-3 border rounded-lg d-flex justify-content-between align-items-center" style="border-radius: 10px;">
                                <span class="font-weight-600" style="font-size: 0.9rem;">
                                    <i class="fas {{ $r['icon'] }} text-primary mr-2"></i> {{ $r['label'] }}
                                </span>
                                <div>
                                    @if(strtoupper($r['cp']) == 'CP')
                                        <span class="badge badge-danger px-3 py-1 font-weight-bold" style="font-size: 0.85rem;">CP (Patológico)</span>
                                    @elseif(strtoupper($r['sp']) == 'SP')
                                        <span class="badge badge-success px-3 py-1 font-weight-bold" style="font-size: 0.85rem;">SP (Normal)</span>
                                    @else
                                        <span class="badge badge-light border text-muted">No evaluado</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if(!empty($historial->examen_fisico))
                    <div class="mt-3">
                        <h6 class="font-weight-bold text-primary mb-2">Descripción de Hallazgos en Examen Físico</h6>
                        <div class="p-3 rounded-lg border bg-light" style="border-radius: 10px; font-size: 0.92rem; line-height: 1.6;">
                            {!! nl2br(e($historial->examen_fisico)) !!}
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- 6. Diagnóstico & Plan de Tratamiento -->
    <div class="tab-pane fade" id="show-diagnostico" role="tabpanel">
        <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; background: var(--dm-bg-card, #ffffff);">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h5 class="mb-0 font-weight-bold" style="color: var(--dm-text-main, #1e293b);">
                    <i class="fas fa-pills text-primary mr-2"></i> 8. Diagnósticos (CIE-10) y 9. Plan de Tratamiento
                </h5>
            </div>
            <div class="card-body p-4">
                <div class="mb-4">
                    <h6 class="font-weight-bold text-primary mb-3">8. Diagnósticos Registrados</h6>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped align-middle mb-0" style="border-radius: 10px; overflow: hidden;">
                            <thead class="thead-light">
                                <tr>
                                    <th style="width: 80px; text-align: center;">Nro</th>
                                    <th>Diagnóstico / Patología</th>
                                    <th style="width: 160px; text-align: center;">Código CIE-10</th>
                                    <th style="width: 160px; text-align: center;">Tipo</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Diagnóstico 1 (Principal) -->
                                @if(!empty($historial->diagnostico_cie))
                                    <tr>
                                        <td class="text-center font-weight-bold"><span class="badge badge-primary">1</span> Principal</td>
                                        <td class="font-weight-600 text-dark">{{ $historial->diagnostico_cie }}</td>
                                        <td class="text-center"><span class="badge badge-secondary px-2 py-1">{{ $historial->diagnostico_codigo ?: 'N/A' }}</span></td>
                                        <td class="text-center">
                                            @if($historial->definitivo == 'DEF')
                                                <span class="badge badge-success px-2 py-1 font-weight-bold">Definitivo (DEF)</span>
                                            @else
                                                <span class="badge badge-info px-2 py-1 font-weight-bold">Presuntivo (PRE)</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endif

                                <!-- Diagnóstico 2 -->
                                @if(!empty($historial->diagnostico_cie_a))
                                    <tr>
                                        <td class="text-center font-weight-bold"><span class="badge badge-secondary">2</span></td>
                                        <td class="font-weight-600 text-dark">{{ $historial->diagnostico_cie_a }}</td>
                                        <td class="text-center"><span class="badge badge-secondary px-2 py-1">{{ $historial->diagnostico_codigo_a ?: 'N/A' }}</span></td>
                                        <td class="text-center">
                                            @if($historial->definitivo_a == 'DEF')
                                                <span class="badge badge-success px-2 py-1 font-weight-bold">Definitivo (DEF)</span>
                                            @else
                                                <span class="badge badge-info px-2 py-1 font-weight-bold">Presuntivo (PRE)</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endif

                                <!-- Diagnóstico 3 -->
                                @if(!empty($historial->diagnostico_cie_b))
                                    <tr>
                                        <td class="text-center font-weight-bold"><span class="badge badge-secondary">3</span></td>
                                        <td class="font-weight-600 text-dark">{{ $historial->diagnostico_cie_b }}</td>
                                        <td class="text-center"><span class="badge badge-secondary px-2 py-1">{{ $historial->diagnostico_codigo_b ?: 'N/A' }}</span></td>
                                        <td class="text-center">
                                            @if($historial->definitivo_b == 'DEF')
                                                <span class="badge badge-success px-2 py-1 font-weight-bold">Definitivo (DEF)</span>
                                            @else
                                                <span class="badge badge-info px-2 py-1 font-weight-bold">Presuntivo (PRE)</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endif

                                <!-- Diagnóstico 4 -->
                                @if(!empty($historial->diagnostico_cie_c))
                                    <tr>
                                        <td class="text-center font-weight-bold"><span class="badge badge-secondary">4</span></td>
                                        <td class="font-weight-600 text-dark">{{ $historial->diagnostico_cie_c }}</td>
                                        <td class="text-center"><span class="badge badge-secondary px-2 py-1">{{ $historial->diagnostico_codigo_c ?: 'N/A' }}</span></td>
                                        <td class="text-center">
                                            @if($historial->definitivo_c == 'DEF')
                                                <span class="badge badge-success px-2 py-1 font-weight-bold">Definitivo (DEF)</span>
                                            @else
                                                <span class="badge badge-info px-2 py-1 font-weight-bold">Presuntivo (PRE)</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endif

                                @if(empty($historial->diagnostico_cie) && empty($historial->diagnostico_cie_a) && empty($historial->diagnostico_cie_b) && empty($historial->diagnostico_cie_c))
                                    <tr>
                                        <td colspan="4" class="text-center text-muted font-italic py-3">
                                            No se registraron diagnósticos CIE-10 en esta consulta.
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

                <hr class="my-4">

                <div>
                    <h6 class="font-weight-bold text-primary mb-2">9. Plan de Tratamiento y Prescripciones</h6>
                    <div class="p-4 rounded-lg border bg-light" style="border-radius: 12px; font-size: 0.95rem; line-height: 1.7; background: #fdfefe;">
                        {!! nl2br(e($historial->tratamiento)) ?: '<span class="text-muted font-italic">No se registraron indicaciones de tratamiento.</span>' !!}
                    </div>
                </div>
            </div>
            <div class="card-footer bg-light py-3 d-flex justify-content-between align-items-center">
                <button type="button" onclick="window.print()" class="btn btn-outline-secondary px-4 font-weight-bold shadow-sm">
                    <i class="fas fa-desktop mr-1"></i> Imprimir Pantalla
                </button>
                <a href="{{ url('admin/historial/'.$historial->id.'/pdf') }}" target="_blank" class="btn btn-success px-4 font-weight-bold shadow-sm">
                    <i class="fas fa-print mr-1"></i> Imprimir Reporte PDF Oficial
                </a>
            </div>
        </div>
    </div>

</div>
@endif

<style>
.clinical-nav-pills .nav-link {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--dm-text-muted, #64748b);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    margin: 0.2rem;
    transition: all 0.2s ease-in-out;
    background: transparent;
    border: 1px solid transparent;
}
.clinical-nav-pills .nav-link:hover {
    color: var(--dm-primary, #2563eb);
    background: rgba(37, 99, 235, 0.05);
}
.clinical-nav-pills .nav-link.active {
    background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
    border-color: transparent;
}

body.dark-mode .bg-light {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
</style>
@endsection