@extends('layouts.master')

@section('title')
{{ __('sentence.Edit 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">{{ __('sentence.Edit Patient') }}</p>
            
            <hr class="pb-4">

            <form method="post" action="{{ route('patient.store_edit') }}" class="form-card">
                    {{ 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" value="{{ $patient->name }}">
                            <input type="hidden" class="form-control" name="user_id" value="{{ $patient->id }}">
                            {{ csrf_field() }}
                        </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" value="{{ $patient->Patient->birthday }}">
                        </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" {{ $patient->Patient->gender == 'Male' ? 'selected' : '' }}>{{ __('sentence.Male') }}</option>
                                <option value="Female" {{ $patient->Patient->gender == 'Female' ? 'selected' : '' }}>{{ __('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" {{ $patient->Patient->blood == 'Unknown' ? 'selected' : '' }}>{{ __('sentence.Unknown') }}</option>
                                <option value="A+" {{ $patient->Patient->blood == 'A+' ? 'selected' : '' }}>A+</option>
                                <option value="A-" {{ $patient->Patient->blood == 'A-' ? 'selected' : '' }}>A-</option>
                                <option value="B+" {{ $patient->Patient->blood == 'B+' ? 'selected' : '' }}>B+</option>
                                <option value="B-" {{ $patient->Patient->blood == 'B-' ? 'selected' : '' }}>B-</option>
                                <option value="O+" {{ $patient->Patient->blood == 'O+' ? 'selected' : '' }}>O+</option>
                                <option value="O-" {{ $patient->Patient->blood == 'O-' ? 'selected' : '' }}>O-</option>
                                <option value="AB+" {{ $patient->Patient->blood == 'AB+' ? 'selected' : '' }}>AB+</option>
                                <option value="AB-" {{ $patient->Patient->blood == 'AB-' ? 'selected' : '' }}>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" value="{{ $patient->email }}">
                        </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" value="{{ $patient->Patient->phone }}">
                        </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" value="{{ $patient->Patient->adress }}">
                        </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" value="{{ $patient->Patient->weight }}" 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" value="{{ $patient->Patient->height }}" 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 value="{{ $patient->Patient->imc }}">
                        </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">
                                {!! $patient->Patient->alergias !!}
                            </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">
                                {!! $patient->Patient->cirugias !!}
                            </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">
                                {!! $patient->Patient->apf !!}
                            </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')
<style>
    .ck-editor__editable {
        min-height: 400px; /* Altura mínima del editor */
    }
</style>

@endsection

@section('footer')
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<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