@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-header bg-primary text-white">

            <h5 class="my-1 float-left">บ้าน{{ isset($mooban->name) ? $mooban->name : 'หมู่บ้าน' }} หมู่ที่
                {{ isset($mooban->moo) ? (int) $mooban->moo : '' }}</h5>
            <div class="float-right">
                <form method="POST" action="#" accept-charset="UTF-8">
                    <input name="_method" value="DELETE" type="hidden">
                    {{ csrf_field() }}
                    <div class="btn-group btn-group-sm" role="group">
                        <a href="{{ route('moobans.mooban.index') }}" class="btn btn-primary" title="แสดง หมู่บ้าน ทั้งหมด">
                            <i class="fas fa-fw fa-th-list" aria-hidden="true"></i>
                        </a>

                        <a href="{{ route('moobans.mooban.edit', $mooban->id) }}" class="btn btn-primary"
                            title="แก้ไขข้อมูล หมู่บ้าน">
                            <i class="fas fa-fw fa-pencil-alt" aria-hidden="true"></i>
                        </a>

                    </div>
                </form>
            </div>
        </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>
 @if (auth()->user()->permission != 'USER_MOOBAN')
                <li class="nav-item" role="presentation">
                    <button class="nav-link  " id="homez-tab" data-bs-toggle="tab" data-bs-target="#homez-tab-pane"
                        type="button" role="tab" aria-controls="homez-tab-pane"
                        aria-selected="true">บ้านเลขที่</button>
                </li>
                @endif
                @if (auth()->user()->permission == 'ADMIN')
                    <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>
                @endif
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"
                        type="button" role="tab" aria-controls="profile-tab-pane"
                        aria-selected="false">ประวัติการเลือกตั้ง</button>
                </li>

                @if (auth()->user()->permission == 'ADMIN')
                    <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>
                @endif
                 @if(auth()->user()->permission!='USER_MOOBAN')
                  <li class="nav-item" role="presentation">
                    <button class="nav-link" id="voter_List-tab" data-bs-toggle="tab" data-bs-target="#voter_List-tab-pane"
                        type="button" role="tab" aria-controls="voter_List-tab-pane"
                        aria-selected="false">รายชื่อผู้ใช้สิทธิ์</button>
                </li>
 
             
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="update-tab" data-bs-toggle="tab" data-bs-target="#update-tab-pane"
                        type="button" role="tab" aria-controls="update-tab-pane"
                        aria-selected="false">บันทึกผลการประเมิน</button>
                </li>
                @endif
 <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="false">GIS</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="row mt-3">
                        <div class="col-sm-4 right">เขตเลือกตั้ง</div>
                        <div class="col-sm-8">: {{ optional($mooban->tambon->electorate)->name }}</div>
                    </div>

                    <div class="row">
                        <div class="col-sm-4 right">อำเภอ</div>
                        <div class="col-sm-8">: {{ optional($mooban->tambon->amphur)->name_th }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">ตำบล</div>
                        <div class="col-sm-8">: {{ optional($mooban->tambon)->name }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">ชื่อหมู่บ้าน</div>
                        <div class="col-sm-8">: {{ $mooban->name }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">หมู่ที่</div>
                        <div class="col-sm-8">: {{ (int) $mooban->moo }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">จำนวนผู้มาใช้สิทธิเลือกตั้งที่ผ่านมา</div>
                        <div class="col-sm-8">: {{ $mooban->last_voter }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">จำนวนผู้มีสิทธิเลือกตั้ง</div>
                        <div class="col-sm-8">: {{ $mooban->voter_num }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">ประชากรรวม</div>
                        <div class="col-sm-8">: {{ $mooban->total_pop }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">จำนวนหลังคาเรือน</div>
                        <div class="col-sm-8">: {{ $mooban->total_house }}</div>
                    </div>
                    <!-- 
                    <div class="row">
                        <div class="col-sm-4 right">ละติจูด</div>
                        <div class="col-sm-8">: {{ $mooban->latitude }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">ลองจิจูด</div>
                        <div class="col-sm-8">: {{ $mooban->longitude }}</div>
                    </div>
                -->
                    <div class="row">
                        <div class="col-sm-4 right">เกี่ยวกับหมู่บ้านนี้</div>
                        <div class="col-sm-8">: {{ $mooban->detail }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">ผู้บันทึกข้อมูล</div>
                        <div class="col-sm-8">: {{ optional($mooban->user)->name }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">เพิ่มเมื่อ </div>
                        <div class="col-sm-8">: {{ $mooban->created_at }}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4 right">ปรับปรุงล่าสุด </div>
                        <div class="col-sm-8">: {{ $mooban->updated_at }}</div>
                    </div>

                </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 class="tab-pane fade pt-3" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-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>
                                        <a href="{{ route('election_histories.election_history.create') }}?moobans_id={{ $mooban->id }}&tambons_id={{ $mooban->tambons_id }}&amphurs_id={{ $mooban->amphurs_id }}"
                                            class="btn btn-success" title="เพิ่ม Election History ใหม่">
                                            <i class="fas fa-fw  fa-plus" aria-hidden="true"></i>
                                        </a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                                                @foreach ($electionHistories as $electionHistory)
                                    <tr>
                                        <td>{{ ++$r }}</td>

                                        <td>{{ $electionHistory->detail }}</td>
                                        <td>{{ optional($electionHistory->mooban)->name }}</td>
                                        <td>{{ optional($electionHistory->tambon)->name }}</td>
                                        <td>{{ optional($electionHistory->amphur)->name_th }}</td>
                                        <td>{{ $electionHistory->election_date }}</td>
                                        <td>{{ optional($electionHistory->user)->name }}</td>
                                        <td>{{ $electionHistory->all_voter_people }}</td>
                                        <td>{{ $electionHistory->all_vote }}</td>

                                        <td>

                                            <form method="POST" action="{!! route('election_histories.election_history.destroy', $electionHistory->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('election_histories.election_history.show', $electionHistory->id) }}"
                                                        class="btn btn-info" title="แสดงข้อมูล Election History">
                                                        <i class=" fas fa-fw fa-eye" aria-hidden="true"></i>
                                                    </a>
                                                    <a href="{{ route('election_histories.election_history.edit', $electionHistory->id) }}"
                                                        class="btn btn-primary" title="แก้ไขข้อมูล Election History">
                                                        <i class=" fas fa-fw fa-pencil-alt" aria-hidden="true"></i>
                                                    </a>

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

                                            </form>

                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>


                </div>


                                
                @include('moobans.tabs.leader_assessment')
                @include('moobans.tabs.leader_form')
                @if(auth()->user()->permission!='USER_MOOBAN')
                @include('moobans.tabs.voter_list2')

@endif
@if(auth()->user()->permission=='ADMIN')
             <div class="tab-pane fade" id="update-tab-pane" role="tabpanel" aria-labelledby="update-tab"
                    tabindex="0">
                    <div class="col-12 pt-3" style="align-content: center">
                    <a class="btn btn-info" href="{{ route('people.people.voter_assessment',$mooban->id) }}">ทำการประเมินผู้ใช้สิทธิ</a>
             </div>   </div>

@endif
                

                @include('moobans.tabs.tracking_user')
                 @if (auth()->user()->permission == 'ADMIN')
                @include('moobans.tabs.reportvoter', [
                    'p1_s1' =>  $p1_s1,
                    'p1_s2' =>  $p1_s2,
                    'p1_s3' =>  $p1_s3,
                    'p1_s1' =>  $p2_s1,
                    'p1_s2' =>  $p2_s2,
                    'p1_s3' =>  $p2_s3,
                    'p1_s1' =>  $p3_s1,
                    'p1_s2' =>  $p3_s2,
                    'p1_s3' =>  $p3_s3
                ])
                @endif
                @include('moobans.tabs.homes')


                
                    <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="modal fade" id="add_b" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">แต่งตั้งนักจัดการข้อมูล B</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('people.people.set_gan_b', $mooban->id) }}">
                        @csrf
                        <div class="modal-body">
                            <select name="ganb_id[]" class="form-control-chosen form-control" multiple>
                                @foreach ($peopleObjects as $ganb)
                                    @if ($ganb->is_assistant != 'YES')
                                        <option value="{{ $ganb->id }}">{{ $ganb->name }}
                                            {{ optional($ganb->home)->address }} {{ $ganb->id }}</option>
                                    @endif
                                @endforeach

                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
                            <button type="submit" class="btn btn-primary">บันทึก</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endsection
    @section('style')
        <style>
            tbody td {
                text-align: center;
            }
        </style>

        <style>
            
            .bg-grey {
                background: #f0ecec !important;
            }
        </style>
        <link href="{{ asset('assets/css/component-chosen.css') }}" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('bootstrap-table-master') }}/dist/bootstrap-table.min.css">

        <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>
    @stop
    @section('script')
        <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 src="https://unpkg.com/bootstrap-table@1.22.1/dist/extensions/print/bootstrap-table-print.min.js"></script>

        <script>
            $('#table_pp').bootstrapTable({
                 @if(auth()->user()->permission=='ADMIN')
                showExport: true,
                exportDataType: 'all',
                exportTypes: ['xml', 'csv', 'excel'],
                exportOptions: {
                    fileName: () => 'รายการ' +
                        new Date().toISOString().slice(0, 10)
                }
                 @endif
            });
              $('#peopleTable').bootstrapTable({
                @if(auth()->user()->permission=='ADMIN')
                showExport: true,
                exportDataType: 'all',
                exportTypes: ['xml', 'csv', 'excel'],
                exportOptions: {
                    fileName: () => 'รายการ' +
                        new Date().toISOString().slice(0, 10)
                }
                @endif
            });
        </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 actionFormatter(value, row, index) {
            let showUrl = "{{ route('people.people.show', 0) }}" + row.id; 
            let editUrl = "{{ route('people.people.edit', ':id') }}";
            editUrl = editUrl.replace(':id', row.id);
            let deleteUrl = "{!! route('people.people.destroy', 0) !!}" + row.id;

           @if(auth()->user()->permission=='ADMIN_AMP' || auth()->user()->permission=='ADMIN' || auth()->user()->permission=='ADMIN_TAM') 
 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>
            <button class="btn btn-danger"
                onclick="deletePeople(${row.id})"
                title="ลบข้อมูล">
                <i class="fas fa-trash-alt"></i>
            </button>
        </div>
    `;
           @else
 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>
    `;
           @endif
           
        }

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

            $.ajax({
                url: '{!! route('people.people.destroy', 0) !!}' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'delete'
                },
                success: function(res) {
                    $('#peopleTable').bootstrapTable('refresh');
                }
            });
        }
    </script>

    <script>
 function indexFormatter(value, row, index) {
    let opt = $('#peopleTable').bootstrapTable('getOptions');
    return ((opt.pageNumber - 1) * opt.pageSize) + index + 1;
}

function indexPrintFormatter(value, row, index) {
    return index + 1;
}
 
</script>
<script>
   
function queryParams(params) {
    return {
        limit: params.limit,
        offset: params.offset,
        sort: params.sort,
        order: params.order,
        search: params.search
    };
}
 function emptyFormatter(value) {
    return value ? value : '';
}

    </script>
        <script src="{{ asset('assets/js/chosen.jquery.js') }}"></script>
        <script>
            $('.form-control-chosen').chosen({
                allow_single_deselect: true,
                search_contains: true,
                width: '100%'
            });
        </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>

<script>
            function printTable1() {
                let printContents = document.getElementById('print-area-voter').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>
 @if (auth()->user()->permission == 'ADMIN')
        <!-- 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() {

    // 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>
 @endif
<script>
    const houses = @json($House_sums);
</script>

<script>
let map, infoWindow;

function markerColor(color){
    if(color === 'blue')   return '#0d6efd';
    if(color === 'red')    return '#dc3545';
    return '#ffc107';
}

function initMap() {

    // 🧠 หา marker ตัวแรกที่มี lat/lng
    let first = houses.find(h => h.lat && h.lng);

    const center = first
        ? { lat: parseFloat(first.lat), lng: parseFloat(first.lng) }
        : { 
            lat: {{ env('GMAP_CENTER_LAT') }}, 
            lng: {{ env('GMAP_CENTER_LON') }} 
          };

    map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 15,
        center: center,
        mapTypeId: "roadmap",
    });

    infoWindow = new google.maps.InfoWindow();

    houses.forEach((h, idx) => {
        if(!h.lat || !h.lng) return;

        const position = { lat: parseFloat(h.lat), lng: parseFloat(h.lng) };
        const color = markerColor(h.house_color);

        const marker = new google.maps.Marker({
            map,
            position,
            title: `บ้านเลขที่ ${h.house_no}`,
            label: {
                text: String(h.house_no ?? ''),
                color: '#000',
                fontSize: '12px',
                fontWeight: 'bold'
            },
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 10,
                fillColor: color,
                fillOpacity: 0.9,
                strokeColor: '#fff',
                strokeWeight: 2
            }
        });

        marker.addListener("click", () => {
            infoWindow.setContent(`
                <table class="table table-bordered table-sm mb-0">
                    <tr><th colspan="2">บ้านเลขที่ ${h.house_no}</th></tr>
                    <tr><td>จำนวนคน</td><td>${h.total_people}</td></tr>
                    <tr><td class="text-primary">น้ำเงิน</td><td>${h.blue}</td></tr>
                    <tr><td class="text-warning">เหลือง</td><td>${h.yellow}</td></tr>
                    <tr><td class="text-danger">แดง</td><td>${h.red}</td></tr>
                    <tr><td><b>สรุปสี</b></td><td><b>${h.house_color}</b></td></tr>
                </table>
            `);
            infoWindow.open(map, marker);
        });
    });
}
</script>


<!-- โหลด Google Maps API -->
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key={{ env('GMAP_APIKEY') }}&callback=initMap">
</script>
    @stop