@extends('admin.template')
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title-box" id="box1">
                        <h3 style="font-size:18px;">{{$resolution->question}}</h3>
                        <br>
                        <span style="color: green; font-size: 35px">For: {{round($output15['for'],2)}}% &nbsp; {{$output15['for_total']}} Votes <span style="color: green; font-size: 1em" id="special_resolution"></span></span><br/>
                        <hr>
                        <span style="color: red; font-size: 35px">Against: {{round($output15['against'],2)}}% &nbsp; {{$output15['against_total']}} Votes</span>
                        <hr>
                        {{--                        <span style="color: orange; font-size: 35px">Abstain: {{round($output15['abstain'],2)}}% &nbsp; &nbsp; {{$output15['abstain_total']}} Votes </span>--}}
                    </div>
                    {{-- <ul class="panel-controls" style="margin-top: 2px;" id="total">
                        <h2>Total Verified: {{$verified}}</h2>
                        <br> --}}
                    {{--                        <h2>Total Voted:  {{count($res2Voted)}}</h2>--}}
                    {{-- </ul> --}}
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body padding-0">
                    <canvas id="myChart1" width="500" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
    {{--    <div class="row">--}}
    {{--        <div class="col-md-12">--}}
    {{--            <table id="example" class="display" style="width:100%">--}}
    {{--                <thead>--}}
    {{--                <tr>--}}
    {{--                    <th>TOKEN</th>--}}
    {{--                    <th>WEIGHTS</th>--}}
    {{--                    <th>VOTE</th>--}}
    {{--                </tr>--}}
    {{--                </thead>--}}
    {{--                <tbody>--}}
    {{--                @foreach($res2Voted as $vote)--}}
    {{--                    <tr>--}}
    {{--                        <td>{{$vote->msisdn}}</td>--}}
    {{--                        <td>{{number_format($vote->percentage,15)}}</td>--}}
    {{--                        <td>{{ $vote->ebenezer_twum_asante == '3' ? 'Abstain' : ($vote->ebenezer_twum_asante == '0' ? 'Against' : ($vote->ebenezer_twum_asante =='1' ? 'For' : $vote->ebenezer_twum_asante)) }}</td>--}}
    {{--                    </tr>--}}
    {{--                @endforeach--}}
    {{--                </tbody>--}}
    {{--                <tfoot>--}}
    {{--                <tr>--}}
    {{--                    <th>TOKEN</th>--}}
    {{--                    <th>WEIGHTS</th>--}}
    {{--                    <th>VOTE</th>--}}
    {{--                </tr>--}}
    {{--                </tfoot>--}}
    {{--            </table>--}}
    {{--        </div>--}}
    {{--    </div>--}}

@endsection

@push('dash-script')

    <script type="text/javascript" src="{{asset('admin/js/plugins/jquery/jquery.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/jquery/jquery-ui.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/bootstrap/bootstrap.min.js')}}"></script>

    <script type='text/javascript' src="{{asset('admin/js/plugins/icheck/icheck.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/scrolltotop/scrolltopcontrol.js')}}"></script>

    <script type="text/javascript" src="{{asset('admin/js/plugins/morris/raphael-min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/morris/morris.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/rickshaw/d3.v3.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/rickshaw/rickshaw.min.js')}}"></script>
    <script type='text/javascript' src="{{asset('admin/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js')}}"></script>
    <script type='text/javascript' src="{{asset('admin/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js')}}"></script>
    <script type='text/javascript' src="{{asset('admin/js/plugins/bootstrap/bootstrap-datepicker.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/owl/owl.carousel.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/moment.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/plugins/daterangepicker/daterangepicker.js')}}"></script>

    {{--<script type="text/javascript" src="{{asset('admin/js/settings.js')}}"></script>--}}
    <script type="text/javascript" src="{{asset('admin/js/plugins.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/actions.js')}}"></script>
    <script type="text/javascript" src="{{asset('admin/js/demo_dashboard.js')}}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>


    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

    <script>
        var ctx1 = document.getElementById("myChart1").getContext('2d');

        $.get('{{route('graph.results')}}',function (result) {
            var myDoughnutChart1 = new Chart(ctx1, {
                type: 'bar',
                data : {
                    datasets: [{
                        label: '# of Votes',
                        data: result.output15,
                        backgroundColor:['rgb(0,128,0,0.9)','rgb(255,0,0,0.9)']
                        // backgroundColor:['rgb(0,128,0,0.9)','rgb(255,0,0,0.9)','rgb(255,165,0)'  ]
                    }],


                    labels: [
                        'For',
                        'Against'
                        // 'Abstain',
                    ],

                },
                options: {
                    legend: {
                        display: false,
                        labels: {
                            fontColor: 'white',
                            fontFamily: 'work_sans',
                        }
                    },

                    title: {
                        display: true,
                        text: result.question15,
                        fontFamily: 'work_sans',
                    },

                    scales: {
                        xAxes: [{
                            stacked: true,
                            barThickness: 120,
                            ticks: {
                                fontFamily: 'work_sans',
                            }
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks: {
                                fontFamily: 'work_sans',
                            }
                        }]
                    }
                }
            });
        });


        function ajaxRefresh()
        {
            $.get('{{route('graph.results')}}',function (result) {
                var myDoughnutChart1 = new Chart(ctx1, {
                    type: 'bar',
                    data : {
                        datasets: [{
                            label: '# of Votes',
                            data: result.output15,
                            backgroundColor:['rgb(0,128,0,0.9)','rgb(255,0,0,0.9)']
                            // backgroundColor:['rgb(0,128,0,0.9)','rgb(255,0,0,0.9)','rgb(255,165,0)' ]
                        }],


                        labels: [
                            'For',
                            'Against'
                            // 'Abstain',
                        ],

                    },
                    options: {
                        legend: {
                            display: false,
                            labels: {
                                fontColor: 'white',
                                fontFamily: 'work_sans',
                            }
                        },

                        scales: {
                            xAxes: [{
                                stacked: true,
                                barThickness: 120,
                                ticks: {
                                    fontFamily: 'work_sans',
                                }
                            }],
                            yAxes: [{
                                stacked: true,
                                ticks: {
                                    fontFamily: 'work_sans',
                                }
                            }]
                        },

                        title: {
                            display: true,
                            text: result.question15,
                            fontFamily: 'work_sans',
                        }
                    }
                });
            });

            @if(false)
            $.get('{{route('graph.top.results')}}',function (data) {
                var ttl=data.output15.for_total+data.output15.against_total;
                var percentageRate=(data.output15.for_total/ttl)*100
                // var percentageRate=(data.output1.for_total/data.res1VotedT)*100
                if(!percentageRate>0){
                    percentageRate=0
                }
                percentageRate=percentageRate.toFixed(2)
                //$('#special_resolution').html('&nbsp; &nbsp;  Perc.:'+percentageRate+'%');
            });
            @endif
        }

        setInterval(ajaxRefresh, 10000);
    </script>

    <script>

        function ajaxReload()
        {
            $.get('{{route('graph.top.results')}}',function (data) {
                @if(false)
                var ttl=data.output15.for_total+data.output15.against_total;
                var percentageRate=(data.output15.for_total/ttl)*100
                // var percentageRate=(data.output1.for_total/data.res1VotedT)*100
                if(!percentageRate>0){
                    percentageRate=0
                }
                percentageRate=percentageRate.toFixed(2)

                $('#box1').html('<h3 style="font-size:18px;">' + data.question15 + '</h3><br>\n' +
                    '<span style="color: green; font-size: 35px">For :  ' +data.output15.for+'% &nbsp; &nbsp; '+data.output15.for_total+' Votes <span style="color: green; font-size: 1em" id="special_resolution"></span>&nbsp; &nbsp;  Perc.:'+percentageRate+'%</span><br/><hr>\n' +
                    '<span style="color: red; font-size: 35px">Against :  ' +data.output15.against+'% &nbsp; &nbsp; '+data.output15.against_total+' Votes</span><hr>\n');
                // '<span style="color: orange; font-size: 35px">Abstain : ' +data.output15.abstain+'% &nbsp; &nbsp; '+data.output15.abstain_total+' Votes</span>');

                // $('#total').html('<h2>Total Verified: '+data.verified+'</h2> <br> <h2>Total Voted:  '+data.total+'</h2>')
                @else
                $('#box1').html('<h3 style="font-size:18px;">' + data.question15 + '</h3><br>\n' +
                    '<span style="color: green; font-size: 35px">For :  ' +data.output15.for+'% &nbsp; &nbsp; '+data.output15.for_total+' Votes <span style="color: green; font-size: 1em" id="special_resolution"></span></span><br/><hr>\n' +
                    '<span style="color: red; font-size: 35px">Against :  ' +data.output15.against+'% &nbsp; &nbsp; '+data.output15.against_total+' Votes</span><hr>\n');
                @endif
            });
        }


        setInterval( ajaxReload, 10000);
    </script>


    <script>
        $(document).ready(function() {
            var exampleDataTable = $('#example').DataTable({
                order: [[2, 'desc']],
                columns: [
                    { data: 'msisdn' },
                    {
                        data: 'percentage',
                        render: function (data, type, row){
                            return parseFloat(data).toFixed(15);
                        }
                    },
                    {
                        data: 'ebenezer_twum_asante',
                        render: function(data, type, row) {
                            if ($.isNumeric(data)) {
                                if (Number(data) === 3) {
                                    return 'Abstain';
                                } else if (Number(data) === 0) {
                                    return 'Against';
                                } else if (Number(data) === 1) {
                                    return 'For';
                                } else {
                                    return null;
                                }
                            }
                            else{
                                return data;
                            }
                        }
                    },
                ],
            });

            setInterval(function() {
                fetchAPIdata().then(function(data) {
                    exampleDataTable.clear().rows.add(data).draw(false);
                });
            }, 10000);


            function fetchAPIdata() {
                return $.ajax({
                    url: '{{ route('api.get-data.res.two') }}',
                    method: 'GET',
                    dataType: 'json'
                });
            }
        } );
    </script>

@endpush