@extends('layouts.app')

@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-body">
            <form class="row g-3 justify-content-md-center" id="form-search">
                <div class="col-auto">
                    <label for="amphurs_id" class="col-form-label">อำเภอ</label>
                </div>

                <div class="col-auto">
                    <select class="form-control" id="amphurs_id" name="amphurs_id" onChange="get_tambons(this.value)">
                        <option value="" selected>
                            ระบุ อำเภอ
                        </option>

                        @foreach ($amphurs as $key => $amphur)
                            <option value="{{ $key }}"
                                {{ Request::input('amphurs_id') == $key ? 'selected' : '' }}>
                                {{ $amphur }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-auto">
                    <label for="tambons_id" class="col-form-label"> ตำบล</label>
                </div>
 

                <div class="col-auto">
                    <select class="form-control" id="tambons_id" name="tambons_id" onChange="get_moobans(this.value )">
                        <option value="" style="display: none;" selected>ระบุ ตำบล</option>
                        @foreach ($tambons as $key => $tambon)
                            <option value="{{ $key }}"
                                {{ Request::input('tambons_id') == $key ? 'selected' : '' }}>
                                {{ $tambon }}
                            </option>
                        @endforeach
                    </select>
                </div>



                    <div class="col-auto">
                    <label for="keyword" class="col-form-label">ชื่อหมู่บ้าน</label>
                </div>

                <div class="col-auto">
                    <input type="text" class="form-control" id="keyword" name="keyword"
                        value="{{ Request::input('keyword') }}">

                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary mb-3">ค้นหา</button>
                </div>
            </form>
        </div>



    </div>


    <div class="card">

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

            <h5 class="my-1 float-left">{{ isset($tamb) && !empty($tamb) ? 'ตำบล'.$tamb->name .' อำเภอ'. optional($tamb->amphur)->name_th  : 'หมู่บ้าน' }}</h5>
    
        </div>

       
            <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>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane"
                        type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">ผู้นำ</button>
                </li>


   <li class="nav-item" role="presentation">
                    <button class="nav-link" id="leader_form-tab" data-bs-toggle="tab" data-bs-target="#leader_form-tab-pane"
                        type="button" role="tab" aria-controls="leader_form-tab-pane" aria-selected="false">แบบประเมินผู้นำ</button>
                </li>
                
                

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tracking_user-tab" data-bs-toggle="tab"
                        data-bs-target="#tracking_user-tab-pane" type="button" role="tab"
                        aria-controls="tracking_user-tab-pane" aria-selected="false">ผู้จัดการข้อมูล</button>
                </li>



            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade " id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                    tabindex="0">
 <div class="table-responsive">
                    <table id="moobanTable" data-toggle="table" data-locale="th-TH" data-url="{{ route('get.Mooban') }}"
                        data-pagination="true" data-query-params="queryParams" data-side-pagination="server"
                        data-search="true" data-sort-name="id" data-sort-order="asc" data-page-size="20"
                        data-page-list="[10, 20, 50, 100, ALL]" data-show-export="true"
                        data-export-types='["csv", "excel", "txt", "json", "xml"]' data-show-columns="true"
                        data-show-columns-toggle-all="true" class="table table-bordered"> 
                    <thead>
                        <tr>
                            <th rowspan="2" data-formatter="indexFormatter">ลำดับที่</th>
                            <th colspan="4" class="text-center">พื้นที่</th>
                            <th colspan="4" class="text-center">จำนวน</th>
                            <th rowspan="2"  data-formatter="mapFormatter">พิกัด</th>
                            <th rowspan="2" data-formatter="actionFormatter">ดำเนินการ</th>
                                  
                        </tr>
                        <tr>
                            <th data-field="name"  data-formatter="villageFormatter" data-sortable="true">ชื่อหมู่บ้าน</th>
                            <th data-field="moo"  data-formatter="villageFormatter" data-sortable="true">หมู่ที่</th>
                            <th data-field="tambon_name" data-formatter="tambonFormatter" data-sortable="true">ตำบล</th>
                            <th data-field="amphur_name" data-formatter="amphurFormatter" data-sortable="true">อำเภอ</th>
                            <th data-field="last_voter" data-sortable="true">ผู้มาใช้สิทธิฯ</th>
                            <th data-field="total_house" data-sortable="true">หลังคาเรือน</th>
                            <th data-field="total_home" data-sortable="true">เพิ่มบ้านเลขที่</th>
                            <th data-field="total_voter" data-sortable="true">ผู้มีสิทธิฯ</th>
                        </tr>
                    </thead>

                    </table>

                </div>
                </div>
                
                           @include('moobans.tabs.leader_assessment')
                           @include('moobans.tabs.reportvoter')
                <div class="tab-pane fade" id="leader_form-tab-pane" role="tabpanel" aria-labelledby="leader_form-tab"
                    tabindex="0">
                    <div id="print-area">

                        
                        <div align="center"  style="font-weight: bold">ประเมินแกนนำ  ตำบล {{ optional($tambon_)->name }} อำเภอ{{ isset($tambon_->amphur) ?  optional($tambon_->amphur)->name_th : ''  }}</div>
                    <table class="table table-bordered table-sm">
                        <thead>
    <tr>
        <th rowspan="3">ที่</th>
        <th rowspan="3">ชื่อ-สกุล</th>
        <th rowspan="3">บ้านเลขที่</th>
        <th rowspan="3">บ้าน</th>
        <th rowspan="3">ตำแหน่ง</th>
          <th rowspan="3">รายละเอียด</th>
        <th rowspan="3">เบอร์โทร</th>

        <th colspan="12">ค่าความนิยม</th>

        <th rowspan="3">ความน่าเชื่อถือ</th>
    </tr>

    <tr>
        <th colspan="3">การแสดงออก</th>
        <th colspan="3">ขีดความสามารถ</th>
        <th colspan="3">ความน่าเชื่อถือ</th>
        <th colspan="3">ฝ่าย</th>
    </tr>

    <tr>
        <th>3</th>
        <th>2</th>
        <th>1</th>

        <th>3</th>
        <th>2</th>
        <th>1</th>

        <th>3</th>
        <th>2</th>
        <th>1</th>

        <th>น้ำเงิน</th>
        <th>แดง</th>
        <th>ส้ม</th>
    </tr>
</thead>

                        
                            <tbody>
                                                                @foreach ($leaders as $leader)
                                    
                                    <tr>
                                        <td> {{ ++$R }}</td>
                                        <td> {{ $leader->name }}</td>
                                        <td> {{ isset($leader->home) ? optional($leader->home)->address : '' }}</td>
                                           <td> {{ isset($leader->mooban) ? optional($leader->mooban)->name .' หมู่': '' }}  {{ isset($leader->mooban) ? (int)optional($leader->mooban)->moo : '' }}</td>
                                        <td>
                                            @foreach ($pp_positions as $pps)
                                                @if ($pps->people_id == $leader->id)
                                                    {{ $pps->position }},
                                                @endif
                                            @endforeach
                                        </td>   <td> {{ $leader->etc }}</td>
                                        <td> {{ $leader->tel }}</td>

<td></td>
<td></td>
 <td></td>
<td></td><td></td>
<td></td><td></td>
<td></td><td></td>
<td></td><td></td>
<td></td>

                                       
                                        <td> {{ optional($leader)->reliability }}</td>

                                    </tr>
                                @endforeach
                            </tbody>
                            <!-- #endregion -->
                       
                    </table></div>
                    <div align="center"> <button  onclick="printTable()" class="btn btn-info">พิมพ์</button></div>

                </div>
          

                <div class="tab-pane fade pt-3" id="tracking_user-tab-pane" role="tabpanel"
                    aria-labelledby="tracking_user-tab" tabindex="0">
                    <h3>ผู้จัดการข้อมูล A</h3>
                    <table class="table table-striped table-sm table-bordered   ">
                        <thead>
                            <tr>
                                <th>ลำดับที่</th>
                                <th>ภาพโปรไฟล์</th>
                                <th>ชื่อ-สกุล</th>
                                <th>เบอร์โทร</th>
                                <th>E-mail</th>
                                <th>ผู้ใช้งานระบบ</th>
                                <th>ระดับ</th>
                                <th>ประสานงานหมู่บ้าน</th>
                                <th>ตำบล</th>
                                <th>อำเภอ</th>
                                <th>
                              
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                                                        @foreach ($tracking_users as $user)
                                <tr>
                                    <td>{{ ++$r }}</td>
                                    <td><img src="{{ asset($user->image) }}" style="width: 70px"></td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->tel }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->username }}</td>
                                    <td>{{ $user->permission }}</td>

                                    <td>บ้าน{{ optional($user->mooban)->name }} หมู่ที่
                                        {{ (int) optional($user->mooban)->moo }}</td>
                                    <td>{{ optional($user->tambon)->name }}</td>
                                    <td>{{ optional($user->amphur)->name_th }}</td>

                                    <td>

                                        @if (auth()->user()->permission == 'ADMIN')
                                            <form method="POST" action="{!! route('users.user.destroy', $user->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('users.user.show', $user->id) }}"
                                                        class="btn btn-info" title="แสดงข้อมูล ผู้ใช้งานระบบ">
                                                        <i class=" fas fa-fw fa-eye" aria-hidden="true"></i>
                                                    </a>
                                                    <a href="{{ route('users.user.edit', $user->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>
                                        @endif

                                    </td>
                                </tr>
                            @endforeach


                        </tbody>
                    </table>

                  
                </div>


                 <div class="tab-pane fade pt-3" id="reportleader-tab-pane" role="tabpanel"
                    aria-labelledby="reportleader-tab" tabindex="0">
                    ครั้งที่ 1 <br>
                    <div id="chartdiv1"></div>
                    ครั้งที่ 2 <br>
                    <div id="chartdiv2"></div>
                </div>

            </div>
        </div>


               
            </div>

             

    
@endsection
@section('style')
    <link rel="stylesheet" href="{{ asset('bootstrap-table-master') }}/dist/bootstrap-table.min.css">
    <style>
        .bootstrap-table .dropdown-menu li a:contains("0 รายการต่อหน้า") {
            color: transparent !important;
        }
    </style>
    <style>
        tbody td,
        tfoot td {
            text-align: center;
        }
    </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>
        
@endsection
@section('script')

    <script>
        function get_tambons(amphurs_id) {
            $.ajax({
                type: 'POST',
                url: "{{ route('tambons.tambon.get_tambon_by_amphur', 0) }}" + amphurs_id,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'text',
                success: function(data) {
                    $('#tambons_id').html('');
                    $('#tambons_id').append(data);
                }
            })
        }
    </script>

    <script>
        function imgFormatter(value, row) {
            if (!value) return '';
            return '<img src="/' + value + '" style="width:50px">';
        }

        function posFormatter(value, row) {
            if (!value) return '';
            return value.map(v => v.name).join(', ');
        }

        function mapFormatter(value, row) {
    if (!row.latitude || !row.longitude) return '-';
    return row.latitude + ', ' + row.longitude;
}
        function actionFormatter(value, row, index) {
            let showUrl = "{{ route('moobans.mooban.show', 0) }}" + row.id;
          let editUrl = "{{ route('moobans.mooban.edit', ':id') }}";
            editUrl = editUrl.replace(':id', row.id);
            let deleteUrl = "{!! route('moobans.mooban.destroy', 0) !!}" + row.id;

  
  return `
        <div class="btn-group btn-group-sm" role="group">
            <a href="${showUrl}" class="btn btn-info" title="แสดงข้อมูล">
                <i class="fas fa-eye"></i>
            </a>
            <a href="${editUrl}" class="btn btn-primary" title="แก้ไขข้อมูล">
                <i class="fas fa-pencil-alt"></i>
            </a>
            
        </div>
    `;
          
         
        }

        function deletePeople(id) {
            if (!confirm('ยืนยันการลบข้อมูล?')) return;

            $.ajax({
                url: '{!! route('moobans.mooban.destroy', 0) !!}' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'delete'
                },
                success: function(res) {
                    $('#moobanTable').bootstrapTable('refresh');
                }
            });
        }
    
function villageFormatter(value, row, index) {
    let showUrl = "{{ route('moobans.mooban.show', 0) }}" + row.id;
    return `<a href="${showUrl}" class="text-primary fw-bold">
                ${value}
            </a>`;
}

function tambonFormatter(value, row, index) {
    let showUrl = "{{ route('moobans.mooban.index' ) }}" +'?tambons_id='+ row.tambons_id;
    return `<a href="${showUrl}">
                ${value}
            </a>`;
}

function amphurFormatter(value, row, index) {
    let showUrl = "{{ route('amphurs.amphur.show', 0) }}" + row.amphurs_id;
    return `<a href="${showUrl}">
                ${value}
            </a>`;
}
    
    </script>
    <!-- #region
    -->

    <script src="{{ asset('bootstrap-table-master') }}/tableExport.min.js"></script>
    <script src="{{ asset('bootstrap-table-master') }}/libs/jsPDF/jspdf.umd.min.js"></script>
    <script src="{{ asset('bootstrap-table-master') }}/dist/bootstrap-table.js"></script>
    <script src="{{ asset('bootstrap-table-master') }}/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-th-TH.min.js"></script>
    <script>
        $(document).on('shown.bs.dropdown', '.page-list .dropdown', function() {
            $('.dropdown-menu li a').each(function() {
                // ถ้าข้อความคือ "0"
                if ($(this).text().trim() === '0') {
                    $(this).text('ทั้งหมด');
                }
            });
        });
    </script>

    <script>
        function queryParams(params) {

            params.keyword = $('#keyword').val();
            params.amphurs_id = $('#amphurs_id').val();
            params.tambons_id = $('#tambons_id').val();


            return params;
        }

        $('#form-search').on('submit', function(e) {
            e.preventDefault();
            $('#moobanTable').bootstrapTable('refresh');
        });
    </script>
    <script>
function indexFormatter(value, row, index) {
    let options = $('#moobanTable').bootstrapTable('getOptions');
    let pageNumber = options.pageNumber;      // หน้าที่กำลังอยู่
    let pageSize = options.pageSize;          // จำนวนรายการต่อหน้า

    // คำนวณลำดับจริงตาม offset
    return ((pageNumber - 1) * pageSize) + index + 1;
}
</script>
   <script>
function printTable() {
    let printContents = document.getElementById('print-area').innerHTML;
    let originalContents = document.body.innerHTML;

    document.body.innerHTML = `
        <html>
        <head>
            <title>พิมพ์ตาราง</title>
            <style>
                body { font-family: Tahoma, sans-serif; }
                table { border-collapse: collapse; width: 100%; }
                th, td { border: 1px solid #000; padding: 2px; text-align: center; }
            </style>
        </head>
        <body>
            ${printContents}
        </body>
        </html>
    `;

    window.print();
    document.body.innerHTML = originalContents;
    location.reload();
}
</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)]);

                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) // แดง
                    ]
                });

                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) // แดง (ไม่ผ่านเกณฑ์)
                    ]
                });
                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
                   
                ]);

                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)
                    });
                }

                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)]);

                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) // แดง
                    ]
                });

                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) // แดง (ไม่ผ่านเกณฑ์)
                    ]
                });
                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

                ]);

                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)
                    });
                }

                container.appear(1000, 10);

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

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

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

    /* =========================
     * ROOT
     * ========================= */
    var root = am5.Root.new("chartdiv3");

    root.setThemes([
        am5themes_Animated.new(root)
    ]);

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

    /* =========================
     * SERIES
     * ========================= */
    var series = chart.series.push(
        am5percent.PieSeries.new(root, {
            valueField: "value",
            categoryField: "category",
            alignLabels: false,
            // เพิ่ม Tooltip ให้แสดงทั้ง % และ จำนวนคนเวลาเอาเมาส์ชี้
            tooltip: am5.Tooltip.new(root, {
                labelText: "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value.formatNumber('#,###')} คน)"
            })
        })
    );

    /* =========================
     * COLORS
     * ========================= */
    series.set("colors", am5.ColorSet.new(root, {
        colors: [
            am5.color(0x0d6efd), // น้ำเงิน
            am5.color(0xffc107), // เหลือง
            am5.color(0xdc3545)  // แดง
        ]
    }));

    /* =========================
     * LABEL บนชิ้น PIE (จำนวน + %)
     * ========================= */
    series.labels.template.setAll({
        text: "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value.formatNumber('#,###')} คน)",
        textType: "circular",
        centerX: 0,
        centerY: 0
    });

    /* =========================
     * PHP DATA
     * ========================= */
    

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

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

    // กำหนดให้ข้อความฝั่งขวาของ Legend แสดงทั้ง % และ จำนวนคน
    legend.valueLabels.template.setAll({
        text: "{valuePercentTotal.formatNumber('0.00')}% ({value.formatNumber('#,###')} คน)",
        textAlign: "right"
    });

    legend.data.setAll(series.dataItems);

    /* =========================
     * Animation
     * ========================= */
    series.appear(1000, 100);

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