@extends('layouts.portal')

@section('title', 'Agendar Cita')

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    /* Estilos mejorados para la página de citas */
    .hero-section {
        background: linear-gradient(135deg, #3b5ca3, #88c4ec);
        color: white;
        padding: 80px 0;
        position: relative;
        min-height: 300px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .hero-section::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L80,122.7C160,149,320,203,480,202.7C640,203,800,149,960,138.7C1120,128,1280,160,1360,176L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: cover;
        background-repeat: no-repeat;
        transform: translateY(1px);
        z-index: 1;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
        font-weight: 700;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        margin-bottom: 0.8rem;
    }
    
    .hero-content p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto;
        opacity: 0.9;
    }
    
    .appointment-form-section {
        padding: 60px 0;
        position: relative;
    }
    
    .form-card {
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
        transition: all 0.3s;
        border: none;
        overflow: hidden;
    }
    
    .form-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(50, 50, 93, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .form-card .card-body {
        padding: 2.5rem !important;
    }
    
    .form-card .card-title {
        font-weight: 700;
        color: #0067b1;
        position: relative;
        display: inline-block;
        margin-bottom: 1.5rem;
    }
    
    .form-card .card-title::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 3px;
        background: #8c589c;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;
    }
    
    .form-label {
        font-weight: 600;
        font-size: 0.95rem;
        color: #2c749c;
        margin-bottom: 0.5rem;
    }
    
    .form-control, .form-select {
        padding: 0.8rem 1rem;
        border-radius: 10px;
        border: 2px solid #e9ecef;
        font-size: 1rem;
        transition: all 0.3s;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #5cb4e4;
        box-shadow: 0 0 0 0.2rem rgba(92, 180, 228, 0.25);
    }
    
    .form-text {
        color: #6c757d;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #3b5ca3, #5cb4e4);
        border: none;
        padding: 1rem 2rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, #4b6cb3, #6cc4f4);
    }
    
    .btn-light {
        background: rgba(255, 255, 255, 0.9);
        color: #8c589c;
        font-weight: 600;
        border: none;
        box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        border-radius: 10px;
        padding: 0.75rem 1.5rem;
    }
    
    .btn-light:hover {
        background: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    }
    
    .info-section {
        background-color: #f8fafc;
        border-radius: 20px;
        padding: 60px 0;
        margin-top: 80px;
        position: relative;
    }
    
    .section-title {
        text-align: center;
        margin-bottom: 50px;
    }
    
    .section-title h2 {
        font-weight: 700;
        color: #3b5ca3;
        position: relative;
        display: inline-block;
        margin-bottom: 15px;
    }
    
    .section-title h2::after {
        content: '';
        position: absolute;
        width: 70px;
        height: 3px;
        background: #1c935d;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;
    }
    
    .section-title p {
        color: #6c757d;
        font-size: 1.1rem;
    }
    
    .info-card {
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: all 0.3s;
        border: none !important;
        height: 100%;
    }
    
    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
    }
    
    .info-card .card-title {
        color: #8c589c;
        font-weight: 700;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
    }
    
    .info-card .card-title i {
        font-size: 1.5rem;
        color: #5cb4e4;
        margin-right: 0.75rem;
    }
    
    .info-card .list-group-item {
        padding: 0.75rem 0;
        display: flex;
        align-items: flex-start;
    }
    
    .info-card .list-group-item i {
        margin-right: 0.75rem;
        margin-top: 0.25rem;
    }
    
    .cta-section {
        background: linear-gradient(135deg, #e53935, #8e24aa);
        color: white;
        padding: 60px 0;
        margin-top: 80px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }
    
    .cta-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        opacity: 0.5;
    }
    
    .cta-content {
        position: relative;
        z-index: 1;
        text-align: center;
    }
    
    .cta-content h2 {
        font-weight: 700;
        font-size: 2.2rem;
        margin-bottom: 1rem;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    .alert {
        border-radius: 10px;
        padding: 1rem 1.5rem;
    }
    
    .alert-success {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }
    
    .alert-danger {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }
    
    /* Personalización del datepicker */
    .flatpickr-calendar {
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        border-radius: 10px !important;
    }
    
    .flatpickr-day.selected {
        background: #4a90e2 !important;
        border-color: #4a90e2 !important;
    }
    
    .flatpickr-day:hover {
        background: rgba(74, 144, 226, 0.1) !important;
    }
    
    /* Animaciones */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .animated-element {
        animation: fadeIn 0.6s ease-out forwards;
    }
    
    .delay-1 {
        animation-delay: 0.2s;
    }
    
    .delay-2 {
        animation-delay: 0.4s;
    }
    
    .delay-3 {
        animation-delay: 0.6s;
    }
</style>
@endsection

@section('content')
    <!-- Page Header -->
    <section class="hero-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 hero-content text-center">
                    <h1><i class="fas fa-calendar-check me-2"></i>Agendar Cita Médica</h1>
                    <p>Reserve su cita con nuestros especialistas de manera rápida y sencilla</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Appointments Form Section -->
    <section class="appointment-form-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto animated-element">
                    <div class="card form-card">
                        <div class="card-body">
                            @if (session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                            
                            @if (session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            <h3 class="card-title text-center">Información de la Cita</h3>
                            
                            <form action="{{ route('portal.storeAppointment') }}" method="POST" id="appointmentForm" class="needs-validation" novalidate>
                                @csrf
                                <div class="mb-4">
                                    <label for="patientIdentificationNumber" class="form-label">
                                        <i class="fas fa-id-card text-primary me-2"></i>Número de Identificación del Paciente *
                                    </label>
                                    <input type="text" class="form-control @error('patientIdentificationNumber') is-invalid @enderror" id="patientIdentificationNumber" name="patientIdentificationNumber" value="{{ old('patientIdentificationNumber') }}" required>
                                    <small class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>Ingrese su número de DNI o documento de identidad. Si no está registrado, <a href="{{ route('portal.register') }}" class="text-decoration-none">regístrese primero aquí</a>.
                                    </small>
                                    @error('patientIdentificationNumber')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="mb-4">
                                    <label for="especiality" class="form-label">
                                        <i class="fas fa-stethoscope text-primary me-2"></i>Especialidad Médica *
                                    </label>
                                    <select class="form-select @error('especiality') is-invalid @enderror" id="especiality" name="especiality" required>
                                        <option value="">Seleccione una especialidad</option>
                                        @foreach($especialities as $id => $name)
                                            <option value="{{ $id }}" {{ old('especiality') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    @error('especiality')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="mb-4">
                                    <label for="users_id" class="form-label">
                                        <i class="fas fa-user-md text-primary me-2"></i>Médico *
                                    </label>
                                    <select class="form-select @error('users_id') is-invalid @enderror" id="users_id" name="users_id" required>
                                        <option value="">Seleccione un médico</option>
                                        @foreach($doctors as $doctor)
                                            <option value="{{ $doctor->id }}" {{ old('users_id') == $doctor->id ? 'selected' : '' }}>Dr. {{ $doctor->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('users_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="mb-4">
                                    <label class="form-label">
                                        <i class="fas fa-calendar-day text-primary me-2"></i>Días de la Semana *
                                    </label>
                                    <div class="d-flex flex-wrap gap-3 mb-3" id="dayRadioGroup">
                                        @php
                                            $days = [
                                                'monday' => 'Lunes',
                                                'tuesday' => 'Martes',
                                                'wednesday' => 'Miércoles',
                                                'thursday' => 'Jueves',
                                                'friday' => 'Viernes',
                                                'saturday' => 'Sábado',
                                                'sunday' => 'Domingo'
                                            ];
                                        @endphp
                                        @foreach($days as $key => $day)
                                            <div class="form-check">
                                                <input class="form-check-input day-radio" type="radio" id="day-{{ $key }}" name="day" value="{{ $key }}" disabled>
                                                <label class="form-check-label" for="day-{{ $key }}">{{ $day }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('day')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <div id="dayError" class="invalid-feedback d-none">Por favor seleccione un día de la semana</div>
                                    
                                    <div class="mb-3">
                                        <label for="time" class="form-label">
                                            <i class="fas fa-clock text-primary me-2"></i>Hora de la Cita *
                                        </label>
                                        <select class="form-select @error('time') is-invalid @enderror" id="time" name="time" required disabled>
                                            <option value="">Seleccione un día primero</option>
                                        </select>
                                        <div class="form-text">Las horas disponibles se mostrarán después de seleccionar un día</div>
                                        @error('time')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    
                                    <!-- Panel de disponibilidad -->
                                    <div class="availability-container mt-3" id="availabilityContainer" style="display: none;">
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body p-3">
                                                <div class="availability-header">
                                                    <i class="fas fa-calendar-check text-primary"></i>
                                                    <h6 class="mb-0 fw-bold">Disponibilidad del Doctor</h6>
                                                </div>
                                                
                                                <div class="availability-section">
                                                    <div class="availability-section-title">
                                                        <i class="far fa-calendar-alt me-1"></i> Horario de atención:
                                                    </div>
                                                    <div class="availability-slots" id="availableHoursList">
                                                        <!-- Se llenará dinámicamente -->
                                                    </div>
                                                </div>
                                                
                                                <div class="availability-section">
                                                    <div class="availability-section-title">
                                                        <i class="far fa-clock me-1"></i> Próximas citas agendadas:
                                                    </div>
                                                    <div class="availability-slots" id="bookedSlotsList">
                                                        <!-- Se llenará dinámicamente -->
                                                    </div>
                                                    <p class="text-muted small mt-2 mb-0" id="noBookedSlots">No hay citas agendadas.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="summary" class="form-label">
                                        <i class="fas fa-comment-medical text-primary me-2"></i>Motivo de la Consulta
                                    </label>
                                    <textarea class="form-control @error('summary') is-invalid @enderror" id="summary" name="summary" rows="3" placeholder="Describa brevemente el motivo de su consulta...">{{ old('summary') }}</textarea>
                                    <small class="form-text">
                                        <i class="fas fa-lightbulb me-1"></i>Describa brevemente el motivo de su consulta para ayudar a nuestros especialistas a prepararse mejor
                                    </small>
                                    @error('summary')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input @error('privacy') is-invalid @enderror" type="checkbox" id="privacy" name="privacy" required>
                                        <label class="form-check-label" for="privacy">
                                            Acepto la política de privacidad y autorizo el tratamiento de mis datos para la gestión de la cita *
                                        </label>
                                        @error('privacy')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-calendar-check me-2"></i>Agendar Cita
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <p>¿Tiene preguntas sobre su cita? <a href="{{ route('portal.contact') }}" class="text-decoration-none fw-bold">Contáctenos</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Information Section -->
    <section class="info-section animated-element delay-1">
        <div class="container">
            <div class="section-title">
                <h2>Información importante</h2>
                <p>Recomendaciones para su visita médica</p>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="card info-card mb-4">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fas fa-clipboard-list"></i>Antes de su cita</h5>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item border-0"><i class="fas fa-check text-success"></i>Llegue 15 minutos antes de la hora programada.</li>
                                <li class="list-group-item border-0"><i class="fas fa-check text-success"></i>Traiga su identificación y tarjeta de seguro médico (si aplica).</li>
                                <li class="list-group-item border-0"><i class="fas fa-check text-success"></i>Prepare una lista de medicamentos que esté tomando actualmente.</li>
                                <li class="list-group-item border-0"><i class="fas fa-check text-success"></i>Si tiene exámenes previos, tráigalos a la consulta.</li>
                                <li class="list-group-item border-0"><i class="fas fa-check text-success"></i>Anote sus síntomas y preguntas para el médico.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card info-card mb-4">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fas fa-hourglass-half"></i>Políticas de cancelación</h5>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item border-0"><i class="fas fa-info-circle text-info"></i>Puede cancelar o reprogramar su cita hasta 24 horas antes.</li>
                                <li class="list-group-item border-0"><i class="fas fa-info-circle text-info"></i>Las cancelaciones con menos de 24 horas pueden generar un cargo.</li>
                                <li class="list-group-item border-0"><i class="fas fa-info-circle text-info"></i>Para cancelar, llame a nuestro número de contacto o envíe un email.</li>
                                <li class="list-group-item border-0"><i class="fas fa-info-circle text-info"></i>En caso de emergencia, comuníquese lo antes posible.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-4 animated-element delay-2">
                <div class="col-lg-12">
                    <div class="card info-card">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fas fa-exclamation-triangle text-warning"></i>Aviso importante</h5>
                            <p>Si presenta síntomas de enfermedades altamente contagiosas (como fiebre alta, tos severa, dificultad para respirar), por favor llame antes de asistir a su cita para recibir instrucciones específicas. Su seguridad y la de nuestros demás pacientes es nuestra prioridad.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call To Action -->
    <section class="cta-section animated-element delay-3">
        <div class="container">
            <div class="cta-content">
                <h2>¿Necesita atención urgente?</h2>
                <p class="mb-4">Llame a nuestro número de emergencias o visite nuestras instalaciones inmediatamente.</p>
                <a href="tel:{{ $clinicIdentity->emergency_contact ?? '+1234567890' }}" class="btn btn-light">
                    <i class="fas fa-phone-alt me-2"></i> {{ $clinicIdentity->emergency_contact ?? 'Llamar a Emergencias' }}
                </a>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Mapa de días de la semana para mostrar en la interfaz
    const weekDaysMap = {
        0: 'Domingo',
        1: 'Lunes',
        2: 'Martes',
        3: 'Miércoles',
        4: 'Jueves',
        5: 'Viernes',
        6: 'Sábado'
    };

    document.addEventListener('DOMContentLoaded', function() {
        // Inicializar instancia de flatpickr
        window.flatpickrInstances = {
            date: flatpickr("#date", {
                enableTime: true,
                dateFormat: "d/m/Y H:i:00",
                minDate: 'today',
                locale: 'es',
                time_24hr: true,
                disable: [
                    function(date) {
                        // Deshabilitar días que no estén en el horario del doctor
                        if (window.doctorScheduleDays && window.doctorScheduleDays.length > 0) {
                            const dayOfWeek = date.getDay(); // 0 (domingo) a 6 (sábado)
                            const dayNames = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
                            const dayName = dayNames[dayOfWeek];
                            return !window.doctorScheduleDays.includes(dayName);
                        }
                        return true; // Deshabilitar todos los días hasta que se seleccione un doctor
                    }
                ],
                onOpen: function(selectedDates, dateStr, instance) {
                    // Mostrar mensaje si no hay días disponibles
                    if (window.doctorScheduleDays && window.doctorScheduleDays.length === 0) {
                        Swal.fire({
                            icon: 'info',
                            title: 'Sin horarios disponibles',
                            text: 'Por favor seleccione un doctor para ver los horarios disponibles.',
                            confirmButtonText: 'Entendido'
                        });
                    }
                }
            })
        };
        
        // Deshabilitar el campo de fecha hasta que se seleccione un doctor
        const dateInput = document.getElementById('date');
        if (dateInput) dateInput.disabled = true;
        
        // Manejar el cambio de especialidad para cargar doctores
        const especialitySelect = document.getElementById('especiality');
        const doctorSelect = document.getElementById('users_id');
        
        if (especialitySelect && doctorSelect) {
            // Función para actualizar la visualización de disponibilidad
            function updateAvailabilityDisplay(data) {
                const container = document.getElementById('availabilityContainer');
                const availableHoursList = document.getElementById('availableHoursList');
                const bookedSlotsList = document.getElementById('bookedSlotsList');
                const noBookedSlots = document.getElementById('noBookedSlots');
                
                if (!data.availableDays || data.availableDays.length === 0) {
                    container.style.display = 'none';
                    return;
                }
                
                // Mostrar disponibilidad
                availableHoursList.innerHTML = data.availableDays.map(day => {
                    // Formatear el día de la semana
                    const dayName = day.dayName ? day.dayName.charAt(0).toUpperCase() + day.dayName.slice(1) : '';
                    return `
                        <div class="availability-badge available-slot">
                            <i class="far fa-calendar-alt"></i>
                            <span>${dayName}:</span>
                            <span class="time-range">${day.startTime || ''} - ${day.endTime || ''}</span>
                        </div>`;
                }).join('');
                
                // Mostrar citas agendadas
                if (data.bookedSlots && data.bookedSlots.length > 0) {
                    noBookedSlots.style.display = 'none';
                    bookedSlotsList.innerHTML = data.bookedSlots.map(slot => {
                        try {   
                            const today = new Date();
                            const date = new Date(slot.date + 'T' + slot.time);
                            debugger;
                            const options = { weekday: 'short', month: 'short', day: 'numeric' };
                            const formattedDate = date.toLocaleDateString('es-ES', options);
                            const formattedTime = slot.time ? slot.time.substring(0, 5) : '';
                            
                            return `
                                <div class="availability-badge booked-slot" title="Cita agendada">
                                    <i class="far fa-clock"></i>
                                    ${formattedDate} ${formattedTime}
                                </div>`;
                        } catch (e) {
                            console.error('Error formateando fecha de cita:', e);
                            return '';
                        }
                    }).filter(Boolean).join('');
                } else {
                    noBookedSlots.style.display = 'block';
                    bookedSlotsList.innerHTML = '';
                }
                
                container.style.display = 'block';
            }

            // Función para cargar los doctores de una especialidad
            const loadDoctorsBySpeciality = (especialityId) => {
                // Resetear campos dependientes
                doctorSelect.disabled = true;
                doctorSelect.innerHTML = '<option value="">Cargando doctores...</option>';

                window.doctorScheduleDays = [];
                
                // Redibujar el calendario
                if (window.flatpickrInstances && window.flatpickrInstances.date) {
                   
                }
                
                if (!especialityId) {
                    doctorSelect.innerHTML = '<option value="">Seleccione una especialidad</option>';
                    return;
                }
                
                // Hacer la petición AJAX para obtener los doctores de la especialidad
                $.ajax({
                    url: `/api/doctors/by-especiality/${especialityId}`,
                    type: 'GET',
                    success: function(response) {
                        // Limpiar y actualizar el select de doctores
                        doctorSelect.innerHTML = '<option value="">Seleccione un doctor</option>';
                        
                        if (response.doctors && response.doctors.length > 0) {
                            // Agregar doctores al select
                            response.doctors.forEach(doctor => {
                                const option = new Option(doctor.name, doctor.id);
                                doctorSelect.add(option);
                            });
                            
                            // Habilitar el select de doctores
                            doctorSelect.disabled = false;
                            
                            // Mostrar mensaje de éxito
                            Swal.fire({
                                icon: 'success',
                                title: 'Doctores cargados',
                                text: `Se encontraron ${response.doctors.length} doctores disponibles.`,
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000
                            });
                        } else {
                            doctorSelect.innerHTML = '<option value="" disabled>No hay doctores disponibles</option>';
                            
                            Swal.fire({
                                icon: 'info',
                                title: 'Sin doctores',
                                text: 'No hay doctores disponibles para esta especialidad.',
                                confirmButtonText: 'Entendido'
                            });
                        }
                    },
                    error: function(error) {
                        console.error('Error al cargar los doctores:', error);
                        doctorSelect.innerHTML = '<option value="">Error al cargar los doctores</option>';
                        
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudieron cargar los doctores. Por favor, intente de nuevo.',
                            confirmButtonText: 'Aceptar'
                        });
                    }
                });
            };
            
            // Función para cargar el horario de un doctor
            const loadDoctorSchedule = (doctorId) => {
                // Resetar campos dependientes
              
                window.doctorScheduleDays = [];
                document.getElementById('availabilityContainer').style.display = 'none';
                
                // Redibujar el calendario
                if (window.flatpickrInstances && window.flatpickrInstances.date) {
                   
                }
                
                if (!doctorId) return;
                
                // Mostrar loading
                Swal.fire({
                    title: 'Cargando horarios',
                    text: 'Obteniendo los horarios disponibles del doctor...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                // Mostrar loading en el panel de disponibilidad
                const availableHoursList = document.getElementById('availableHoursList');
                availableHoursList.innerHTML = '<div class="text-muted small">Cargando horarios...</div>';
                document.getElementById('bookedSlotsList').innerHTML = '';
                document.getElementById('noBookedSlots').style.display = 'none';
                document.getElementById('availabilityContainer').style.display = 'block';
                
                // Hacer la petición AJAX para obtener el horario del doctor
                $.ajax({
                    url: `/api/doctors/${doctorId}/available-schedules`,
                    type: 'GET',
                    success: function(response) {
                        Swal.close();
                        
                        // Verificar si hay días disponibles
                        if (!response.availableDays || response.availableDays.length === 0) {
                            window.doctorScheduleDays = [];
                            dateInput.disabled = true;
                            document.getElementById('availabilityContainer').style.display = 'none';
                            
                            Swal.fire({
                                icon: 'warning',
                                title: 'Sin horarios',
                                text: 'El doctor seleccionado no tiene horarios configurados.',
                                confirmButtonText: 'Entendido'
                            });
                            
                            return;
                        }
                        
                        // Mapear los días disponibles al formato esperado
                        const dayNameMap = {
                            0: 'sunday',
                            1: 'monday',
                            2: 'tuesday',
                            3: 'wednesday',
                            4: 'thursday',
                            5: 'friday',
                            6: 'saturday'
                        };
                        
                        // Extraer los días disponibles
                        const availableDays = response.availableDays.map(day => {
                            if (typeof day === 'object' && day.dayOfWeek !== undefined) {
                                return dayNameMap[day.dayOfWeek] || day.dayOfWeek.toLowerCase();
                            }
                            return day.toLowerCase();
                        });
                        
                        // Almacenar el horario completo globalmente
                        window.doctorSchedule = response;
                        window.doctorScheduleDays = availableDays;
                        
                        // Actualizar la interfaz con la disponibilidad
                        updateAvailabilityDisplay(response);
                        
                        // Actualizar los días en los radio buttons
                        const dayRadios = document.querySelectorAll('input[name="day"]');
                        dayRadios.forEach(radio => {
                            const dayValue = radio.value.toLowerCase();
                            const isAvailable = availableDays.includes(dayValue);
                            radio.disabled = !isAvailable;
                            radio.parentElement.style.opacity = isAvailable ? '1' : '0.5';
                            radio.parentElement.title = isAvailable ? '' : 'Día no disponible';
                        });
                        
                        // Limpiar selección previa
                        const checkedRadio = document.querySelector('input[name="day"]:checked');
                        if (checkedRadio) {
                            checkedRadio.checked = false;
                        }
                        document.getElementById('time').innerHTML = '<option value="">Seleccione una hora</option>';
                        
                        // Actualizar flatpickr con los días disponibles
                        /*window.flatpickrInstances.date.set('enable', [
                            function(date) {
                                const dayOfWeek = date.getDay();
                                const dayNames = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
                                const dayName = dayNames[dayOfWeek];
                                return window.doctorScheduleDays.includes(dayName);
                            }
                        ]);*/
                        
                        // Mostrar mensaje con los días disponibles
                        const availableDaysText = availableDays.map(day => {
                            const dayIndex = Object.values(dayNameMap).indexOf(day);
                            return weekDaysMap[dayIndex] || day.charAt(0).toUpperCase() + day.slice(1);
                        }).join(', ');
                        
                        Swal.fire({
                            icon: 'success',
                            title: 'Horarios disponibles',
                            html: `Puede agendar una cita los siguientes días:<br><strong>${availableDaysText}</strong>`,
                            confirmButtonText: 'Entendido'
                        });
                    },
                    error: function(error) {
                        console.error('Error al cargar el horario del doctor:', error);
                        document.getElementById('availabilityContainer').style.display = 'none';
                        
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudo cargar el horario del doctor. Por favor, intente de nuevo.',
                            confirmButtonText: 'Aceptar'
                        });
                    }
                });
            };

            // La función updateAvailabilityDisplay ha sido movida al inicio del bloque de código

            // Manejar cambio de día seleccionado
            document.querySelectorAll('input[name="day"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.checked && window.doctorSchedule) {
                        updateAvailableTimes(this.value);
                    }
                });
            });

            // Función para actualizar los horarios disponibles según el día seleccionado
            function updateAvailableTimes(selectedDay) {
                debugger;
                const timeSelect = document.getElementById('time');
                timeSelect.innerHTML = '<option value="">Seleccione una hora</option>';
                
                if (!window.doctorSchedule) return;
                
                // Obtener el día de la semana actual (0-6, donde 0 es domingo)
                const today = new Date();
                const currentDay = today.getDay();
                const currentHour = today.getHours();
                const currentMinutes = today.getMinutes();
                
                // Mapear el día seleccionado a un índice (0-6)
                const dayMap = {
                    'sunday': 0,
                    'monday': 1,
                    'tuesday': 2,
                    'wednesday': 3,
                    'thursday': 4,
                    'friday': 5,
                    'saturday': 6
                };
                
                const selectedDayIndex = dayMap[selectedDay];
                
                // Verificar si el día seleccionado ya pasó esta semana
                if (selectedDayIndex < currentDay) {
                    timeSelect.innerHTML = '<option value="">El día seleccionado ya pasó esta semana</option>';
                    return;
                }
                
                // Encontrar el horario del día seleccionado
                const daySchedule = window.doctorSchedule.availableDays.find(day => 
                   selectedDayIndex === day.dayOfWeek   
                );

                debugger;
                
                if (!daySchedule) {
                    timeSelect.innerHTML = '<option value="">No hay horarios disponibles para este día</option>';
                    return;
                }
                
                // Obtener hora de inicio y fin
                const startTime = daySchedule.startTime || '09:00';
                const endTime = daySchedule.endTime || '18:00';
                const [startHour, startMinute] = startTime.split(':').map(Number);
                const [endHour] = endTime.split(':').map(Number);


                function obtenerFechaPorDiaSemana(diaDeseadoNumero) {
                        const hoy = new Date(); // Obtiene la fecha y hora actual
                        const diaActualSemanaJS = hoy.getDay(); // Día de la semana de hoy (0=Dom, 1=Lun, ..., 6=Sab)

                        // Ajustar el día deseado:
                        // Si tu día deseado es 1 (Lunes), y getDay() es 0 (Domingo),
                        // el Lunes en el sistema de getDay() es 1.
                        // Esto lo ajusta para que coincida con tu mapeo (1=Lunes, 2=Martes, etc.)
                        let diaDeseadoJS;
                        if (diaDeseadoNumero === 7) { // Si el usuario quiere Domingo (7)
                            diaDeseadoJS = 0; // En getDay() es 0
                        } else {
                            diaDeseadoJS = diaDeseadoNumero; // Para Lunes (1) a Sábado (6)
                        }

                        // Calcular la diferencia de días para llegar al día deseado
                        let diferenciaDias = diaDeseadoJS - diaActualSemanaJS;

                        // Si el día deseado ya pasó en la semana actual (ej: hoy es Miércoles (3) y quiero Lunes (1))
                        // necesitamos ir a la semana anterior, o si el dia deseado esta en el futuro pero el numero es menor
                        // (ej: hoy es Jueves (4) y quiero Lunes (1)), también necesitamos ir a la semana anterior para que caiga en la misma semana.
                        // La forma más simple de asegurarnos de que caiga en la semana actual es calcular la diferencia
                        // y aplicarla directamente.
                        
                        // Crear una nueva fecha para no modificar 'hoy' directamente
                        const fechaDeseada = new Date(hoy);
                        fechaDeseada.setDate(hoy.getDate() + diferenciaDias);

                        // Formatear la fecha a DD/MM/YYYY
                        const dia = String(fechaDeseada.getDate()).padStart(2, '0');
                        const mes = String(fechaDeseada.getMonth() + 1).padStart(2, '0'); // Meses son de 0-11
                        const año = fechaDeseada.getFullYear();

                        return `${dia}/${mes}/${año}`;
                    }
                
                // Generar opciones de hora cada 30 minutos
                for (let hour = startHour; hour <= endHour; hour++) {
                    // Solo agregar horas futuras si es el día actual
                    if (selectedDayIndex === currentDay && hour < currentHour) {
                        continue;
                    }



                    
                    // Agregar hora en punto
                    if (hour < endHour) {
                        const timeValue = `${String(hour).padStart(2, '0')}:00`;
                        const option = new Option(obtenerFechaPorDiaSemana(selectedDayIndex) + ' ' + timeValue, obtenerFechaPorDiaSemana(selectedDayIndex)  + ' ' + timeValue + ':00');
                        // Deshabilitar si ya pasó la hora actual
                        if (selectedDayIndex === currentDay && hour === currentHour && 0 < currentMinutes) {
                            option.disabled = true;
                        }

                        const bookedDay = window.doctorSchedule.bookedSlots.filter(slot => {
                            const bookedDate = new Date(slot.date + "T00:00:00");
                            const bookedDayNumber = bookedDate.getDay();
                            return bookedDayNumber === selectedDayIndex;
                        });     
                        if (bookedDay.length > 0) {
                            for(let b of bookedDay) {
                                if(b.time === timeValue + ":00") {
                                    option.disabled = true;
                                }
                            }
                        }                
                        timeSelect.add(option);
                    }


                
                    
                    // Agregar media hora si no es la última hora
                    if (hour < endHour && hour >= startHour) {
                        const timeValue = `${String(hour).padStart(2, '0')}:30`;
                        const option = new Option(obtenerFechaPorDiaSemana(selectedDayIndex) + ' ' + timeValue, obtenerFechaPorDiaSemana(selectedDayIndex) + ' ' + timeValue + ':00');
                        // Deshabilitar si ya pasó la media hora actual
                        if (selectedDayIndex === currentDay && 
                            (hour < currentHour || (hour === currentHour && 30 < currentMinutes))) {
                            option.disabled = true;
                        }

                        const bookedDay = window.doctorSchedule.bookedSlots.filter(slot => {
                            const bookedDate = new Date(slot.date + "T00:00:00");
                            const bookedDayNumber = bookedDate.getDay();
                            return bookedDayNumber === selectedDayIndex;
                        });     
                        if (bookedDay.length > 0) {
                            for(let b of bookedDay) {
                                if(b.time === timeValue + ":00") {
                                    option.disabled = true;
                                }
                            }
                        }                
                        timeSelect.add(option);
                    }
                }
                
                // Habilitar el select si hay opciones válidas
                timeSelect.disabled = timeSelect.options.length <= 1;
            }

            // Manejar cambio de especialidad
            especialitySelect.addEventListener('change', function() {
                loadDoctorsBySpeciality(this.value);
            });
            
            // Manejar cambio de doctor
            doctorSelect.addEventListener('change', function() {
                loadDoctorSchedule(this.value);
            });
            
            // Cargar doctores si ya hay una especialidad seleccionada
            if (especialitySelect.value) {
                loadDoctorsBySpeciality(especialitySelect.value);
                
                // Si ya hay un doctor seleccionado, cargar su horario
                if (doctorSelect.value) {
                    // Usar setTimeout para asegurar que el DOM esté listo
                    setTimeout(() => {
                        loadDoctorSchedule(doctorSelect.value);
                    }, 500);
                }
            }

            // Validación en tiempo real para mejor UX
            const validateField = (field) => {
                if (field.hasAttribute('required') && !field.value.trim()) {
                    field.classList.add('is-invalid');
                    field.classList.remove('is-valid');
                } else {
                    field.classList.remove('is-invalid');
                    field.classList.add('is-valid');
                }
            };
            
            // Aplicar validación en tiempo real a los campos del formulario
            const form = document.getElementById('appointmentForm');
            if (form) {
                form.querySelectorAll('input, select, textarea').forEach(field => {
                    field.addEventListener('blur', function() {
                        validateField(this);
                    });
                    
                    field.addEventListener('change', function() {
                        validateField(this);
                    });
                });
            }
        }
        
        // Validación del formulario al enviar
        const appointmentForm = document.getElementById('appointmentForm');
        if (appointmentForm) {
            appointmentForm.addEventListener('submit', function(e) {
                let isValid = true;
                const requiredFields = this.querySelectorAll('[required]');
                
                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        isValid = false;
                        field.classList.add('is-invalid');
                        // Agregar feedback visual más claro
                        if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('invalid-feedback')) {
                            const feedback = document.createElement('div');
                            feedback.classList.add('invalid-feedback');
                            feedback.textContent = 'Este campo es obligatorio';
                            field.parentNode.insertBefore(feedback, field.nextSibling);
                        }
                    } else {
                        field.classList.remove('is-invalid');
                        field.classList.add('is-valid');
                    }
                });
                
                if (!isValid) {
                    e.preventDefault();
                    // Mensaje más elegante con SweetAlert si está disponible
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: '¡Atención!',
                            text: 'Por favor, complete todos los campos obligatorios marcados con *',
                            icon: 'warning',
                            confirmButtonText: 'Entendido'
                        });
                    } else {
                        alert('Por favor, complete todos los campos obligatorios marcados con *');
                    }
                    
                    // Scroll suave al primer campo con error
                    const firstInvalidField = document.querySelector('.is-invalid');
                    if (firstInvalidField) {
                        firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                }
            });
            
            // Validación en tiempo real para mejor UX
            const validateField = (field) => {
                // Special handling for radio buttons
                if (field.type === 'radio' && field.name === 'day') {
                    const isAnyChecked = document.querySelector('input[name="day"]:checked') !== null;
                    const dayError = document.getElementById('dayError');
                    if (!isAnyChecked) {
                        dayError.classList.remove('d-none');
                        return false;
                    } else {
                        dayError.classList.add('d-none');
                        return true;
                    }
                }
                
                if (field.hasAttribute('required') && !field.value.trim()) {
                    field.classList.add('is-invalid');
                    field.classList.remove('is-valid');
                } else {
                    field.classList.remove('is-invalid');
                    field.classList.add('is-valid');
                }
            };
            
            appointmentForm.querySelectorAll('input, select, textarea').forEach(field => {
                field.addEventListener('blur', function() {
                    validateField(this);
                });
                
                field.addEventListener('change', function() {
                    validateField(this);
                });
            });
        }
        
        // Animaciones al scroll para mejorar la experiencia visual
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animated-element');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.card:not(.animated-element)').forEach(element => {
            observer.observe(element);
        });
    });
</script>
@endsection