@include('header-user')

          <main
            class="w-full px-6 pb-6 pt-[100px] sm:pt-[156px] xl:px-[48px] xl:pb-[48px]"
          >
            <div class="flex flex-col space-y-20 2xl:flex-row 2xl:space-x-11">
              <div class="w-full 2xl:flex-1">
                {{-- Success/Error Messages --}}
                @if(session('success'))
                <div class="mb-4 rounded-lg bg-success-50 p-4 text-sm font-medium text-success-300 dark:bg-darkblack-500" id="import-alert">
                  <div class="flex items-center justify-between">
                    <span>{{ session('success') }}</span>
                    <button onclick="document.getElementById('import-alert').style.display='none'" class="text-success-300 hover:text-success-400">&times;</button>
                  </div>
                </div>
                @endif
                @if($errors->any())
                <div class="mb-4 rounded-lg bg-error-50 p-4 text-sm font-medium text-error-300 dark:bg-darkblack-500" id="import-error-alert">
                  <div class="flex items-center justify-between">
                    <span>{{ $errors->first() }}</span>
                    <button onclick="document.getElementById('import-error-alert').style.display='none'" class="text-error-300 hover:text-error-400">&times;</button>
                  </div>
                </div>
                @endif

                {{-- Import User I2C from Excel --}}
                <div class="mb-4 flex gap-4 gap-y-2 flex-wrap">

                </div>

                <div class="mb-6 flex flex-wrap items-center justify-between w-full gap-4">
                  <div class="flex flex-wrap items-center gap-4">
                    <form action="{{ route('user.import-i2c') }}" method="POST" enctype="multipart/form-data" class="flex items-center gap-3">
                      @csrf
                      <label for="file-upload-i2c" class="cursor-pointer rounded-lg border border-bgray-300 bg-white px-4 py-2.5 text-sm font-medium text-bgray-700 transition hover:bg-bgray-100 dark:border-darkblack-400 dark:bg-darkblack-500 dark:text-white dark:hover:bg-darkblack-400">
                        <span id="file-name-label">Pilih file Excel...</span>
                      </label>
                      <input
                        type="file"
                        name="file"
                        id="file-upload-i2c"
                        accept=".xlsx,.xls,.csv"
                        class="hidden"
                        onchange="document.getElementById('file-name-label').textContent = this.files[0] ? this.files[0].name : 'Pilih file Excel...'"
                      />
                      <button
                        type="submit"
                        class="flex items-center gap-2 rounded-lg bg-success-300 px-5 py-2.5 text-sm font-semibold text-white transition duration-300 ease-in-out hover:bg-success-400"
                      >
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Import User I2C
                      </button>
                    </form>
                    <button type="button" onclick="openAddUserModal()"
                      class="flex items-center gap-2 rounded-lg bg-success-300 px-5 py-2.5 text-sm font-semibold text-white transition duration-300 ease-in-out hover:bg-success-400"
                    >
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                      Add User
                    </button>
                  </div>
                  <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center gap-2 rounded-lg bg-orange px-4 py-2 shadow-sm">
                      <span class="text-sm font-semibold text-white">Target OPL:</span>
                      <span class="rounded-full bg-white px-2 py-0.5 text-sm text-orange font-bold">{{ number_format($target_opl) }}</span>
                    </div>
                    <div class="flex items-center gap-2 rounded-lg px-4 py-2 shadow-sm" style="background-color: #EAB308;">
                      <span class="text-sm font-semibold text-white">Target A3:</span>
                      <span class="rounded-full bg-white px-2 py-0.5 text-sm font-bold" style="color: #EAB308;">{{ number_format($target_a3) }}</span>
                    </div>
                    <div class="flex items-center gap-2 rounded-lg px-4 py-2 shadow-sm" style="background-color: #A855F7;">
                      <span class="text-sm font-semibold text-white">Target PPS:</span>
                      <span class="rounded-full bg-white px-2 py-0.5 text-sm font-bold" style="color: #A855F7;">{{ number_format($target_pps) }}</span>
                    </div>
                  </div>
                </div>

                <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">
                      User I2C
                    </h3>
                    <!-- Filter Buttons -->
                    <div class="flex flex-wrap items-center gap-3">
                      <span style="font-size: 14px; font-weight: 600; color: #64748B;">Filter Channel:</span>
                      <button type="button" class="user-ch-filter-btn active" data-channel=""
                        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="user-ch-filter-btn" data-channel="OPL"
                        style="display: inline-block; border-radius: 9999px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background-color: #FFEDD5; color: #C2410C; border: 2px solid #F97316; transition: all 0.2s; opacity: 0.7;">
                        OPL
                      </button>
                      <button type="button" class="user-ch-filter-btn" data-channel="A3"
                        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;">
                        A3
                      </button>
                      <button type="button" class="user-ch-filter-btn" data-channel="PPS"
                        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;">
                        PPS
                      </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 CG:</span>
                      <button type="button" class="user-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="user-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="user-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="user-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="user-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="user-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="user-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="user-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="userI2cTable">
                        <thead>
                          <tr class="border-b border-bgray-300 dark:border-darkblack-400">
                            <td class="w-[5%] 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-[20%] px-6 py-5 xl:px-0 text-center">
                              <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">NIK</span>
                            </td>
                            <td class="w-[35%] px-6 py-5 xl:px-0 text-center">
                              <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Name</span>
                            </td>
                            <td class="w-[15%] 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-[15%] px-6 py-5 xl:px-0 text-center">
                              <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Target I2C</span>
                            </td>
                            <td class="w-[15%] 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-[10%] px-6 py-5 xl:px-0 text-center">
                              <span class="text-base font-medium text-bgray-600 dark:text-bgray-50">Setting</span>
                            </td>
                          </tr>
                        </thead>
                        <tbody>
                          @forelse($users_i2c as $index => $user)
                          <tr class="border-b border-bgray-300 dark:border-darkblack-400">
                            <td class="px-6 py-5 xl:px-0 text-center">
                              <p class="text-base font-medium text-bgray-900 dark:text-white">{{ $index + 1 }}</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">{{ $user->nik }}</p>
                            </td>
                            <td class="px-6 py-5 xl:px-0 text-center">
                              <div class="flex items-center justify-center gap-2">
                                <p class="text-base font-semibold text-bgray-900 dark:text-white">{{ $user->name }}</p>
                                @if(!($user->status ?? true))
                                  <span class="rounded-md bg-error-50 px-2 py-1 text-xs font-medium text-error-500 dark:bg-darkblack-500 dark:text-error-300">Non-aktif</span>
                                @endif
                              </div>
                            </td>
                            <td class="px-6 py-5 xl:px-0 text-center">
                              @php
                                $channelLower = strtolower(trim($user->channel ?? ''));
                                if (str_contains($channelLower, 'facil')) {
                                    $channelStyle = 'background-color: #DCFCE7; color: #15803D;';
                                } elseif (str_contains($channelLower, 'a3')) {
                                    $channelStyle = 'background-color: #FEF3C7; color: #A16207;';
                                } elseif (str_contains($channelLower, 'pps')) {
                                    $channelStyle = 'background-color: #DBEAFE; color: #1D4ED8;';
                                } else {
                                    $channelStyle = 'background-color: #F3F4F6; color: #374151;';
                                }
                              @endphp
                              <span style="{{ $channelStyle }} display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 6px 16px; font-size: 16px; font-weight: 600;">
                                @if(str_contains($channelLower, 'facil'))
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M2.5 7.5L5.5 14.5H18.5L21.5 7.5L17 11L12 5L7 11L2.5 7.5Z" fill="currentColor"/>
                                  <rect x="5" y="16" width="14" height="2.5" rx="1" fill="currentColor"/>
                                </svg>
                                @endif
                                {{ $user->channel }}
                              </span>
                            </td>
                            <td class="px-6 py-5 xl:px-0 text-center">
                              <div class="flex items-center justify-center gap-2">
                                <span class="text-base font-semibold text-bgray-900 dark:text-white" id="target-mar-display-{{ $user->id }}">{{ $user->target_mar ?? 0 }}</span>
                                <button type="button" onclick="openTargetMarModal({{ $user->id }}, '{{ $user->name }}', {{ $user->target_mar ?? 0 }})"
                                  class="inline-flex items-center justify-center h-7 w-7 rounded-md bg-bgray-100 text-bgray-600 hover:bg-success-300 hover:text-white transition duration-200 dark:bg-darkblack-500 dark:text-bgray-50 dark:hover:bg-success-300"
                                  title="Set Target MAR">
                                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M16.04 3.02001L8.16 10.9C7.86 11.2 7.56 11.79 7.5 12.22L7.07 15.23C6.91 16.32 7.68 17.08 8.77 16.93L11.78 16.5C12.2 16.44 12.79 16.14 13.1 15.84L20.98 7.96001C22.34 6.60001 22.98 5.02001 20.98 3.02001C18.98 1.02001 17.4 1.66001 16.04 3.02001Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg>
                                </button>
                              </div>
                            </td>
                            <td class="px-6 py-5 xl:px-0 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: 12px; font-weight: 600;">
                                  {{ $cgName }}
                                </span>
                              @endif
                            </td>
                            <td class="px-6 py-5 xl:px-0 text-center">
                              <div class="flex items-center justify-center gap-3">
                                <label class="toggle-switch" title="{{ ($user->status ?? true) ? 'Aktif' : 'Nonaktif' }}">
                                  <input type="checkbox" {{ ($user->status ?? true) ? 'checked' : '' }} onchange="toggleUserStatus({{ $user->id }}, this)">
                                  <span class="toggle-slider"></span>
                                </label>
                                <button type="button" onclick="deleteUser({{ $user->id }}, '{{ $user->name }}')" 
                                  class="inline-flex items-center justify-center h-8 w-8 rounded-md bg-red-50 text-red-500 hover:bg-red-500 hover:text-white transition duration-200"
                                  title="Hapus User">
                                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M21 5.98C17.67 5.65 14.32 5.48 10.98 5.48C9 5.48 7.02 5.58 5.04 5.78L3 5.98" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8.5 4.97L8.72 3.66C8.88 2.71 9 2 10.69 2H13.31C15 2 15.13 2.75 15.28 3.67L15.5 4.97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M18.85 9.14L18.2 19.21C18.09 20.78 18 22 15.21 22H8.79C6 22 5.91 20.78 5.8 19.21L5.15 9.14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M10.33 16.5H13.66" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M9.5 12.5H14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                  </svg>
                                </button>
                              </div>
                            </td>
                          </tr>
                          @empty
                          <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-bgray-50">
                              Belum ada data User I2C. Silakan import dari file Excel.
                            </td>
                          </tr>
                          @endforelse
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
    <!-- layout end -->
    <!-- Modal -->

    <div
      class="modal fixed inset-0 z-50 flex hidden items-center justify-center overflow-y-auto"
      id="multi-step-modal"
    >
      <div
        class="modal-overlay fixed inset-0 bg-gray-500 opacity-75 dark:bg-bgray-900 dark:opacity-50"
      ></div>
      <div class="modal-content mx-auto w-full max-w-xl px-4">
        <div class="step-content step-1 relative top-40">
          <div
            class="relative max-w-[530px] rounded-lg bg-white p-7 transition-all dark:bg-darkblack-600"
          >
            <div class="flex items-center justify-between">
              <div>
                <h3
                  class="font-poppins text-3xl font-medium text-bgray-900 dark:text-white"
                >
                  Edit Contact
                </h3>
              </div>
              <div>
                <button
                  type="button"
                  id="step-1-cancel"
                  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 focus:outline-none dark:bg-darkblack-500"
                >
                  <span class="sr-only">Close</span>
                  <svg
                    class="fill-bgray-900 dark:fill-darkblack-300"
                    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"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div class="flex flex-col">
              <div class="flex justify-center py-8">
                <div
                  class="relative flex h-28 w-28 items-center justify-center rounded-md border-2 border-dashed border-gray-300"
                >
                  <div
                    class="flex items-center justify-center text-sm text-gray-600"
                  >
                    <label
                      for="file-upload"
                      class="relative cursor-pointer rounded-md bg-white font-medium text-indigo-600 focus-within:outline-none focus-within:ring-2 dark:bg-transparent"
                    >
                      <span>
                        <svg
                          class="stroke-bgray-900 dark:stroke-bgray-50"
                          width="40"
                          height="40"
                          viewBox="0 0 40 40"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M19.9997 13.3333V26.6666M26.6663 19.9999H13.333M19.9997 36.6666C29.2044 36.6666 36.6663 29.2047 36.6663 19.9999C36.6663 10.7952 29.2044 3.33325 19.9997 3.33325C10.7949 3.33325 3.33301 10.7952 3.33301 19.9999C3.33301 29.2047 10.7949 36.6666 19.9997 36.6666Z"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                        </svg>
                      </span>
                      <input
                        id="file-upload"
                        name="file-upload"
                        type="file"
                        class="sr-only"
                      />
                    </label>
                  </div>
                  <button
                    class="absolute -right-3 -top-3 flex h-8 w-8 items-center justify-center rounded-full border bg-white dark:bg-darkblack-600"
                  >
                    <svg
                      class="fill-bgray-900 dark:fill-bgray-50"
                      width="20"
                      height="20"
                      viewBox="0 0 20 20"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M15.1817 3.5C15.0085 3.5 14.8371 3.5341 14.6771 3.60035C14.5172 3.66661 14.3719 3.76371 14.2494 3.88613L13.0763 5.05922L14.9408 6.92366L16.1139 5.75057C16.2363 5.62815 16.3334 5.48281 16.3996 5.32286C16.4659 5.16291 16.5 4.99148 16.5 4.81835C16.5 4.64522 16.4659 4.47379 16.3996 4.31384C16.3334 4.15389 16.2363 4.00856 16.1139 3.88613C15.9914 3.76371 15.8461 3.66661 15.6862 3.60035C15.5262 3.5341 15.3548 3.5 15.1817 3.5ZM13.8801 7.98432L12.0157 6.11988L4.51809 13.6175L3.81893 16.1811L6.38252 15.4819L13.8801 7.98432ZM14.1031 2.21453C14.4451 2.0729 14.8115 2 15.1817 2C15.5518 2 15.9182 2.0729 16.2602 2.21453C16.6021 2.35617 16.9128 2.56377 17.1745 2.82548C17.4362 3.08718 17.6438 3.39788 17.7855 3.73981C17.9271 4.08175 18 4.44824 18 4.81835C18 5.18846 17.9271 5.55495 17.7855 5.89689C17.6438 6.23882 17.4362 6.54952 17.1745 6.81123L7.30235 16.6834C7.21005 16.7757 7.09527 16.8423 6.96935 16.8766L2.94735 17.9736C2.6877 18.0444 2.41 17.9706 2.21969 17.7803C2.02937 17.59 1.95563 17.3123 2.02644 17.0526L3.12335 13.0306C3.1577 12.9047 3.2243 12.7899 3.3166 12.6977L13.1888 2.82548C13.4505 2.56377 13.7612 2.35617 14.1031 2.21453Z"
                      />
                    </svg>
                  </button>
                </div>
              </div>
              <div>
                <form action="" class="space-y-6">
                  <div class="flex flex-col justify-between gap-4 md:flex-row">
                    <div>
                      <label
                        for="fname"
                        class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                        >First Name</label
                      >
                      <input
                        type="text"
                        class="h-10 w-full rounded-lg border border-bgray-300 px-4 py-3 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                      />
                    </div>
                    <div>
                      <label
                        for="lname"
                        class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                        >Last Name</label
                      >
                      <input
                        type="text"
                        class="h-10 w-full rounded-lg border border-bgray-300 px-4 py-3 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                      />
                    </div>
                  </div>
                  <div>
                    <label
                      for="lname"
                      class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                      >Email</label
                    >
                    <input
                      type="text"
                      class="h-10 w-full rounded-lg border border-bgray-300 px-4 py-3 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                    />
                  </div>
                  <div>
                    <label
                      for="phone-number"
                      class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                      >Phone</label
                    >
                    <div class="relative mt-1 rounded-lg">
                      <div class="absolute inset-y-0 left-0 flex items-center">
                        <label for="country" class="sr-only">Country</label>
                        <select
                          id="country"
                          name="country"
                          autocomplete="country"
                          class="rounded-none rounded-l-lg border-0 border-l border-r border-bgray-300 bg-bgray-100 py-2 pl-3 pr-7 text-gray-500 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                        >
                          <option>+1</option>
                          <option>+2</option>
                          <option>+3</option>
                        </select>
                      </div>
                      <input
                        type="text"
                        name="phone-number"
                        id="phone-number"
                        class="block w-full rounded-lg border-bgray-300 pl-16 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                        placeholder="+1 (070) 123–9221"
                      />
                    </div>
                  </div>
                  <div>
                    <label
                      for="jobtitle"
                      class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                      >Job Title</label
                    >
                    <input
                      type="text"
                      class="h-10 w-full rounded-lg border border-bgray-300 px-4 py-3 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                    />
                  </div>
                  <div>
                    <label
                      for="address"
                      class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                      >Address</label
                    >
                    <input
                      type="text"
                      class="h-10 w-full rounded-lg border border-bgray-300 px-4 py-3 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                    />
                  </div>
                  <div>
                    <label
                      for="address"
                      class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                      >Date of Birth</label
                    >
                    <input
                      type="date"
                      class="h-10 w-full rounded-lg border border-bgray-300 px-4 py-3 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600 dark:text-white dark:placeholder:text-white"
                    />
                  </div>
                  <div>
                    <label
                      for="address"
                      class="mb-2.5 block text-left text-sm text-bgray-500 dark:text-bgray-50"
                      >Address</label
                    >
                    <textarea
                      class="h-36 w-full resize-none rounded-lg border border-bgray-300 px-4 py-3 focus:border focus:border-success-300 focus:ring-0 dark:border-darkblack-400 dark:bg-darkblack-600"
                    >
                    </textarea>
                  </div>
                  <div class="flex justify-end">
                    <button
                      class="rounded-lg bg-success-300 px-6 py-3 text-base font-medium text-white hover:bg-success-400"
                    >
                      Add Contact
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Add User Modal -->
    <div id="addUserModal" 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="closeAddUserModal()"></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">Add User I2C</h3>
            <button type="button" onclick="closeAddUserModal()"
              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>
          <div class="space-y-4">
            <div>
              <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">NIK</label>
              <input type="text" id="addUserNik" placeholder="Masukkan NIK..."
                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">Name</label>
              <input type="text" id="addUserName" placeholder="Masukkan nama..."
                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">Channel</label>
              <select id="addUserChannel"
                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 channel...</option>
                <option value="Facil">Facil</option>
                <option value="A3">A3</option>
                <option value="PPS">PPS</option>
                <option value="OPL">OPL</option>
              </select>
            </div>
            <div>
              <label class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">Target I2C</label>
              <input type="number" id="addUserTargetMar" min="0" value="0" placeholder="Masukkan target..."
                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">CG</label>
              <select id="addUserCg"
                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 CG...</option>
                <option value="CG DNAwesome">CG DNAwesome</option>
                <option value="CG SIRIUS">CG SIRIUS</option>
                <option value="CG Falcon">CG Falcon</option>
                <option value="Adminovation">Adminovation</option>
              </select>
            </div>
          </div>
          <div class="mt-6 flex justify-end gap-3">
            <button type="button" onclick="closeAddUserModal()"
              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="button" onclick="saveAddUser()"
              class="rounded-lg bg-success-300 px-5 py-2.5 text-sm font-semibold text-white hover:bg-success-400 transition">
              Simpan
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Target MAR Modal -->
    <div id="targetMarModal" 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="closeTargetMarModal()"></div>
      <div class="relative z-10 mx-auto w-full max-w-md px-4" style="margin-top: 15vh;">
        <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">Set Target MAR</h3>
            <button type="button" onclick="closeTargetMarModal()"
              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>
          <p class="mb-4 text-sm text-bgray-600 dark:text-bgray-50">User: <strong id="targetMarUserName" class="text-bgray-900 dark:text-white"></strong></p>
          <input type="hidden" id="targetMarUserId" value="">
          <div class="mb-5">
            <label for="targetMarInput" class="mb-2 block text-sm font-medium text-bgray-600 dark:text-bgray-50">Target MAR</label>
            <input type="number" id="targetMarInput" min="0" placeholder="Masukkan angka target..."
              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 class="flex justify-end gap-3">
            <button type="button" onclick="closeTargetMarModal()"
              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="button" onclick="saveTargetMar()"
              class="rounded-lg bg-success-300 px-5 py-2.5 text-sm font-semibold text-white hover:bg-success-400 transition">
              Simpan
            </button>
          </div>
        </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>
      // Custom sort: Facil channel always on top
      $.fn.dataTable.ext.type.order['channel-priority-pre'] = function(data) {
          var text = data.replace(/<.*?>/g, '').trim().toLowerCase();
          if (text.indexOf('facil') !== -1) return 0;
          if (text.indexOf('a3') !== -1) return 1;
          if (text.indexOf('pps') !== -1) return 2;
          return 3;
      };

      // Custom DataTables search for PKWT/PKWTT filter on User I2C table
      var userEmpFilterType = '';
      $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
          if (settings.nTable.id !== 'userI2cTable') return true;
          if (!userEmpFilterType) return true;
          var nik = data[1] || ''; // NIK column index 1
          var hasK = /[kK]/.test(nik);
          if (userEmpFilterType === 'PKWTT') return hasK;
          if (userEmpFilterType === 'PKWT') return !hasK;
          return true;
      });

      $(document).ready(function() {
          var userTable = $('#userI2cTable').DataTable({
            responsive: true,
            language: {
              search: "Search inside table:"
            },
            lengthMenu: [10, 25, 50, 100],
            pageLength: 10,
            columnDefs: [
              { type: 'channel-priority', targets: 3 }
            ],
            order: [[3, 'asc']]
          });

          // Channel Filter Buttons
          $('.user-ch-filter-btn').on('click', function() {
              var chValue = $(this).data('channel');
              $('.user-ch-filter-btn').css('opacity', '0.7').removeClass('active');
              $(this).css('opacity', '1').addClass('active');
              if (chValue === '' || chValue === undefined) {
                  userTable.column(3).search('').draw();
              } else {
                  userTable.column(3).search(chValue).draw();
              }
          });

          // CG Filter Buttons
          $('.user-cg-filter-btn').on('click', function() {
              var cgValue = $(this).data('cg');
              $('.user-cg-filter-btn').css('opacity', '0.7').removeClass('active');
              $(this).css('opacity', '1').addClass('active');
              if (cgValue === '' || cgValue === undefined) {
                  userTable.column(5).search('').draw();
              } else {
                  userTable.column(5).search(cgValue).draw();
              }
          });

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

      // Target MAR Modal Functions
      function openTargetMarModal(userId, userName, currentTarget) {
          document.getElementById('targetMarUserId').value = userId;
          document.getElementById('targetMarUserName').textContent = userName;
          document.getElementById('targetMarInput').value = currentTarget;
          document.getElementById('targetMarModal').style.display = 'flex';
      }

      function closeTargetMarModal() {
          document.getElementById('targetMarModal').style.display = 'none';
      }

      function saveTargetMar() {
          var userId = document.getElementById('targetMarUserId').value;
          var targetMar = document.getElementById('targetMarInput').value;

          if (!targetMar || targetMar < 0) {
              alert('Masukkan angka target yang valid!');
              return;
          }

          $.ajax({
              url: '/user/update-target-mar/' + userId,
              type: 'POST',
              data: {
                  _token: $('meta[name="csrf-token"]').attr('content'),
                  target_mar: targetMar
              },
              success: function(response) {
                  if (response.success) {
                      // Update the displayed value in the table
                      document.getElementById('target-mar-display-' + userId).textContent = response.target_mar;
                      closeTargetMarModal();
                  }
              },
              error: function(xhr) {
                  alert('Gagal menyimpan target. Silakan coba lagi.');
              }
          });
      }
      // Add User Modal Functions
      function openAddUserModal() {
          document.getElementById('addUserNik').value = '';
          document.getElementById('addUserName').value = '';
          document.getElementById('addUserChannel').value = '';
          document.getElementById('addUserTargetMar').value = 0;
          document.getElementById('addUserCg').value = '';
          document.getElementById('addUserModal').style.display = 'flex';
      }

      function closeAddUserModal() {
          document.getElementById('addUserModal').style.display = 'none';
      }

      function saveAddUser() {
          var nik = document.getElementById('addUserNik').value.trim();
          var name = document.getElementById('addUserName').value.trim();
          var channel = document.getElementById('addUserChannel').value;
          var targetMar = document.getElementById('addUserTargetMar').value;
          var cg = document.getElementById('addUserCg').value;

          if (!nik || !name || !channel || !cg) {
              alert('Semua field harus diisi!');
              return;
          }

          $.ajax({
              url: '/user/store',
              type: 'POST',
              data: {
                  _token: $('meta[name="csrf-token"]').attr('content'),
                  nik: nik,
                  name: name,
                  channel: channel,
                  target_mar: targetMar || 0,
                  cg: cg
              },
              success: function(response) {
                  if (response.success) {
                      closeAddUserModal();
                      location.reload();
                  }
              },
              error: function(xhr) {
                  if (xhr.status === 422) {
                      var errors = xhr.responseJSON.errors;
                      var msg = '';
                      for (var key in errors) {
                          msg += errors[key][0] + '\n';
                      }
                      alert(msg);
                  } else {
                      alert('Gagal menyimpan user. Silakan coba lagi.');
                  }
              }
          });
      }
      // Toggle User Status
      function toggleUserStatus(userId, checkbox) {
          $.ajax({
              url: '/user/toggle-status/' + userId,
              type: 'POST',
              data: {
                  _token: $('meta[name="csrf-token"]').attr('content')
              },
              success: function(response) {
                  if (response.success) {
                      checkbox.parentElement.title = response.status ? 'Aktif' : 'Nonaktif';
                  }
              },
              error: function(xhr) {
                  checkbox.checked = !checkbox.checked;
                  alert('Gagal mengubah status. Silakan coba lagi.');
              }
          });
      }

      // Delete User
      function deleteUser(userId, userName) {
          if (!confirm('Apakah Anda yakin ingin menghapus user "' + userName + '"?')) {
              return;
          }

          $.ajax({
              url: '/user/delete/' + userId,
              type: 'DELETE',
              data: {
                  _token: $('meta[name="csrf-token"]').attr('content')
              },
              success: function(response) {
                  if (response.success) {
                      location.reload();
                  }
              },
              error: function(xhr) {
                  alert('Gagal menghapus user. Silakan coba lagi.');
              }
          });
      }
    </script>
  </body>
</html>