@extends('booth.layouts.app')
@section('content')
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor">Dashboard</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('booth.index')}}">Home</a></li>
                        <li class="breadcrumb-item">Dashboard</li>
                    </ol>
                    <!-- <button type="button" class="btn btn-info d-none d-lg-block m-l-15"><i class="fa fa-plus-circle"></i> Create New</button> -->
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row border-bottom white-bg dashboard-header">
            <div class="col-md-6">
                <h2>Welcome In Election Diary</h2>
                <h5 class="text-success">Assembly: {{DB::table('vidhan_sabhas')->where('vidhansabha_id',auth()->user()->vidhansahba_id)->value('vidhansabha_title')}}</h5>
                 <h5 class="text-success">Booth: {{auth()->user()->booth}}</h5>
            </div>
        </div>

        <div class="row mt22">
            <!-- column -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Male & Female Population total, male, female</h4>
                        <div id="doughnut-chart" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div>
            <!-- column -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Pincode Wise</h4>
                        <div id="pincode-chart1" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div>
            <!-- column -->
            <!-- column -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Favar Wise</h4>
                        <div id="favar-chart" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div>
         

            <!-- column -->
            <!-- column -->

            {{-- <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Vidhan Sabha Wise</h4>
                        <div id="bar-chart4" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div> --}}
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Caste Wise</h4>
                        <div id="castewise" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div>
            <!-- column -->
            <!-- column -->
            {{-- <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Graduation</h4>
                        <div id="doughnut-chart1" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div> --}}
            <!-- column -->
            <!-- column -->
           
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Age Wise</h4>
                        <div id="age-chart5" style="width:100%; height:400px;"></div>
                    </div>
                </div>
            </div>
            <!-- column -->
        </div>
    </div>

</div>

@endsection
@section('script')
@php
  ini_set('memory_limit', '6400M');
          ini_set('max_execution_time', '300');
    $vidhansabhaname = App\Models\VidhanSabha::where('vidhansabha_id',auth()->user()->vidhansahba_id)->value('vidhansabha_title');
     if(Schema::hasTable(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))){
     $tablename = Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname));
              $voterlistData = DB::table($tablename)->where('part_no',Auth::user()->booth)->get();
               $voterlist =  App\Helpers\CommonClass::voterlist_filter($voterlistData,Auth::user()->create_by);
    $male = App\Helpers\CommonClass::gender_count($voterlist,'M');
    $female = App\Helpers\CommonClass::gender_count($voterlist,'F');
    $age =  App\Helpers\CommonClass::age_get($voterlist);
    $pincode =  App\Helpers\CommonClass::pincode_get($voterlist);
    $favar =  App\Helpers\CommonClass::favar_get($voterlist);
    $casteData =  App\Helpers\CommonClass::caste_get($voterlist);
    }else{
    $male = 0;
    $female = 0;
    $age = array();
    $pincode = array();
    $favar = array();
    $casteData = array();
    }
@endphp
<script>
    // Gender chart option
    // ==============================================================
    var doughnutChart = echarts.init(document.getElementById('doughnut-chart'));

    // specify chart configuration item and data

    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ['Male', 'Female']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        color: ["{{'#' . substr(str_shuffle('ABCDEF0123456789'), 0, 6)}}", "{{'#' . substr(str_shuffle('ABCDEF0123456789'), 0, 6)}}"],
        calculable: true,
        series: [
            {
                name: 'Source',
                type: 'pie',
                radius: ['30%', '90%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    }
                },
                data: [
                    { value: {{$male}}, name: 'Male' },
                    { value: {{$female}}, name: 'Female' },
                ]
            }
        ]
    };


    // use configuration item and data specified to show chart
    doughnutChart.setOption(option, true), $(function () {
        function resize() {
            setTimeout(function () {
                doughnutChart.resize()
            }, 100)
        }
        $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
    });
</script>


<script>
    // ==============================================================
    // caste wise 2 option
    // ==============================================================
    var castewise = echarts.init(document.getElementById('castewise'));

    // specify chart configuration item and data

    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: [
              @foreach($caste as $r)
                "{{$r->caste_name}}",
                @endforeach
            ]
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        color: [
            @for ($i=0; $i<=count($age); $i++)
            "{{'#' . substr(str_shuffle('ABCDEF0123456789'), 0, 6)}}",
            @endfor
        ],
        calculable: true,
        series: [
            {
                name: 'Source',
                type: 'pie',
                radius: ['30%', '90%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    }
                },
                data:[
                    @foreach($casteData as $r)
               {value:{{@$r['total']}}, name:"{{@$r['caste']}}"},
               @endforeach
        ]
            }
        ]
    };

    // use configuration item and data specified to show chart
    castewise.setOption(option, true), $(function () {
        function resize5() {
            setTimeout(function () {
                castewise.resize5()
            }, 100)
        }
        $(window).on("resize5", resize5), $(".sidebartoggler").on("click", resize5)
    });
</script>


<script>
    // pincode wise
    var myChart1 = echarts.init(document.getElementById('pincode-chart1'));

    // specify chart configuration item and data
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Pincode No.']
        },
        toolbox: {
            show: true,
            feature: {

                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        color: ["{{'#' . substr(str_shuffle('ABCDEF0123456789'), 0, 6)}}"],
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: [
                    @foreach($pincode as $r)
                    "{{$r['pincode']}}",
                    @endforeach
                ]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Pincode No.',
                type: 'bar',
                data: [
                    @foreach($pincode as $r)
                    "{{$r['total']}}",
                    @endforeach
                ],
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
                markLine: {
                    data: [
                        // average of all data
                        { type: 'average', name: 'Average' }
                    ]
                }
            }
        ]
    };


    // use configuration item and data specified to show chart
    myChart1.setOption(option, true), $(function () {
        function resize1() {
            setTimeout(function () {
                myChart1.resize1()
            }, 100)
        }
        $(window).on("resize1", resize1), $(".sidebartoggler").on("click", resize1)
    });
</script>



<script>
    // ward wise
    var myChart5 = echarts.init(document.getElementById('age-chart5'));

    // specify chart configuration item and data
    option = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {

                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        color: ["{{'#' . substr(str_shuffle('ABCDEF0123456789'), 0, 6)}}"],
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data: [
                    @foreach($age as $w)
                    "{{$w['age']}}",
                    @endforeach
                ]
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                type: 'bar',
                data: [
                    @foreach($age as $w)
                          {{$w['total']}},
                        @endforeach
                ],
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
                markLine: {
                    data: [
                        // average of all data
                        { type: 'average', name: 'Average' }
                    ]
                }
            }
        ]
    };

    // use configuration item and data specified to show chart
    myChart5.setOption(option, true), $(function () {
        function resize6() {
            setTimeout(function () {
                myChart5.resize6()
            }, 100)
        }
        $(window).on("resize6", resize6), $(".sidebartoggler").on("click", resize6)
    });
</script>

<script>
    // Gender chart option
    // ==============================================================
    var doughnutChart = echarts.init(document.getElementById('favar-chart'));

    // specify chart configuration item and data

    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: [
                @foreach($favar as $fr)
                "{{ucwords($fr['favar'])}}",
                @endforeach
            ]
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        color: [
            @for ($i=0; $i<=count($favar); $i++)
            "{{'#' . substr(str_shuffle('ABCDEF0123456789'), 0, 6)}}",
            @endfor
        ],
        calculable: true,
        series: [
            {
                name: 'Source',
                type: 'pie',
                radius: ['30%', '90%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    }
                },
                data: [
                    @foreach($favar as $fr)
                    { value: {{$fr['total']}}, name: "{{$fr['favar']}}" },
                    @endforeach
                ]
            }
        ]
    };


    // use configuration item and data specified to show chart
    doughnutChart.setOption(option, true), $(function () {
        function resize() {
            setTimeout(function () {
                doughnutChart.resize()
            }, 100)
        }
        $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
    });
</script>
@endsection