@extends('layouts.master')

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

@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>{{number_format(($ultimo->hashrate/1000000000000),2,',','.')}}<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->meanExpectedReward24H ,6,',','.')}}<sup class="texto-card"> ETH/24hs</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fab fa-ethereum"></i>
                        </div>
                        <a href="#" class="small-box-footer">Rentabilidad 100MH/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($ultimo->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>{{$ultimo->workers}} <sup class="texto-card">{{$ultimo->miners}}</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fa-solid fa-server"></i>
                        </div>
                        <a href="#" class="small-box-footer">Trabajadores<sup>Mineros</sup></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 100MH/s + Precio ETH. Ultimos 30 Dias
                            </h3>
                        </div>
                        <div class="card-body">
                            <div id="container1"></div>
                        </div>
                    </div>
                    <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>
                                Trabajadores y Mineros. Ultimos 30 Dias
                            </h3>
                        </div>
                        <div class="card-body">
                            <div id="container2"></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} ETH',
            },
            title: {
                text: '',
            }
        }, { // Secondary yAxis
            title: {
                text: '',
            },
            labels: {
                format: '{value} USD',
            },
            opposite: true
        }],
        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: 'ETH',
                data: [
                    @foreach($registros as $data)
                    ['{{ date("d/m/Y H:i", strtotime($data->created_at))}}', {{ $data->expectedReward24H }}],
                    @endforeach
                ],
                tooltip: {
                    shared: true,
                    valueSuffix: " ETH",
                    valueDecimals: 8,
                }
            },
            {
                type: 'spline',
                name: 'USD',
                yAxis: 1,
                data: [
                    @foreach($registros as $data)
                    ['{{ date("d/m/Y H:i", strtotime($data->created_at))}}', {{ $data->USD }}],
                    @endforeach
                ],
                tooltip: {
                    shared: true,
                    valueSuffix: " USD",
                    valueDecimals: 0,
                }
            }
        ],
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
    });

    Highcharts.chart('container2', {
        chart: {
            zoomType: 'x'
        },
        title: {
            text: null
        },
        xAxis: {
            type: 'category',
            title: {
                text: 'Fecha'
            }
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '',
            },
            title: {
                text: 'Mineros',
            }
        }, { // Secondary yAxis
            title: {
                text: 'Trabajadores',
            },
            labels: {
                format: '',
            },
            opposite: true
        }],
        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: 'spline',
                name: 'Mineros',
                data: [
                    @foreach($registros as $data)
                    ['{{ date("d/m/Y H:i", strtotime($data->created_at))}}', {{ $data->miners }}],
                    @endforeach
                ],
                tooltip: {
                    shared: true,
                    valueSuffix: "",
                    valueDecimals: 0,
                }
            },
            {
                type: 'spline',
                name: 'Trabajadores',
                yAxis: 1,
                data: [
                    @foreach($registros as $data)
                    ['{{ date("d/m/Y H:i", strtotime($data->created_at))}}', {{ $data->workers }}],
                    @endforeach
                ],
                tooltip: {
                    shared: true,
                    valueSuffix: "",
                    valueDecimals: 0,
                }
            }
        ],
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
    });

    </script>
@endsection

@section('javascript')

@endsection