<div>
    <!--*******************************************************************-->
    <!--** TITULO                                                        **-->
    <!--*******************************************************************-->
    @section('titulo')
        Listado de registro
    @endsection
    <div class="p-0 px-lg-1 py-lg-2">
        <x-card.simple>
            <x-slot name="card_body">
                <div class="row p-1">
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** NUMERO DE HISTORIA    **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="Numero de historia" msj="Inserte codigo" identificador="codigo"
                            maxlength="30" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** TIPO DOCUMENTO        **-->
                        <!--***************************-->
                        <x-form.lw.selectlabel label="Tipo documento" msj="Seleccione tipo" identificador="tipo_documento"
                            atributo="tipo_documento">
                            <option value="C">Cedula</option>
                            <option value="P">Pasaporte</option>
                            <option value="H">Historia</option>
                            <option value="O">Otros</option>
                        </x-form.lw.selectlabel>
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** NUMERO DE DOCUMENTO   **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="Nro Documento" msj="Inserte documento" identificador="documento"
                            maxlength="30" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** GENERO                **-->
                        <!--***************************-->
                        <x-form.lw.selectlabel label="Genero" msj="Seleccione genero" identificador="genero"
                            atributo="genero">
                            <option value="M">Masculino</option>
                            <option value="F">Femenino</option>}
                            <option value="O">Otro</option>
                        </x-form.lw.selectlabel>
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** APELLIDOS             **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="Apellidos" msj="Inserte apellidos" identificador="apellidos"
                            maxlength="50" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** NOMBRES               **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="Nombres" msj="Inserte nombres" identificador="nombres"
                            maxlength="50" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** FECHA NACIMIENTO      **-->
                        <!--***************************-->
                        <x-form.lw.inputdate label="Fecha de nacimiento" msj="Inserte fecha" identificador="fecha_nac"
                            maxlength="30" onblur="CALCULAR_EDAD('fecha_nac','edad')" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** EDAD                  **-->
                        <!--***************************-->
                        <x-form.static.inputlabel label="Edad" msj="edad" identificador="edad" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** TIPO DE PACIENTE      **-->
                        <!--***************************-->
                        <x-form.lw.selectlabel label="Tipo de paciente" msj="Seleccione el tipo de paciente"
                            identificador="tipo_paciente" atributo="tipo_paciente">
                            <option value="F">Fundacional</option>
                            <option value="N">No Fundacional</option>
                            <option value="O">Otro</option>
                        </x-form.lw.selectlabel>
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** Factura               **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="NRO Factura" msj="Inserte  Nro Factura" identificador="nro_factura"
                            maxlength="15" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** FECHA FACTURA         **-->
                        <!--***************************-->
                        <x-form.lw.inputdate label="Fecha factura" msj="Inserte fecha" identificador="fecha_factura" />
                    </div>
                    <div class="col-md-3">
                        <!--***************************-->
                        <!--** FECHA IQ         **-->
                        <!--***************************-->
                        <x-form.lw.inputdate label="Fecha IQ" msj="Inserte fecha" identificador="fecha_iq" />
                    </div>
    
                    <div class="col-md-6" style="position: relative;">
                        <!--***************************-->
                        <!--** CIRUJANO              **-->
                        <!--***************************-->
                        @livewire('cirujano.select-cirujano', ['id' => null])
                    </div>
                    <div class="col-md-6" style="position: relative;">
                        <!--***************************-->
                        <!--**  ANESTESIOLOGO         **-->
                        <!--***************************-->
                        @livewire('anestesiologo.select-anestesiologo', ['id' => null])
                    </div>
    
                    <div class="col-md-6">
                        <!--***************************-->
                        <!--** RESPONSABLE DEL PAGO  **-->
                        <!--***************************-->
                        <x-form.lw.inputlabel label="Responsable del pago" msj="Inserte responsasble"
                            identificador="responsable_pago" />
                    </div>
                    <div class="col-md-6">
                        <!--***************************-->
                        <!--** FECHA INTERVENCION    **-->
                        <!--***************************-->
                        <x-form.lw.inputdate label="Fecha de intervencion" msj="Inserte fecha"
                            identificador="fecha_intervencion" />
                    </div>
    
    
                    <div class="col-md-12" style="position: relative;">
                        <!--***************************-->
                        <!--** INTERVENCION          **-->
                        <!--***************************-->
    
                        @livewire('intervencion.select-intervencion', ['id' => null])
    
                    </div>
    
                </div>
                <hr>
                <h5 class="px-1 py-0  azul-intenzo">Montos</h5>
                <div class="row  p-1">
    
                    <div class="col-md-6" style="position: relative;">
                        <!--***************************-->
                        <!--** TASA                  **-->
                        <!--***************************-->
    
                        @livewire('tasa.select-tasa', ['id' => null])
    
                    </div>
                    <div class="col-md-6"></div>
                    <div class="col-md-4">
                        <!--********************************-->
                        <!--** HONORARIO DE ANESTECIOLOGO **-->
                        <!--********************************-->
                        <x-form.lw.inputmontodoble label="Honorarios anestesiolgo" dolar="honorarios_anestesiologo_dolar"
                            msj="Inserte monto" identificador="honorarios_anestesiologo"
                            wire:model.defer='honorarios_anestesiologo' onblur="montos_honorarios_anestesiologo()" />
                    </div>
                    <div class="col-md-4">
                        <!--**********************************-->
                        <!--** HONORARIO DE ANESTECIOLOGO P **-->
                        <!--**********************************-->
                        <x-form.lw.inputmontodoble label="Honorarios anestesiolgo 15%"
                            dolar="honorarios_anestesiologo_p_dolar" readonly msj="Inserte monto"
                            identificador="honorarios_anestesiologo_p" />
                    </div>
                    <div class="col-md-4">
                        <!--**********************************-->
                        <!--** HONORARIO DE ANESTECIOLOGO T **-->
                        <!--**********************************-->
                        <x-form.lw.inputmontodoble label="Honorarios anestesiolgo total"
                            dolar="honorarios_anestesiologo_total_dolar" readonly msj="Inserte monto"
                            identificador="honorarios_anestesiologo_total" />
                    </div>
                    <div class="col-md-4">
                        <!--********************************-->
                        <!--** EVALUACION PREANESTESICA   **-->
                        <!--********************************-->
                        <x-form.lw.inputmontodoble label="Honorarios preanestesia " dolar="evaluacion_preanestesica_dolar"
                            msj="Inserte monto" identificador="evaluacion_preanestesica"
                            wire:model.defer='evaluacion_preanestesica' onblur="montos_evaluacion_preanestesica()" />
                    </div>
                    <div class="col-md-4">
                        <!--*********************************-->
                        <!--** EVALUACION PREANESTESICA P **-->
                        <!--********************************-->
                        <x-form.lw.inputmontodoble label="Honorarios preanestesia 15%"
                            dolar="evaluacion_preanestesica_p_dolar" readonly msj="Inserte monto"
                            identificador="evaluacion_preanestesica_p" />
                    </div>
                    <div class="col-md-4">
                        <!--********************************-->
                        <!--** EVALUACION PREANESTESICA  T **-->
                        <!--********************************-->
                        <x-form.lw.inputmontodoble label="Honorarios preanestesia total"
                            dolar="evaluacion_preanestesica_total_dolar" readonly msj="Inserte monto"
                            identificador="evaluacion_preanestesica_total" />
    
                    </div>
                    <div class="col-md-4">
                        <!--********************************-->
                        <!--** MONTO A PAGAR              **-->
                        <!--********************************-->
                        <x-form.lw.inputmontodoble label="Monto a pagar" readonly dolar="monto_dolar" msj="Inserte monto"
                            identificador="monto" />
                    </div>
                    <div class="col-md-4">
                        <!--**********************************-->
                        <!--** MONTO PAGADO                 **-->
                        <!--**********************************-->
                        <x-form.lw.inputmontodoble label="Monto pagado" readonly dolar="monto_pagado_dolar"
                            msj="Inserte monto" identificador="monto_pagado" />
                    </div>
                    <div class="col-md-4">
                        <!--**********************************-->
                        <!--** DIFERENCIA                   **-->
                        <!--**********************************-->
                        <x-form.lw.inputmontodoble label="Diferencia" readonly dolar="monto_diferencia_dolar"
                            msj="Inserte monto" identificador="monto_diferencia" />
    
                    </div>
                    <div class="col-md-12">
                        <!--**********************************-->
                        <!--** COMENTARIO                   **-->
                        <!--**********************************-->
                        <x-form.lw.textarealabel label="Comentario" msj="Comentario" row="5"
                            identificador="comentario" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="card_footer">
                <div class="row  p-1">
                    <div class="d-flex justify-content-end">
                        <x-btn.guardar accion="guardar_registro">Guardar Registro</x-btn.guardar>
                    </div>
                </div>
            </x-slot>
        </x-card.simple>
    </div>
    @section('script')
        <script>
            livewire.on('ev_msj_guardado_modal', function(_mensaje, _registro) {

                Swal.fire({
                    title: "Registro Guardado",
                    text: _mensaje,
                    icon: "success",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Si",
                    cancelButtonText: "No"
                }).then((result) => {
                    if (result.isConfirmed) {
                        Livewire.emit('ev_formulario_registro', 'redirecion', _registro)
                    } else {
                        Livewire.emit('ev_formulario_registro', 'redirecion', 0)
                    }
                });
            });


            /*** ATRIBUTOS ***/

            const NRO_DOCUMENTO = document.getElementById('documento');

            const HONORARIO_ANESTESIOLOGO = document.getElementById('honorarios_anestesiologo');
            const HONORARIO_ANESTESIOLOGO_P = document.getElementById('honorarios_anestesiologo_p');
            const HONORARIO_ANESTESIOLOGO_TOTAL = document.getElementById('honorarios_anestesiologo_total');
            const EVALUACION_PREANESTESICA = document.getElementById('evaluacion_preanestesica');
            const EVALUACION_PREANESTESICA_P = document.getElementById('evaluacion_preanestesica_p');
            const EVALUACION_PREANESTESICA_TOTAL = document.getElementById('evaluacion_preanestesica_total');


            //SOLO NUMERO
            const SOLO_NUMEROS = function() {

                if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;
            }


            NRO_DOCUMENTO.addEventListener('keypress', SOLO_NUMEROS);
            HONORARIO_ANESTESIOLOGO.addEventListener('keypress', SOLO_NUMEROS);
            EVALUACION_PREANESTESICA.addEventListener('keypress', SOLO_NUMEROS);


            /*** TOTALES ***/

            const MONTO_A_PAGAR = document.getElementById('monto');
            const MONTO_PAGADO = document.getElementById('monto_pagado');
            const DIFERENCIA = document.getElementById('monto_diferencia');

            /*** DOLAR ***/

            const HONORARIO_ANESTESIOLOGO_DOLAR = document.getElementById('honorarios_anestesiologo_dolar');
            const HONORARIO_ANESTESIOLOGO_P_DOLAR = document.getElementById('honorarios_anestesiologo_p_dolar');
            const HONORARIO_ANESTESIOLOGO_TOTAL_DOLAR = document.getElementById('honorarios_anestesiologo_total_dolar');
            const EVALUACION_PREANESTESICA_DOLAR = document.getElementById('evaluacion_preanestesica_dolar');
            const EVALUACION_PREANESTESICA_P_DOLAR = document.getElementById('evaluacion_preanestesica_p_dolar');
            const EVALUACION_PREANESTESICA_TOTAL_DOLAR = document.getElementById('evaluacion_preanestesica_total_dolar');

            const MONTO_A_PAGAR_DOLAR = document.getElementById('monto_dolar');
            const MONTO_PAGADO_DOLAR = document.getElementById('monto_pagado_dolar');
            const DIFERENCIA_DOLAR = document.getElementById('monto_diferencia_dolar');

            /*** SELECT ***/

            const TASA_SELECCIONADA = document.getElementById('tasa_monto_seleccionado');

            /*** METODOS ***/


            /*****************************/
            /*** CONVERTIR MONTOS       **/
            /*****************************/
            function convertir_montos(_monto) {

                const formatter = new Intl.NumberFormat('de-DE', {
                    style: 'currency',
                    currency: 'EUR'
                })
                monto = formatter.format(_monto.value).replace('€', '');
                _monto.value = monto;

            }
            /*****************************/
            /*** CONVERTIR MONTOS       **/
            /*****************************/
            function convertir_divisas(p_monto, p_convertido) {



                if (p_monto.value != 0) {
                    p_convertido.value = parseFloat(p_monto.value) / parseFloat(TASA_SELECCIONADA.value);

                    p_convertido.value = parseFloat(p_convertido.value).toFixed(2);

                    p_convertido.value = p_convertido.value + " $";


                } else {
                    p_convertido.value = 0 + " $";
                }

            }
            /*****************************/
            /*** CALCULAR TOTALLES     **/
            /*****************************/
            function calcular_totales() {


                if (HONORARIO_ANESTESIOLOGO_TOTAL.value == '') {
                    HONORARIO_ANESTESIOLOGO_TOTAL.value = 0
                }
                if (EVALUACION_PREANESTESICA_TOTAL.value == '') {
                    EVALUACION_PREANESTESICA_TOTAL.value = 0
                }

                MONTO_A_PAGAR.value = parseFloat(HONORARIO_ANESTESIOLOGO_TOTAL.value) + parseFloat(
                    EVALUACION_PREANESTESICA_TOTAL.value);
                DIFERENCIA.value = MONTO_A_PAGAR.value;

                convertir_divisas(MONTO_A_PAGAR, MONTO_A_PAGAR_DOLAR);
                convertir_divisas(DIFERENCIA, DIFERENCIA_DOLAR);

                MONTO_PAGADO.value = 0, 00;
                MONTO_PAGADO_DOLAR.value = 0, 00;

                convertir_montos(MONTO_A_PAGAR);
                convertir_montos(DIFERENCIA);

            }

            /*** EVENETOS ***/
            function montos_honorarios_anestesiologo() {

                HONORARIO_ANESTESIOLOGO_P.value = parseFloat(HONORARIO_ANESTESIOLOGO.value) * 0.15;
                HONORARIO_ANESTESIOLOGO_TOTAL.value = parseFloat(HONORARIO_ANESTESIOLOGO.value) - parseFloat(
                    HONORARIO_ANESTESIOLOGO_P.value);

                convertir_divisas(HONORARIO_ANESTESIOLOGO, HONORARIO_ANESTESIOLOGO_DOLAR);
                convertir_divisas(HONORARIO_ANESTESIOLOGO_P, HONORARIO_ANESTESIOLOGO_P_DOLAR);
                convertir_divisas(HONORARIO_ANESTESIOLOGO_TOTAL, HONORARIO_ANESTESIOLOGO_TOTAL_DOLAR);

                calcular_totales();

                convertir_montos(HONORARIO_ANESTESIOLOGO);
                convertir_montos(HONORARIO_ANESTESIOLOGO_P);
                convertir_montos(HONORARIO_ANESTESIOLOGO_TOTAL);

            }

            function montos_evaluacion_preanestesica() {


                EVALUACION_PREANESTESICA_P.value = parseFloat(EVALUACION_PREANESTESICA.value) * 0.15;
                EVALUACION_PREANESTESICA_TOTAL.value = parseFloat(EVALUACION_PREANESTESICA.value) - parseFloat(
                    EVALUACION_PREANESTESICA_P.value);

                convertir_divisas(EVALUACION_PREANESTESICA, EVALUACION_PREANESTESICA_DOLAR);
                convertir_divisas(EVALUACION_PREANESTESICA_P, EVALUACION_PREANESTESICA_P_DOLAR);
                convertir_divisas(EVALUACION_PREANESTESICA_TOTAL, EVALUACION_PREANESTESICA_TOTAL_DOLAR);

                /**** CON LIVEWIRE MANDAR EL VALOR AL BACK***/
                calcular_totales();

                convertir_montos(EVALUACION_PREANESTESICA);
                convertir_montos(EVALUACION_PREANESTESICA_P);
                convertir_montos(EVALUACION_PREANESTESICA_TOTAL);

            }


            /***EDAD**/
            //CALCULAR_EDAD
            const CALCULAR_EDAD = function(fecha, edad) {
                var input_fecha = document.getElementById(fecha);
                var input_edad = document.getElementById(edad);
                var fechaNacimiento = input_fecha.value;
                var fechaNacimiento = new Date(fechaNacimiento);
                var today = new Date();
                var edad = today.getFullYear() - fechaNacimiento.getFullYear();
                var m = today.getMonth() - fechaNacimiento.getMonth();
                if (m < 0 || (m === 0 && today.getDate() < fechaNacimiento.getDate())) {
                    edad--;
                }
                input_edad.value = edad;
            };

            livewire.on('ev_cambio_tasa_monto', function(_tasa) {

                HONORARIO_ANESTESIOLOGO.value = 0;
                HONORARIO_ANESTESIOLOGO_P.value = 0;
                HONORARIO_ANESTESIOLOGO_TOTAL.value = 0;
                EVALUACION_PREANESTESICA.value = 0;
                EVALUACION_PREANESTESICA_P.value = 0;
                EVALUACION_PREANESTESICA_TOTAL.value = 0;
                MONTO_A_PAGAR.value = 0;
                MONTO_PAGADO.value = 0;
                DIFERENCIA.value = 0;

                /*** DOLAR ***/
                HONORARIO_ANESTESIOLOGO_DOLAR.value = 0;
                HONORARIO_ANESTESIOLOGO_P_DOLAR.value = 0;
                HONORARIO_ANESTESIOLOGO_TOTAL_DOLAR.value = 0;
                EVALUACION_PREANESTESICA_DOLAR.value = 0;
                EVALUACION_PREANESTESICA_P_DOLAR.value = 0;
                EVALUACION_PREANESTESICA_TOTAL_DOLAR.value = 0;
                MONTO_A_PAGAR_DOLAR.value = 0;
                MONTO_PAGADO_DOLAR.value = 0;
                DIFERENCIA_DOLAR.value = 0;

            });
        </script>
    @endsection
</div>
