@include('header-facil')
<main class="w-full px-6 pb-6 pt-[100px] sm:pt-[156px] xl:px-12 xl:pb-12">
  <!-- write your code here-->

  <div class="w-full rounded-lg bg-white px-[24px] py-[20px] dark:bg-darkblack-600">
    <div class="flex flex-col space-y-5">
      <h3 class="text-xl font-bold text-bgray-900 dark:text-white sm:text-2xl">
        OPL Achievement
      </h3>
      <!-- Filter Buttons -->
      <div class="flex flex-wrap items-center gap-3">
        <span style="font-size: 14px; font-weight: 600; color: #64748B;">Filter CG:</span>
        <button type="button" class="cg-filter-btn active" data-cg=""
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #1F2937; color: #FFFFFF; border: 2px solid #1F2937; transition: all 0.2s;">
          All
        </button>
        <button type="button" class="cg-filter-btn" data-cg="DNAwesome"
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #DCFCE7; color: #15803D; border: 2px solid #22C55E; transition: all 0.2s; opacity: 0.7;">
          CG DNAwesome
        </button>
        <button type="button" class="cg-filter-btn" data-cg="SIRIUS"
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #FEF3C7; color: #A16207; border: 2px solid #F59E0B; transition: all 0.2s; opacity: 0.7;">
          CG SIRIUS
        </button>
        <button type="button" class="cg-filter-btn" data-cg="Falcon"
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #DBEAFE; color: #1D4ED8; border: 2px solid #3B82F6; transition: all 0.2s; opacity: 0.7;">
          CG Falcon
        </button>
        <button type="button" class="cg-filter-btn" data-cg="Adminovation"
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #FEE2E2; color: #B91C1C; border: 2px solid #EF4444; transition: all 0.2s; opacity: 0.7;">
          Adminovation
        </button>

        <!-- Separator -->
        <span style="width: 2px; height: 24px; background-color: #CBD5E1; display: inline-block; margin: 0 4px;"></span>

        <span style="font-size: 14px; font-weight: 600; color: #64748B;">Filter Karyawan:</span>
        <button type="button" class="emp-filter-btn active" data-type=""
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #1F2937; color: #FFFFFF; border: 2px solid #1F2937; transition: all 0.2s;">
          All
        </button>
        <button type="button" class="emp-filter-btn" data-type="PKWTT"
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #E0E7FF; color: #3730A3; border: 2px solid #6366F1; transition: all 0.2s; opacity: 0.7;">
          PKWTT
        </button>
        <button type="button" class="emp-filter-btn" data-type="PKWT"
          style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #FFF7ED; color: #C2410C; border: 2px solid #F97316; transition: all 0.2s; opacity: 0.7;">
          PKWT
        </button>
      </div>
      <div class="table-content w-full overflow-x-auto">
        <table class="w-full" id="facilTable">
          <thead>
            <tr class="border-b border-bgray-300 dark:border-darkblack-400">
              <td class="w-[3%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">No</span>
              </td>
              <td class="w-[7%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Periode</span>
              </td>
              <td class="w-[20%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Employee Name</span>
              </td>
              <td class="w-[7%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">CG</span>
              </td>
              <td class="w-[30%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Tema OPL</span>
              </td>
              <td class="w-[8%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Channel</span>
              </td>
              <td class="w-[10%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Submit Date</span>
              </td>
              <td class="w-[12%] px-6 py-5 xl:px-0 text-center">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Socialized</span>
              </td>
            </tr>
          </thead>
          <tbody>
            @foreach($data_opl as $facil)
              <tr class="border-b border-bgray-300 dark:border-darkblack-400">
                <td class="px-6 py-5 xl:px-0">
                  <p class="text-base font-medium text-bgray-900 dark:text-white">{{ $loop->iteration }}</p>
                </td>
                <td class="px-6 py-5 xl:px-0 text-center">
                  @php
                    $bulanList = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                    $bulanColors = [
                      0 => 'background-color: #DBEAFE; color: #1E40AF; border: 1px solid #60A5FA;',  // Jan - biru
                      1 => 'background-color: #FCE7F3; color: #9D174D; border: 1px solid #F472B6;',  // Feb - pink
                      2 => 'background-color: #D1FAE5; color: #065F46; border: 1px solid #34D399;',  // Mar - hijau
                      3 => 'background-color: #FEF3C7; color: #92400E; border: 1px solid #FBBF24;',  // Apr - kuning
                      4 => 'background-color: #EDE9FE; color: #5B21B6; border: 1px solid #A78BFA;',  // Mei - ungu
                      5 => 'background-color: #FFEDD5; color: #9A3412; border: 1px solid #FB923C;',  // Jun - oranye
                      6 => 'background-color: #FEE2E2; color: #991B1B; border: 1px solid #F87171;',  // Jul - merah
                      7 => 'background-color: #CCFBF1; color: #115E59; border: 1px solid #2DD4BF;',  // Agu - teal
                      8 => 'background-color: #E0E7FF; color: #3730A3; border: 1px solid #818CF8;',  // Sep - indigo
                      9 => 'background-color: #FEF9C3; color: #854D0E; border: 1px solid #FACC15;', // Okt - lime
                      10 => 'background-color: #F3E8FF; color: #7E22CE; border: 1px solid #C084FC;', // Nov - purple
                      11 => 'background-color: #CFFAFE; color: #155E75; border: 1px solid #22D3EE;', // Des - cyan
                    ];
                    $periode = '-';
                    $periodeStyle = '';
                    if ($facil->socialized_date) {
                      try {
                        $monthIndex = (int) date('m', strtotime($facil->socialized_date)) - 1;
                        $periode = $bulanList[$monthIndex] ?? '-';
                        $periodeStyle = $bulanColors[$monthIndex] ?? '';
                      } catch (\Exception $e) {
                        $periode = '-';
                      }
                    }
                  @endphp
                  @if($periode !== '-')
                    <span
                      style="{{ $periodeStyle }} display: inline-block; border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 600;">
                      {{ $periode }}
                    </span>
                  @else
                    <p class="text-base font-medium text-bgray-900 dark:text-white">-</p>
                  @endif
                </td>
                <td class="px-6 py-5 xl:px-0">
                  <p class="text-base font-semibold text-bgray-900 dark:text-white">{{ $facil->employee_name }}</p>
                  <p class="text-sm font-medium text-bgray-500 dark:text-bgray-300 nik-text">{{ $facil->nik }}</p>
                </td>
                <td class="px-6 py-5 xl:px-0">
                  @php
                    $cgName = $facil->cg;
                    $cgLower = strtolower(trim($cgName ?? ''));
                    if (str_contains($cgLower, 'sirius')) {
                      $badgeStyle = 'background-color: #FEF3C7; color: #A16207; border: 1px solid #F59E0B;';
                    } elseif (str_contains($cgLower, 'dnawesome') || str_contains($cgLower, 'dna')) {
                      $badgeStyle = 'background-color: #DCFCE7; color: #15803D; border: 1px solid #22C55E;';
                    } elseif (str_contains($cgLower, 'adminovation')) {
                      $badgeStyle = 'background-color: #FEE2E2; color: #B91C1C; border: 1px solid #EF4444;';
                    } elseif (str_contains($cgLower, 'falcon')) {
                      $badgeStyle = 'background-color: #DBEAFE; color: #1D4ED8; border: 1px solid #3B82F6;';
                    } else {
                      $badgeStyle = 'background-color: #F3F4F6; color: #374151; border: 1px solid #9CA3AF;';
                    }
                  @endphp
                  @if($cgName)
                    <span
                      style="{{ $badgeStyle }} display: inline-block; border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 600;">
                      {{ $cgName }}
                    </span>
                  @endif
                </td>
                <td class="px-6 py-5 xl:px-0">
                  <p class="text-base font-semibold text-bgray-900 dark:text-white">{{ $facil->tema }}</p>
                </td>
                <td class="px-6 py-5 xl:px-0">
                  <p class="text-base font-medium text-bgray-900 dark:text-white">{{ $facil->channel }}</p>
                </td>
                <td class="px-6 py-5 xl:px-0 text-center">
                  <p class="text-base font-medium text-bgray-900 dark:text-white">{{ $facil->created_date }}</p>
                </td>
                <td class="px-6 py-5 xl:px-0 text-center">
                  <p class="text-base font-medium text-bgray-900 dark:text-white">{{ $facil->socialized_date }}</p>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
  </section>
  </div>
  <!-- write your code here-->
</main>
</div>
</div>
</div>


<!-- layout end -->
<!--scripts -->
<script src="{{asset('assets/js/jquery-3.6.0.min.js')}}"></script>
<script src="{{asset('assets/js/aos.js')}}"></script>
<script src="{{asset('assets/js/slick.min.js')}}"></script>
<script>
  AOS.init();
</script>
<script src="{{asset('assets/js/quill.min.js')}}"></script>
<script src="{{asset('assets/js/main.js')}}"></script>
<script src="{{asset('assets/js/chart.js')}}"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script>
  // Form A3 Logic
  var userI2cData = {!! json_encode($users_i2c->mapWithKeys(function ($item) {
  return [$item->id => $item->cg]; })) !!};

  function openA3Modal() {
    document.getElementById('a3_user_id').value = '';
    document.getElementById('a3_cg').value = '';
    document.getElementById('a3Modal').style.display = 'flex';
  }

  function closeA3Modal() {
    document.getElementById('a3Modal').style.display = 'none';
  }

  function updateA3Cg() {
    var select = document.getElementById('a3_user_id');
    var cgInput = document.getElementById('a3_cg');
    var selectedId = select.value;
    if (selectedId && userI2cData[selectedId]) {
      cgInput.value = userI2cData[selectedId];
    } else {
      cgInput.value = '';
    }
  }

  // Custom DataTables search for PKWT/PKWTT filter
  var empFilterType = '';
  $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
    if (settings.nTable.id !== 'facilTable') return true;
    if (!empFilterType) return true;
    var rowNode = settings.aoData[dataIndex].nTr;
    var nik = $(rowNode).find('.nik-text').text() || '';
    var hasK = /[kK]/.test(nik);
    if (empFilterType === 'PKWTT') return hasK;
    if (empFilterType === 'PKWT') return !hasK;
    return true;
  });

  $(document).ready(function () {
    var table = $('#facilTable').DataTable({
      responsive: true,
      language: {
        search: "Search inside table:"
      },
      lengthMenu: [10, 25, 50, 100],
      pageLength: 10
    });

    // Optional: If you want to link the custom top search input to datatables search
    $('#listSearch').on('keyup', function () {
      table.search(this.value).draw();
    });

    // CG Filter Buttons
    $('.cg-filter-btn').on('click', function () {
      var cgValue = $(this).data('cg');

      // Update active state
      $('.cg-filter-btn').css('opacity', '0.7').removeClass('active');
      $(this).css('opacity', '1').addClass('active');

      // Filter on CG column (index 3)
      if (cgValue === '' || cgValue === undefined) {
        table.column(3).search('').draw();
      } else {
        table.column(3).search(cgValue).draw();
      }
    });

    // Employee Type Filter Buttons (PKWT/PKWTT)
    $('.emp-filter-btn').on('click', function () {
      empFilterType = $(this).data('type') || '';

      // Update active state
      $('.emp-filter-btn').css('opacity', '0.7').removeClass('active');
      $(this).css('opacity', '1').addClass('active');

      // Redraw with custom filter
      table.draw();
    });

    // === A3 Achievement Table ===
    var a3EmpFilterType = '';
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
      if (settings.nTable.id !== 'a3Table') return true;
      if (!a3EmpFilterType) return true;
      var rowNode = settings.aoData[dataIndex].nTr;
      var nik = $(rowNode).find('.nik-text').text() || '';
      var hasK = /[kK]/.test(nik);
      if (a3EmpFilterType === 'PKWTT') return hasK;
      if (a3EmpFilterType === 'PKWT') return !hasK;
      return true;
    });

    var a3Table = $('#a3Table').DataTable({
      responsive: true,
      language: {
        search: "Search inside table:"
      },
      lengthMenu: [10, 25, 50, 100],
      pageLength: 10
    });

    // A3 CG Filter Buttons
    $('.a3-cg-filter-btn').on('click', function () {
      var cgValue = $(this).data('cg');
      $('.a3-cg-filter-btn').css('opacity', '0.7').removeClass('active');
      $(this).css('opacity', '1').addClass('active');

      // Filter on CG column (index 4 in a3Table)
      if (cgValue === '' || cgValue === undefined) {
        a3Table.column(4).search('').draw();
      } else {
        a3Table.column(4).search(cgValue).draw();
      }
    });

    // A3 Employee Type Filter Buttons (PKWT/PKWTT)
    $('.a3-emp-filter-btn').on('click', function () {
      a3EmpFilterType = $(this).data('type') || '';
      $('.a3-emp-filter-btn').css('opacity', '0.7').removeClass('active');
      $(this).css('opacity', '1').addClass('active');
      a3Table.draw();
    });
  });
</script>
<script>
  function revenueFlowLine() {
    let revenueFlowElement = document
      .getElementById("revenueFlowLine")
      .getContext("2d");
    let month = [
      "Jan",
      "Feb",
      "Mar",
      "April",
      "May",
      "Jun",
      "July",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    let revenueFlow = new Chart(revenueFlowElement, {
      type: "line",
      plugins: [
        {
          beforeDatasetsDraw(chart) {
            chart.ctx.shadowColor = "rgba(37, 99, 235, 0.14)";
            chart.ctx.shadowBlur = 8;
          },
          afterDatasetsDraw(chart) {
            chart.ctx.shadowColor = "rgba(0, 0, 0, 0)";
            chart.ctx.shadowBlur = 0;
          },
        },
      ],
      data: {
        labels: month,
        datasets: [
          {
            label: "Signed",
            data: [65, 75, 65, 55, 75, 55, 45, 65, 75, 65, 85, 75],
            backgroundColor: () => {
              const chart = document
                .getElementById("revenueFlowLine")
                .getContext("2d");
              const gradient = chart.createLinearGradient(0, 0, 0, 450);
              gradient.addColorStop(0, "rgba(34, 197, 94,0.41)");
              gradient.addColorStop(0.6, "rgba(255, 255, 255, 0)");
              return gradient;
            },
            borderColor: "#22C55E",
            // pointRadius: 5,
            pointBorderColor: "#ffffff",
            pointBackgroundColor: "#22C55E",
            pointBorderWidth: 4,
            borderWidth: 2,
            fill: true,
            fillColor: "#fff",
            tension: 0.4,
          },
        ],
      },
      options: {
        // layout: {
        //   padding: {
        //     bottom: -20,
        //   },
        // },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: {
            grid: {
              color: "rgb(243 ,246, 255 ,1)",
            },
            gridLines: {
              zeroLineColor: "transparent",
            },
          },
          y: {
            beginAtZero: true,
            grid: {
              color: "rgb(243 ,246, 255 ,1)",
              borderDash: [5, 5],
              borderDashOffset: 2,
            },
            gridLines: {
              zeroLineColor: "transparent",
            },
            ticks: {
              callback(value) {
                return `${value}% `;
              },
            },
          },
        },

        plugins: {
          legend: {
            position: "top",
            display: false,
          },
          title: {
            display: false,
            text: "Visitor: 2k",
          },
          // tooltip: {
          //   enabled: false,
          // },
        },
        elements: {
          point: {
            radius: [0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0],
            hoverRadius: 6,
          },
        },
      },
    });
  }
  revenueFlowLine();
  $(".card-slider").slick({
    dots: true,
    infinite: true,
    autoplay: true,
    speed: 500,
    fade: true,
    cssEase: "linear",
    arrows: false,
  });
  function totalEarn() {
    const ctx_bids = document.getElementById("totalEarn").getContext("2d");
    const bitsMonth = [
      "Jan",
      "Feb",
      "Mar",
      "Afril",
      "May",
      "Jan",
      "Feb",
      "Mar",
      "Afril",
      "May",
      "Feb",
      "Mar",
      "Afril",
      "May",
    ];
    const bitsData = [
      0, 10, 0, 65, 0, 25, 0, 35, 20, 100, 40, 75, 50, 85, 60,
    ];
    const totalEarn = new Chart(ctx_bids, {
      type: "line",
      data: {
        labels: bitsMonth,
        datasets: [
          {
            label: "Visitor",
            data: bitsData,
            backgroundColor: () => {
              const chart = document
                .getElementById("totalEarn")
                .getContext("2d");
              const gradient = chart.createLinearGradient(0, 0, 0, 450);
              gradient.addColorStop(0, "rgba(34, 197, 94,0.41)");
              gradient.addColorStop(0.2, "rgba(255, 255, 255, 0)");

              return gradient;
            },
            borderColor: "#22C55E",
            pointRadius: 0,
            pointBackgroundColor: "#fff",
            pointBorderColor: "#22C55E",
            borderWidth: 1,
            fill: true,
            fillColor: "#fff",
            tension: 0.4,
          },
        ],
      },
      options: {
        layout: {
          padding: {
            bottom: -20,
          },
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: {
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              display: false,
            },
          },
          y: {
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              display: false,
            },
          },
        },

        plugins: {
          legend: {
            position: "top",
            display: false,
          },
          title: {
            display: false,
            text: "Visitor: 2k",
          },
          tooltip: {
            enabled: false,
          },
        },
      },
    });
  }
  totalEarn();
  function totalSpendingChart() {
    let ctx_bids = document
      .getElementById("totalSpending")
      .getContext("2d");
    let bitsMonth = [
      "Jan",
      "Feb",
      "Mar",
      "Afril",
      "May",
      "Jan",
      "Feb",
      "Mar",
      "Afril",
      "May",
      "Feb",
      "Mar",
      "Afril",
      "May",
    ];
    let bitsData = [
      0, 10, 0, 65, 0, 25, 0, 35, 20, 100, 40, 75, 50, 85, 60,
    ];
    let totalEarn = new Chart(ctx_bids, {
      type: "line",
      data: {
        labels: bitsMonth,
        datasets: [
          {
            label: "Visitor",
            data: bitsData,
            backgroundColor: () => {
              const chart = document
                .getElementById("totalEarn")
                .getContext("2d");
              const gradient = chart.createLinearGradient(0, 0, 0, 450);
              gradient.addColorStop(0, "rgba(34, 197, 94,0.41)");
              gradient.addColorStop(0.2, "rgba(255, 255, 255, 0)");

              return gradient;
            },
            borderColor: "#22C55E",
            pointRadius: 0,
            pointBackgroundColor: "#fff",
            pointBorderColor: "#22C55E",
            borderWidth: 1,
            fill: true,
            fillColor: "#fff",
            tension: 0.4,
          },
        ],
      },
      options: {
        layout: {
          padding: {
            bottom: -20,
          },
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: {
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              display: false,
            },
          },
          y: {
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              display: false,
            },
          },
        },

        plugins: {
          legend: {
            position: "top",
            display: false,
          },
          title: {
            display: false,
            text: "Visitor: 2k",
          },
          tooltip: {
            enabled: false,
          },
        },
      },
    });
  }
  totalSpendingChart();
  function totalGoal() {
    let ctx_bids = document.getElementById("totalGoal").getContext("2d");
    let bitsMonth = [
      "Jan",
      "Feb",
      "Mar",
      "Afril",
      "May",
      "Jan",
      "Feb",
      "Mar",
      "Afril",
      "May",
      "Feb",
      "Mar",
      "Afril",
      "May",
    ];
    let bitsData = [
      0, 10, 0, 65, 0, 25, 0, 35, 20, 100, 40, 75, 50, 85, 60,
    ];
    let totalEarn = new Chart(ctx_bids, {
      type: "line",
      data: {
        labels: bitsMonth,
        datasets: [
          {
            label: "Visitor",
            data: bitsData,
            backgroundColor: () => {
              const chart = document
                .getElementById("totalGoal")
                .getContext("2d");
              const gradient = chart.createLinearGradient(0, 0, 0, 450);
              gradient.addColorStop(0, "rgba(34, 197, 94,0.41)");
              gradient.addColorStop(0.2, "rgba(255, 255, 255, 0)");
              console.log({ gradient });
              return gradient;
            },
            borderColor: "#22C55E",
            pointRadius: 0,
            pointBackgroundColor: "#fff",
            pointBorderColor: "#22C55E",
            borderWidth: 1,
            fill: true,
            fillColor: "#fff",
            tension: 0.4,
          },
        ],
      },
      options: {
        layout: {
          padding: {
            bottom: -20,
          },
        },
        maintainAspectRatio: false,
        responsive: true,
        scales: {
          x: {
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              display: false,
            },
          },
          y: {
            grid: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              display: false,
            },
          },
        },

        plugins: {
          legend: {
            position: "top",
            display: false,
          },
          title: {
            display: false,
            text: "Visitor: 2k",
          },
          tooltip: {
            enabled: false,
          },
        },
      },
    });
  }
  totalGoal();

  let revenueFlowElement = document
    .getElementById("revenueFlow")
    .getContext("2d");
  let month = [
    "Jan",
    "Feb",
    "Mar",
    "April",
    "May",
    "Jun",
    "July",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ];
  let dataSetsLight = [
    {
      label: "My First Dataset",
      data: [1, 5, 2, 2, 6, 7, 8, 7, 3, 4, 1, 3],
      backgroundColor: [
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(250, 204, 21, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
      ],
      borderWidth: 0,
      borderRadius: 5,
    },
    {
      label: "My First Dataset 2",
      data: [5, 2, 4, 2, 5, 8, 3, 7, 3, 4, 1, 3],
      backgroundColor: [
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(255, 120, 75, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
      ],
      borderWidth: 0,
      borderRadius: 5,
    },
    {
      label: "My First Dataset 3",
      data: [2, 5, 3, 2, 5, 6, 9, 7, 3, 4, 1, 3],
      backgroundColor: [
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(74, 222, 128, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
        "rgba(237, 242, 247, 1)",
      ],
      borderWidth: 0,
      borderRadius: 5,
    },
  ];
  let dataSetsDark = [
    {
      label: "My First Dataset",
      data: [1, 5, 2, 2, 6, 7, 8, 7, 3, 4, 1, 3],
      backgroundColor: [
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(250, 204, 21, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
      ],
      borderWidth: 0,
      borderRadius: 5,
    },
    {
      label: "My First Dataset 2",
      data: [5, 2, 4, 2, 5, 8, 3, 7, 3, 4, 1, 3],
      backgroundColor: [
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(255, 120, 75, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
      ],
      borderWidth: 0,
      borderRadius: 5,
    },
    {
      label: "My First Dataset 3",
      data: [2, 5, 3, 2, 5, 6, 9, 7, 3, 4, 1, 3],
      backgroundColor: [
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(74, 222, 128, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
        "rgba(42, 49, 60, 1)",
      ],
      borderWidth: 0,
      borderRadius: 5,
    },
  ];
  let revenueFlow = new Chart(revenueFlowElement, {
    type: "bar",
    data: {
      labels: month,
      datasets: dataSetsLight,
    },
    options: {
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: "rgb(243 ,246, 255 ,1)",
          },
          gridLines: {
            zeroLineColor: "transparent",
          },
          ticks: {
            callback(value) {
              return `${value}% `;
            },
          },
        },
        x: {
          grid: {
            color: "rgb(243 ,246, 255 ,1)",
          },
          gridLines: {
            zeroLineColor: "transparent",
          },
        },
      },
      plugins: {
        legend: {
          display: false,
        },
      },
      x: {
        stacked: true,
      },
      y: {
        stacked: true,
      },
    },
  });

  //pie chart
  let pieChart = document.getElementById("pie_chart").getContext("2d");

  const data = {
    labels: [10, 20, 30],
    datasets: [
      {
        label: "My First Dataset",
        data: [15, 20, 35, 40],
        backgroundColor: ["#1A202C", "#61C660", "#F8CC4B", "#EDF2F7"],
        borderColor: ["#ffffff", "#ffffff", "#ffffff", "#1A202C"],
        hoverOffset: 18,
        borderWidth: 0,
      },
    ],
  };
  const customDatalabels = {
    id: "customDatalabels",
    afterDatasetsDraw(chart, args, pluginOptions) {
      const {
        ctx,
        data,
        chartArea: { top, bottom, left, right, width, height },
      } = chart;
      ctx.save();
      data.datasets[0].data.forEach((datapoint, index) => {
        const { x, y } = chart
          .getDatasetMeta(0)
          .data[index].tooltipPosition();
        ctx.font = "bold 12px sans-serif";
        ctx.fillStyle = data.datasets[0].borderColor[index];
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(`${datapoint}%`, x, y);
      });
    },
  };
  const config = {
    type: "doughnut",
    data,
    options: {
      maintainAspectRatio: false,
      layout: {
        padding: {
          left: 10,
          right: 10,
          top: 10,
          bottom: 10,
        },
      },
      plugins: {
        legend: {
          display: false,
        },
      },
    },
    plugins: [customDatalabels],
  };

  let pieChartConfiig = new Chart(pieChart, config);

  //chart dark mode
  let themeToggleSwitch = document.getElementById("theme-toggle");


  if (themeToggleSwitch) {
    themeToggleSwitch.addEventListener("click", function () {
      if (
        document.documentElement.classList[0] === "dark" ||
        localStorage.theme === "dark"
      ) {
        revenueFlow.data.datasets = dataSetsDark;
        revenueFlow.options.scales.y.ticks.color = "white";
        revenueFlow.options.scales.x.ticks.color = "white";
        revenueFlow.options.scales.x.grid.color = "#222429";
        revenueFlow.options.scales.y.grid.color = "#222429";
        revenueFlow.update();
      } else {
        revenueFlow.data.datasets = dataSetsLight;
        revenueFlow.options.scales.y.ticks.color = "black";
        revenueFlow.options.scales.x.ticks.color = "black";
        revenueFlow.options.scales.x.grid.color = "rgb(243 ,246, 255 ,1)";
        revenueFlow.options.scales.y.grid.color = "rgb(243 ,246, 255 ,1)";
        revenueFlow.update();
      }
    });
  }

  // Initial load theme
  if (localStorage.theme === "dark" || window.matchMedia("(prefers-color-scheme: dark)").matches) {
    applyChartTheme(true);
  } else {
    applyChartTheme(false);
  }
</script>
</body>

</html>