@include('header-facil')
<style>
  #qccRecapTable {
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
  }

  .dark #qccRecapTable {
    border: 1px solid #2F3646;
  }

  #qccRecapTable thead td,
  #qccRecapTable tbody td {
    border: 1px solid #e5e7eb !important;
  }

  .dark #qccRecapTable thead td,
  .dark #qccRecapTable tbody td {
    border: 1px solid #2F3646 !important;
  }
</style>
<main class="w-full px-6 pb-6 pt-[100px] sm:pt-[156px] xl:px-12 xl:pb-12">
  <div class="2xl:flex 2xl:space-x-[48px]">
    <section class="mb-6 w-full 2xl:mb-0 2xl:flex-1">
      <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">
            QCC Recapitulation <span class="text-sm font-normal text-bgray-500">(Target: {{ $target_qcc }})</span>
          </h3>
          <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="qcc-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="qcc-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="qcc-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="qcc-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="qcc-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="qccRecapTable">
              <thead>
                <tr class="border-b border-bgray-300 dark:border-darkblack-400 bg-gray-50 dark:bg-darkblack-500">
                  <td class="w-[5%] px-4 py-3 text-center"><span
                      class="text-sm font-semibold text-bgray-600 dark:text-bgray-50">No</span></td>
                  <td class="w-[30%] px-4 py-3 text-center"><span
                      class="text-sm font-semibold text-bgray-600 dark:text-bgray-50">Name</span></td>
                  <td class="w-[15%] px-4 py-3 text-center"><span
                      class="text-sm font-semibold text-bgray-600 dark:text-bgray-50">CG</span></td>
                  @foreach($months as $monthNum => $monthName)
                    <td class="px-4 py-3 text-center"><span
                        class="text-sm font-semibold text-bgray-600 dark:text-bgray-50">{{ $monthName }}</span></td>
                  @endforeach
                  <td class="px-4 py-3 text-center"><span
                      class="text-sm font-semibold text-bgray-600 dark:text-bgray-50">Total</span></td>
                  <td class="px-4 py-3 text-center"><span
                      class="text-sm font-semibold text-bgray-600 dark:text-bgray-50">Target</span></td>
                  <td class="px-4 py-3 text-center"><span
                      class="text-sm font-semibold text-bgray-600 dark:text-bgray-50">% Achiev.</span></td>
                </tr>
              </thead>
              <tbody>
                @php
                  $qccRows = [];
                  $cgs = ['DNAwesome', 'SIRIUS', 'Falcon', 'Adminovation'];
                  foreach ($cgs as $cg) {
                    $cg_qccs = $qccs->where('cg', $cg);
                    $total = 0;
                    $monthlyCount = [];
                    foreach ($months as $mNum => $mName) {
                      $count = $cg_qccs->filter(function ($item) use ($mNum) {
                        if (!$item->created_at)
                          return false;
                        return $item->created_at->format('Y-m') === (string) $mNum;
                      })->count();
                      $monthlyCount[$mNum] = $count;
                      $total += $count;
                    }
                    $target = $target_qcc;
                    $percentage = $target > 0 ? round(($total / $target) * 100) : 0;
                    $qccRows[] = ['cg' => $cg, 'monthlyCount' => $monthlyCount, 'total' => $total, 'target' => $target, 'percentage' => $percentage];
                  }
                  usort($qccRows, function ($a, $b) {
                    return $b['percentage'] <=> $a['percentage']; });
                  $maxQccPercentage = count($qccRows) > 0 ? $qccRows[0]['percentage'] : -1;
                  $minQccPercentage = count($qccRows) > 0 ? $qccRows[count($qccRows) - 1]['percentage'] : -1;
                @endphp

                @foreach($qccRows as $row)
                  @php
                    $cg = $row['cg'];
                    $monthlyCount = $row['monthlyCount'];
                    $total = $row['total'];
                    $target = $row['target'];
                    $percentage = $row['percentage'];
                  @endphp
                  <tr class="border-b border-bgray-300 dark:border-darkblack-400">
                    <td class="px-4 py-3 text-center">
                      <p class="text-sm font-medium text-bgray-900 dark:text-white">{{ $loop->iteration }}</p>
                    </td>
                    <td class="px-4 py-3 border-r">
                      <div class="flex items-center justify-between">
                        <div>
                          <p class="text-sm font-semibold text-bgray-900 dark:text-white">CG {{ $cg }}</p>
                        </div>
                        @if($maxQccPercentage > 0 && $percentage === $maxQccPercentage)
                          <div
                            style="background-color: #DCFCE7; color: #15803D; border: 1px solid #22C55E; display: flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 4px 12px; font-size: 14px; font-weight: 700; flex-shrink: 0; margin-left: 8px;"
                            title="Top Achiever!">
                            <span style="font-size: 16px;">👑</span> Top
                          </div>
                        @elseif($minQccPercentage !== -1 && $percentage === $minQccPercentage && $percentage !== $maxQccPercentage)
                          <div
                            style="background-color: #FEE2E2; color: #B91C1C; border: 1px solid #EF4444; display: flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 4px 12px; font-size: 14px; font-weight: 700; flex-shrink: 0; margin-left: 8px;"
                            title="Worst Achiever">
                            <span style="font-size: 16px;">👎</span> Worst
                          </div>
                        @endif
                      </div>
                    </td>
                    <td class="px-4 py-3 text-center">
                      @php
                        $cgName = $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: 11px; font-weight: 600;">{{ $cgName }}</span>
                      @endif
                    </td>
                    @foreach($months as $mNum => $mName)
                      <td class="px-4 py-3 text-center">
                        <p class="text-sm font-medium text-bgray-900 dark:text-white">{{ $monthlyCount[$mNum] }}</p>
                      </td>
                    @endforeach
                    <td class="px-4 py-3 text-center bg-gray-50 dark:bg-darkblack-500">
                      <p class="text-sm font-bold text-bgray-900 dark:text-white">{{ $total }}</p>
                    </td>
                    <td class="px-4 py-3 text-center">
                      <p class="text-sm font-medium text-bgray-900 dark:text-white">{{ $target }}</p>
                    </td>
                    <td class="px-4 py-3 text-center">
                      <p class="text-sm font-bold {{ $percentage >= 100 ? 'text-success-300' : 'text-error-300' }}">
                        {{ $percentage }}%</p>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  </div>
</main>
</div>
</div>
</div>

<script src="{{asset('assets/js/jquery-3.6.0.min.js')}}"></script>
<script src="{{asset('assets/js/slick.min.js')}}"></script>
<script src="{{asset('assets/js/quill.min.js')}}"></script>
<script src="{{asset('assets/js/main.js')}}"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function () {
    var qccTable = $('#qccRecapTable').DataTable({
      responsive: true,
      language: { search: "Search inside table:" },
      lengthMenu: [10, 25, 50, 100],
      pageLength: 10
    });

    $('.qcc-cg-filter-btn').on('click', function () {
      var cgValue = $(this).data('cg');
      $('.qcc-cg-filter-btn').css('opacity', '0.7').removeClass('active');
      $(this).css('opacity', '1').addClass('active');
      if (cgValue === '' || cgValue === undefined) { qccTable.column(2).search('').draw(); }
      else { qccTable.column(2).search(cgValue).draw(); }
    });
  });
</script>
</body>

</html>