@extends('layouts.admin')

@section('content')
<div class="row mb-3 align-items-center">
    <div class="col-md-8">
        <h1 class="m-0 font-weight-bold text-dark" style="font-size: 1.8rem;">
            <i class="fas fa-user-plus text-primary mr-2"></i> Nuevo Ingreso Hospitalario
        </h1>
        <p class="text-muted mb-0">Asignación de cama, diagnóstico inicial y apertura de expediente de internamiento</p>
    </div>
    <div class="col-md-4 text-md-right mt-2 mt-md-0">
        <a href="{{ route('admin.hospitalizaciones.index') }}" class="btn btn-outline-secondary shadow-sm">
            <i class="fas fa-arrow-left mr-1"></i> Volver al Listado
        </a>
    </div>
</div>

<form action="{{ route('admin.hospitalizaciones.store') }}" method="POST">
    @csrf

    <div class="row">
        <!-- Columna Izquierda: Datos del Paciente y Asignación de Cama -->
        <div class="col-lg-6">
            <!-- Tarjeta 1: Selección del Paciente -->
            <div class="card card-outline card-primary shadow-sm mb-4">
                <div class="card-header py-2">
                    <h5 class="card-title font-weight-bold text-dark mb-0">
                        <i class="fas fa-user-injured text-primary mr-1"></i> 1. Paciente a Hospitalizar
                    </h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="font-weight-bold">Seleccionar Paciente: <span class="text-danger">*</span></label>
                        <select name="paciente_id" id="pacienteSelect" class="form-control select2" required style="width: 100%;">
                            <option value="">-- Buscar por Nombre o Cédula --</option>
                            @foreach($pacientes as $paciente)
                                <option value="{{ $paciente->id }}"
                                    data-cedula="{{ $paciente->cedula }}"
                                    data-edad="{{ $paciente->edad }}"
                                    data-genero="{{ $paciente->genero }}"
                                    data-historia="{{ $paciente->nro_historia_clinica }}"
                                    data-alergias="{{ $paciente->alergias }}"
                                    data-contacto="{{ $paciente->contacto_emergencia }}"
                                    data-telefono-emergencia="{{ $paciente->numero_emergencia }}"
                                    {{ (old('paciente_id', $pacienteSeleccionadoId) == $paciente->id) ? 'selected' : '' }}>
                                    {{ $paciente->apellidos }} {{ $paciente->nombres }} — CI: {{ $paciente->cedula }}
                                </option>
                            @endforeach
                        </select>
                        @error('paciente_id')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <!-- Ficha Resumen del Paciente Seleccionado -->
                    <div id="pacienteInfoCard" class="p-3 rounded mb-2 border" style="background-color: #f8fafc;">
                        <div class="row text-muted small">
                            <div class="col-6 mb-1">
                                <span class="font-weight-bold text-dark">Historia Clínica:</span> <span id="infoHistoria">-</span>
                            </div>
                            <div class="col-6 mb-1">
                                <span class="font-weight-bold text-dark">Cédula:</span> <span id="infoCedula">-</span>
                            </div>
                            <div class="col-6 mb-1">
                                <span class="font-weight-bold text-dark">Edad / Género:</span> <span id="infoEdad">-</span> / <span id="infoGenero">-</span>
                            </div>
                            <div class="col-6 mb-1">
                                <span class="font-weight-bold text-dark text-danger">Alergias:</span> <span id="infoAlergias" class="text-danger font-weight-bold">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 2: Cama y Ubicación -->
            <div class="card card-outline card-success shadow-sm mb-4">
                <div class="card-header py-2">
                    <h5 class="card-title font-weight-bold text-dark mb-0">
                        <i class="fas fa-bed text-success mr-1"></i> 2. Asignación de Cama Hospitalaria
                    </h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="font-weight-bold">Cama Hospitalaria Disponible: <span class="text-danger">*</span></label>
                        <select name="cama_id" id="camaSelect" class="form-control" required>
                            <option value="">-- Seleccionar Cama --</option>
                            @foreach($camasDisponibles as $cama)
                                <option value="{{ $cama->id }}"
                                    data-precio="{{ $cama->precio_dia }}"
                                    data-sala="{{ $cama->habitacion->nombre ?? '' }}"
                                    data-piso="{{ $cama->habitacion->piso ?? '' }}"
                                    {{ (old('cama_id', $camaSeleccionadaId) == $cama->id) ? 'selected' : '' }}>
                                    {{ $cama->codigo }} — {{ $cama->habitacion->nombre ?? 'Sala' }} ({{ $cama->habitacion->piso ?? '' }}) — ${{ number_format($cama->precio_dia, 2) }}/día
                                </option>
                            @endforeach
                        </select>
                        @error('cama_id')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Doctor Responsable: <span class="text-danger">*</span></label>
                            <select name="doctor_id" class="form-control" required>
                                <option value="">-- Seleccionar Doctor --</option>
                                @foreach($doctores as $doctor)
                                    <option value="{{ $doctor->id }}" {{ old('doctor_id') == $doctor->id ? 'selected' : '' }}>
                                        Dr(a). {{ $doctor->nombres }} {{ $doctor->apellidos }} ({{ $doctor->especialidad }})
                                    </option>
                                @endforeach
                            </select>
                            @error('doctor_id')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Tipo de Ingreso: <span class="text-danger">*</span></label>
                            <select name="tipo_ingreso" class="form-control" required>
                                <option value="Tratamiento Médico" {{ old('tipo_ingreso') == 'Tratamiento Médico' ? 'selected' : '' }}>Tratamiento Médico</option>
                                <option value="Cirugía Programada" {{ old('tipo_ingreso') == 'Cirugía Programada' ? 'selected' : '' }}>Cirugía Programada</option>
                                <option value="Urgencia" {{ old('tipo_ingreso') == 'Urgencia' ? 'selected' : '' }}>Urgencia / Emergencia</option>
                                <option value="Observación Clínica" {{ old('tipo_ingreso') == 'Observación Clínica' ? 'selected' : '' }}>Observación Clínica</option>
                                <option value="Traslado Externo" {{ old('tipo_ingreso') == 'Traslado Externo' ? 'selected' : '' }}>Traslado Interinstitucional</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Fecha y Hora de Ingreso: <span class="text-danger">*</span></label>
                            <input type="datetime-local" name="fecha_ingreso" class="form-control" value="{{ old('fecha_ingreso', date('Y-m-d\TH:i')) }}" required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Fecha Estimada de Alta:</label>
                            <input type="date" name="fecha_alta_estimada" class="form-control" value="{{ old('fecha_alta_estimada') }}">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 3: Familiar / Contacto Responsable -->
            <div class="card card-outline card-secondary shadow-sm mb-4">
                <div class="card-header py-2">
                    <h5 class="card-title font-weight-bold text-dark mb-0">
                        <i class="fas fa-users text-secondary mr-1"></i> 3. Familiar o Acompañante Responsable
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="small font-weight-bold">Nombre Completo del Familiar:</label>
                            <input type="text" name="familiar_responsable" id="familiarInput" class="form-control" value="{{ old('familiar_responsable') }}" placeholder="Ej: María Pérez">
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="small font-weight-bold">Teléfono Contacto:</label>
                            <input type="text" name="telefono_responsable" id="telefonoFamiliarInput" class="form-control" value="{{ old('telefono_responsable') }}" placeholder="Ej: 0991234567">
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="small font-weight-bold">Parentesco:</label>
                            <input type="text" name="parentesco_responsable" class="form-control" value="{{ old('parentesco_responsable') }}" placeholder="Ej: Cónyuge, Hijo(a)">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Columna Derecha: Motivo, Diagnóstico, Cuidados y Signos Vitales -->
        <div class="col-lg-6">
            <!-- Tarjeta 4: Diagnóstico y Motivo Clínico -->
            <div class="card card-outline card-info shadow-sm mb-4">
                <div class="card-header py-2">
                    <h5 class="card-title font-weight-bold text-dark mb-0">
                        <i class="fas fa-stethoscope text-info mr-1"></i> 4. Diagnóstico Clínico de Ingreso
                    </h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="font-weight-bold">Motivo del Internamiento: <span class="text-danger">*</span></label>
                        <textarea name="motivo_ingreso" rows="3" class="form-control" required placeholder="Describa el cuadro actual y síntomas principales por los cuales ingresa el paciente...">{{ old('motivo_ingreso') }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">Diagnóstico Principal de Ingreso: <span class="text-danger">*</span></label>
                        <input type="text" name="diagnostico_ingreso" class="form-control" value="{{ old('diagnostico_ingreso') }}" required placeholder="Ej: Neumonía bacteriana adquirida en la comunidad">
                    </div>

                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label class="small font-weight-bold">Código CIE-10 (opcional):</label>
                            <input type="text" name="codigo_cie10" class="form-control" value="{{ old('codigo_cie10') }}" placeholder="Ej: J18.9">
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="small font-weight-bold">Dieta Prescrita:</label>
                            <select name="dieta" class="form-control">
                                <option value="Normal">Normal / General</option>
                                <option value="Blanda">Blanda</option>
                                <option value="Líquida">Líquida estricta</option>
                                <option value="Hiposódica">Hiposódica (Baja sal)</option>
                                <option value="Diabética">Diabética</option>
                                <option value="NPO / Ayuno">NPO / Ayuno absoluto</option>
                                <option value="Enteral">Enteral</option>
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="small font-weight-bold">¿Requiere Aislamiento?</label>
                            <div class="custom-control custom-switch mt-2">
                                <input type="checkbox" class="custom-control-input" id="switchAislamiento" name="aislamiento" value="1" {{ old('aislamiento') ? 'checked' : '' }}>
                                <label class="custom-control-label font-weight-bold" for="switchAislamiento">Aislamiento</label>
                            </div>
                        </div>
                    </div>

                    <div id="tipoAislamientoDiv" class="form-group d-none">
                        <label class="small font-weight-bold">Tipo de Aislamiento:</label>
                        <input type="text" name="tipo_aislamiento" class="form-control" placeholder="Ej: Respiratorio, Contacto, Protector">
                    </div>

                    <div class="form-group mb-0">
                        <label class="small font-weight-bold">Observaciones Generales de Ingreso:</label>
                        <textarea name="observaciones_ingreso" rows="2" class="form-control" placeholder="Antecedentes relevantes, precauciones especiales o indicaciones iniciales...">{{ old('observaciones_ingreso') }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 5: Signos Vitales y Nota Inicial (Opcional) -->
            <div class="card card-outline card-warning shadow-sm mb-4">
                <div class="card-header py-2">
                    <h5 class="card-title font-weight-bold text-dark mb-0">
                        <i class="fas fa-heartbeat text-warning mr-1"></i> 5. Signos Vitales al Momento del Ingreso (Opcional)
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-4 col-md-4 form-group">
                            <label class="small font-weight-bold">P.A. (mmHg):</label>
                            <input type="text" name="presion_arterial" class="form-control form-control-sm" placeholder="120/80" value="{{ old('presion_arterial') }}">
                        </div>
                        <div class="col-4 col-md-4 form-group">
                            <label class="small font-weight-bold">F.C. (lpm):</label>
                            <input type="number" name="frecuencia_cardiaca" class="form-control form-control-sm" placeholder="75" value="{{ old('frecuencia_cardiaca') }}">
                        </div>
                        <div class="col-4 col-md-4 form-group">
                            <label class="small font-weight-bold">F.R. (rpm):</label>
                            <input type="number" name="frecuencia_respiratoria" class="form-control form-control-sm" placeholder="18" value="{{ old('frecuencia_respiratoria') }}">
                        </div>
                        <div class="col-4 col-md-4 form-group">
                            <label class="small font-weight-bold">Temp (°C):</label>
                            <input type="number" step="0.1" name="temperatura" class="form-control form-control-sm" placeholder="36.5" value="{{ old('temperatura') }}">
                        </div>
                        <div class="col-4 col-md-4 form-group">
                            <label class="small font-weight-bold">SpO2 (%):</label>
                            <input type="number" name="saturacion_oxigeno" class="form-control form-control-sm" placeholder="98" value="{{ old('saturacion_oxigeno') }}">
                        </div>
                        <div class="col-4 col-md-4 form-group">
                            <label class="small font-weight-bold">Peso (kg):</label>
                            <input type="number" step="0.1" name="peso" class="form-control form-control-sm" placeholder="70" value="{{ old('peso') }}">
                        </div>
                    </div>

                    <div class="form-group mb-2">
                        <label class="small font-weight-bold">Indicaciones Médicas Inmediatas / Plan:</label>
                        <textarea name="plan_inicial" rows="2" class="form-control form-control-sm" placeholder="Ej: Canalizar vía periférica con NaCl 0.9% a 80ml/h. Reposo en cama semi-fowler.">{{ old('plan_inicial') }}</textarea>
                    </div>

                    <div class="form-group mb-0">
                        <label class="small font-weight-bold">Medicamentos Administrados al Ingreso:</label>
                        <input type="text" name="medicamentos_iniciales" class="form-control form-control-sm" placeholder="Ej: Ceftriaxona 1g IV stat, Omeprazol 40mg IV stat" value="{{ old('medicamentos_iniciales') }}">
                    </div>
                </div>
            </div>

            <!-- Botones de Acción -->
            <div class="card shadow-sm border-0">
                <div class="card-body p-3 text-right">
                    <a href="{{ route('admin.hospitalizaciones.index') }}" class="btn btn-secondary mr-2">
                        <i class="fas fa-times mr-1"></i> Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary font-weight-bold px-4 shadow">
                        <i class="fas fa-save mr-1"></i> Registrar Ingreso y Ocupar Cama
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const pacienteSelect = document.getElementById('pacienteSelect');
        const familiarInput = document.getElementById('familiarInput');
        const telefonoInput = document.getElementById('telefonoFamiliarInput');

        function actualizarFichaPaciente() {
            const selectedOption = pacienteSelect.options[pacienteSelect.selectedIndex];
            if (selectedOption && selectedOption.value) {
                document.getElementById('infoHistoria').textContent = selectedOption.dataset.historia || 'N/A';
                document.getElementById('infoCedula').textContent = selectedOption.dataset.cedula || 'N/A';
                document.getElementById('infoEdad').textContent = selectedOption.dataset.edad ? (selectedOption.dataset.edad + ' años') : 'N/A';
                document.getElementById('infoGenero').textContent = selectedOption.dataset.genero || 'N/A';
                document.getElementById('infoAlergias').textContent = selectedOption.dataset.alergias || 'Ninguna registrada';

                // Autollenar familiar de emergencia si existe y está vacío
                if (!familiarInput.value && selectedOption.dataset.contacto) {
                    familiarInput.value = selectedOption.dataset.contacto;
                }
                if (!telefonoInput.value && selectedOption.dataset.telefonoEmergencia) {
                    telefonoInput.value = selectedOption.dataset.telefonoEmergencia;
                }
            } else {
                document.getElementById('infoHistoria').textContent = '-';
                document.getElementById('infoCedula').textContent = '-';
                document.getElementById('infoEdad').textContent = '-';
                document.getElementById('infoGenero').textContent = '-';
                document.getElementById('infoAlergias').textContent = '-';
            }
        }

        pacienteSelect.addEventListener('change', actualizarFichaPaciente);
        actualizarFichaPaciente();

        // Control switch aislamiento
        const switchAis = document.getElementById('switchAislamiento');
        const divAis = document.getElementById('tipoAislamientoDiv');
        function toggleAislamiento() {
            if (switchAis.checked) {
                divAis.classList.remove('d-none');
            } else {
                divAis.classList.add('d-none');
            }
        }
        switchAis.addEventListener('change', toggleAislamiento);
        toggleAislamiento();
    });
</script>
@endsection