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

  <!-- A3 Achievement - Separate Card -->
  <div style="margin-top: 24px;" 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">
        A3 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="a3-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="a3-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="a3-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="a3-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="a3-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>
      </div>
      <div class="table-content w-full overflow-x-auto">
        <table class="w-full" id="a3Table">
          <thead>
            <tr class="border-b border-bgray-300 dark:border-darkblack-400">
              <td class="w-[3%] px-6 py-5 xl:px-0">
                <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">
                <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">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Employee Name</span>
              </td>
              <td class="w-[10%] px-6 py-5 xl:px-0">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">CG</span>
              </td>
              <td class="w-[55%] px-6 py-5 xl:px-0">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Tema A3</span>
              </td>
              <td class="w-[15%] px-6 py-5 xl:px-0">
                <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Submit Date</span>
              </td>
            </tr>
          </thead>
          <tbody>
            @foreach($data_a3 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">
                  @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;',
                      1 => 'background-color: #FCE7F3; color: #9D174D; border: 1px solid #F472B6;',
                      2 => 'background-color: #D1FAE5; color: #065F46; border: 1px solid #34D399;',
                      3 => 'background-color: #FEF3C7; color: #92400E; border: 1px solid #FBBF24;',
                      4 => 'background-color: #EDE9FE; color: #5B21B6; border: 1px solid #A78BFA;',
                      5 => 'background-color: #FFEDD5; color: #9A3412; border: 1px solid #FB923C;',
                      6 => 'background-color: #FEE2E2; color: #991B1B; border: 1px solid #F87171;',
                      7 => 'background-color: #CCFBF1; color: #115E59; border: 1px solid #2DD4BF;',
                      8 => 'background-color: #E0E7FF; color: #3730A3; border: 1px solid #818CF8;',
                      9 => 'background-color: #FEF9C3; color: #854D0E; border: 1px solid #FACC15;',
                      10 => 'background-color: #F3E8FF; color: #7E22CE; border: 1px solid #C084FC;',
                      11 => 'background-color: #CFFAFE; color: #155E75; border: 1px solid #22D3EE;',
                    ];
                    $periode = '-';
                    $periodeStyle = '';
                    if ($facil->created_at) {
                      try {
                        $monthIndex = (int) $facil->created_at->format('m') - 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->userI2c->name ?? '-' }}</p>
                  <p class="text-sm font-medium text-bgray-500 dark:text-bgray-300 nik-text">
                    {{ $facil->userI2c->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">
                  <div class="flex items-center gap-3 w-fit">
                    @if($facil->file_path)
                      <a href="{{ asset($facil->file_path) }}" target="_blank"
                        class="inline-flex items-center justify-center gap-1.5 h-8 px-3 rounded-lg bg-red-50 text-red-600 border border-red-200 hover:bg-red-500 hover:text-white hover:border-red-500 transition duration-300"
                        title="View PDF">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                          <path d="M7 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                          <path d="M7 12H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                          <path d="M7 16H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                        </svg>
                        <span class="font-bold text-xs">PDF</span>
                      </a>
                    @endif
                    <p class="text-base font-semibold text-bgray-900 dark:text-white">{{ $facil->judul }}</p>
                  </div>
                </td>
                <td class="px-6 py-5 xl:px-0">
                  <p class="text-base font-medium text-bgray-900 dark:text-white">
                    {{ $facil->created_at ? $facil->created_at->format('Y-m-d') : '-' }}
                  </p>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>

  </section>
  </div>
  <!-- write your code here-->
</main>
</div>
</div>
</div>

<!-- Input A3 Modal -->
<div id="a3Modal" class="fixed inset-0 z-50 hidden items-center justify-center overflow-y-auto" style="display: none;">
  <div class="fixed inset-0 bg-gray-500 opacity-75 dark:bg-bgray-900 dark:opacity-50" onclick="closeA3Modal()"></div>
  <div class="relative z-10 mx-auto w-full max-w-lg px-4" style="margin-top: 10vh;">
    <div class="rounded-lg bg-white p-6 shadow-xl dark:bg-darkblack-600">
      <div class="flex items-center justify-between mb-5">
        <h3 class="text-lg font-bold text-bgray-900 dark:text-white">Input A3 Achievement</h3>
        <button type="button" onclick="closeA3Modal()"
          class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-bgray-200 text-bgray-700 hover:bg-red-500 hover:text-white transition dark:bg-darkblack-500">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M9.68746 10.609C9.94199 10.8636 10.3547 10.8636 10.6092 10.609C10.8638 10.3545 10.8638 9.94174 10.6092 9.6872L6.92202 5.99993L10.6093 2.31268C10.8638 2.05813 10.8638 1.64542 10.6093 1.39087C10.3547 1.13631 9.94199 1.13631 9.68746 1.39087L6.00019 5.07809L2.31292 1.39087C2.05837 1.13632 1.64566 1.13632 1.39111 1.39087C1.13656 1.64543 1.13656 2.05814 1.39111 2.3127L5.07835 5.99993L1.39112 9.6872C1.13657 9.94174 1.13657 10.3544 1.39112 10.609C1.64567 10.8636 2.05838 10.8636 2.31293 10.609L6.00019 6.92177L9.68746 10.609Z"
              fill="currentColor" />
          </svg>
        </button>
      </div>
      <form action="{{ route('a3.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="space-y-4">
          <div>
            <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">Name (User I2C)</label>
            <select id="a3_user_id" name="user_i2c_id" required onchange="updateA3Cg()"
              class="h-11 w-full rounded-lg border border-bgray-300 px-4 py-3 text-sm font-medium text-bgray-900 focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-500 dark:text-white">
              <option value="" disabled selected>Pilih user...</option>
              @foreach($users_i2c as $usr)
                <option value="{{ $usr->id }}">{{ $usr->name }} ({{ $usr->nik }})</option>
              @endforeach
            </select>
          </div>
          <div>
            <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">Channel</label>
            <input type="text" value="A3" readonly disabled
              class="h-11 w-full rounded-lg border border-bgray-300 bg-gray-100 cursor-not-allowed px-4 py-3 text-sm font-medium text-bgray-900 dark:border-darkblack-400 dark:bg-darkblack-500 dark:text-gray-400">
          </div>
          <div>
            <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">CG</label>
            <input type="text" id="a3_cg" readonly disabled placeholder="By System"
              class="h-11 w-full rounded-lg border border-bgray-300 bg-gray-100 cursor-not-allowed px-4 py-3 text-sm font-medium text-bgray-900 dark:border-darkblack-400 dark:bg-darkblack-500 dark:text-gray-400">
          </div>
          <div>
            <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">Judul A3</label>
            <input type="text" name="judul" required placeholder="Masukkan judul A3..."
              class="h-11 w-full rounded-lg border border-bgray-300 px-4 py-3 text-sm font-medium text-bgray-900 focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-500 dark:text-white">
          </div>
          <div>
            <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">Submit Date</label>
            <input type="date" name="created_at"
              class="h-11 w-full rounded-lg border border-bgray-300 px-4 py-3 text-sm font-medium text-bgray-900 focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-500 dark:text-white">
          </div>
          <div>
            <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">Attach A3 (PDF Only)</label>
            <input type="file" name="file" accept=".pdf" required
              class="w-full rounded-lg border border-bgray-300 px-4 py-3 text-sm font-medium text-bgray-900 focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-500 dark:text-white file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-bgray-100 file:text-bgray-700 hover:file:bg-bgray-200">
          </div>
        </div>
        <div class="mt-6 flex justify-end gap-3">
          <button type="button" onclick="closeA3Modal()"
            class="rounded-lg border border-bgray-300 px-5 py-2.5 text-sm font-semibold text-bgray-700 hover:bg-bgray-100 transition dark:border-darkblack-400 dark:text-bgray-50 dark:hover:bg-darkblack-500">
            Batal
          </button>
          <button type="submit"
            class="rounded-lg bg-success-300 px-5 py-2.5 text-sm font-semibold text-white hover:bg-success-400 transition">
            Simpan & Upload
          </button>
        </div>
      </form>
    </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>