@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">{{ env('APP_NAME_TH') }} </h5>

       

        </div>

        @if (count($amphurs) == 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 " id="gis-tab" data-bs-toggle="tab" data-bs-target="#gis-tab-pane"
                            type="button" role="tab" aria-controls="gis-tab-pane" aria-selected="true">GIS</button>
                    </li>
                </ul>

                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade  pt-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>
                                        <th> สีเหลือง </th>
                                        <th> สีแดง </th>
                                        <th> โอกาสชนะ </th>
                                       <!-- <th></th> -->
                                    </tr>
                                </thead>
                                <tbody>
                                                                        @foreach ($amphurs as $amphur)
                                        @php
                                            $amp_blue = 0;
                                            $amp_yellow = 0;
                                            $amp_red = 0;
                                            $win_percent = 0;
                                            foreach ($Amp_sums as $ampsum) {
                                                if ($ampsum->amphurs_id == $amphur->id) {
                                                    $amp_blue = $ampsum->blue;
                                                    $amp_yellow = $ampsum->yellow;
                                                    $amp_red = $ampsum->red;
                                                   # dd($ampsum->blue);
                                                }
                                            }

                                            $total = $amp_blue + $amp_yellow + $amp_red;
                                            $win_percent = $total > 0 ? ($amp_blue / $total) * 100 : 0;
  $TT_blue +=$amp_blue;
                                            $TT_yellow  +=$amp_yellow;
                                            $TT_red  += $amp_red;
                                          


                                        @endphp
                                        @php
                                            $tt_tambon += $amphur->total_tambon;
                                            $tt_mooban += $amphur->total_mooban;
                                            $tt_home += $amphur->total_home;
                                            $tt_people += $amphur->total_people;
                                        @endphp
                                        <tr>
                                            <td>{{ ++$r }}</td>
                                            <td><A
                                                    href="{{ route('amphurs.amphur.index') }}">{{ optional($amphur->electorate)->name }}</A>
                                            </td>
                                            <td><A
                                                    href="{{ route('tambons.tambon.index') }}?amphurs_id={{ $amphur->id }}">{{ $amphur->name_th }}</A>
                                            </td>
                                            <td>{{ number_format($amphur->total_tambon) }}</td>
                                            <td>{{ number_format($amphur->total_mooban) }}</td>
                                            <td>{{ number_format($amphur->total_home) }}</td>
                                            <td>{{ number_format($amphur->total_people) }}</td>
                                            <td>{{ number_format($amp_blue) }}</td>
                                            <td>{{ number_format($amp_yellow) }}</td>
                                            <td>{{ number_format($amp_red) }}</td>
                                            <td>{{number_format( $win_percent,2) }}%</td>
                                         <!--
                                            <td>

                                                <form method="POST" action="{!! route('amphurs.amphur.destroy', $amphur->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('amphurs.amphur.show', $amphur->id) }}"
                                                            class="btn btn-info" title="แสดงข้อมูล อำเภอ">
                                                            <i class=" fas fa-fw fa-eye" aria-hidden="true"></i>
                                                        </a>
                                                        <a href="{{ route('amphurs.amphur.edit', $amphur->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
                                    $tt_total = $TT_blue + $TT_yellow + $TT_red;
                                            $TT_percent = $tt_total > 0 ? ($TT_blue / $tt_total) * 100 : 0;
                                    @endphp
                                    <tr>
                                        <td colspan="3" style="text-align: right"> รวม </td>
                                        <td>{{ number_format($tt_tambon) }}</td>
                                        <td>{{ number_format($tt_mooban) }}</td>
                                        <td>{{ number_format($tt_home) }}</td>
                                        <td>{{ number_format($tt_people) }}</td>
 <td>{{ number_format( $TT_blue) }}</td>
                                    <td>{{ number_format( $TT_yellow) }}</td>
                                    <td>{{ number_format( $TT_red) }}</td>
   <td>{{ number_format( $TT_percent,2) }}%</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>

                  


                    <div class="tab-pane fade  pt-3" id="gis-tab-pane" role="tabpanel" aria-labelledby="gis-tab"
                        tabindex="0">

                        <div id="map_canvas"></div>
                    </div>
                </div>






            </div>

            <div class="card-footer">
                {!! $amphurs->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>
    <style type="text/css">
        #map_canvas {
            width: 100%;
            height: 800px;
            margin: 0;
            padding: 0;
        }

        .geoxml3_infowindow * {
            font-size: 90%;
            margin: 0
        }
    </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>
 
    <script>
    var map;
    var geoXmls = {};
    var infoWindow;
</script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ env('GMAP_APIKEY') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/geoxml3-Copy.js') }}"></script>
   <script>
function initialize() {

    var myLatlng = new google.maps.LatLng(
        {{ env('GMAP_CENTER_LAT') }},
        {{ env('GMAP_CENTER_LON') }}
    );

    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    infoWindow = new google.maps.InfoWindow();

    loadAllMaps();
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function loadAllMaps() {

@foreach ($Amp_sums as $mp)
@php
    $TT_percent = 0;
       $tt_total = $mp->blue +$mp->yellow +$mp->red;
                                            $TT_percent = $tt_total > 0 ? ($mp->blue / $tt_total) * 100 : 0;
@endphp
    geoXmls['{{ $mp->amphurs_id }}'] = new geoXML3.parser({
        map: map,
        singleInfoWindow: false,
        suppressInfoWindows: true,

        afterParse: function (doc) {

            if (!doc[0].placemarks) return;

            doc[0].placemarks.forEach(function (pm) {

                if (pm.polygon) {

                    google.maps.event.addListener(pm.polygon, 'click', function (e) {

                        var content = `
                        <table class="table table-bordered table-sm mb-0">
                            <tr>
                                <th colspan="2" class="text-center">
                                    <A href="{{ route('tambons.tambon.index') }}?amphurs_id={{$mp->id  }}">อำเภอ {{ $mp->name_th }}</a>
                                </th>
                            </tr>
                            <tr>
                                <td>น้ำเงิน</td>
                                <td class="text-primary">{{ number_format( $mp->blue )}}</td>
                            </tr>
                            <tr>
                                <td>เหลือง</td>
                                <td class="text-warning">{{ number_format( $mp->yellow)}}</td>
                            </tr>
                            <tr>
                                <td>แดง</td>
                                <td class="text-danger">{{ number_format($mp->red ) }}</td>
                            </tr>
                            <tr>
                                <td><b>โอกาสชนะ </b></td>
                                <td><b>{{ number_format( $TT_percent,2) }}%</b></td>
                            </tr>
                        </table>
                        `;

                        infoWindow.setContent(content);
                        infoWindow.setPosition(e.latLng);
                        infoWindow.open(map);
                    });
                }
            });
        }
    });

    geoXmls['{{ $mp->amphurs_id }}'].parse(
        "{{ asset('maps/อ.' . $mp->name_th . '_' . $mp->dominant_color . '.kml') }}"
    );

@endforeach
}
</script>


 
@endsection