@extends('layouts.master')

@section('title')
{{ __('sentence.New Patient') }}
@endsection

@section('content')
<div class="container-fluid px-1 py-5 mx-auto card">
    <div class="row d-flex justify-content-center">
        <div class="col-xl-10 col-lg-10 col-md-8 col-8 text-center">
            <h5 class="text-center text-primary">{{ __('sentence.personal information') }}</h5>  
            <p class="blue-text">Por favor, completa la siguiente información para registrar los datos del paciente.</p>
            
            <hr class="pb-4">
                
                <!-- Sección: Datos del Paciente -->
                
                <form class="form-card" method="post" action="{{ route('patient.create') }}">
                    {{ csrf_field() }}
                    <div class="row justify-content-between text-left">
                        <div class="form-group col-sm-6 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Full Name') }}<span class="text-danger"> *</span></label> 
                            <input type="text" class="form-control" id="Name" name="name" placeholder="Ingresa el nombre completo">
                        </div>
                        
                        <div class="form-group col-sm-6 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Birthday') }}<span class="text-danger"> *</span></label> 
                            <input type="date" class="form-control" id="Birthday" name="birthday" autocomplete="off">
                        </div>
                    </div>
                    
                    <div class="row justify-content-between text-left">
                        <div class="form-group col-sm-6 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Gender') }}<span class="text-danger"> *</span></label>
                            <select class="form-control" id="Gender" name="gender">
                                <option value="Male">{{ __('sentence.Male') }}</option>
                                <option value="Female">{{ __('sentence.Female') }}</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-6 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Blood Group') }}</label>
                            <select class="form-control" id="Blood" name="blood">
                                <option value="Unknown">{{ __('sentence.Unknown') }}</option>
                                <option value="A+">A+</option>
                                <option value="A-">A-</option>
                                <option value="B+">B+</option>
                                <option value="B-">B-</option>
                                <option value="O+">O+</option>
                                <option value="O-">O-</option>
                                <option value="AB+">AB+</option>
                                <option value="AB-">AB-</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- Sección: Datos de Contacto -->
                    <h5 class="text-center mb-4 mt-3 text-primary">{{ __('sentence.contact information') }}</h5>
                    <hr class="pb-4">
                    <div class="row justify-content-between text-left">
                        <div class="form-group col-sm-6 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Email Adress') }}<span class="text-danger"> *</span></label> 
                            <input type="email" id="Email" class="form-control" name="email" placeholder="Ingresa el correo electrónico">
                        </div>
                        <div class="form-group col-sm-6 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Phone') }}</label> 
                            <input type="text" id="Phone" class="form-control" name="phone" placeholder="Ingresa el número de teléfono">
                        </div>
                    </div>
                    
                    <div class="row justify-content-between text-left">
                        <div class="form-group col-12 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Address') }}</label>
                            <input type="text" id="Address" class="form-control" name="adress" placeholder="Ingresa la dirección">
                        </div>
                    </div>

                    <!-- Sección: Historial Médico -->
                    <h5 class="text-center mb-4 mt-3 text-primary">{{ __('sentence.clinical history') }}</h5>
                    <hr class="pb-4">
                    <div class="row justify-content-between text-left">
                        
                    <div class="form-group col-sm-4 flex-column d-flex">
                        <label class="form-control-label px-3">{{ __('sentence.Patient Weight') }}</label>
                        <div class="input-group">
                            <input type="text" id="Weight" name="weight" class="form-control" placeholder="Ingresa el peso" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
                            <div class="input-group-append">
                                <select id="unitSelectWeight" class="form-control" style="width: 50px; background-color: #e9ecef; border-top-left-radius: 0; border-bottom-left-radius: 0;">
                                    <option value="kg">Kg</option>
                                    <option value="lb">Lb</option>
                                </select>
                            </div>
                        </div>
                    </div>
                                            
                    <div class="form-group col-sm-4 flex-column d-flex">
                        <label class="form-control-label px-3">{{ __('sentence.Patient Height') }}</label>
                        <div class="input-group">
                            <input type="text" id="Height" name="height" class="form-control" placeholder="Ingresa la altura" onblur="sacarIMC()" style="border-top-left-radius: 0; border-bottom-left-radius: 0;">
                            <div class="input-group-append">
                                <select id="unitSelectHeight" class="form-control" style="width: 60px; background-color: #e9ecef; border-top-left-radius: 0; border-bottom-left-radius: 0;">
                                    <option value="cm">Cm</option>
                                    <option value="ft">Ft</option>
                                </select>
                            </div>
                        </div>
                    </div>
                        
                        <div class="form-group col-4 flex-column d-flex">
                            <label class="form-control-label px-3">IMC</label>
                            <input type="text" id="IMC" class="form-control" name="imc" readonly placeholder="Índice de Masa Corporal">
                        </div>
                    </div>
                    
                    <!-- Alerginas  -->
                    <div class="row justify-content-between text-left">
                        <div class="form-group col-12 flex-column d-flex">
                            <label for="Alergias" class="form-control-label px-3">{{ __('sentence.allergies') }}</label>
                            <textarea class="form-control" id="Alergias" name="alergias" rows="8"></textarea>
                        </div>
                    </div>
                    

                    <!-- Historial de Cirugías (app) -->
                    <div class="row justify-content-between text-left">
                        <div class="form-group col-12 flex-column d-flex">
                            <label for="Cirugias" class="form-control-label px-3">{{ __('sentence.surgery history') }}</label>
                            <textarea class="form-control" id="Cirugias" name="cirugias" rows="8"></textarea>
                        </div>
                    </div>
                    

                    <!-- Enfermedades Crónicas (apf) -->
                    <div class="row justify-content-between text-left">
                        <div class="form-group col-12 flex-column d-flex">
                            <label class="form-control-label px-3">{{ __('sentence.Chronic diseases')}}</label>
                        
                            <textarea class="form-control" id="Apf" name="apf" rows="8"></textarea>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div class="row justify-content-center">
                        <div class="form-group col-sm-6">
                            <button type="submit" class="btn-block btn-primary">{{ __('sentence.Save') }}</button>
                        </div>
                    </div>
                </form>
            
        </div>
    </div>
</div>

@endsection

@section('header')


@endsection


<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>

<style>
        .ck-editor__editable {
            min-height: 400px; /* Altura mínima del editor */
        }
    </style>



@section('footer')

<script>

     document.addEventListener('DOMContentLoaded', function() {
            ClassicEditor
                .create(document.querySelector('#Alergias'))
                .catch(error => {
                    console.error(error);
                });

            ClassicEditor
                .create(document.querySelector('#Cirugias'))
                .catch(error => {
                    console.error(error);
                });

            ClassicEditor
                .create(document.querySelector('#Apf'))
                .catch(error => {
                    console.error(error);
                });
        });




    function mostrarAlerta() {
        const weight = document.getElementById('Weight').value.trim();
        const height = document.getElementById('Height').value.trim();
        const weightUnit = document.getElementById('unitSelectWeight').value;
        const heightUnit = document.getElementById('unitSelectHeight').value;

        if (weight !== '' && height !== '') {
            
            let weightInKg;
            if (weightUnit === 'lb') {
                weightInKg = parseFloat(weight) * 0.453592; // Convertir libras a kilogramos
            } else {
                weightInKg = parseFloat(weight); // Si es kg, simplemente lo convertimos a float
            }
            
            let heightInCm;
            if (heightUnit === 'ft') {
                heightInCm = parseFloat(height) * 30.48; // Convertir pies a centímetros
            } else {
                heightInCm = parseFloat(height); // Mantener el valor original en cm
            }
            
            let heightSquared = (heightInCm/100) ** 2;
            
            let imc = weightInKg / heightSquared

            // Mostrar el IMC calculado en el input del IMC
            document.getElementById('IMC').value = imc.toFixed(2);

        }else if(weight !== '' && height === ''){
            document.getElementById('IMC').value = '';
        }else if(weight === '' && height !== ''){
            document.getElementById('IMC').value = '';
        }else{
            document.getElementById('IMC').value = '';
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        document.getElementById('Weight').addEventListener('input', mostrarAlerta);
        document.getElementById('Height').addEventListener('input', mostrarAlerta);
        document.getElementById('unitSelectWeight').addEventListener('change', mostrarAlerta);
        document.getElementById('unitSelectHeight').addEventListener('change', mostrarAlerta);
    });
    


        
</script>
@endsection