@extends('master')

@section('title') {{$station_id}} - {{$channel_id}} @endsection

@section('navigation_button')
    {{-- <a href="{{route('choose_channel', $station_id)}}" class="nav-link active" aria-current="page">Back</a> --}}
@endsection

@section('content')
    <div class="row" style="padding-top: 50px;">
        <div class="col-md-9">
            <h2>Station - {{$station_id}}</h2>
            <h3>Channel - {{$channel_id}}</h3>
        </div>
        <div class="col-md-3">
            <a href="{{route('export_data', ['station_id' => $station_id, 'channel_id' => $channel_id])}}">Export to CSV</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <thead>
                    <tr>
                        <th>Station ID</th>
                        <th class="text-center">Channel ID</th>
                        <th class="text-center">Date</th>
                        <th class="text-center">Time</th>
                        <th class="text-center">Hauteur (m)</th>
                        <th class="text-center">Débit (m³/s)</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $data_table_chart = [
                            ["DateTime", "Hauteur", "Debit"]
                        ];
                    @endphp
                    @foreach($data_client as $data)
                        @php
                            $data_table_chart[] = [
                                App\Helpers\ConversionHelper::convertDate($data->Date).' '.App\Helpers\ConversionHelper::convertTime($data->Time),
                                $data->Value,
                                App\Helpers\ConversionHelper::convertValue($data->Value, $data->Station_ID)
                            ];
                        @endphp
                        <tr>
                            <td>{{$data->Station_ID}}</td>
                            <td class="text-center">{{$data->Channel_ID}}</td>
                            <td class="text-center">{{App\Helpers\ConversionHelper::convertDate($data->Date)}}</td>
                            <td class="text-center">{{App\Helpers\ConversionHelper::convertTime($data->Time)}}</td>
                            <td class="text-center">{{$data->Value}}</td>
                            <td class="text-center">{{App\Helpers\ConversionHelper::convertValue($data->Value, $data->Station_ID)}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div id="curve_chart" style="height: 500px"></div>
        </div>
    </div>
@endsection


@section('scripts')
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data2 = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2004',  1000,      400],
            ['2005',  1170,      460],
            ['2006',  660,       1120],
            ['2007',  1030,      540]
            ]);

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'DateTime');
            data.addColumn('number', 'Hauteur');
            data.addColumn('number', 'Debit');

            @foreach($data_client->reverse() as $data)
                data.addRow([
                    '{{App\Helpers\ConversionHelper::convertDate($data->Date)." ".App\Helpers\ConversionHelper::convertTime($data->Time)}}',
                    {{$data->Value}},
                    {{App\Helpers\ConversionHelper::convertValue($data->Value, $data->Station_ID)}}
                ]);
            @endforeach
            // var data = google.visualization.arrayToDataTable(JSON.parse(table));

            var options = {
            title: 'Hauteur / Debit',
            curveType: 'function',
            legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
        }
    </script>
    <script type="text/javascript">
        @if(isset($import_counter))
            console.log("{{$import_counter}} entries imported")
        @endif
    </script>
@endsection