@extends('layouts.master')

@section('title', 'Monedero 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>{{number_format($total,8,',','.')}}<sup class="texto-card"> BTC</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fab fa-btc"></i>
                        </div>
                        <a href="#" class="small-box-footer">BTC Ultimos 30 Dias</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(($total*$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">USD Ultimos 30 Dias</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/BTC</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fas fa-coins"></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>{{count($organizaciones)}} <sup class="texto-card">{{count($organizaciones)}}</sup></h3>
                        </div>
                        <div class="icon">
                            <i class="fas fa-home"></i>
                        </div>
                        <a href="#" class="small-box-footer">Organizaciones</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    @foreach ($organizaciones as $organizacion)
                        @if($organizacion->api_key_viabtc != null)
                            <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>
                                        Ultimos 30 Dias BTC <small> {{$organizacion->nombre}}</small>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <div id="container{{$organizacion->id}}"></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-bars mr-1"></i>
                                        Ultimos 30 Dias BTC <small> {{$organizacion->nombre}}</small>
                                    </h3>
                                </div>
                                <div class="card-body">
                                    @if(count($organizacion->history))
                                        <table class="table table-hover table-striped " style="width:100%;margin:0!important;">
                                            <thead>
                                                <tr>
                                                    <th>Fecha</th>
                                                    <th class="text-right">BTC</th>
                                                    <th class="text-right">~ USD</th>
                                                    <th class="text-right">Ratio</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($organizacion->history as $data)
                                                    <tr>
                                                        <td>{{ date("d/m/Y", strtotime($data['date'])) }}</td>
                                                        <td class="text-right">{{ number_format($data['total_profit'], 8, '.', ',') }} BTC</td>
                                                        <td class="text-right">{{ number_format($data['total_profit_usd'], 2, '.', ',') }} U$D</td>
                                                        <td class="text-right">0.00 %</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @else
                                        <div><br><p class="text-center">No Existen Registros</p><br></div>
                                    @endif
                                </div>
                            </div>
                        @endif
                    @endforeach
                </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.getJSON(
        'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',
        function (data) {
            @foreach ($organizaciones as $organizacion)
            @if($organizacion->api_key_viabtc != null)
            Highcharts.chart('container{{$organizacion->id}}', {
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: null
                },
                xAxis: {
                    type: 'category',
                    title: {
                        text: 'Fecha'
                    }
                },
                yAxis: [{ // Primary yAxis
                    labels: {
                        format: '{value} BTC',
                    },
                    title: {
                        text: 'BTC',
                    }
                }, { // Secondary yAxis
                    title: {
                        text: 'USD',
                    },
                    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: 'BTC',
                        data: [
                            @foreach(@$organizacion->history as $data)
                            ['{{ @$data['date']}}', {{ @$data['total_profit']}}],
                            @endforeach
                        ],
                        tooltip: {
                            shared: true,
                            valueSuffix: " BTC",
                            valueDecimals: 8,
                        }
                    },
                    {
                        type: 'spline',
                        name: 'USD',
                        yAxis: 1,
                        data: [
                            @foreach(@$organizacion->history as $data)
                            ['{{ @$data['date']}}', {{ @$data['total_profit_usd']}}],
                            @endforeach
                        ],
                        tooltip: {
                            shared: true,
                            valueSuffix: " USD",
                            valueDecimals: 2,
                        }
                    }
                ],
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    allowHTML: true,
                    type: 'image/jpeg',
                    enabled: true,
                    filename: 'Gráfico BTC'
                }
            });
            @endif
            @endforeach
        }
    );
</script>



@endsection

@section('javascript')
@endsection