@extends('layouts.master')
@section('title',__('Election Report'))
@section('breadcum')
	<div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <h4 class="page-title">{{ __('Election Report') }}</h4>
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                        	{{ __('Election Report') }}
                        </li>
                    </ol>
                </div>
            </div>
          
        </div>          
    </div>
@endsection
@section('maincontent')
	<div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">{{ __('Election Report Filtered by:') }} {{ $type }}</h5>
                </div> 
                <!-- tab start -->
                <div>
                    <ul class="nav nav-tabs">
                    <li>
                    <a href="#" onclick="showDiv1()"><i class="fa fa-table" aria-hidden="true"></i> {{ __('Show In Table') }}</a>
                    </li>
                    <li>
                    <a href="#" id="open-chart1" onclick="test1()"><i class="fa fa-pie-chart" aria-hidden="true"></i> {{ __('Show In Pie Chart') }}</a>
                    </li>
                    <li>
                    <a href="#" id="open-chart2" onclick="test2()"><i class="fa fa-bar-chart" aria-hidden="true"></i> {{ __('Show In Bar Chart') }}</a>
                    </li>
                    </ul>	
                </div>

                <section id="welcomeDiv1" >
                    <!-- card start -->
                    <div class="card-body">
                    <table class="table table-bordered w-100 table-striped">
                        <thead>
                            <th>#</th>
                            <th>{{ __('Party Name') }}</th>
                            <th>{{ __('Designation') }}</th>
                            <th>{{ __('Total Votes') }}</th>
                        </thead>
                        <tbody>
                            @foreach($finaldata as $key => $data)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ strip_tags($data->party->name) }}</td>
                                    <td>{{ strip_tags($data->designation->name) }}</td>
                                    <td>{{ strip_tags($data->votesum) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div> 
                    <!-- card end -->
                </section>
                <section id="welcomeDiv2">
                    <!-- card 2 start -->
                    <div class="card-body">
                    <!-- ============ pi chart start ================== -->
                                                <!-- ============ pi chart end ================== -->
                        </div> 
                    <!-- card 2 end -->
                </section>
                <!-- tab end === -->

                <section id="welcomeDiv3">
                    <!-- card 2 start -->
                    <div class="card-body">
                    <!-- ================= bar chart start ============================ -->
                                            <!-- ================= bar chart end ============================== -->
                    </div> 
                    <!-- card 2 end -->
                </section>
                <!-- tab end === -->
            </div> 
        </div>
    </div>
    <br>

<!-- script to display data in pie chart start -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>                     
<script>
  "use strict";
    console.clear();
    {
      let data, options, view, chart;
      google.charts.load("current", {
        packages: ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Party Name', 'Vote'],

            @php
            foreach($finaldata as $data) {
                echo "['".$data->party->name."', ".$data->votesum."],";
            }
            @endphp
        ]);
        options = { 
        };
        view = new google.visualization.DataView(data);
        chart = new google.visualization.PieChart(document.getElementById("PieChart"));
        chart.draw(view, options);
      }
      function test1() {
        document.getElementById("PieChart").style.display = "block";
        document.getElementById("columnchart").style.display = "none";
        document.getElementById('welcomeDiv1').style.display = "none";
        
        chart.draw(view, options);
      }
      document.getElementById('open-chart1').addEventListener('click', test1);
      window.addEventListener('resize', test1)
    }
</script>
<!-- script to display data in pie chart end -->
<!-- script to display data in bar chart start -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  "use strict";
    console.clear();

    {
      let data, options, view, chart;
      
      google.charts.load("current", {
        packages: ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Party Name', 'Vote'],

            @php
            foreach($finaldata as $data) {
                echo "['".$data->party->name."', ".$data->votesum."],";
            }
            @endphp
        ]);
        options = {
          
        };
        view = new google.visualization.DataView(data);
        chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
        chart.draw(view, options);
      }

      function test2() {
        document.getElementById("columnchart").style.display = "block";
        document.getElementById("PieChart").style.display = "none";
        document.getElementById('welcomeDiv1').style.display = "none";
        chart.draw(view, options);
      }
      
      document.getElementById('open-chart2').addEventListener('click', test2);
      window.addEventListener('resize', test2)
    }
</script>
<!-- script to display data in bar chart end -->

@endsection