@php
$total = 0;
@endphp
<div class="row container">
    <ul class="nav nav-tabs w-100">
        <li class="nav-item">
            <a class="nav-link"
            href="{{ route('equipment.show',['id'=>$equipment->id]) }}">{{ __('Ekipmana Ait Tespitler (:toplam)',['toplam'=>$equipment->determinations->count()]) }}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link"
                href="{{ route('equipment.show.users',['id'=>$equipment->id]) }}">{{ __('Kullanıcı İstatistikleri') }}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active"
                href="{{ route('equipment.show.species',['id'=>$equipment->id]) }}">{{ __('Tür İstatistikleri') }}</a>
        </li>
    </ul>

    <div class="row container">
        <div class="col-md-6">
            <div class="row">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th scope="col">{{ __('Kategori') }}</th>
                            <th scope="col">{{ __('Tespit Sayıları') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($stats as $name=>$items)
                            <tr>
                                <td>{{ $name }}</td>
                                <td>{{ $items['total'] }}</td>
                            </tr>

                            @php
                                $total += $items['total'];
                            @endphp

                        @endforeach
                    </tbody>

                    <tfoot>
                        <tr>
                            <td align="right">{{ __('') }}</td>
                            <td align="left">{{ $total }}</td>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="col-md-6">
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <div id="chart_div" style="height:1000px;margin-top:0px"></div>
        </div>
    </div>

</div>


@section('scripts2')
<script>
    google.charts.load('current', {
        packages: ['corechart', 'bar']
    });
    google.charts.setOnLoadCallback(drawBarColors);

    function drawBarColors() {
        var data = google.visualization.arrayToDataTable([
            ['{{ __('Kategori') }}', '{{ __('Toplam Tespit') }}'],
            @foreach ($stats as $name=>$items)
                ['{{ $name }}', {{ $items['total'] }}],
            @endforeach
        ]);

        var options = {
            title: 'Tür İstatistikleri',
            chartArea: {
                width: '50%',
                height: '800'
            },
            colors: ['#b0120a'],
            hAxis: {
                title: '{{ __('Toplam Tespit') }}',
                minValue: 0
            },
            vAxis: {
                title: 'Kategoriler'
            }
        };
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>
@endsection