@extends('layouts.master')

@section('title', 'Fear & Greed Index')

@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-6 col-lg-6">
                    <div class="card">
                        <div class="card-header ui-sortable-handle bg-dark text-light">
                            <h3 class="card-title">
                                <i class="fa-solid fa-circle-question mr-1"></i>
                                Que es Fear & Greed Index?
                            </h3>
                        </div>
                        <div class="card-body">
                            Es una puntuación del 0 al 100 sobre el sentimiento de mercado de las criptomonedas.
                            <br>
                            El <b>Miedo</b> o <b>Fear</b> (0 a 49) indica infravaloración y un exceso de oferta en el mercado.
                            <br>
                            La <b>Codicia</b> o <b>Greed</b> (50 a 100) sugiere una sobrevaloración de las criptomonedas y una posible burbuja.
                            <br>
                            El índice calcula el valor combinando seis factres del mercado con distinta ponderación:
                            <ol>
                                <li><b>Volatilidad</b> (25%) La volatilidad mide el valor actual de Bitcoin mediate medias de los últimos 30 y 90 días.</li>
                                <li><b>Momentum / Volumen del Mercado</b> (25%) El actual volumen de trading y momentum de mercado de Bitcoin es comparado con los valores medios de los previos 30 y 90 días, y a continuación se combinan</li>
                                <li><b>Redes sociales</b> (15%) Este factor analiza el número de hashtags de Twitter relacionados con Bitcoin y, específicamente, su tasa de interacción.</li>
                                <li><b>Dominancia de Bitcoin</b> (10%) Esta entrada mide el nivel de dominancia del mercado por parte de BTC.</li>
                                <li><b>Google Trends</b> (10%) Analizando datos de Google Trends relativos a búsquedas relacionadas con Bitcoin, el índice puede proporcionar perspectivas sobre el sentimiento de mercado</li>
                                <li><b>Resultados de encuestas</b> (15%) Esta entrada se encuentra actualmente pausada y lleva así un tiempo. Pero es quien completaría el porcentaje total en el que se basa el Fear and Creed Index.</li>
                            </ol>
                            El índice Fear and Greed Index es una simple manera de reunir y sintetizar una gama completa de métricas fundamentales y de sentimiento de mercado.
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="card">
                        <div class="card-header ui-sortable-handle bg-dark text-light">
                            <h3 class="card-title">
                                <i class="fas fa-tachometer-alt mr-1"></i>
                                Fear & Greed Index Hoy
                            </h3>
                        </div>
                        <div class="card-body">
                            <div id="container-speed" class="chart-container"></div>
                        </div>
                    </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>
                                Fear & Greed Index Ultimos 90 Dias
                            </h3>
                        </div>
                        <div class="card-body">
                            <div id="container"></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 src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

    <script>


    var gaugeOptions = {
        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '85%'],
            size: '120%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        exporting: {
            enabled: false
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#DF5353'], // red
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#55BF3B'] // green
            ],
            lineWidth: 0,
            tickWidth: 0,
            minorTickInterval: null,
            tickAmount: 2,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    // The speed gauge
    var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Index'
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Index',
            data: [{{$ultimo->valor}}],
            tooltip: {
                valueSuffix: ''
            }
        }]

    }));


    Highcharts.chart('container', {
        chart: {
            zoomType: 'x'
        },
        title: {
            text: null
        },
        xAxis: {
            type: 'category',
            title: {
                text: 'Fecha'
            }
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}',
            },
            title: {
                text: '',
            }
        }],
        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: 'Index',
                data: [
                    @foreach($registros as $data)
                    ['{{ date("d/m/Y", strtotime($data->created_at))}}', {{ $data->valor }}],
                    @endforeach
                ],
                tooltip: {
                    shared: true,
                    valueSuffix: "",
                    valueDecimals: 0,
                }
            }
        ],
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
    });


    </script>
@endsection

@section('javascript')

@endsection