{{-- Extends layout --}}
@extends('front.layouts.app')

{{-- Content --}}
@section('content')
    <div class="clear"></div>
    <nav class="navbar navbar-expand-lg navbar-light p-0" style="width:100%; display:block">
        <h4 class="mb-0 pr-2 ls1  font-weight-bold " >

            <div style="float:left">
            {{ __('Şehirlerimiz') }}
            </div>

            <span style="float:right; text-align:right">{{ __("Tespit Edilen Benzersiz Tür Sayısı:") }}{{ number_format($total_unique_specie_count,0) }}</span>

        </h4>
    </nav>

    <div class="line line-xs line-dark"></div>

    <div class="row container">
        <div class="col-md-12">
            <p>{{ __("İl Listesini Görüntüle - ")}} <a target="_blank" href="{{ route('country.show',['id'=>App\Models\DeterminationCountry::TURKEY]) }}">{{ __('Türkiye')}} | <a target="_blank" href="{{ route('city.show',['id'=>App\Models\DeterminationCity::ABROAD]) }}">{{ __('Yurt Dışı')}} </p>
        </div>

        <div class="col-md-6">
            <div class="row">
                @foreach ($cityIndexStats as $cityStat)
                    <div class="col-md-4">
                        <a href="{{ route('city.show', ['id' => $cityStat->city_id]) }}">{{ $cityStat->city_title }}
                            ({{ $cityStat->city_total }})</a>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="col-md-6">
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <div id="chart_div"></div>
        </div>
    </div>

    @switch($tab)
        @case('determinations')
            @component('front.components.city_index_determinations', ['categories' => $categories, 'searchStats' =>
                $searchStats])
            @endcomponent
        @break
        @case('users')
            @component('front.components.city_index_users', ['categories' => $categories, 'searchStats' => $searchStats])
            @endcomponent
        @break
        @case('species')
            @component('front.components.city_index_species', ['categories' => $categories, 'searchStats' => $searchStats,'category_id'=>$category_id])
            @endcomponent

        @break
        @default
            @component('front.components.city_index_determinations', ['categories' => $categories, 'searchStats' => $searchStats])
            @endcomponent

    @endswitch

@endsection

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

        function drawAxisTickColors() {
            var data = google.visualization.arrayToDataTable([
                @php echo "['". __('Şehir') ."', '". __('Tespit')."']," @endphp
                @foreach ($cityIndexStats->sortDesc() as $cityStat)
                    @php echo "['".$cityStat->city_title."',".$cityStat->city_total."]," @endphp
                @endforeach
            ]);

            var options = {
                title: "{{ __('İstatistik') }}",
                chartArea: {
                    width: '50%',
                    height: 1000
                },
                height: 1100,
                hAxis: {
                    title: '{{ __('Tespit Sayıları') }}',
                    minValue: 0,
                    textStyle: {
                        bold: true,
                        fontSize: 12,
                        color: '#4d4d4d'
                    },
                    titleTextStyle: {
                        bold: true,
                        fontSize: 16,
                        color: '#4d4d4d'
                    }
                },
                vAxis: {
                    title: '{{ __('Şehir') }}',
                    textStyle: {
                        fontSize: 10,
                        bold: true,
                        color: '#848484'
                    },
                    titleTextStyle: {
                        fontSize: 10,
                        bold: true,
                        color: '#848484'
                    }
                }
            };
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>

@endsection

@section('breadcrumbs')
    {{ Breadcrumbs::render('city.index') }}
@endsection