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

<style>
    .img {

        height: 250px;

        transition: opacity 400ms;
    }

    .img:hover {
        opacity: 0.8;
    }
</style>
<div class="container-fuid mx-1 my-3 container-movil ">
    <div class="p-2">
        <div class="container container-movil">
            <div class="row">
                <!-- btn Dolares a bolivares  -->
                <div class="col-md-6">
                    <div class="card  m-1 shadow">
                        <button class="btn btn-link"><img src="{{url('img/dolares.jpg')}}" class="card-img-top img" alt="..."></button>
                        <div class="card-body">
                            <h5 class="card-title">Calcular de Dolares a bolivares </h5>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Tasa
                                    </strong></span>
                                <input type="number" class="form-control w-50" value=0 id="tasa-dia-db" name="tasa-dia-db">
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Bsf</strong></span>
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Dolares
                                    </strong></span>
                                <input type="number" class="form-control w-50" value=0  id="tasa-dolares" name="tasa-dolares">
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>$</strong></span>
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Total
                                    </strong></span>
                                <input type="number" readonly class="form-control w-50" value=0 id="tasa-total-bsf" name="tasa-total-bsf">
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Bsf</strong></span>
                                <button class="btn btn-primary btn-lg btn-block rounded-pill shadow mt-4" onclick="calcular_tasa_dolares_bs()">Calcular</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <!-- btn Bolivares a dolares  -->
                    <div class="card  m-1 shadow">
                        <button class="btn btn-link"><img src="{{url('img/bolivares.jpg')}}" class="card-img-top img" alt="..."></button>
                        <div class="card-body">
                            <h5 class="card-title">Calcular de Bolivares a dolares </h5>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text input-group-lg  rounded-0 w-25" ><strong>Tasa
                                    </strong></span>
                                <input type="number" class="form-control w-50" value=0 id="tasa-dia-bd" name="tasa-dia-bd">
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Bsf</strong></span>
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Bolivares
                                    </strong></span>
                                <input type="number" class="form-control w-50" value=0 id="tasa-bolivares" name="tasa-bolivares">
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Bsf</strong></span>
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>Total
                                    </strong></span>
                                <input type="number" readonly class="form-control w-50" value=0 id="tasa-total-dolares" name="tasa-total-dolares">
                                <span class="input-group-text input-group-lg  rounded-0 w-25"><strong>$</strong></span>
                                <button class="btn btn-primary btn-lg btn-block rounded-pill shadow mt-4" onclick="calcular_tasa_bs_dolares()">Calcular</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert alert-danger alert-dismissible shadow fade show" role="alert" id="error-tasa-dolares-bs">
                <strong>Error!</strong> &nbsp Se debe indicar a que tasa y la cantidad de <strong>Dolares</strong> que desean calcular.
            </div>    
            <div> 
                <div class="alert alert-danger alert-dismissible shadow fade show" role="alert" id="error-tasa-bs-dolares">
                    <strong>Error!</strong> &nbsp Se debe indicar a que tasa y cuantos <strong>Bolivares</strong> que desean calcular.
                </div>
            </div>
        </div>
    </div>




    @endsection




    @section('script')


    <script>
// dolares-bsf 
function calcular_tasa_dolares_bs()
{

    var tasac = $('#tasa-dia-db').val();
    var dolarc = $('#tasa-dolares').val();
    var tasa = parseInt(tasac);
    var dolar = parseInt(dolarc);
    if(isNaN(tasa) || isNaN(dolar)) {
        $('#error-tasa-dolares-bs').removeClass('d-none');
    }else
    {
        var total = tasac * dolarc;
        $('#tasa-total-bsf').val(total);
        $('#error-tasa-dolares-bs').addClass('d-none');
    }
}
// bsf dolares-
function calcular_tasa_bs_dolares()
{
    var tasa = $('#tasa-dia-bd').val();
    var bolivar = $('#tasa-bolivares').val();
    var tasa = parseInt(tasa);
    var bolivar = parseInt(bolivar);
    if(isNaN(tasa) || isNaN(bolivar)) {
        $('#error-tasa-bs-dolares').removeClass('d-none');
    }else
    {
        var total =   bolivar / tasa;
        total = total.toFixed(2); 
        $('#tasa-total-dolares').val(total);
        $('#error-tasa-bs-dolares').addClass('d-none');
    }
}
  
</script>




    @endsection