@include('header-facil')
<style>
  /* Bordered table for Recapitulation */
  #oplRecapTable,
  #a3RecapTable {
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
  }

  .dark #oplRecapTable,
  .dark #a3RecapTable {
    border: 1px solid #2F3646;
  }

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

  .dark #oplRecapTable thead td,
  .dark #oplRecapTable tbody td,
  .dark #a3RecapTable thead td,
  .dark #a3RecapTable 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">

      <!-- OPL Recapitulation Card -->
      <div class="w-full rounded-lg bg-white px-[24px] py-[20px] dark:bg-darkblack-600 mb-6">
        <div class="flex flex-col space-y-5">
          <h3 class="text-xl font-bold text-bgray-900 dark:text-white sm:text-2xl">
            OPL Recapitulation
          </h3>
          <!-- OPL Filters -->
          <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="opl-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="opl-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="opl-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="opl-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="opl-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="opl-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="opl-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="opl-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>

            <span
              style="width: 2px; height: 24px; background-color: #CBD5E1; display: inline-block; margin: 0 4px;"></span>
            <button type="button" id="toggleNikBtn"
              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;">
              Hide NIK
            </button>

          </div>
          <div class="table-content w-full overflow-x-auto">
            <table class="w-full" id="oplRecapTable">
              <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
                  $oplRows = [];
                  foreach ($users_opl as $user) {
                    $user_opls = $opls->filter(function ($item) use ($user) {
                      return strtolower(trim($item->nik)) == strtolower(trim($user->nik));
                    });

                    $total = 0;
                    $monthlyCount = [];
                    foreach ($months as $mNum => $mName) {
                      $count = $user_opls->filter(function ($item) use ($mNum) {
                        if (!$item->socialized_date)
                          return false;
                        $date = \Carbon\Carbon::parse($item->socialized_date);
                        return $date->format('Y-m') === (string) $mNum;
                      })->count();
                      $monthlyCount[$mNum] = $count;
                      $total += $count;
                    }

                    $target = $user->target_mar ?: 0;
                    $percentage = $target > 0 ? round(($total / $target) * 100) : 0;

                    $oplRows[] = [
                      'user' => $user,
                      'monthlyCount' => $monthlyCount,
                      'total' => $total,
                      'target' => $target,
                      'percentage' => $percentage
                    ];
                  }

                  // Sort descending by percentage
                  usort($oplRows, function ($a, $b) {
                    return $b['percentage'] <=> $a['percentage'];
                  });

                  $maxOplPercentage = count($oplRows) > 0 ? $oplRows[0]['percentage'] : -1;
                  $minOplPercentage = count($oplRows) > 0 ? $oplRows[count($oplRows) - 1]['percentage'] : -1;
                @endphp

                @foreach($oplRows as $row)
                  @php
                    $user = $row['user'];
                    $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">{{ $user->name }}</p>
                          <p class="text-xs font-medium text-bgray-500 dark:text-bgray-300 nik-text mt-1">{{ $user->nik }}
                          </p>
                        </div>
                        @if($maxOplPercentage > 0 && $percentage === $maxOplPercentage)
                          <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($minOplPercentage !== -1 && $percentage === $minOplPercentage && $percentage !== $maxOplPercentage)
                          <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 = $user->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>

<!--scripts -->
<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 () {
    // === OPL Filter Logic ===
    var oplEmpFilterType = '';
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
      if (settings.nTable.id !== 'oplRecapTable') return true;
      if (!oplEmpFilterType) return true;
      var rowNode = settings.aoData[dataIndex].nTr;
      var nik = $(rowNode).find('.nik-text').text() || '';
      var hasK = /[kK]/.test(nik);
      if (oplEmpFilterType === 'PKWTT') return hasK;
      if (oplEmpFilterType === 'PKWT') return !hasK;
      return true;
    });

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

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

      if (cgValue === '' || cgValue === undefined) {
        oplTable.column(2).search('').draw(); // Assuming CG is column index 2
      } else {
        oplTable.column(2).search(cgValue).draw();
      }
    });

    // OPL Employee Type Filter Buttons (PKWT/PKWTT)
    $('.opl-emp-filter-btn').on('click', function () {
      oplEmpFilterType = $(this).data('type') || '';
      $('.opl-emp-filter-btn').css('opacity', '0.7').removeClass('active');
      $(this).css('opacity', '1').addClass('active');
      oplTable.draw();
    });

    // Toggle NIK visibility
    var nikHidden = false;
    $('#toggleNikBtn').on('click', function () {
      nikHidden = !nikHidden;
      if (nikHidden) {
        $('.nik-text').hide();
        $(this).text('Show NIK');
        $(this).css({'background-color': '#6B7280', 'border-color': '#6B7280'});
      } else {
        $('.nik-text').show();
        $(this).text('Hide NIK');
        $(this).css({'background-color': '#1F2937', 'border-color': '#1F2937'});
      }
    });

    // === A3 Filter Logic ===
    var a3EmpFilterType = '';
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
      if (settings.nTable.id !== 'a3RecapTable') 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 = $('#a3RecapTable').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');

      if (cgValue === '' || cgValue === undefined) {
        a3Table.column(2).search('').draw(); // Assuming CG is column index 2
      } else {
        a3Table.column(2).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>
</body>

</html>