@extends('layouts.'.(isset($layout)?$layout:'app'))


@section('pagetitle', ($box->alias ?: $box->name) . ' - ' . __('waterflow.waterflow'))

@section('breadcrumbs')
    <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="{{route('dashboard')}}">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item active">{{$box->client->name}}</li>
        <li class="breadcrumb-item active"><a href="{{route('controlbox', $box)}}">{{$box->alias ?: $box->name}}</a>
        </li>
        <li class="breadcrumb-item active">{{__('waterflow.waterflow')}}</li>
    </ol>
@endsection

@section('content')
    <div clss="container">
        <div clss="row">
            @if(count($historyGraphData) > 0)
            <div class="col-12">
                <div class="card card-theme card-outline">
                    <div data-card-widget="collapse" class="card-header">
                        <h3 class="card-title">{{__('waterflow.usage.daily')}}</h3>

                        <div class="card-tools">
                            <!-- This will cause the card to collapse when clicked -->
                            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                    class="fas fa-minus"></i>
                            </button>
                            <!-- This will cause the chart to be printable -->
                        </div>
                    </div>

                    <div class="card-body">


                        <div class="row">

                            @foreach($historyGraphData as $id => $graph)
                                <canvas id="History{{$id}}" style="display: block; height: 500px; width: 100%;"
                                        class="chartjs-render-monitor"></canvas>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            @endif
            <div class="col-12">
            <div class="card card-theme card-outline">
                <div data-card-widget="collapse" class="card-header">
                    <h3 class="card-title">{{__('waterflow.usage.total')}}</h3>

                    <div class="card-tools">
                        <!-- This will cause the card to collapse when clicked -->
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                class="fas fa-minus"></i>
                        </button>
                        <!-- This will cause the chart to be printable -->
                    </div>
                </div>

                <div class="card-body">


                    <div class="row">
                        @foreach($graphData as $id => $graph)
                            <canvas id="FlowChart{{$id}}" style="display: block; height: 500px; width: 100%;"
                                    class="chartjs-render-monitor"></canvas>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@section("page_js")
    @foreach($graphData as $id => $graph)

        <script>
            const ctx{{$id}} = document.getElementById('FlowChart{{$id}}');

            const config{{$id}}  = {
                type: 'line',
                data: {
                    labels: {!! json_encode($graph['labels']) !!},
                    datasets: [{
                        label: "{{$graph['title']}}",
                        data: {{json_encode($graph['data'])}},
                        tension: 0,
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            };

            new Chart(ctx{{$id}}, config{{$id}})
        </script>
    @endforeach
    @if(count($historyGraphData) > 0)
    @foreach($historyGraphData as $id => $graph)

        <script>
            const histctx{{$id}} = document.getElementById('History{{$id}}');

            const histconfig{{$id}}  = {
                type: 'bar',
                data: {
                    labels: {!! json_encode($graph['labels']) !!},
                    datasets: [{
                        label: "{{$graph['title']}}",
                        data: {{json_encode($graph['data'])}},
                        tension: 0,
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            };

            new Chart(histctx{{$id}}, histconfig{{$id}})
        </script>
    @endforeach
    @endif
@endsection