{% extends 'base/base.html' %}

{% block page_content %}



<!-- Content Row -->
<div class="row">

    <!-- Earnings (Monthly) Card Example -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="xfecha text-xs font-weight-bold text-success text-uppercase mb-1">
                        </div>
                        <div class="xtcambio h5 mb-0 font-weight-bold text-gray-800"></div>
                    </div>
                    <div class=" col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Earnings (Monthly) Card Example -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Earnings (Annual)</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

{% endblock %}

{% block js_page %}


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>


<script>
    function convertirFecha(fecha) {
        const meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];

        // Dividir la fecha en día, mes y año
        const partes = fecha.split('/');
        const dia = partes[0];
        const mes = parseInt(partes[1], 10) - 1; // Restar 1 porque los meses en el array empiezan desde 0
        const año = partes[2];

        // Formatear la fecha
        const fechaFormateada = `${dia} ${meses[mes]} ${año}`;
        return fechaFormateada;
    }
</script>
<script>
    $(function () {
        $.ajax({
            url: 'https://www.banxico.org.mx/SieAPIRest/service/v1/series/SF43718/datos/oportuno?token=180d95cdd590b2412bc5211ed1253a682bd35ecb14164f99735b0c2a549e0782',
            method: 'get',
            jsonp: 'callback',
            dataType: 'jsonp', //Se utiliza JSONP para realizar la consulta cross-site
            success: function (response) {  //Handler de la respuesta
                //console.log(response);
                var series = response.bmx.series;

                //Se carga una tabla con los registros obtenidos
                for (var i in series) {
                    var serie = series[i];
                    var fecha = serie.datos[0].fecha;
                    var tcambio = serie.datos[0].dato;
                    const fechaConvertida = convertirFecha(fecha);
                    //console.log(
                    //    fechaConvertida
                    //);


                    $('.xfecha').html('Tipo de Cambio ( ' + '<b>' + fechaConvertida + '</b>' + ' )');
                    $('.xtcambio').html('$' + tcambio);

                    //alert(fecha);
                    //$('#rfecha').append(fecha);
                    //$('#rtcambio').append(tcambio);
                    //var reg = '<tr><td>' + serie.titulo + '</td><td>' + serie.datos[0].fecha + '</td><td>' + serie.datos[0].dato + '</td></tr>'
                    //$('#result').append(reg);
                }
            },
            error: function (err) {
                console.log(err);
            }
        });
    });
</script>
{% endblock %}