@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
               <!-- <div class="card-header">{{ __('ภาพรวมผลการประเมินผู้มีสิทธิครั้งล่าสุด') }}</div> -->

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    
                    


               <div>
                 <h4 id="total_assemes_num"></h4>
                 <h4 id="total_voter_num"></h4>
                    <div id="chartdiv3"></div>
               </div>


                </div>
            </div>
        </div>

 
 
    
   
        <div class="col-md-12">
            <div class="card">
               <div class="card-header">{{ __('ภาพรวมรายอำเภอ') }}</div> 

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    
                    


               <div>
               
                    <div id="chartdiv1"></div>
               </div>


                </div>
            </div>
        </div>

 
    </div>
</div>
@endsection

@section('style')
    <style>
        #chartdiv1 {
            width: 100%;
            height: 500px;
        }

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

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

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

        #chartdiv5 {
            width: 100%;
            height: 500px;
        }    
        #map_canvas {
            width: 100%;
            height: 800px;
            margin: 0;
            padding: 0;
        }

        .geoxml3_infowindow * {
            font-size: 90%;
            margin: 0
        }
    </style>
@endsection

@section('script')
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

 
<script>
var total = {{ ($summary->blue ?? 0) + ($summary->yellow ?? 0) + ($summary->red ?? 0) }};

var chartData = [
  {
    category: "สีน้ำเงิน",
    value: {{ $summary->blue ?? 0 }},
    pct: {{ ($summary->blue ?? 0) && $total ? round(($summary->blue / $total) * 100, 1) : 0 }},
    color: am5.color(0x0d6efd),
    url: "{{ route('people.people.voter_summary') }}?score=3"
  },
  {
    category: "สีเหลือง",
    value: {{ $summary->yellow ?? 0 }},
    pct: {{ ($summary->yellow ?? 0) && $total ? round(($summary->yellow / $total) * 100, 1) : 0 }},
    color: am5.color(0xffc107),
    url: "{{ route('people.people.voter_summary') }}?score=2"
  },
  {
    category: "สีแดง",
    value: {{ $summary->red ?? 0 }},
    pct: {{ ($summary->red ?? 0) && $total ? round(($summary->red / $total) * 100, 1) : 0 }},
    color: am5.color(0xdc3545),
    url: "{{ route('people.people.voter_summary') }}?score=1"
  }
];
</script>






<script>
am5.ready(function() {

  // ป้องกัน root ซ้ำ
  if (window.chartRoot3) {
    window.chartRoot3.dispose();
  }

  // Root
  var root = am5.Root.new("chartdiv3");
  window.chartRoot3 = root;

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

  // Chart
  var chart = root.container.children.push(
    am5xy.XYChart.new(root, {
      panX: false,
      panY: false,
      wheelX: "none",
      wheelY: "none",
      paddingLeft: 30,
      paddingRight: 30
    })
  );

  // Cursor
  var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
  cursor.lineY.set("visible", false);

  // X Axis
  var xAxis = chart.xAxes.push(
    am5xy.CategoryAxis.new(root, {
      categoryField: "category",
      renderer: am5xy.AxisRendererX.new(root, {
        minGridDistance: 40
      })
    })
  );

  xAxis.get("renderer").labels.template.setAll({
    fontSize: 14,
    fontWeight: "600"
  });

  // Y Axis
  var yAxis = chart.yAxes.push(
    am5xy.ValueAxis.new(root, {
      min: 0,
      renderer: am5xy.AxisRendererY.new(root, {
        strokeOpacity: 0.1
      })
    })
  );

  // Series
  var series = chart.series.push(
    am5xy.ColumnSeries.new(root, {
      name: "ภาพรวมคะแนน",
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: "value",
      categoryXField: "category",
      tooltip: am5.Tooltip.new(root, {
        labelText: "{category}: {valueY} ({pct}%)"
      })
    })
  );

  // Column style
  series.columns.template.setAll({
    cornerRadiusTL: 12,
    cornerRadiusTR: 12,
    strokeOpacity: 0,
    width: am5.percent(60)
  });

  // สีแท่งจาก data
  series.columns.template.adapters.add("fill", function (fill, target) {
    return target.dataItem.dataContext.color;
  });

  series.columns.template.adapters.add("stroke", function (stroke, target) {
    return target.dataItem.dataContext.color;
  });


// 👉 ให้ cursor เป็น pointer
series.columns.template.set("cursorOverStyle", "pointer");

// 👉 คลิกแท่งเพื่อไปลิงก์
series.columns.template.events.on("click", function (ev) {
  var dataItem = ev.target.dataItem;
  if (dataItem && dataItem.dataContext.url) {
    window.location.href = dataItem.dataContext.url;
    // หรือเปิดแท็บใหม่
    // window.open(dataItem.dataContext.url, "_blank");
  }
});


  // 🔢 Label บนแท่ง (จำนวน + % / ตัวหนา / กลางแท่ง)
  series.bullets.push(function () {
    return am5.Bullet.new(root, {
      locationY: 0.5,
      sprite: am5.Label.new(root, {
        text: "{valueY} ({pct}%)",
        centerX: am5.p50,
        centerY: am5.p50,
        populateText: true,
        fontSize: 14,
        fontWeight: "700",
        fill: am5.color(0xffffff)
      })
    });
  });

  // Set data
  xAxis.data.setAll(chartData);
  series.data.setAll(chartData);

  // Animate
  series.appear(1000);
  chart.appear(1000, 100);

});
</script>

  
<!-------------------------------------------->
<script>
var data = [
@foreach($amphurSummary as $row)
@php
  $total = $row->blue + $row->yellow + $row->red;
@endphp
{
  amphur: "{{ $row->amphur }}",

  blue: {{ $row->blue }},
  yellow: {{ $row->yellow }},
  red: {{ $row->red }},

  blue_pct: {{ $total > 0 ? round(($row->blue / $total) * 100, 1) : 0 }},
  yellow_pct: {{ $total > 0 ? round(($row->yellow / $total) * 100, 1) : 0 }},
  red_pct: {{ $total > 0 ? round(($row->red / $total) * 100, 1) : 0 }}
},
@endforeach
];
</script>
  <script>
am5.ready(function() {

var root = am5.Root.new("chartdiv1");
root.setThemes([am5themes_Animated.new(root)]);

var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: false,
  panY: false,
  paddingLeft: 0,
  wheelX: "panX",
  wheelY: "zoomX",
  layout: root.verticalLayout
}));

// Legend
var legend = chart.children.push(
  am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50
  })
);

// X Axis
var xRenderer = am5xy.AxisRendererX.new(root, {
  cellStartLocation: 0.15,
  cellEndLocation: 0.85,
  minorGridEnabled: true
});

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  categoryField: "amphur",
  renderer: xRenderer
}));

xRenderer.grid.template.setAll({ location: 1 });
xAxis.data.setAll(data);

// Y Axis
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {
    strokeOpacity: 0.1
  })
}));

// ฟังก์ชันสร้าง series
function makeSeries(name, field, pctField, color) {

  var series = chart.series.push(am5xy.ColumnSeries.new(root, {
    name: name,
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: field,
    categoryXField: "amphur"
  }));

  series.columns.template.setAll({
    width: am5.percent(90),
    fill: color,
    strokeOpacity: 0,
    tooltipText: "{name}: {valueY} ({"+pctField+"}%)"
  });

  series.data.setAll(data);

  // ✅ Label กลางแท่ง / ตัวหนา / สีขาว
  series.bullets.push(function () {
    return am5.Bullet.new(root, {
      locationY: 0.5,
      sprite: am5.Label.new(root, {
        text: "{valueY} ({"+pctField+"}%)",
        centerX: am5.p50,
        centerY: am5.p50,
        populateText: true,
        fontSize: 12,
        fontWeight: "700",           // 🔥 ตัวหนา
        fill: am5.color(0xffffff),   // 🔥 สีขาว
        oversizedBehavior: "wrap"
      })
    });
  });

  series.appear();
  legend.data.push(series);
}

// Series
makeSeries("สีน้ำเงิน", "blue", "blue_pct", am5.color(0x0d6efd));
makeSeries("สีเหลือง", "yellow", "yellow_pct", am5.color(0xffc107));
makeSeries("สีแดง", "red", "red_pct", am5.color(0xdc3545));

chart.appear(1000, 100);

});
</script>



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