@extends('layouts.app')
@php
    $tt_white = $all_amp_leader;
@endphp
@section('content')

    @if(Session::has('success_message'))
        <div class="alert alert-success">
            <i class=" fas fa-fw fa-check" aria-hidden="true"></i>
            {!! session('success_message') !!}

            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button>

        </div>
    @endif

    <div class="card">

        <div class="card-header bg-primary text-white">

            <h5  class="my-1 float-left">{{ isset($amphur) && !empty($amphur) ? 'อำเภอ'.$amphur->name_th : 'ตำบลทั้งหมด' }}</h5>

            <div class="btn-group btn-group-sm float-right" role="group">
                <a href="{{ route('tambons.tambon.create') }}" class="btn btn-success" title="เพิ่ม ตำบล ใหม่">                     
					<i class="fas fa-fw  fa-plus" aria-hidden="true"></i>
                </a>
            </div>

        </div>
        
        @if(count($tambons) == 0)
            <div class="card-body text-center">
                <h4>ไม่พบข้อมูล ตำบล</h4>
            </div>
        @else
        <div class="card-body">


               <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link " id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"
                        type="button" role="tab" aria-controls="home-tab-pane"
                        aria-selected="true">ตำบล</button>
                </li>
       

 
 <li class="nav-item" role="presentation">
                        <button class="nav-link  " id="reportleader-tab" data-bs-toggle="tab"
                            data-bs-target="#reportleader-tab-pane" type="button" role="tab"
                            aria-controls="reportleader-tab-pane" aria-selected="true">รายงานข้อมูลผู้นำ</button>
                    </li>

                      <li class="nav-item" role="presentation">
                        <button class="nav-link  " id="activity-tab" data-bs-toggle="tab"
                            data-bs-target="#activity-tab-pane" type="button" role="tab"
                            aria-controls="activity-tab-pane" aria-selected="true">รายงานความเคลื่อนไหวการหาเสียง</button>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link  active" id="reportvoter-tab" data-bs-toggle="tab"
                            data-bs-target="#reportvoter-tab-pane" type="button" role="tab"
                            aria-controls="reportvoter-tab-pane"
                            aria-selected="true">รายงานข้อมูลการประเมินผู้มีสิทธิ</button>
                    </li>
                    </ul>

                     <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade   mt-3" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                    tabindex="0">
                     <div class="table-responsive">
                <table class="table table-striped table-sm table-bordered">
                    <thead>
                        <tr>
						<th>ลำดับที่</th>   <th>เขตเลือกตั้ง</th>
                             <th> อำเภอ</th>
                            <th>ตำบล</th>
                            <th>จำนวนหมู่บ้าน</th>
                             <th>จำนวนหลังคาเรือน</th>
 <th>จำนวนผู้มีสิทธิ์เลือกตั้ง</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
					                     @foreach($tambons as $tambon)
                  
                        <tr>
						<td>{{++$r}}</td>
						   <td><A href="{{ route('amphurs.amphur.index') }}">{{ optional($tambon->electorate)->name }}</A></td>
                           <td>{{ optional($tambon->amphur)->name_th }}</td>
                            <td><a href="{{ route('moobans.mooban.index') }}?tambons_id={{ $tambon->id }}&amphurs_id={{ $tambon->amphurs_id }}">{{ $tambon->name }}</a></td>
                         <td>{{  number_format( $tambon->total_mooban) }}</td>
                         <td>{{  number_format($tambon->total_home )}}</td>
                            <td>{{  number_format($tambon->total_people) }}</td>
                            <td>

                                <form method="POST" action="{!! route('tambons.tambon.destroy', $tambon->id) !!}" accept-charset="UTF-8">
                                <input name="_method" value="DELETE" type="hidden">
                                {{ csrf_field() }}

                                    <div class="btn-group btn-group-sm float-right" role="group">
                                        <a href="{{ route('tambons.tambon.show', $tambon->id ) }}" class="btn btn-info" title="แสดงข้อมูล ตำบล">
                                            <i class=" fas fa-fw fa-eye" aria-hidden="true"></i>
                                        </a>
                                        <a href="{{ route('tambons.tambon.edit', $tambon->id ) }}" class="btn btn-primary" title="แก้ไขข้อมูล ตำบล">
                                            <i class=" fas fa-fw fa-pencil-alt" aria-hidden="true"></i>
                                        </a>

                                        <button type="submit" class="btn btn-danger" title="ลบ ตำบล ทิ้ง" onclick="return confirm('คลิก OK เพื่อยืนยันการลบ ตำบล ')">
                                            <i class=" fas fa-fw fa-trash-alt" aria-hidden="true"></i>
                                        </button>
                                    </div>

                                </form>
                                
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                     <tfoot>
                            @php
                                $total_voter_all = $tambons->getCollection()->sum('total_people');
                                $total_home_all = $tambons->getCollection()->sum('total_home');
                                $total_mooban_all = $tambons->getCollection()->sum('total_mooban');
                            @endphp
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                              
                            
                                <td>รวม </td>
                                  <td>{{ number_format($total_mooban_all) }}</td>
                                <td>{{ number_format($total_home_all) }}</td>
                                <td>{{ number_format($total_voter_all) }}</td>

                                <td></td>
                              
                            </tr>
                        </tfoot>
                </table>

            </div>
                </div>

                    
                                       <div class="tab-pane fade pt-3" id="reportleader-tab-pane" role="tabpanel"
                        aria-labelledby="reportleader-tab" tabindex="0">
                      <h3>ผลการประเมินแกนนำ ครั้งที่ 1 <small>(แกนนำทั้งเขต {{  number_format( $tt_white) }} ราย)</small></h3>  <br>
                        <div id="chartdiv1"></div>
                         <h3  class="mt-5">ผลการประเมินแกนนำ ครั้งที่ 2 <small>(แกนนำทั้งเขต {{  number_format( $tt_white) }} ราย)</small></h3> <br>
                        <div id="chartdiv2"></div>
                    </div>

 @include('moobans.tabs.reportvoter')

                    </div>





           
        </div>

        <div class="card-footer">
            {!! $tambons->render() !!}
        </div>
        
        @endif
    
    </div>
@endsection


@section('style')
     

    <style>
        #chartdiv1 {
            width: 100%;
            height: 500px;
        }

        #chartdiv2 {
            width: 100%;
            height: 500px;
        }

        #chartdiv3 {
            width: 100%;
            height: 500px;
        }

        #chartdiv4 {
            width: 100%;
            height: 500px;
        }

        #chartdiv5 {
            width: 100%;
            height: 500px;
        }
    </style>
    <style>
        .bootstrap-table .dropdown-menu li a:contains("0 รายการต่อหน้า") {
            color: transparent !important;
        }
    </style>
@endsection
@section('script')
    <!-- Resources -->
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

    <!-- Chart code -->
    <script>
        am5.ready(function() {

            // Create root element
            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
            var root = am5.Root.new("chartdiv1");

            // Set themes
            // https://www.amcharts.com/docs/v5/concepts/themes/

            
            root.setThemes([am5themes_Animated.new(root)]);
root.container.set("background", am5.Rectangle.new(root, {
    fill: am5.color(0x28a745),   // เขียว
    fillOpacity: 0.15
}));
            var container = root.container.children.push(
                am5.Container.new(root, {
                    width: am5.p100,
                    height: am5.p100,
                    layout: root.horizontalLayout
                })
            );

            // Create main chart
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
            var chart = container.children.push(
                am5percent.PieChart.new(root, {
                    tooltip: am5.Tooltip.new(root, {})
                })
            );

            // Create series
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
            var series = chart.series.push(
                am5percent.PieSeries.new(root, {
                    valueField: "value",
                    categoryField: "category",
                    alignLabels: false
                })
            );

            series.labels.template.setAll({
                text: "{category}\n{value} คน ({valuePercentTotal.formatNumber('0.0')}%)",
                textType: "circular",
                radius: 4
            });
            series.ticks.template.set("visible", false);
            series.slices.template.setAll({
                toggleKey: "none",
                tooltipText: "{category}\nจำนวน: {value} คน\nคิดเป็น {valuePercentTotal.formatNumber('0.0')}%"
            });


            var mainColorSet = am5.ColorSet.new(root, {
                colors: [
                      am5.color(0x0d6efd), // น้ำเงิน
        am5.color(0xfd7e14), // ส้ม
        am5.color(0x6c757d), // เทา
        am5.color(0xdc3545), // แดง
        am5.color(0xffffff)  // ขาว
                ]
            });

            series.set("colors", mainColorSet);
            // add events
            series.slices.template.events.on("click", function(e) {
                selectSlice(e.target);
            });

            // Create sub chart
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
            var subChart = container.children.push(
                am5percent.PieChart.new(root, {
                    radius: am5.percent(50),
                    tooltip: am5.Tooltip.new(root, {})
                })
            );

            // Create sub series
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
            var subSeries = subChart.series.push(
                am5percent.PieSeries.new(root, {
                    valueField: "value",
                    categoryField: "category"
                })
            );
            // 🎨 สี Pie ย่อย
            var subColorSet = am5.ColorSet.new(root, {
                colors: [
                    am5.color(0x0d6efd), // น้ำเงิน (คุณภาพสูง)
                    am5.color(0xffc107), // เหลือง (คุณภาพดี)
                    am5.color(0xdc3545), // แดง (ไม่ผ่านเกณฑ์)
                     am5.color(0xffffff) // ขาว (ยังไม่ประเมิน)
                ]
            });
            subSeries.labels.template.setAll({
                text: "{category}\n{value} คน ({valuePercentTotal.formatNumber('0.0')}%)",
                textAlign: "center",
                radius: 8
            });
            subSeries.set("colors", subColorSet);
            subSeries.data.setAll([

                {
                    category: "A",
                    value: 0
                },
                {
                    category: "B",
                    value: 0
                },
                {
                    category: "C",
                    value: 0
                },
                {
                    category: "D",
                    value: 0
                },
                {
                    category: "E",
                    value: 0
                },
                {
                    category: "F",
                    value: 0
                },
                {
                    category: "G",
                    value: 0
                }
            ]);
            subSeries.slices.template.setAll({
                toggleKey: "none",
                tooltipText: "{category}\nจำนวน: {value} คน\nคิดเป็น {valuePercentTotal.formatNumber('0.0')}%"
            });



            var selectedSlice;

            series.on("startAngle", function() {
                updateLines();
            });

            container.events.on("boundschanged", function() {
                root.events.once("frameended", function() {
                    updateLines();
                })
            });

            function updateLines() {
                if (selectedSlice) {
                    var startAngle = selectedSlice.get("startAngle");
                    var arc = selectedSlice.get("arc");
                    var radius = selectedSlice.get("radius");

                    var x00 = radius * am5.math.cos(startAngle);
                    var y00 = radius * am5.math.sin(startAngle);

                    var x10 = radius * am5.math.cos(startAngle + arc);
                    var y10 = radius * am5.math.sin(startAngle + arc);

                    var subRadius = subSeries.slices.getIndex(0).get("radius");
                    var x01 = 0;
                    var y01 = -subRadius;

                    var x11 = 0;
                    var y11 = subRadius;

                    var point00 = series.toGlobal({
                        x: x00,
                        y: y00
                    });
                    var point10 = series.toGlobal({
                        x: x10,
                        y: y10
                    });

                    var point01 = subSeries.toGlobal({
                        x: x01,
                        y: y01
                    });
                    var point11 = subSeries.toGlobal({
                        x: x11,
                        y: y11
                    });

                    line0.set("points", [point00, point01]);
                    line1.set("points", [point10, point11]);
                }
            }

            // lines
            var line0 = container.children.push(
                am5.Line.new(root, {
                    position: "absolute",
                    stroke: root.interfaceColors.get("text"),
                    strokeDasharray: [2, 2]
                })
            );
            var line1 = container.children.push(
                am5.Line.new(root, {
                    position: "absolute",
                    stroke: root.interfaceColors.get("text"),
                    strokeDasharray: [2, 2]
                })
            );

            // Set data
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
            series.data.setAll([

                @foreach ($associates as $key => $associate)
                    {
                        
                        category: "{{ $associate }}",
                            value: {{ $tt }},
                            subData: [
                                @foreach ($LeaderAssessments as $lass)
                                    @if ($lass->assessment_period == 1 && $lass->associates_id == $key)
                                        @php
                                            $tt_blue = $lass->blue;
                                            $tt_yellow = $lass->yellow;
                                            $tt_red = $lass->red;

                                        @endphp
                                    @endif
                                @endforeach {
                                    category: "คุณภาพสูง",
                                    value: {{ $tt_blue }}
                                },
                                {
                                    category: "คุณภาพดี",
                                    value: {{ $tt_yellow }}
                                },
                                {
                                    category: "ไม่ผ่านเกณฑ์",
                                    value: {{ $tt_red }}
                                }

                            ]
                    },
                @endforeach
                {
                category: "ยังไม่ได้รับการประเมิน",
                value: {{ $tt_white }},
                subData: [

                    {
                        category: "คุณภาพสูง",
                        value: 0
                    },
                    {
                        category: "คุณภาพดี",
                        value: 0
                    },
                    {
                        category: "ไม่ผ่านเกณฑ์",
                        value: 0
                    },
                    {
                        category: "ยังไม่ประเมิน",
                        value: {{ $tt_white }}
                    }

                ]
            }, ]);

        function selectSlice(slice) {
            selectedSlice = slice;
            var dataItem = slice.dataItem;
            var dataContext = dataItem.dataContext;

            if (dataContext) {
                var i = 0;
                subSeries.data.each(function(dataObject) {
                    var dataObj = dataContext.subData[i];
                    if (dataObj) {
                        if (!subSeries.dataItems[i].get("visible")) {
                            subSeries.dataItems[i].show();
                        }
                        subSeries.data.setIndex(i, dataObj);
                    } else {
                        subSeries.dataItems[i].hide();
                    }

                    i++;
                });
            }

            var middleAngle = slice.get("startAngle") + slice.get("arc") / 2;
            var firstAngle = series.dataItems[0].get("slice").get("startAngle");

            series.animate({
                key: "startAngle",
                to: firstAngle - middleAngle,
                duration: 1000,
                easing: am5.ease.out(am5.ease.cubic)
            });
            series.animate({
                key: "endAngle",
                to: firstAngle - middleAngle + 360,
                duration: 1000,
                easing: am5.ease.out(am5.ease.cubic)
            });
        }

// =========================
// LEGEND (เพิ่มเข้าไป)
// =========================
var legend = root.container.children.push(
    am5.Legend.new(root, {
        centerX: am5.percent(50),
        x: am5.percent(50),
        y: am5.percent(100),
        centerY: am5.percent(100),
        marginTop: 10,
        layout: root.horizontalLayout
    })
);

// ผูก legend กับ series หลัก
legend.data.setAll(series.dataItems);
        container.appear(1000, 10);

        series.events.on("datavalidated", function() {
            selectSlice(series.slices.getIndex(0));
        });

        }); // end am5.ready()
    </script>


    <script>
        am5.ready(function() {

            // Create root element
            // https://www.amcharts.com/docs/v5/getting-started/#Root_element
            var root = am5.Root.new("chartdiv2");

            // Set themes
            // https://www.amcharts.com/docs/v5/concepts/themes/
            root.setThemes([am5themes_Animated.new(root)]);
root.container.set("background", am5.Rectangle.new(root, {
    fill: am5.color(0xd7bdee),   // เขียว
    fillOpacity: 0.15
}));
            var container = root.container.children.push(
                am5.Container.new(root, {
                    width: am5.p100,
                    height: am5.p100,
                    layout: root.horizontalLayout
                })
            );

            // Create main chart
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
            var chart = container.children.push(
                am5percent.PieChart.new(root, {
                    tooltip: am5.Tooltip.new(root, {})
                })
            );

            // Create series
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
            var series = chart.series.push(
                am5percent.PieSeries.new(root, {
                    valueField: "value",
                    categoryField: "category",
                    alignLabels: false
                })
            );

            series.labels.template.setAll({
                text: "{category}\n{value} คน ({valuePercentTotal.formatNumber('0.0')}%)",
                textType: "circular",
                radius: 4
            });
            series.ticks.template.set("visible", false);
            series.slices.template.setAll({
                toggleKey: "none",
                tooltipText: "{category}\nจำนวน: {value} คน\nคิดเป็น {valuePercentTotal.formatNumber('0.0')}%"
            });


            var mainColorSet = am5.ColorSet.new(root, {
                colors: [
                    am5.color(0x0d6efd), // น้ำเงิน   
                    am5.color(0xfd7e14), // ส้ม
                    am5.color(0x6c757d), // เทา 
                    am5.color(0xdc3545), // แดง
                       am5.color(0xffffff)
                ]
            });

            series.set("colors", mainColorSet);
            // add events
            series.slices.template.events.on("click", function(e) {
                selectSlice(e.target);
            });

            // Create sub chart
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
            var subChart = container.children.push(
                am5percent.PieChart.new(root, {
                    radius: am5.percent(50),
                    tooltip: am5.Tooltip.new(root, {})
                })
            );

            // Create sub series
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
            var subSeries = subChart.series.push(
                am5percent.PieSeries.new(root, {
                    valueField: "value",
                    categoryField: "category"
                })
            );
            // 🎨 สี Pie ย่อย
            var subColorSet = am5.ColorSet.new(root, {
                colors: [
                    am5.color(0x0d6efd), // น้ำเงิน (คุณภาพสูง)
                    am5.color(0xffc107), // เหลือง (คุณภาพดี)
                    am5.color(0xdc3545), // แดง (ไม่ผ่านเกณฑ์)
                      am5.color(0xffffff) // ขาว (ยังไม่ประเมิน)
                ]
            });
            subSeries.labels.template.setAll({
                text: "{category}\n{value} คน ({valuePercentTotal.formatNumber('0.0')}%)",
                textAlign: "center",
                radius: 8
            });
            subSeries.set("colors", subColorSet);
            subSeries.data.setAll([

                {
                    category: "A",
                    value: 0
                },
                {
                    category: "B",
                    value: 0
                },
                {
                    category: "C",
                    value: 0
                },
                {
                    category: "D",
                    value: 0
                },
                {
                    category: "E",
                    value: 0
                },
                {
                    category: "F",
                    value: 0
                },
                {
                    category: "G",
                    value: 0
                }
            ]);
            subSeries.slices.template.setAll({
                toggleKey: "none",
                tooltipText: "{category}\nจำนวน: {value} คน\nคิดเป็น {valuePercentTotal.formatNumber('0.0')}%"
            });



            var selectedSlice;

            series.on("startAngle", function() {
                updateLines();
            });

            container.events.on("boundschanged", function() {
                root.events.once("frameended", function() {
                    updateLines();
                })
            });

            function updateLines() {
                if (selectedSlice) {
                    var startAngle = selectedSlice.get("startAngle");
                    var arc = selectedSlice.get("arc");
                    var radius = selectedSlice.get("radius");

                    var x00 = radius * am5.math.cos(startAngle);
                    var y00 = radius * am5.math.sin(startAngle);

                    var x10 = radius * am5.math.cos(startAngle + arc);
                    var y10 = radius * am5.math.sin(startAngle + arc);

                    var subRadius = subSeries.slices.getIndex(0).get("radius");
                    var x01 = 0;
                    var y01 = -subRadius;

                    var x11 = 0;
                    var y11 = subRadius;

                    var point00 = series.toGlobal({
                        x: x00,
                        y: y00
                    });
                    var point10 = series.toGlobal({
                        x: x10,
                        y: y10
                    });

                    var point01 = subSeries.toGlobal({
                        x: x01,
                        y: y01
                    });
                    var point11 = subSeries.toGlobal({
                        x: x11,
                        y: y11
                    });

                    line0.set("points", [point00, point01]);
                    line1.set("points", [point10, point11]);
                }
            }

            // lines
            var line0 = container.children.push(
                am5.Line.new(root, {
                    position: "absolute",
                    stroke: root.interfaceColors.get("text"),
                    strokeDasharray: [2, 2]
                })
            );
            var line1 = container.children.push(
                am5.Line.new(root, {
                    position: "absolute",
                    stroke: root.interfaceColors.get("text"),
                    strokeDasharray: [2, 2]
                })
            );

            // Set data
            // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
            series.data.setAll([
                @foreach ($associates as $key => $associate)
                    {
                        
                        category: "{{ $associate }}",
                            value: {{ $tt }},
                            subData: [
                                @foreach ($LeaderAssessments as $lass)
                                    @if ($lass->assessment_period == 2 && $lass->associates_id == $key)
                                        @php
                                            $tt_blue = $lass->blue;
                                            $tt_yellow = $lass->yellow;
                                            $tt_red = $lass->red;

                                        @endphp
                                    @endif
                                @endforeach {
                                    category: "คุณภาพสูง",
                                    value: {{ $tt_blue }}
                                },
                                {
                                    category: "คุณภาพดี",
                                    value: {{ $tt_yellow }}
                                },
                                {
                                    category: "ไม่ผ่านเกณฑ์",
                                    value: {{ $tt_red }}
                                },

                            ]
                    },
                @endforeach
 {
                category: "ยังไม่ได้รับการประเมิน",
                value: {{ $tt_white }},
                subData: [

                    {
                        category: "คุณภาพสูง",
                        value: 0
                    },
                    {
                        category: "คุณภาพดี",
                        value: 0
                    },
                    {
                        category: "ไม่ผ่านเกณฑ์",
                        value: 0
                    },
                    {
                        category: "ยังไม่ประเมิน",
                        value: {{ $tt_white }}
                    }

                ]
            },
            ]);

            function selectSlice(slice) {
                selectedSlice = slice;
                var dataItem = slice.dataItem;
                var dataContext = dataItem.dataContext;

                if (dataContext) {
                    var i = 0;
                    subSeries.data.each(function(dataObject) {
                        var dataObj = dataContext.subData[i];
                        if (dataObj) {
                            if (!subSeries.dataItems[i].get("visible")) {
                                subSeries.dataItems[i].show();
                            }
                            subSeries.data.setIndex(i, dataObj);
                        } else {
                            subSeries.dataItems[i].hide();
                        }

                        i++;
                    });
                }

                var middleAngle = slice.get("startAngle") + slice.get("arc") / 2;
                var firstAngle = series.dataItems[0].get("slice").get("startAngle");

                series.animate({
                    key: "startAngle",
                    to: firstAngle - middleAngle,
                    duration: 1000,
                    easing: am5.ease.out(am5.ease.cubic)
                });
                series.animate({
                    key: "endAngle",
                    to: firstAngle - middleAngle + 360,
                    duration: 1000,
                    easing: am5.ease.out(am5.ease.cubic)
                });
            }

// =========================
// LEGEND (เพิ่มเข้าไป)
// =========================
var legend = root.container.children.push(
    am5.Legend.new(root, {
        centerX: am5.percent(50),
        x: am5.percent(50),
        y: am5.percent(100),
        centerY: am5.percent(100),
        marginTop: 10,
        layout: root.horizontalLayout
    })
);

// ผูก legend กับ series หลัก
legend.data.setAll(series.dataItems);
            container.appear(1000, 10);

            series.events.on("datavalidated", function() {
                selectSlice(series.slices.getIndex(0));
            });

        }); // end am5.ready()
    </script>
        <!-- Chart code -->
         <script>
am5.ready(function() {

    // Create root element
    var root = am5.Root.new("chartdiv3");

    // Set themes
    root.setThemes([
        am5themes_Animated.new(root)
    ]);

    // Create chart
    var chart = root.container.children.push(am5percent.PieChart.new(root, {
        layout: root.verticalLayout,
        innerRadius: am5.percent(50)
    }));

    // Create series
    var series = chart.series.push(am5percent.PieSeries.new(root, {
        valueField: "value",
        categoryField: "category",
        alignLabels: false
    }));

    // 🔢 แสดงจำนวนบนชิ้น Pie
    series.labels.template.setAll({
        text: "{category}: {value} ({valuePercentTotal.formatNumber('0.0')}%)",
        textType: "circular",
        centerX: 0,
        centerY: 0
    });

    // 🎨 กำหนดสี น้ำเงิน เหลือง แดง
    var colorSet = am5.ColorSet.new(root, {
        colors: [
            am5.color(0x0d6efd), // น้ำเงิน
            am5.color(0xffc107), // เหลือง
            am5.color(0xdc3545)  // แดง
        ]
    });

    series.set("colors", colorSet);

    // ===============================
    // PHP: ดึงค่าจาก backend
    // ===============================
    
    // Set data
    series.data.setAll([
        {
            value: {{ $p1_s3 }},
            category: "คาดได้คะแนน"
        },
        {
            value: {{ $p1_s2 }},
            category: "ยังไม่ตัดสินใจ"
        },
        {
            value: {{ $p1_s1 }},
            category: "เลือกผู้อื่น"
        }
    ]);

    // Create legend
    var legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.percent(50),
        x: am5.percent(50),
        marginTop: 15,
        marginBottom: 15
    }));

    // 🔢 แสดงจำนวนใน legend
    legend.labels.template.setAll({
        text: "{category}: {value} ({valuePercentTotal.formatNumber('0.0')}%)"
    });

    legend.data.setAll(series.dataItems);

    // Play animation
    series.appear(1000, 100);

});
</script>
<script>
    $('#total_voter_num').text("จำนวนผู้มีสิทธิเลือกตั้ง  {{ number_format( ($p1_s3 + $p1_s2+ $p1_s1)) }}   ราย");
    </script>
@endsection