@extends('layouts.doctor')

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/slim-select/slimselect.min.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.min.css" rel="stylesheet">
    <style>
        :root {
            --sonrieme-azul: #1a2333;
            --sonrieme-azul-claro: #2c3a54;
            --sonrieme-rojo: #e34444;
            --sonrieme-verde: #81d112;
            --sonrieme-gris-fondo: #f4f6f9;
            --sonrieme-blanco: #ffffff;
        }

        /* --- OVERRIDES GLOBALES DE BOOTSTRAP --- */
        .bg-primary {
            background-color: var(--sonrieme-azul) !important;
        }

        .text-primary {
            color: var(--sonrieme-azul) !important;
        }

        .btn-primary {
            background-color: var(--sonrieme-azul) !important;
            border-color: var(--sonrieme-azul) !important;
        }

        .btn-primary:hover {
            background-color: var(--sonrieme-azul-claro) !important;
        }

        .btn-success {
            background-color: var(--sonrieme-verde) !important;
            border-color: var(--sonrieme-verde) !important;
        }

        /* --- PERFIL Y CONTENEDORES --- */
        body {
            background-color: var(--sonrieme-gris-fondo);
        }

        .avatar-profile {
            width: 85px;
            height: 85px;
            object-fit: cover;
            border: 4px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }

        /* --- WIZARD / MODAL --- */
        .modal-content {
            border-radius: 20px;
            overflow: hidden;
        }

        .step-label {
            font-size: 0.70rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .step-label.text-primary {
            color: var(--sonrieme-rojo) !important;
        }

        .progress {
            background-color: #e2e8f0;
            border-radius: 10px;
        }

        .progress-bar {
            background-color: var(--sonrieme-rojo) !important;
        }

        .list-group-item-action:hover {
            background-color: #f8fafc;
        }

        .form-check-input:checked {
            background-color: var(--sonrieme-rojo) !important;
            border-color: var(--sonrieme-rojo) !important;
        }

        /* --- BOTÓN FLOTANTE (FAB) --- */
        .fab-container {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 1050;
        }

        .fab-btn {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            background-color: var(--sonrieme-verde) !important;
            border: none;
            box-shadow: 0 6px 15px rgba(129, 209, 18, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: all 0.3s ease;
        }

        .fab-btn:hover {
            transform: scale(1.1) rotate(90deg);
            background-color: #71b90f !important;
        }

        .fixed-bottom .btn-primary {
            box-shadow: 0 -5px 15px rgba(26, 35, 51, 0.2);
            border: 2px solid white !important;
        }

        /* --- HISTORIAL CARDS --- */
        .card {
            border-radius: 15px;
            transition: transform 0.2s;
        }

        .card-history:hover {
            transform: translateY(-3px);
        }

        .badge.bg-light {
            color: var(--sonrieme-azul) !important;
            font-weight: 600;
        }

        /* --- INPUTS MODERNOS --- */
        .form-control:focus,
        .form-select:focus {
            border-color: var(--sonrieme-rojo);
            box-shadow: 0 0 0 0.25rem rgba(227, 68, 68, 0.1);
        }

        .ss-main {
            padding: 5px !important;
            border-radius: 8px !important;
        }

        .ss-content .ss-list .ss-option.ss-highlighted {
            background-color: var(--sonrieme-azul) !important;
        }

        /* 1. Subimos el sidebar por encima de los botones flotantes y los modales */
        .sidebar {
            z-index: 1100 !important;
            overflow: visible !important;
        }

        .sidebar .flex-grow-1 {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .sidebar .dropdown-menu {
            z-index: 1200 !important;
        }

        .fixed-bottom {
            left: 260px !important;
            width: auto !important;
        }

        @media (max-width: 768px) {
            .fixed-bottom {
                left: 0 !important;
            }
        }
    </style>
@endsection

@section('content')

    {{-- 1. PERFIL COMPACTO --}}
    <div class="container-fluid mt-3 mb-4">
        <div class="card border-0 shadow-sm rounded-4 bg-primary text-white">
            <div class="card-body d-flex align-items-center p-3">
                @if ($paciente->foto_perfil == null)
                    <img width="150" src="https://ui-avatars.com/api/?name={{ $paciente->nombre }}"
                        class="rounded-circle avatar-profile me-3" alt="{{ config('app.name') }}" srcset="">
                @else
                    <img width="150" src="{{ asset('storage/' . 'pacientes/fotos/' . $paciente->foto_perfil) }}"
                        class="rounded-circle avatar-profile me-3 " alt="{{ config('app.name') }}" srcset="">
                @endif
                <div>
                    <h5 class="mb-0 fw-bold text-white">{{ $paciente->nombre }}</h5>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <ul class="list-group list-group-numbered">
                    @foreach ($recordatorios as $recordatorio => $item)
                        <li class="list-group-item"> {{ $item->descripcion }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid mb-5 pb-5">
        @if ($errors->any())
            <div class="alert alert-danger shadow-sm rounded-3">
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- BOTÓN PRINCIPAL "CAMBIOS" (Abre el Wizard) --}}
        <div class="fixed-bottom p-3 d-flex justify-content-end pointer-events-none">
            <button type="button" class="btn btn-primary btn-lg shadow-lg rounded-pill px-4 py-3 pointer-events-auto"
                data-bs-toggle="modal" data-bs-target="#modalWizard">
                <i class="fas fa-edit me-2"></i> CAMBIOS / ATENCIÓN
            </button>
        </div>

        {{-- MODAL WIZARD (5 PASOS) --}}
        <div class="modal fade" id="modalWizard" tabindex="-1" data-bs-backdrop="static" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content border-0 shadow">

                    {{-- HEADER: BARRA DE PROGRESO --}}
                    <div class="modal-header bg-light pb-0 border-0">
                        <div class="w-100">
                            <div class="d-flex justify-content-between mb-2 px-2">
                                <small class="fw-bold text-primary step-label">1. Tratamientos</small>
                                <small class="fw-bold text-muted step-label">2. Diario</small>
                                <small class="fw-bold text-muted step-label">3. Recordatorios</small>
                                <small class="fw-bold text-muted step-label">4. Interconsulta</small>
                                <small class="fw-bold text-muted step-label">5. Resumen</small>
                            </div>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar bg-primary" id="progressBar" role="progressbar" style="width: 20%">
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn-close ms-3 align-self-start" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    {{-- FORMULARIO GLOBAL --}}
                    <form id="formAtencion" action="{{ route('doc.paciente-setPagosHistorialAndMore') }}" method="post">
                        @csrf
                        <input type="hidden" name="paciente_id" value="{{ $paciente->id }}">
                        <input type="hidden" name="doctor_id" value="{{ session()->get('doctor')['id'] }}">

                        <div class="modal-body p-4">

                            {{-- PASO 1: TRATAMIENTOS Y ASISTENTE --}}
                            <div class="step-content" id="step1">
                                <h5 class="fw-bold text-primary mb-3"><i class="fas fa-tooth me-2"></i>Seleccionar
                                    Tratamientos Realizados</h5>

                                @if (count($procedimientos) > 0)
                                    <div class="list-group mb-4 shadow-sm">
                                        @foreach ($procedimientos as $p)
                                            <label class="list-group-item d-flex gap-3 align-items-center p-3">
                                                <input class="form-check-input flex-shrink-0" type="checkbox"
                                                    name="procedimientos_ids[]" value="{{ $p->id }}"
                                                    style="font-size: 1.3em;" data-nombre="{{ $p->tratamiento->nombre }}">
                                                <div class="d-flex flex-column">
                                                    <span class="fw-bold text-dark">{{ $p->tratamiento->nombre }}</span>

                                                    @if ($p->tratamiento->tipo2 == 'ENDODONCIA')
                                                        @foreach ($paciente->rprotesis3->where('pieza', $p->pieza) as $protesis)
                                                            <a name="" id="" class="btn btn-primary"
                                                                href="{{ route('doc.paciente-hoja_endo', $protesis) }}"
                                                                role="button">
                                                                IR A {{ $protesis->pieza }} - {{ $protesis->fecha }}
                                                            </a>
                                                        @endforeach
                                                    @endif

                                                    <small class="text-muted">Pieza: {{ $p->pieza }} |
                                                        {{ $p->tratamiento->descripcion }} | Q. {{ number_format($p->valor, 2) }} </small>
                                                </div>
                                            </label>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="alert alert-warning">No hay tratamientos pendientes en la hoja actual.</div>
                                @endif

                                <div class="mb-3">
                                    <label class="form-label fw-bold text-muted small">Asistente en esta sesión</label>
                                    <select name="asistente" id="asistenteGlobal" class="" required>
                                        <option value="">Seleccione Asistente</option>
                                        @foreach ($users as $a)
                                            <option value="{{ $a->name }}">{{ $a->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- PASO 2: DIARIO (NOTAS CLINICAS) --}}
                            <div class="step-content d-none" id="step2">
                                <h5 class="fw-bold text-primary mb-3"><i class="fas fa-book-medical me-2"></i>Notas de
                                    Diario</h5>

                                <div class="mb-3">
                                    <label class="form-label fw-bold text-muted small">Descripción del Procedimiento
                                        (Diario)</label>
                                    <textarea class="form-control" name="descripcion" id="inputDescripcion" rows="4"
                                        placeholder="Detalle lo realizado hoy..."></textarea>
                                </div>
                                <div class="row">
                                    @if ($hoja == 11)
                                        <input type="text" name="hoja" value="{{ $hoja }}"
                                            class="form-control oculto-impresion" hidden>
                                        <input type="text" name="tipo" value="ORTODONCIA"
                                            class="form-control oculto-impresion" hidden>
                                    @endif

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label fw-bold text-muted small">Próxima Cita
                                            (Indicación)</label>
                                        <input type="text" class="form-control" name="proxima" id="inputProxima"
                                            placeholder="Ej: En 15 días para retiro de puntos">
                                    </div>
                                </div>
                            </div>

                            {{-- PASO 3: RECORDATORIOS --}}
                            <div class="step-content d-none" id="step3">
                                <h5 class="fw-bold text-primary mb-3"><i class="fas fa-bell me-2"></i>Recordatorios al
                                    Paciente</h5>

                                <div class="card bg-light border-0 p-3 mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="checkRecordatorio"
                                            name="enviar_recordatorio" value="1" checked>
                                        <label class="form-check-label fw-bold" for="checkRecordatorio">Enviar
                                            recordatorio de próxima cita</label>
                                    </div>
                                </div>

                                <div id="divRecordatorioOpciones">
                                    <div class="mb-3">
                                        <label class="form-label small text-muted">Medio de envío</label>
                                        <div class="btn-group w-100" role="group">
                                            <input type="radio" class="btn-check" name="medio_recordatorio"
                                                id="btnradio1" value="whatsapp" checked>
                                            <label class="btn btn-outline-success" for="btnradio1"><i
                                                    class="fab fa-whatsapp"></i> WhatsApp</label>

                                            <input type="radio" class="btn-check" name="medio_recordatorio"
                                                id="btnradio2" value="email">
                                            <label class="btn btn-outline-secondary" for="btnradio2"><i
                                                    class="far fa-envelope"></i> Email</label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small text-muted">Mensaje personalizado (Opcional)</label>
                                        <textarea class="form-control" name="mensaje_recordatorio" rows="2"
                                            placeholder="Hola {{ $paciente->nombre }}, recuerda..."></textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- PASO 4: DETALLES DE LA CITA (NUEVO) --}}
                            <div class="step-content d-none" id="step4">
                                <h5 class="fw-bold text-primary mb-3"><i class="fas fa-calendar-alt me-2"></i>Detalles de Interconsulta</h5>

                                <div class="row">
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="doctor" class="form-label fw-bold text-muted small">Doctor</label>
                                        <input type="text" name="doctor" id="doctor"
                                            class="form-control @error('doctor') is-invalid @enderror" 
                                            value="{{ old('doctor', session()->get('doctor')['nombre'] ?? '') }}" 
                                            required>
                                        @error('doctor')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                  
                                </div>

                                <div class="row">
                                    <div class="col-md-12 form-group mb-3">
                                        <label for="nota" class="form-label fw-bold text-muted small">Nota</label>
                                        <textarea name="nota" id="nota" class="form-control @error('nota') is-invalid @enderror" rows="3">{{ old('nota') }}</textarea>
                                        @error('nota')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="fecha_proxima_cita" class="form-label fw-bold text-muted small">Fecha Próxima Cita</label>
                                        <input type="datetime-local" name="fecha_proxima_cita" id="fecha_proxima_cita"
                                            class="form-control @error('fecha_proxima_cita') is-invalid @enderror"
                                            value="{{ old('fecha_proxima_cita') }}">
                                        @error('fecha_proxima_cita')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-6 form-group mb-3 d-flex align-items-center">
                                        <div class="form-check mt-4">
                                            <input type="checkbox" name="visible" id="visible" class="form-check-input"
                                                value="1" {{ old('visible', 1) ? 'checked' : '' }}>
                                            <label class="form-check-label fw-bold text-muted small" for="visible">Visible</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- PASO 5: RESUMEN --}}
                            <div class="step-content d-none" id="step5">
                                <h5 class="fw-bold text-primary mb-3"><i class="fas fa-clipboard-check me-2"></i>Resumen
                                    de Cambios</h5>

                                <div class="card border-0 shadow-sm bg-light">
                                    <div class="card-body">
                                        <h6 class="fw-bold small text-uppercase text-muted">Tratamientos a Marcar:</h6>
                                        <ul class="mb-3 ps-3" id="resumenTratamientos">
                                        </ul>

                                        <h6 class="fw-bold small text-uppercase text-muted">Asistente:</h6>
                                        <p class="mb-3" id="resumenAsistente">--</p>

                                        <h6 class="fw-bold small text-uppercase text-muted">Nota de Diario:</h6>
                                        <p class="mb-0 fst-italic text-secondary" id="resumenNota">--</p>

                                        <hr class="my-3">

                                        <h6 class="fw-bold small text-uppercase text-muted">Detalles de la Cita:</h6>
                                        <p class="mb-1" id="resumenDoctor"><strong>Doctor:</strong> --</p>
                                        <p class="mb-1" id="resumenAsistenteCita"><strong>Asistente:</strong> --</p>
                                        <p class="mb-1" id="resumenNotaCita"><strong>Nota:</strong> --</p>
                                        <p class="mb-0" id="resumenFechaCita"><strong>Fecha Próxima:</strong> --</p>
                                    </div>
                                </div>

                                <div class="alert alert-info mt-3 d-flex align-items-center">
                                    <i class="fas fa-info-circle fa-2x me-3"></i>
                                    <div>
                                        <small>Al confirmar, se guardarán los tratamientos, se creará el registro en el
                                            diario y se programará el recordatorio.</small>
                                    </div>
                                </div>
                            </div>

                        </div>

                        {{-- FOOTER: BOTONES DE NAVEGACIÓN --}}
                        <div class="modal-footer border-0 pt-0 justify-content-between">
                            <button type="button" class="btn btn-light" id="btnPrev" style="display:none;">
                                <i class="fas fa-arrow-left me-2"></i> Atrás
                            </button>

                            <button type="button" class="btn btn-primary px-4" id="btnNext">
                                Siguiente <i class="fas fa-arrow-right ms-2"></i>
                            </button>

                            <button type="submit" class="btn btn-success px-4" id="btnFinish" style="display:none;"
                                onclick="return confirm('¿Confirma guardar todos los cambios?')">
                                <i class="fas fa-save me-2"></i> Finalizar y Guardar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- 3. HISTORIAL REALIZADO (CARDS) --}}
        <div class="d-flex justify-content-between align-items-center mb-3 mt-4">
            <h6 class="text-uppercase text-muted fw-bold small ls-1">Historial Realizado</h6>
            <small class="text-muted">Dr. {{ session()->get('doctor')['nombre'] }}</small>
        </div>

        <div class="row g-3">
            @forelse ($procedimientos_doc as $p)
                <div class="col-12 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h6 class="fw-bold text-primary mb-0">{{ $p->tratamiento->nombre }}</h6>
                                <span
                                    class="badge bg-light text-dark border">{{ \Carbon\Carbon::parse($p->fecha)->format('d/m/Y') }}</span>
                            </div>

                            <p class="small text-muted mb-2">
                                {{ $p->tratamiento->descripcion }} ({{ $p->tratamiento->tipo }})
                            </p>

                            @if ($p->recomendacion)
                                <div class="alert alert-secondary p-2 mb-2 small">
                                    <i class="fas fa-comment-medical me-1"></i> {{ $p->recomendacion }}
                                </div>
                            @endif

                            @php $diarios = getDairioToFecha($p->paciente_id, $p->fecha); @endphp

                            @if (count($diarios) > 0)
                                <button class="btn btn-sm btn-outline-info w-100 mt-2" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#historialDiario{{ $p->id }}">
                                    <i class="fas fa-book-medical me-1"></i> Ver Notas Diario
                                </button>
                                <div class="collapse mt-2" id="historialDiario{{ $p->id }}">
                                    <div class="card card-body bg-light p-2 small border-0">
                                        @foreach ($diarios as $diario)
                                            <div class="mb-2 border-bottom pb-2">
                                                <strong>Nota:</strong> {{ $diario->descripcion }}<br>
                                                <strong>Próxima:</strong> {{ $diario->proxima }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="text-center text-muted py-3">No has realizado procedimientos hoy.</div>
                </div>
            @endforelse
        </div>

    </div>

    {{-- 4. BOTÓN FLOTANTE (FAB) PARA DIARIO --}}
    <div class="fab-container">
        <button type="button" class="btn btn-success fab-btn text-white" data-bs-toggle="modal"
            data-bs-target="#diario">
            <i class="fas fa-plus"></i>
        </button>
    </div>

    <div class="modal fade" id="diario" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title fw-bold">Nuevo Diario</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form action="{{ route('doc.diario-store') }}" method="post">
                    @csrf
                    <input type="hidden" name="paciente_id" value="{{ $paciente->id }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label text-muted small fw-bold">Doctor</label>
                            <input type="text" class="form-control bg-light"
                                value="{{ session()->get('doctor')['nombre'] }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-muted small fw-bold">Descripción de la Cita</label>
                            <textarea class="form-control" name="descripcion" rows="4" required></textarea>
                        </div>
                        <div class="row">
                            <div class="col-6 mb-3">
                                <label class="form-label text-muted small fw-bold">Pieza(s)</label>
                                <input type="text" class="form-control" name="piezas">
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label text-muted small fw-bold">Próxima Cita</label>
                                <input type="text" class="form-control" name="proxima">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-success px-4">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="{{ asset('plugins/slim-select/slimselect.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.1/dist/sweetalert2.all.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Inicializar SlimSelect para el asistente global
            new SlimSelect({
                select: '#asistenteGlobal',
                placeholder: 'Seleccione Asistente',
            });

            // Variables del Wizard
            let currentStep = 1;
            const totalSteps = 5;

            const btnNext = document.getElementById('btnNext');
            const btnPrev = document.getElementById('btnPrev');
            const btnFinish = document.getElementById('btnFinish');
            const progressBar = document.getElementById('progressBar');

            // Manejo del botón Siguiente
            btnNext.addEventListener('click', () => {
                if (!validateStep(currentStep)) return;

                if (currentStep < totalSteps) {
                    document.getElementById(`step${currentStep}`).classList.add('d-none');
                    currentStep++;
                    document.getElementById(`step${currentStep}`).classList.remove('d-none');
                    updateWizardUI();

                    // Si llegamos al paso 5 (resumen), lo llenamos
                    if (currentStep === totalSteps) {
                        populateSummary();
                    }
                }
            });

            // Manejo del botón Atrás
            btnPrev.addEventListener('click', () => {
                if (currentStep > 1) {
                    document.getElementById(`step${currentStep}`).classList.add('d-none');
                    currentStep--;
                    document.getElementById(`step${currentStep}`).classList.remove('d-none');
                    updateWizardUI();
                }
            });

            // Función para actualizar barra, textos y botones
            function updateWizardUI() {
                const percent = (currentStep / totalSteps) * 100;
                progressBar.style.width = `${percent}%`;

                const labels = document.querySelectorAll('.step-label');
                labels.forEach((lbl, index) => {
                    if (index + 1 === currentStep) {
                        lbl.classList.remove('text-muted');
                        lbl.classList.add('text-primary');
                    } else {
                        lbl.classList.add('text-muted');
                        lbl.classList.remove('text-primary');
                    }
                });

                btnPrev.style.display = (currentStep === 1) ? 'none' : 'block';

                if (currentStep === totalSteps) {
                    btnNext.style.display = 'none';
                    btnFinish.style.display = 'block';
                } else {
                    btnNext.style.display = 'block';
                    btnFinish.style.display = 'none';
                }
            }

            // Validación simple por paso
            function validateStep(step) {
                if (step === 1) {
                    const asistente = document.getElementById('asistenteGlobal').value;
                    if (!asistente) {
                        Swal.fire('Atención', 'Debe seleccionar un asistente', 'warning');
                        return false;
                    }
                }
                if (step === 2) {
                    const desc = document.getElementById('inputDescripcion').value;
                    if (!desc.trim()) {
                        Swal.fire('Atención', 'La nota de diario es obligatoria', 'warning');
                        return false;
                    }
                }
                return true;
            }

            // Llenar el resumen del paso 5
            function populateSummary() {
                // Tratamientos
                const checkboxes = document.querySelectorAll('input[name="procedimientos_ids[]"]:checked');
                const lista = document.getElementById('resumenTratamientos');
                lista.innerHTML = '';

                if (checkboxes.length > 0) {
                    checkboxes.forEach(chk => {
                        const li = document.createElement('li');
                        li.textContent = chk.getAttribute('data-nombre');
                        lista.appendChild(li);
                    });
                } else {
                    lista.innerHTML = '<li class="text-muted">Ninguno seleccionado (Solo nota de diario)</li>';
                }

                // Asistente del paso 1
                document.getElementById('resumenAsistente').textContent = document.getElementById('asistenteGlobal')
                    .value || '--';

                // Nota del paso 2
                document.getElementById('resumenNota').textContent = document.getElementById('inputDescripcion')
                    .value || 'Sin descripción';

                // Datos del paso 4 (Detalles de cita)
                const doctor = document.getElementById('doctor').value || '--';
                const asistente = document.getElementById('asistente').value || '--';
                const nota = document.getElementById('nota').value || '--';
                const fechaCita = document.getElementById('fecha_proxima_cita').value || '--';
                const visible = document.getElementById('visible').checked ? 'Sí' : 'No';

                document.getElementById('resumenDoctor').innerHTML = `<strong>Doctor:</strong> ${doctor}`;
                document.getElementById('resumenAsistenteCita').innerHTML = `<strong>Asistente:</strong> ${asistente}`;
                document.getElementById('resumenNotaCita').innerHTML = `<strong>Nota:</strong> ${nota}`;
                document.getElementById('resumenFechaCita').innerHTML = `<strong>Fecha Próxima:</strong> ${fechaCita}`;
            }

            // Toggle recordatorio
            document.getElementById('checkRecordatorio').addEventListener('change', function() {
                const div = document.getElementById('divRecordatorioOpciones');
                if (this.checked) div.classList.remove('d-none');
                else div.classList.add('d-none');
            });

            // Inicializar UI
            updateWizardUI();
        });
    </script>
@endsection