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

{{-- Content --}}
@section('content')
    <div class="clear"></div>
    <nav class="navbar navbar-expand-lg navbar-light p-0">
        <h4 class="mb-0 pr-2 ls1  font-weight-bold"> {{ __('Türler') }}</h4>
    </nav>

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

    <div class="row container">
        <div class="col-md-4">
            <div id="jstree_demo_div"></div>
        </div>
        <div class="col-md-8">
            @foreach ($home_stats as $specie)
                <div class="alert alert-secondary" role="alert">
                    {{ $specie->title }} <span
                        class="float-right badge badge-primary">{{ $specie->toplam }}</span>
                </div>
            @endforeach

            <div id="piechart" style="width: 100%; height: 500px;"></div>

        </div>
    </div>

@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"
        integrity="sha512-bU6dl4fd2XN3Do3aWypPP2DcKywDyR3YlyszV+rOw9OpglrGyBs6TyTsbglf9umgE+sy+dKm1UHhi07Lv+Vtfg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css"
        integrity="sha512-P8BwDSUInKMA7I116Z1RFg/Dfk85uFdliEUYO7vQlwtxLVMNvZimfMAQsaf++9EhlAGOVX6yhDQAIY3/70jDUg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script>
        $(function() {
                    $('#jstree_demo_div').jstree({
                            "massload": {
                                'url': '{{ asset('specie.json') }}',
                         'data': function(node) {
                                            return {
                                                'specie_id': node.id
                                            };
                                        }
                                },
                                'core': {
                                    'data': {
                                        'url': '{{ asset('specie.json') }}',
                                        'data': function(node) {
                                            return {
                                                'specie_id': node.id
                                            };
                                        }
                                    }
                                },
                                "plugins" : [ "massload", "state" ]
                            })
                    });
    </script>

    <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(drawChartHome);


        function drawChartHome() {

var data = google.visualization.arrayToDataTable([
    [' {{ __('Tür') }}', '{{ __('Toplam') }}'],
    @foreach ($home_stats as $specie)
        ['{{ $specie->title }}',{{ $specie->toplam }}],
    @endforeach
]);

var options = {
    title: '{{ __('Ülkemiz Canlıları') }}'
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}
    </script>

@endsection


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