@extends('layouts.master')

@section('title', 'Pool BTC')

@section('content')

    <div class="content-header">
    </div>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>-<sup class="texto-card"> TH/s</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <a href="#" class="small-box-footer">Pool Hash Rate</a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{number_format(($ultimo->target_24hour * 100),6,',','.')}}<sup class="texto-card"> BTC/24hs</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fab fa-btc"></i>
                        </div>
                        <a href="#" class="small-box-footer">Rentabilidad 100 TH/s</a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{number_format($BTC_USD,2,',','.')}}<sup class="texto-card">USD</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <a href="#" class="small-box-footer">Tasa de Cambio</a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>-<sup class="texto-card">-</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fa-solid fa-server"></i>
                        </div>
                        <a href="#" class="small-box-footer">-</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header ui-sortable-handle bg-dark text-light">
                            <h3 class="card-title">
                                <i class="fas fa-chart-area mr-1"></i>
                                Ingresos diarios cada 100 TH/s. Ultimos 30 Dias
                            </h3>
                        </div>
                        <div class="card-body">
                            <div id="container1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script>

    Highcharts.chart('container1', {
        chart: {
            zoomType: 'x'
        },
        title: {
            text: null
        },
        xAxis: {
            type: 'category',
            title: {
                text: 'Fecha'
            }
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value} BTC',
            },
            title: {
                text: 'BTC',
            }
        }],
        legend: {
            enabled: true,
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        tooltip: {
            shared: true
        },
        series: [
            {
                type: 'area',
                name: 'BTC',
                data: [
                    @foreach($registros as $data)
                    ['{{ date("d/m/Y H:i", strtotime($data->created_at))}}', {{ ($data->target_24hour*100) }}],
                    @endforeach
                ],
                tooltip: {
                    shared: true,
                    valueSuffix: " BTC",
                    valueDecimals: 8,
                }
            }
        ],
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
    });

    </script>
@endsection

@section('javascript')

@endsection