<!-- Widget Convertidor Médico -->
<div class="card mb-0 border-0 shadow-none">
    <div class="card-body p-3">
        <form id="converterWidgetForm" class="mb-3">
            <div class="mb-3">
                <label for="widget-converter-type" class="form-label">Tipo de Conversión</label>
                <select class="form-select" id="widget-converter-type">
                    <option value="weight">Peso</option>
                    <option value="temperature">Temperatura</option>
                    <option value="volume">Volumen</option>
                </select>
            </div>
            <div class="row mb-3">
                <div class="col">
                    <input type="number" step="any" class="form-control" id="widget-converter-value" placeholder="Valor">
                </div>
                <div class="col">
                    <select class="form-select" id="widget-converter-from">
                        <!-- Opciones dinámicas -->
                    </select>
                </div>
            </div>
            <button type="submit" class="btn btn-primary w-100">
                <i class="fas fa-calculator me-2"></i>Convertir
            </button>
        </form>
        <div id="widget-converter-result" class="alert alert-info" style="display: none;">
            <p class="mb-0" id="widget-converter-result-text"></p>
        </div>
        <div class="text-center mt-2">
            <a href="{{ route('utilities.converter') }}" class="btn btn-sm btn-outline-primary">Acceder a convertidor completo</a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const converterForm = document.getElementById('converterWidgetForm');
    const typeSelect = document.getElementById('widget-converter-type');
    const fromSelect = document.getElementById('widget-converter-from');
    const resultDiv = document.getElementById('widget-converter-result');
    const resultText = document.getElementById('widget-converter-result-text');
    
    // Definir unidades disponibles para cada tipo
    const units = {
        weight: [
            { value: 'kg', label: 'Kilogramos (kg)' },
            { value: 'lb', label: 'Libras (lb)' },
            { value: 'g', label: 'Gramos (g)' },
            { value: 'oz', label: 'Onzas (oz)' }
        ],
        temperature: [
            { value: 'c', label: 'Celsius (°C)' },
            { value: 'f', label: 'Fahrenheit (°F)' },
            { value: 'k', label: 'Kelvin (K)' }
        ],
        volume: [
            { value: 'l', label: 'Litros (L)' },
            { value: 'ml', label: 'Mililitros (ml)' },
            { value: 'cc', label: 'Centímetros cúbicos (cc)' },
            { value: 'oz_fl', label: 'Onzas fluidas (fl oz)' }
        ]
    };
    
    // Cargar opciones según el tipo seleccionado
    function updateUnitOptions() {
        const type = typeSelect.value;
        fromSelect.innerHTML = '';
        
        units[type].forEach(unit => {
            const option = document.createElement('option');
            option.value = unit.value;
            option.textContent = unit.label;
            fromSelect.appendChild(option);
        });
    }
    
    // Manejar cambios en el tipo de conversión
    typeSelect.addEventListener('change', updateUnitOptions);
    
    // Inicializar opciones
    updateUnitOptions();
    
    // Manejar envío del formulario
    converterForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const value = parseFloat(document.getElementById('widget-converter-value').value);
        const type = typeSelect.value;
        const from = fromSelect.value;
        
        if (isNaN(value)) {
            return;
        }
        
        let result = '';
        
        // Realizar conversiones
        if (type === 'weight') {
            if (from === 'kg') {
                result = `${value} kg = ${(value * 2.20462).toFixed(2)} lb`;
            } else if (from === 'lb') {
                result = `${value} lb = ${(value * 0.453592).toFixed(2)} kg`;
            } else if (from === 'g') {
                result = `${value} g = ${(value * 0.001).toFixed(3)} kg`;
            } else if (from === 'oz') {
                result = `${value} oz = ${(value * 28.3495).toFixed(2)} g`;
            }
        } else if (type === 'temperature') {
            if (from === 'c') {
                result = `${value} °C = ${(value * 9/5 + 32).toFixed(1)} °F`;
            } else if (from === 'f') {
                result = `${value} °F = ${((value - 32) * 5/9).toFixed(1)} °C`;
            } else if (from === 'k') {
                result = `${value} K = ${(value - 273.15).toFixed(1)} °C`;
            }
        } else if (type === 'volume') {
            if (from === 'l') {
                result = `${value} L = ${(value * 1000).toFixed(0)} ml`;
            } else if (from === 'ml') {
                result = `${value} ml = ${(value * 0.001).toFixed(3)} L`;
            } else if (from === 'cc') {
                result = `${value} cc = ${value} ml`;
            } else if (from === 'oz_fl') {
                result = `${value} fl oz = ${(value * 29.5735).toFixed(1)} ml`;
            }
        }
        
        resultText.textContent = result;
        resultDiv.style.display = 'block';
    });
});
</script> 