<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Employee List</title>
  <script src="https://cdn.tailwindcss.com"></script>

  <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-[#dfe9f7] min-h-screen p-4">


  <!-- Heading -->
<div class="max-w-[1800px] mx-auto mt-6 mb-5 flex items-center justify-between gap-3">

    <!-- Title -->
    <h1 class="text-[18px] sm:text-2xl font-bold text-black leading-tight">
        Employee List
    </h1>

    <!-- Add Employee -->
    <a href="add_employee.php"
        style="background: linear-gradient(to right, #3b82f6, #4f46e5);"
        class="shrink-0 inline-flex items-center justify-center gap-2
        text-white text-sm font-medium
        px-4 sm:px-5 py-2.5 rounded-2xl shadow-lg">

        <!-- Icon -->
        <i class="ri-add-line text-lg"></i>

        <!-- Text -->
        <span class="hidden sm:block">
            Add Employee
        </span>

    </a>

</div>

  <!-- White Box -->
  <div class="max-w-[1800px] mx-auto bg-white rounded-3xl p-5 shadow-sm border border-gray-200">

    <!-- Top Two Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

      <!-- Active Employees -->
      <div class="bg-[#f8fafc] rounded-2xl p-5 border border-gray-200">

        <div class="flex items-center justify-between">

          <div>

            <p class="text-sm text-gray-500 mb-1">
              Active Employees
            </p>

            <h2 class="text-3xl font-bold text-black">
              120
            </h2>

          </div>

          <div class="w-14 h-14 rounded-2xl bg-green-100 flex items-center justify-center">

            <svg xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-7 h-7 text-green-600">

              <path stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.75 6.75h3.375a1.125 1.125 0 011.125 1.125v11.25a1.125 1.125 0 01-1.125 1.125H4.875A1.125 1.125 0 013.75 19.125V7.875A1.125 1.125 0 014.875 6.75H8.25m7.5 0V5.625A2.625 2.625 0 0013.125 3h-2.25A2.625 2.625 0 008.25 5.625V6.75m7.5 0h-7.5" />

            </svg>

          </div>

        </div>

      </div>

      <!-- Inactive Employees -->
      <div class="bg-[#f8fafc] rounded-2xl p-5 border border-gray-200">

        <div class="flex items-center justify-between">

          <div>

            <p class="text-sm text-gray-500 mb-1">
              Inactive Employees
            </p>

            <h2 class="text-3xl font-bold text-black">
              15
            </h2>

          </div>

          <div class="w-14 h-14 rounded-2xl bg-red-100 flex items-center justify-center">

            <svg xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-7 h-7 text-red-600">

              <path stroke-linecap="round"
                stroke-linejoin="round"
                d="M18 18L6 6m0 12L18 6" />

            </svg>

          </div>

        </div>

      </div>

    </div>
    <!-- Show Entries -->
    <div class="flex justify-start mb-5">

      <div class="flex items-center gap-2">

        <span class="text-sm text-gray-500">
          Show Entries
        </span>

        <select
          class="h-10 px-4 rounded-xl border border-gray-200 bg-white text-sm text-gray-700 outline-none">

          <option>10</option>
          <option>20</option>
          <option>30</option>

        </select>

      </div>

    </div>
    <!-- Employee Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">

      <!-- Card 1 -->
      <div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-200 hover:shadow-md transition-all">

        <!-- Top -->
        <div class="flex items-start justify-between">

          <div class="flex gap-4">

            <!-- Image -->
            <img
              src="https://i.pravatar.cc/150?img=68"
              alt="profile"
              class="w-16 h-16 rounded-2xl object-cover border border-gray-200">

            <!-- Info -->
            <div>

              <h2 class="text-lg font-bold text-gray-900">
                Aarav Patel
              </h2>

              <p class="text-sm text-violet-600 font-medium mt-0.5">
                Frontend Developer
              </p>

              <!-- Department -->
              <div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-violet-50 text-violet-700 text-xs font-semibold">

                IT Department

              </div>

            </div>

          </div>

          <div class="relative menu-wrapper">

  <!-- Three Dots -->
  <button
    type="button"
    onclick="toggleMenu(this,event)"
    class="w-9 h-9 rounded-xl hover:bg-gray-100 flex items-center justify-center text-xl">

    <i class="ri-more-2-fill"></i>

  </button>

  <!-- Dropdown -->
  <div
    class="menu-dropdown hidden absolute right-0 top-11 w-44 bg-white border border-gray-200 rounded-2xl shadow-xl py-2 z-50">

    <!-- Edit -->
    <a href="#"
      class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-all">

      <i class="ri-pencil-line text-[16px]"></i>

      Edit

    </a>

    <!-- Delete -->
    <button
      type="button"
      onclick="deleteEmployee(this,event)"
      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-all">

      <i class="ri-delete-bin-6-line text-[16px]"></i>

      Delete

    </button>

  </div>

</div>

        </div>

        <!-- Contact -->
        <div class="mt-5 space-y-3">

          <!-- Phone -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center">
              <i class="ri-phone-line text-blue-600 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Phone Number
              </p>

              <p class="text-sm font-semibold text-gray-800">
                +91 98765 43210
              </p>

            </div>

          </div>

          <!-- Email -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-red-50 flex items-center justify-center">
              <i class="ri-mail-line text-red-500 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Email Address
              </p>

              <p class="text-sm font-semibold text-gray-800">
                aarav.patel@gmail.com
              </p>

            </div>

          </div>

        </div>

        <!-- Bottom -->
        <div class="mt-5 pt-4 border-t border-gray-100">

          <div class="flex items-center justify-between">

            <!-- Status -->
            <span class="text-sm font-semibold text-green-600">
              Active
            </span>

            <!-- Toggle -->
            <label class="relative inline-block w-11 h-6 cursor-pointer">

              <!-- Hidden Input -->
              <input type="checkbox" class="peer sr-only" checked>

              <!-- Background -->
              <div class="w-full h-full rounded-full bg-[#cfd4dc] peer-checked:bg-[#12d400] transition-all duration-300">
              </div>

              <!-- White Ball -->
              <div class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-all duration-300 peer-checked:left-[22px]">
              </div>

            </label>

          </div>

          <!-- Button -->
          <a href="view_employee.php">
          <button class="w-full h-11 mt-4 rounded-2xl bg-[#0b102e] hover:bg-gray-800 text-white text-sm font-semibold transition-all">
            View Details
          </button>
          </a>

        </div>

      </div>

      <!-- Card 2 -->
      <div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-200 hover:shadow-md transition-all">

        <!-- Top -->
        <div class="flex items-start justify-between">

          <div class="flex gap-4">

            <!-- Image -->
            <img
              src="https://i.pravatar.cc/150?img=68"
              alt="profile"
              class="w-16 h-16 rounded-2xl object-cover border border-gray-200">

            <!-- Info -->
            <div>

              <h2 class="text-lg font-bold text-gray-900">
                Aarav Patel
              </h2>

              <p class="text-sm text-violet-600 font-medium mt-0.5">
                Frontend Developer
              </p>

              <!-- Department -->
              <div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-violet-50 text-violet-700 text-xs font-semibold">

                IT Department

              </div>

            </div>

          </div>

          <!-- Menu -->
           <div class="relative menu-wrapper">

  <!-- Three Dots -->
  <button
    type="button"
    onclick="toggleMenu(this,event)"
    class="w-9 h-9 rounded-xl hover:bg-gray-100 flex items-center justify-center text-xl">

    <i class="ri-more-2-fill"></i>

  </button>

  <!-- Dropdown -->
  <div
    class="menu-dropdown hidden absolute right-0 top-11 w-44 bg-white border border-gray-200 rounded-2xl shadow-xl py-2 z-50">

    <!-- Edit -->
    <a href="#"
      class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-all">

      <i class="ri-pencil-line text-[16px]"></i>

      Edit

    </a>

    <!-- Delete -->
    <button
      type="button"
      onclick="deleteEmployee(this,event)"
      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-all">

      <i class="ri-delete-bin-6-line text-[16px]"></i>

      Delete

    </button>

  </div>

</div>

        </div>

        <!-- Contact -->
        <div class="mt-5 space-y-3">

          <!-- Phone -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center">
              <i class="ri-phone-line text-blue-600 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Phone Number
              </p>

              <p class="text-sm font-semibold text-gray-800">
                +91 98765 43210
              </p>

            </div>

          </div>

          <!-- Email -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-red-50 flex items-center justify-center">
              <i class="ri-mail-line text-red-500 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Email Address
              </p>

              <p class="text-sm font-semibold text-gray-800">
                aarav.patel@gmail.com
              </p>

            </div>

          </div>

        </div>

        <!-- Bottom -->
        <div class="mt-5 pt-4 border-t border-gray-100">

          <div class="flex items-center justify-between">

            <!-- Status -->
            <span class="text-sm font-semibold text-green-600">
              Active
            </span>

            <!-- Toggle -->
            <label class="relative inline-block w-11 h-6 cursor-pointer">

              <!-- Hidden Input -->
              <input type="checkbox" class="peer sr-only" checked>

              <!-- Background -->
              <div class="w-full h-full rounded-full bg-[#cfd4dc] peer-checked:bg-[#12d400] transition-all duration-300">
              </div>

              <!-- White Ball -->
              <div class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-all duration-300 peer-checked:left-[22px]">
              </div>

            </label>

          </div>

          <!-- Button -->
          <a href="view_employee.php">
          <button class="w-full h-11 mt-4 rounded-2xl bg-[#0b102e] hover:bg-gray-800 text-white text-sm font-semibold transition-all">
            View Details
          </button>
          </a>

        </div>

      </div>

      <!-- Card 3 -->
      <div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-200 hover:shadow-md transition-all">

        <!-- Top -->
        <div class="flex items-start justify-between">

          <div class="flex gap-4">

            <!-- Image -->
            <img
              src="https://i.pravatar.cc/150?img=68"
              alt="profile"
              class="w-16 h-16 rounded-2xl object-cover border border-gray-200">

            <!-- Info -->
            <div>

              <h2 class="text-lg font-bold text-gray-900">
                Aarav Patel
              </h2>

              <p class="text-sm text-violet-600 font-medium mt-0.5">
                Frontend Developer
              </p>

              <!-- Department -->
              <div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-violet-50 text-violet-700 text-xs font-semibold">

                IT Department

              </div>

            </div>

          </div>

          <!-- Menu -->
          <div class="relative menu-wrapper">

  <!-- Three Dots -->
  <button
    type="button"
    onclick="toggleMenu(this,event)"
    class="w-9 h-9 rounded-xl hover:bg-gray-100 flex items-center justify-center text-xl">

    <i class="ri-more-2-fill"></i>

  </button>

  <!-- Dropdown -->
  <div
    class="menu-dropdown hidden absolute right-0 top-11 w-44 bg-white border border-gray-200 rounded-2xl shadow-xl py-2 z-50">

    <!-- Edit -->
    <a href="#"
      class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-all">

      <i class="ri-pencil-line text-[16px]"></i>

      Edit

    </a>

    <!-- Delete -->
    <button
      type="button"
      onclick="deleteEmployee(this,event)"
      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-all">

      <i class="ri-delete-bin-6-line text-[16px]"></i>

      Delete

    </button>

  </div>

</div>

        </div>

        <!-- Contact -->
        <div class="mt-5 space-y-3">

          <!-- Phone -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center">
              <i class="ri-phone-line text-blue-600 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Phone Number
              </p>

              <p class="text-sm font-semibold text-gray-800">
                +91 98765 43210
              </p>

            </div>

          </div>

          <!-- Email -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-red-50 flex items-center justify-center">
              <i class="ri-mail-line text-red-500 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Email Address
              </p>

              <p class="text-sm font-semibold text-gray-800">
                aarav.patel@gmail.com
              </p>

            </div>

          </div>

        </div>

        <!-- Bottom -->
        <div class="mt-5 pt-4 border-t border-gray-100">

          <div class="flex items-center justify-between">

            <!-- Status -->
            <span class="text-sm font-semibold text-green-600">
              Active
            </span>

            <!-- Toggle -->
            <label class="relative inline-block w-11 h-6 cursor-pointer">

              <!-- Hidden Input -->
              <input type="checkbox" class="peer sr-only" checked>

              <!-- Background -->
              <div class="w-full h-full rounded-full bg-[#cfd4dc] peer-checked:bg-[#12d400] transition-all duration-300">
              </div>

              <!-- White Ball -->
              <div class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-all duration-300 peer-checked:left-[22px]">
              </div>

            </label>

          </div>

          <!-- Button -->
          <a href="view_employee.php">
          <button class="w-full h-11 mt-4 rounded-2xl bg-[#0b102e] hover:bg-gray-800 text-white text-sm font-semibold transition-all">
            View Details
          </button>
          </a>

        </div>

      </div>

      <!-- Card 4 -->
      <div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-200 hover:shadow-md transition-all">

        <!-- Top -->
        <div class="flex items-start justify-between">

          <div class="flex gap-4">

            <!-- Image -->
            <img
              src="https://i.pravatar.cc/150?img=68"
              alt="profile"
              class="w-16 h-16 rounded-2xl object-cover border border-gray-200">

            <!-- Info -->
            <div>

              <h2 class="text-lg font-bold text-gray-900">
                Aarav Patel
              </h2>

              <p class="text-sm text-violet-600 font-medium mt-0.5">
                Frontend Developer
              </p>

              <!-- Department -->
              <div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-violet-50 text-violet-700 text-xs font-semibold">

                IT Department

              </div>

            </div>

          </div>

          <!-- Menu -->
          <div class="relative menu-wrapper">

  <!-- Three Dots -->
  <button
    type="button"
    onclick="toggleMenu(this,event)"
    class="w-9 h-9 rounded-xl hover:bg-gray-100 flex items-center justify-center text-xl">

    <i class="ri-more-2-fill"></i>

  </button>

  <!-- Dropdown -->
  <div
    class="menu-dropdown hidden absolute right-0 top-11 w-44 bg-white border border-gray-200 rounded-2xl shadow-xl py-2 z-50">

    <!-- Edit -->
    <a href="#"
      class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-all">

      <i class="ri-pencil-line text-[16px]"></i>

      Edit

    </a>

    <!-- Delete -->
    <button
      type="button"
      onclick="deleteEmployee(this,event)"
      class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-all">

      <i class="ri-delete-bin-6-line text-[16px]"></i>

      Delete

    </button>

  </div>

</div>

        </div>

        <!-- Contact -->
        <div class="mt-5 space-y-3">

          <!-- Phone -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center">
              <i class="ri-phone-line text-blue-600 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Phone Number
              </p>

              <p class="text-sm font-semibold text-gray-800">
                +91 98765 43210
              </p>

            </div>

          </div>

          <!-- Email -->
          <div class="flex items-center gap-3">

            <div class="w-9 h-9 rounded-xl bg-red-50 flex items-center justify-center">
              <i class="ri-mail-line text-red-500 text-lg"></i>
            </div>

            <div>

              <p class="text-xs text-gray-400">
                Email Address
              </p>

              <p class="text-sm font-semibold text-gray-800">
                aarav.patel@gmail.com
              </p>

            </div>

          </div>

        </div>

        <!-- Bottom -->
        <div class="mt-5 pt-4 border-t border-gray-100">

          <div class="flex items-center justify-between">

            <!-- Status -->
            <span class="text-sm font-semibold text-green-600">
              Active
            </span>

            <!-- Toggle -->
            <label class="relative inline-block w-11 h-6 cursor-pointer">

              <!-- Hidden Input -->
              <input type="checkbox" class="peer sr-only" checked>

              <!-- Background -->
              <div class="w-full h-full rounded-full bg-[#cfd4dc] peer-checked:bg-[#12d400] transition-all duration-300">
              </div>

              <!-- White Ball -->
              <div class="absolute top-[2px] left-[2px] w-5 h-5 rounded-full bg-white shadow-md transition-all duration-300 peer-checked:left-[22px]">
              </div>

            </label>

          </div>

          <!-- Button -->
          <a href="view_employee.php">
          <button class="w-full h-11 mt-4 rounded-2xl bg-[#0b102e] hover:bg-gray-800 text-white text-sm font-semibold transition-all">
            View Details
          </button>
          </a>

        </div>

      </div>

    </div>
    <!-- Pagination Section -->
    <div class="mt-8 pt-5 border-t border-gray-200 flex flex-col lg:flex-row items-center justify-between gap-4">

      <!-- Left Side -->
      <div class="flex items-center gap-3">

        <p class="text-sm text-gray-500">
          Showing 1 to 4 of 24 employees
        </p>

      </div>

      <!-- Right Side Pagination -->
      <div class="flex items-center gap-2">

        <!-- Prev -->
        <button
          class="w-9 h-9 rounded-xl border border-blue-100 text-blue-500 hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-black transition-all duration-300">

          <i class="ri-arrow-left-s-line"></i>

        </button>

        <!-- Active -->
        <button
          class="w-9 h-9 rounded-xl border border-blue-100 text-blue-600 hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-black transition-all duration-300">

          1

        </button>

        <!-- Pages -->
        <button
          class="w-9 h-9 rounded-xl border border-blue-100 text-blue-600 hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-black transition-all duration-300">

          2

        </button>

        <button
          class="w-9 h-9 rounded-xl border border-blue-100 text-blue-600 hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-black transition-all duration-300">

          3

        </button>

        <!-- Next -->
        <button
          class="w-9 h-9 rounded-xl border border-blue-100 text-blue-500 hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-black transition-all duration-300">

          <i class="ri-arrow-right-s-line"></i>

        </button>

      </div>

    </div>
  </div>

<script>

  // Toggle Dropdown Menu
  function toggleMenu(button, event) {

    event.stopPropagation();

    // Close all dropdowns first
    document.querySelectorAll(".menu-dropdown").forEach(menu => {
      menu.classList.add("hidden");
    });

    // Open current dropdown
    const dropdown = button.parentElement.querySelector(".menu-dropdown");

    dropdown.classList.toggle("hidden");

  }

  // Close dropdown when clicking outside
  document.addEventListener("click", function () {

    document.querySelectorAll(".menu-dropdown").forEach(menu => {
      menu.classList.add("hidden");
    });

  });

  // Delete Employee
  function deleteEmployee(button, event) {

    event.stopPropagation();

    Swal.fire({

      title: "Delete Employee?",
      text: "This employee will be deleted permanently.",
      icon: "warning",

      width: "320px",
      padding: "1rem",

      showCancelButton: true,

      confirmButtonText: "Delete",
      cancelButtonText: "Cancel",

      confirmButtonColor: "#2563eb",
      cancelButtonColor: "#ef4444",

      customClass: {

        popup: "rounded-2xl",
        title: "text-lg font-semibold",
        htmlContainer: "text-sm text-gray-500",
        confirmButton: "px-4 py-2 rounded-lg text-sm",
        cancelButton: "px-4 py-2 rounded-lg text-sm"

      }

    }).then((result) => {

      if (result.isConfirmed) {

        // Remove Employee Card
        const card = button.closest(".bg-white.rounded-3xl");

        if (card) {
          card.remove();
        }

        // Success Alert
        Swal.fire({

          icon: "success",
          title: "Deleted!",
          text: "Employee deleted successfully.",

          width: "300px",
          padding: "1rem",

          showConfirmButton: false,
          timer: 1400

        });

      }

    });

  }

</script>
</body>

</html>

<?php include 'footer.php'; ?>