@extends('layouts.yellow')

@section('content')
<style>
    :root {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
        --amarillo-primario: #FFD54F;
        --amarillo-secundario: #FFECB3;
        --naranja-destacado: #FF9800;
        --verde-exito: #4CAF50;
        --rojo-error: #F44336;
        --gris-claro: #F5F7FA;
        --gris-medio: #E1E5E9;
        --gris-oscuro: #6C757D;
        --borde-principal: #D0D7DE;
        --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.05);
        --sombra-media: 0 6px 16px rgba(0, 0, 0, 0.08);
        --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
        --transicion: all 0.3s ease;
        --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .converter-container {
        font-family: var(--fuente-principal);
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .converter-card {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--sombra-media);
        border: none;
    }

    .converter-header {
        background: var(--degradado-azul);
        color: white;
        padding: 1.5rem 2rem;
        position: relative;
        overflow: hidden;
    }

    .converter-header::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 150px;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
    }

    .converter-header h4 {
        margin: 0;
        font-weight: 600;
        display: flex;
        align-items: center;
    }

    .converter-header h4:before {
        content: "\f362";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right: 10px;
    }

    .converter-body {
        padding: 2rem;
        background: white;
    }

    .form-label {
        font-weight: 600;
        color: var(--azul-primario);
        margin-bottom: 8px;
    }

    .form-control, .form-select {
        border: 2px solid var(--borde-principal);
        border-radius: 8px;
        padding: 10px 15px;
        transition: var(--transicion);
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--azul-destacado);
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
    }

    .btn-primary {
        background: var(--degradado-azul);
        border: none;
        border-radius: 50px;
        padding: 10px 25px;
        font-weight: 500;
        transition: var(--transicion);
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--sombra-hover);
    }

    .alert-success {
        background-color: rgba(76, 175, 80, 0.1);
        border-left: 4px solid var(--verde-exito);
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-radius: 0;
        padding: 15px;
        color: var(--verde-exito);
    }

    .info-card {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: var(--sombra-suave);
    }

    .info-header {
        background-color: var(--azul-suave);
        color: var(--azul-primario);
        padding: 15px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .info-header h5 {
        margin: 0;
        font-weight: 600;
    }

    .info-body {
        padding: 15px;
    }

    .list-group-item {
        border-color: var(--borde-principal);
        padding: 12px 16px;
        transition: var(--transicion);
    }

    .list-group-item:hover {
        background-color: var(--gris-claro);
        transform: translateY(-2px);
        box-shadow: var(--sombra-suave);
    }

    .list-group-item strong {
        color: var(--azul-primario);
    }
</style>

<div class="container converter-container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card converter-card">
                <div class="converter-header">
                    <h4>Convertidor Médico</h4>
                </div>

                <div class="converter-body">
                    <form id="converterForm">
                        <div class="form-group mb-3">
                            <label for="type" class="form-label">Tipo de Conversión</label>
                            <select class="form-select" id="type" name="type">
                                <option value="weight">Peso</option>
                                <option value="volume">Volumen</option>
                                <option value="temperature">Temperatura</option>
                                <option value="pressure">Presión Arterial</option>
                                <option value="glucose">Glucosa</option>
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="value" class="form-label">Valor</label>
                                    <input type="number" step="any" class="form-control" id="value" name="value" required>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="from" class="form-label">De</label>
                                    <select class="form-select" id="from" name="from"></select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="to" class="form-label">A</label>
                                    <select class="form-select" id="to" name="to"></select>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mb-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-exchange-alt me-2"></i>Convertir
                            </button>
                        </div>

                        <div id="result" class="alert alert-success d-none">
                            <i class="fas fa-check-circle me-2"></i>
                            <span id="resultText"></span>
                        </div>
                    </form>

                    <div class="card info-card mt-4">
                        <div class="info-header">
                            <h5>Información de Unidades</h5>
                        </div>
                        <div class="info-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <strong>Peso:</strong> Kilogramos (kg), Libras (lb), Onzas (oz)
                                </li>
                                <li class="list-group-item">
                                    <strong>Volumen:</strong> Mililitros (ml), Centímetros cúbicos (cc), Onzas líquidas (oz)
                                </li>
                                <li class="list-group-item">
                                    <strong>Temperatura:</strong> Celsius (C), Fahrenheit (F)
                                </li>
                                <li class="list-group-item">
                                    <strong>Presión Arterial:</strong> Milímetros de mercurio (mmHg), Kilopascales (kPa)
                                </li>
                                <li class="list-group-item">
                                    <strong>Glucosa:</strong> mg/dL, mmol/L
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const units = {
    weight: {
        units: ['kg', 'lb', 'oz'],
        labels: {
            'kg': 'Kilogramos (kg)',
            'lb': 'Libras (lb)',
            'oz': 'Onzas (oz)'
        }
    },
    volume: {
        units: ['ml', 'cc', 'oz'],
        labels: {
            'ml': 'Mililitros (ml)',
            'cc': 'Centímetros cúbicos (cc)',
            'oz': 'Onzas líquidas (oz)'
        }
    },
    temperature: {
        units: ['C', 'F'],
        labels: {
            'C': 'Celsius (°C)',
            'F': 'Fahrenheit (°F)'
        }
    },
    pressure: {
        units: ['mmHg', 'kPa'],
        labels: {
            'mmHg': 'Milímetros de mercurio (mmHg)',
            'kPa': 'Kilopascales (kPa)'
        }
    },
    glucose: {
        units: ['mg/dL', 'mmol/L'],
        labels: {
            'mg/dL': 'mg/dL',
            'mmol/L': 'mmol/L'
        }
    }
};

function updateUnits() {
    const type = document.getElementById('type').value;
    const fromSelect = document.getElementById('from');
    const toSelect = document.getElementById('to');
    
    fromSelect.innerHTML = '';
    toSelect.innerHTML = '';
    
    units[type].units.forEach(unit => {
        const label = units[type].labels[unit];
        fromSelect.add(new Option(label, unit));
        toSelect.add(new Option(label, unit));
    });
}

document.getElementById('type').addEventListener('change', updateUnits);

document.getElementById('converterForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = {
        value: document.getElementById('value').value,
        from: document.getElementById('from').value,
        to: document.getElementById('to').value,
        type: document.getElementById('type').value
    };

    try {
        const response = await fetch('/admin/utilities/convert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify(formData)
        });

        const data = await response.json();
        
        const resultDiv = document.getElementById('result');
        const resultText = document.getElementById('resultText');
        resultText.textContent = `${formData.value} ${units[formData.type].labels[formData.from]} = ${data.result} ${units[formData.type].labels[formData.to]}`;
        resultDiv.classList.remove('d-none');
    } catch (error) {
        console.error('Error:', error);
        alert('Hubo un error al realizar la conversión. Por favor, intente nuevamente.');
    }
});

// Inicializar las unidades al cargar la página
updateUnits();
</script>
@endpush
@endsection