@extends('admin.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="javascript:void(0)">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: 
                    <form action="{{request()->url()}}" id="searchForm">
                        <select name="vidhansabha_id" id="vidhansabha_id" onchange="this.form.submit()" class="form-control selectpicker" data-live-search="teru">
                            @foreach($vidhansabha as $r)
                        <option @if($vid == $r->vidhansabha_id) selected @endif value="{{$r->vidhansabha_id}}">{{$r->vidhansabha_title}}</option>
                        @endforeach
                    </select>
                </form>
                </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
<script>
    $('#vidhansabha_id').on('change', function(){
        $('#searchForm').submit();
    });
</script>
@section('script')
@php
$vidhansabhaname = App\Models\VidhanSabha::where('vidhansabha_id',$vid)->value('vidhansabha_title');
 if(Schema::hasTable(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))){
    $male = DB::table(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))->where('ac_no',$vid)->where('gender','M')->count();
    $female = DB::table(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))->where('ac_no',$vid)->where('gender','F')->count();
    $age =  DB::table(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))->where('ac_no',$vid)->select('age', DB::raw('count(*) as total'))->groupBy('age')->get();
    $pincode =  DB::table(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))->where('ac_no',$vid)->where('pincode', '!=', null)->select('pincode', DB::raw('count(*) as total'))->groupBy('pincode')->get();
    $favar =  DB::table(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))->where('ac_no',$vid)->where('favar', '!=', null)->select('favar', DB::raw('count(*) as total'))->groupBy('favar')->get();
     }else{
    $male = 0;
    $female = 0;
    $age = array();
    $pincode = array();
    $favar = array();
    $house = 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($caste as $r)
                   @php
                    if(Schema::hasTable(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))){
                   $count = DB::table(Str::lower(preg_replace('/[^A-Za-z0-9-]+/', '', $vidhansabhaname)))->where('ac_no',$vid)->where('caste_id',$r->id)->count();
                    }else{
                        $count = 0;
                    }
                   @endphp
               {value:{{$count}}, name:"{{$r->caste_name}}"},
               @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: [
            {
                name: 'Age',
                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