<!-- Widget Calendario de Vacunación -->
<div class="card mb-0 border-0 shadow-none">
    <div class="card-body p-3">
        <div class="mb-3">
            <label for="widget-age-group" class="form-label">Grupo de Edad</label>
            <select class="form-select" id="widget-age-group">
                <option value="">Seleccione grupo de edad</option>
                <option value="recien-nacido">Recién nacido</option>
                <option value="2-meses">2 meses</option>
                <option value="4-meses">4 meses</option>
                <option value="6-meses">6 meses</option>
                <option value="12-meses">12 meses</option>
                <option value="15-meses">15 meses</option>
                <option value="18-meses">18 meses</option>
                <option value="4-anios">4 años</option>
                <option value="11-anios">11 años</option>
                <option value="adultos">Adultos</option>
            </select>
        </div>
        
        <div id="widget-vaccination-info" class="mt-3" style="display: none;">
            <h6 class="fw-bold" id="widget-vaccination-age-title"></h6>
            <div class="table-responsive">
                <table class="table table-sm table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Vacuna</th>
                            <th>Dosis</th>
                        </tr>
                    </thead>
                    <tbody id="widget-vaccination-list">
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="text-center mt-3">
            <a href="{{ route('utilities.vaccination') }}" class="btn btn-sm btn-outline-primary">Ver calendario completo</a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ageSelect = document.getElementById('widget-age-group');
    const infoDiv = document.getElementById('widget-vaccination-info');
    const ageTitle = document.getElementById('widget-vaccination-age-title');
    const vaccineList = document.getElementById('widget-vaccination-list');
    
    // Datos de vacunación por grupo de edad
    const vaccinationData = {
        'recien-nacido': {
            title: 'Recién nacido',
            vaccines: [
                { name: 'BCG', dose: 'Única' },
                { name: 'Hepatitis B', dose: '1ª dosis' }
            ]
        },
        '2-meses': {
            title: '2 meses',
            vaccines: [
                { name: 'Pentavalente', dose: '1ª dosis' },
                { name: 'Polio inyectable', dose: '1ª dosis' },
                { name: 'Rotavirus', dose: '1ª dosis' },
                { name: 'Neumococo', dose: '1ª dosis' }
            ]
        },
        '4-meses': {
            title: '4 meses',
            vaccines: [
                { name: 'Pentavalente', dose: '2ª dosis' },
                { name: 'Polio inyectable', dose: '2ª dosis' },
                { name: 'Rotavirus', dose: '2ª dosis' },
                { name: 'Neumococo', dose: '2ª dosis' }
            ]
        },
        '6-meses': {
            title: '6 meses',
            vaccines: [
                { name: 'Pentavalente', dose: '3ª dosis' },
                { name: 'Polio oral', dose: '1ª dosis' },
                { name: 'Influenza', dose: '1ª dosis' }
            ]
        },
        '12-meses': {
            title: '12 meses',
            vaccines: [
                { name: 'SRP (Triple viral)', dose: '1ª dosis' },
                { name: 'Neumococo', dose: 'Refuerzo' },
                { name: 'Hepatitis A', dose: 'Única' }
            ]
        },
        '15-meses': {
            title: '15 meses',
            vaccines: [
                { name: 'Varicela', dose: '1ª dosis' }
            ]
        },
        '18-meses': {
            title: '18 meses',
            vaccines: [
                { name: 'DPT', dose: '1er refuerzo' },
                { name: 'Polio oral', dose: '2ª dosis' }
            ]
        },
        '4-anios': {
            title: '4 años',
            vaccines: [
                { name: 'DPT', dose: '2º refuerzo' },
                { name: 'Polio oral', dose: '3ª dosis' },
                { name: 'SRP (Triple viral)', dose: '2ª dosis' }
            ]
        },
        '11-anios': {
            title: '11 años',
            vaccines: [
                { name: 'VPH', dose: '2 dosis (0-6 meses)' },
                { name: 'Tdap', dose: 'Refuerzo' }
            ]
        },
        'adultos': {
            title: 'Adultos',
            vaccines: [
                { name: 'Td (Tétanos y difteria)', dose: 'Refuerzo cada 10 años' },
                { name: 'Influenza', dose: 'Anual' }
            ]
        }
    };
    
    // Manejar cambio en el grupo de edad
    ageSelect.addEventListener('change', function() {
        const selectedAge = this.value;
        
        if (!selectedAge) {
            infoDiv.style.display = 'none';
            return;
        }
        
        const ageData = vaccinationData[selectedAge];
        
        if (ageData) {
            ageTitle.textContent = ageData.title;
            
            // Limpiar y llenar la lista de vacunas
            vaccineList.innerHTML = '';
            ageData.vaccines.forEach(vaccine => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td><i class="fas fa-syringe text-primary me-2"></i>${vaccine.name}</td>
                    <td><span class="badge bg-info">${vaccine.dose}</span></td>
                `;
                vaccineList.appendChild(row);
            });
            
            infoDiv.style.display = 'block';
        }
    });
});
</script> 