@extends('layouts.master')

@section('title', 'Equipo')

@section('content')

    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
                    <h1 class="m-0 text-dark">{{ @$equipo->organizacion->nombre }} <small>{{ @$equipo->worker_name }}</small></h1>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <a href="{{ url()->previous() }}" class="btn btn-secondary btn-block">Volver</a>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">
            <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-bars mr-1"></i>
                                Informacion Equipo
                            </h3>
                        </div>
                        <div class="card-body">
                            <strong><i class="fas fa-server mr-1"></i> Modelo</strong>
                            <p class="text-muted">{{ @$equipo->group_name }}</p>
                            <hr>
                            <strong><i class="fas fa-barcode mr-1"></i> Serial</strong>
                            <p class="text-muted">{{ @$equipo->serial }}</p>
                            <hr>
                            <strong><i class="fas fa-calendar mr-1"></i> Fecha Ingreso</strong>
                            <p class="text-muted">{{ date('d/m/Y',strtotime(@$equipo->fecha_compra)) }}</p>
                            <hr>
                            <strong><i class="fas fa-map-marker-alt mr-1"></i> Ubicacion</strong>
                            <p class="text-muted">{{ @$equipo->ubicacion->nombre }}</p>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header ui-sortable-handle bg-dark text-light">
                            <h3 class="card-title">
                                <i class="fas fa-screwdriver-wrench mr-1"></i>
                                Servicios
                            </h3>
                        </div>
                        <div class="card-body">
                            @if(count($equipo->servicios))
                                <table id="table" class="table table-hover table-striped nowrap" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Fecha Inicio</th>
                                            <th>Descripcion</th>
                                            <th>Fecha Fin</th>
                                            <th>Informe</th>
                                            <th class="text-center">Estado</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (@$equipo->servicios as $servicio)
                                            <tr>
                                                <td>{{ date('d/m/Y',strtotime($servicio->created_at)) }}</td>
                                                <td>{{ $servicio->descripcion }}</td>
                                                @if($servicio->informe == null)
                                                    <td></td>
                                                    <td></td>
                                                    <td class="text-center">En Proceso</td>
                                                @else
                                                    <td>{{ date('d/m/Y',strtotime($servicio->updated_at)) }}</td>
                                                    <td>{{ $servicio->informe }}</td>
                                                    <td class="text-center">Finalizado</td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <div><br><p class="text-center">No Existen Registros</p><br></div>
                            @endif
                        </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>
                                Hashrate Ultimos 30 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>
    Highcharts.getJSON(
        'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',
        function (data) {

            Highcharts.chart('container', {
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: null
                },
                xAxis: {
                    type: 'category',
                    title: {
                        text: 'Fecha'
                    }
                },
                yAxis: [{ // Primary yAxis
                    labels: {
                        format: '{value} TH/s',
                    },
                    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: 'TH/s',
                        data: [
                            @foreach(@array_reverse($data['data']['data']) as $dat)
                            ['{{ $dat['date']}}', {{ ($dat['hashrate']/1000000000000)}}],
                            @endforeach
                        ],
                        tooltip: {
                            shared: true,
                            valueSuffix: " TH/s",
                            valueDecimals: 2,
                        }
                    },
                    {
                        type: 'spline',
                        name: 'USD',
                        yAxis: 1,
                        data: [
                            @foreach(@array_reverse($data['data']['data']) as $dat)
                            ['{{ $dat['date']}}', {{ (($dat['hashrate']/1000000000000)* $TH_BTC * $BTC_USD)}}],
                            @endforeach
                        ],
                        tooltip: {
                            shared: true,
                            valueSuffix: " USD",
                            valueDecimals: 2,
                        }
                    }
                ],
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                credits: {
                    enabled: false
                },
            });


        }
    );
    </script>
@endsection

@section('javascript')

@endsection