@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;
    }

    .imc-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); }
    }

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

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

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

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

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

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

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

    .form-control: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-info {
        background-color: var(--azul-suave);
        border-left: 4px solid var(--azul-destacado);
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-radius: 0;
        padding: 15px;
    }

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

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

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

    .result-body {
        padding: 15px;
    }

    .table {
        border-radius: 8px;
        overflow: hidden;
    }

    .table th {
        background-color: var(--azul-suave);
        color: var(--azul-primario);
        font-weight: 600;
    }

    .recommendation-item {
        margin-bottom: 8px;
        display: flex;
        align-items: flex-start;
    }

    .recommendation-item i {
        color: var(--verde-exito);
        margin-right: 10px;
        margin-top: 3px;
    }
</style>

<div class="container imc-container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card imc-card">
                <div class="imc-header">
                    <h4>Calculadora de IMC</h4>
                </div>
                <div class="imc-body">
                    <form id="imcForm" class="mb-4">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="weight" class="form-label">Peso (kg)</label>
                                <input type="number" class="form-control" id="weight" name="weight" step="0.1" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="height" class="form-label">Altura (cm)</label>
                                <input type="number" class="form-control" id="height" name="height" step="0.1" required>
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-calculator me-2"></i>Calcular IMC
                            </button>
                        </div>
                    </form>

                    <div id="result" style="display: none;">
                        <div class="alert alert-info">
                            <h5 class="alert-heading">Resultado:</h5>
                            <p class="mb-0">Su IMC es: <strong id="imcValue"></strong></p>
                            <p class="mb-0">Clasificación: <strong id="imcClassification"></strong></p>
                            <p class="mb-0" id="imcDescription"></p>
                        </div>

                        <div class="card result-card mt-3">
                            <div class="result-header">
                                <h5>Recomendaciones</h5>
                            </div>
                            <div class="result-body">
                                <ul id="recommendations" class="list-unstyled mb-0">
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="card result-card mt-4">
                        <div class="result-header">
                            <h5>Rangos de IMC</h5>
                        </div>
                        <div class="result-body">
                            <table class="table table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>IMC</th>
                                        <th>Clasificación</th>
                                        <th>Riesgo</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Menos de 18.5</td>
                                        <td>Bajo peso</td>
                                        <td>Aumentado</td>
                                    </tr>
                                    <tr>
                                        <td>18.5 - 24.9</td>
                                        <td>Peso normal</td>
                                        <td>Normal</td>
                                    </tr>
                                    <tr>
                                        <td>25.0 - 29.9</td>
                                        <td>Sobrepeso</td>
                                        <td>Aumentado</td>
                                    </tr>
                                    <tr>
                                        <td>30.0 - 34.9</td>
                                        <td>Obesidad grado I</td>
                                        <td>Alto</td>
                                    </tr>
                                    <tr>
                                        <td>35.0 - 39.9</td>
                                        <td>Obesidad grado II</td>
                                        <td>Muy alto</td>
                                    </tr>
                                    <tr>
                                        <td>40.0 o más</td>
                                        <td>Obesidad grado III</td>
                                        <td>Extremadamente alto</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('imcForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const weight = document.getElementById('weight').value;
    const height = document.getElementById('height').value;

    fetch('/admin/utilities/calculate-imc', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ weight, height })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('imcValue').textContent = data.imc;
        document.getElementById('imcClassification').textContent = data.classification;
        document.getElementById('imcDescription').textContent = data.description;
        
        const recommendationsList = document.getElementById('recommendations');
        recommendationsList.innerHTML = '';
        data.recommendations.forEach(rec => {
            const li = document.createElement('li');
            li.className = 'recommendation-item';
            li.innerHTML = `<i class="fas fa-check"></i><span>${rec}</span>`;
            recommendationsList.appendChild(li);
        });

        document.getElementById('result').style.display = 'block';
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Hubo un error al calcular el IMC. Por favor, intente nuevamente.');
    });
});
</script>
@endpush
@endsection 