@extends('layouts.lo_app_dashboard')
@section('titulo')
FHOI Dashboard

@endsection
@section('content')

<div>
    <style>
    @media all and (max-width:480px) {
        .container-movil {
            padding-left: 0px;
            padding-right: 0px;
            margin: 0px;
        }
    }
    </style>

    <div class="container container-movil my-3"> 
        <x-form_basic titulo="Agregar un nuevo registro de paciente" btn="Guardar registro" method="POST" action="{{route('crear_registro')}}">
            <div class="row">
                <x-input_text col="col-md-4" type="text" identificador="codigo" titulo="Numero de Historia:" value="{{old('codigo')}}"/>
                <x-input_text col="col-md-4" type="text" identificador="numero_factura" titulo="Numero de factura:" value="{{old('numero_factura')}}" />
                <x-input_text col="col-md-4" type="date" identificador="fecha_factura" titulo="Fecha de la factura:" value="{{old('fecha_factura')}}" />
            </div>
            <div class="row">
                <div class="col-12">
                    <hr>
                </div>
            </div>
            <div class="row">
                <x-input_text col="col-md-6" type="text" identificador="primer_apellido" titulo="Primer apellido:" value="{{old('primer_apellido')}}" />
                <x-input_text col="col-md-6" type="text" identificador="segundo_apellido" titulo="Segundo apellido:" value="{{old('segundo_apellido')}}" />
                <x-input_text col="col-md-6" type="text" identificador="primer_nombre" titulo="Primer nombre:" value="{{old('primer_nombre')}}"/>
                <x-input_text col="col-md-6" type="text" identificador="segundo_nombre" titulo="Segundo nombre:" value="{{old('segundo_nombre')}}" />
                <x-input_text col="col-md-6" type="number" identificador="edad" titulo="Edad:" value="{{old('edad')}}"/>
                <x-select-basic col="col-md-6" identificador="genero" titulo="Genero:">
                    <option value="Masculino">Masculino</option>
                    <option value="Femenino">Femenino</option>
                </x-select-basic>
                <x-select-basic col="col-md-6" identificador="cirujano" titulo="Cirujano:">
                    @foreach($select_cirujanos as $select_cirujano)
                    <option value="{{$select_cirujano->id}}">
                        {{$select_cirujano->primer_nombre}}&nbsp;{{$select_cirujano->primer_apellido}}</option>
                    @endforeach
                </x-select-basic>
                <x-select-basic col="col-md-6" identificador="responsable_pago" titulo="Responsable de pago:">
                    <option value="Hospital">Hospital</option>
                    <option value="Otros">Otros</option>
                </x-select-basic>
                <x-select-basic col="col-md-6" identificador="intervencion" titulo="Intervencion:">
                    @foreach($select_intervencions as $select_intervencion)
                    <option value="{{$select_intervencion->id}}">
                        {{$select_intervencion->nombre}}</option>
                    @endforeach
                </x-select-basic>
                <x-input_text col="col-md-6" type="date" identificador="fecha_intervencion" titulo="Fecha de intervencion:"/>
                <x-select-basic col="col-md-6" identificador="tipo_paciente" titulo="Tipo paciente:">
                    <option value="Fundacional">Fundacional</option>
                    <option value="No Fundacional">No Fundacional </option>
                </x-select-basic>
            </div>
            <div class="row">
                <div class="col-12">
                    <hr>
                </div>
            </div>
            <div class="row">
                <x-input-monto-basic col="col-md-7" titulo="Honorarios anestesiolgo:" identificador="format_honorarios_anestesiologo" onblur="formatear_monto_honorarios_anestesiologo()" value="{{old('format_honorarios_anestesiologo','0.00')}}" />
                <x-input-hidden col="col-md-7" type="hidden" identificador="honorarios_anestesiologo"  value="{{old('honorarios_anestesiologo',0.00)}}" />

                <x-input-monto-basic col="col-md-7" titulo="Honorarios anestesiolgo 15%:" identificador="format_honorarios_anestesiologo_p" value="{{old('format_honorarios_anestesiologo_p','0.00')}}" readonly/>
                <x-input-hidden col="col-md-7" type="hidden"  identificador="honorarios_anestesiologo_p" value="{{old('honorarios_anestesiologo_p',0.00)}}"/>

                <x-input-monto-basic col="col-md-7" titulo="Honorarios anestesiolgo total:" identificador="format_honorarios_anestesiologo_total" value="{{old('format_honorarios_anestesiologo_total','0.00')}}" readonly />
                <x-input-hidden col="col-md-7" type="hidden"  identificador="honorarios_anestesiologo_total" value="{{old('honorarios_anestesiologo_total',0.00)}}" />

                <x-input-monto-basic col="col-md-7" titulo="Evaluacion Preanestesica:"  identificador="format_evaluacion_preanestesica" onblur="formatear_monto_evaluacion_preanestesica()"  value="{{old('format_evaluacion_preanestesica','0.00')}}"/>
                <x-input-hidden col="col-md-7" type="hidden" identificador="evaluacion_preanestesica"  value="{{old('evaluacion_preanestesica',0.00)}}"/> 

                <x-input-monto-basic col="col-md-7" titulo="Evaluacion Preanestesica 15%:" identificador="format_evaluacion_preanestesica_p"  value="{{old('format_evaluacion_preanestesica_p','0.00')}}" readonly />
                <x-input-hidden col="col-md-7" type="hidden" identificador="evaluacion_preanestesica_p" value="{{old('evaluacion_preanestesica_p',0.00)}}"/>

                <x-input-monto-basic col="col-md-7" titulo="Evaluacion Preanestesica total:" identificador="format_evaluacion_preanestesica_total" value="{{old('format_evaluacion_preanestesica_total','0.00')}}" readonly />
                <x-input-hidden col="col-md-7" type="hidden" identificador="evaluacion_preanestesica_total" value="{{old('evaluacion_preanestesica_total',0.00)}}" />

                <x-input-monto-basic col="col-md-7" titulo="Monto a pagar:" identificador="format_monto_a_pagar" value="{{old('format_monto_a_pagar','0.00')}}" readonly />
                <x-input-hidden col="col-md-7" type="hidden" identificador="monto_a_pagar"  value="{{old('monto_a_pagar',0.00)}}" />

                <x-input-monto-basic col="col-md-7" titulo="Monto pagado:" identificador="format_monto_pagado" value="{{old('format_monto_pagado','0.00')}}"  onblur="calculo_total()"/>
                <x-input-hidden col="col-md-7" type="hidden"  identificador="monto_pagado" value="{{old('monto_pagado',0.00)}}" />

                <x-input-monto-basic col="col-md-7" titulo="Diferencia:" identificador="format_diferencia" value="{{old('format_diferencia','0.00')}}" />
                <x-input-hidden col="col-md-7" type="hidden" identificador="diferencia"  value="{{old('diferencia',0.00)}}" />
            </div>
            <div class="row">
                <div class="col-12">
                    <hr>
                </div>
            </div>
            <div class="row">
                <x-select-basic col="col-md-6" identificador="tipo_pago" titulo="Tipo de pago:">
                    <option value="Pago con Trasferencia">Pago con Trasferencia</option>
                    <option value="Pago en Divisas">Pago en Divisas </option>
                    <option value="Pago en Dolares">Pago en Dolares</option>
                    <option value="Pago mixto">Pago mixto</option>
                    <option value="Pago movil">Pago movil</option>
                </x-select-basic>
                <x-select-basic col="col-md-6" identificador="estado" titulo="Estado:">
                    <option value="Ninguno">Ninguno</option>
                    <option value="Cancelado">Cancelado</option>
                    <option value="Cancelado Parcial">Cancelado Parcial</option>
                    <option value="Pendiente">Pendiente</option>
                </x-select-basic>
                <x-input_text col="col-md-6" type="date" identificador="fecha_pago" titulo="Fecha de Pago:"/>
                <x-input_text col="col-md-6" type="date" identificador="fecha_iq" titulo="Fecha de IQx:" />
                <x-textarea-basic col="col-md-12" rows="8" type="date" identificador="comentario" titulo="Comentario:">{{old('comentario')}}</x-textarea-basic >
            </div>
        </x-form_basic>
    </div>
</div>

<script>

var total_format_honorarios_anestesiologo = 0;

var total_format_evaluacion_preanestesica = 0;

var total_pagar = 0;


function formatear_monto_honorarios_anestesiologo() {

    var numero = document.getElementById('format_honorarios_anestesiologo').value;
    //campo oculto para guardar
    var numero = document.getElementById('honorarios_anestesiologo').value = numero;

    //para formatear el numero 
    const formatter = new Intl.NumberFormat('en-EU', {
        style: 'currency',
        currency: 'USD'
    })

    document.getElementById('format_honorarios_anestesiologo').value = formatter.format(numero).replace('$', '');

    var porcentaje_total = numero * 0.15;
    //campo oculto para guardar
    document.getElementById('honorarios_anestesiologo_p').value = porcentaje_total;

    document.getElementById('format_honorarios_anestesiologo_p').value =  formatter.format(porcentaje_total).replace('$', '');

    var total = parseFloat(numero) - parseFloat(porcentaje_total);

    //campo oculto para guardar
    document.getElementById('honorarios_anestesiologo_total').value = total;

    document.getElementById('format_honorarios_anestesiologo_total').value = formatter.format(total).replace('$', '');

    total_format_honorarios_anestesiologo = total

    total_pagar = parseFloat(total_format_honorarios_anestesiologo) + parseFloat(total_format_evaluacion_preanestesica);
    //campo oculto para guardar
    document.getElementById('monto_a_pagar').value = total_pagar;

    document.getElementById('format_monto_a_pagar').value = formatter.format(total_pagar).replace('$', '');

    document.getElementById('format_monto_pagado').value = '0.00';

    //campo oculto para guardar
    document.getElementById('monto_pagado').value = 0;

    document.getElementById('format_monto_pagado').value = '0.00';

    //campo oculto para guardar
    document.getElementById('diferencia').value = 0;

    document.getElementById('format_diferencia').value = '0.00';

}

function formatear_monto_evaluacion_preanestesica() {

    var numero = document.getElementById('format_evaluacion_preanestesica').value;

    const formatter = new Intl.NumberFormat('en-EU', {
        style: 'currency',
        currency: 'USD'
    })

    //campo oculto para guardar
    document.getElementById('evaluacion_preanestesica').value = numero;

    document.getElementById('format_evaluacion_preanestesica').value =  formatter.format(numero).replace('$', '');

    var porcentaje_total = numero * 0.15;

    //campo oculto para guardar
    document.getElementById('evaluacion_preanestesica_p').value = porcentaje_total;

    document.getElementById('format_evaluacion_preanestesica_p').value = formatter.format(porcentaje_total).replace('$', '');

    var total = parseFloat(numero) - parseFloat(porcentaje_total);

    //campo oculto para guardar
    document.getElementById('evaluacion_preanestesica_total').value = total;

    document.getElementById('format_evaluacion_preanestesica_total').value = formatter.format(total).replace('$', '');

    total_format_evaluacion_preanestesica = total;

    total_pagar = parseFloat(total_format_honorarios_anestesiologo) + parseFloat(total_format_evaluacion_preanestesica);

    //campo oculto para guardar
    document.getElementById('format_monto_a_pagar').value = formatter.format(total_pagar).replace('$', '');

    document.getElementById('monto_a_pagar').value = total_pagar;

    //campo oculto para guardar
    document.getElementById('monto_pagado').value = 0;

    document.getElementById('format_monto_pagado').value = '0.00';

    //campo oculto para guardar
    document.getElementById('diferencia').value = 0;

    document.getElementById('format_diferencia').value = '0.00';

}

function calculo_total() {

    var numero = document.getElementById('format_monto_pagado').value;

    const formatter = new Intl.NumberFormat('en-EU', {
        style: 'currency',
        currency: 'USD'
    })

    //campo oculto para guardar
    document.getElementById('monto_pagado').value = numero;

    document.getElementById('format_monto_pagado').value = formatter.format(numero).replace('$', '');

    var diferencia = parseFloat(total_pagar) - parseFloat(numero);

    //campo oculto para guardar
    document.getElementById('diferencia').value = diferencia;

    document.getElementById('format_diferencia').value = formatter.format(diferencia).replace('$', '')

}
</script>

@endsection