$(document).ready(function () {
  // Drag-and-drop functionality to rearrange services
  $("#sortable").sortable({
    handle: ".drag-handle",
    update: function () {
      updateServiceIds();
    },
  });

  // Update service IDs for the reorganization form
  function updateServiceIds() {
    var serviceIds = [];
    $("#sortable tr").each(function () {
      serviceIds.push($(this).data("id"));
    });

    // Empty the ID container
    $("#service-ids-container").empty();

    // Add hidden fields for each ID
    $.each(serviceIds, function (index, id) {
      $("#service-ids-container").append(
        '<input type="hidden" name="service_ids[]" value="' + id + '">'
      );
    });
  }

  // Initialize service IDs
  updateServiceIds();

  // Editing functionality
  $(".edit-btn").click(function () {
    var id = $(this).data("id");
    var name = $(this).data("name");
    var icon = $(this).data("icon");
    var url = $(this).data("url");

    $("#edit-id").val(id);
    $("#edit-name").val(name);
    $("#edit-icon").val(icon);
    $("#edit-url").val(url);
    $("#edit-icon-preview").attr("class", icon + " icon-preview");

    $("#edit-modal").show();
  });

  // Close the edit modal
  $("#cancel-edit").click(function () {
    $("#edit-modal").hide();
  });

  // Update icon preview during input
  $("#icon").on("input", function () {
    $("#icon-preview").attr("class", $(this).val() + " icon-preview");
  });

  $("#edit-icon").on("input", function () {
    $("#edit-icon-preview").attr("class", $(this).val() + " icon-preview");
  });

  // Initialize the icon selector
  initIconSelector();
});

// Global variables for the icon selector
let currentIconInput = "";
let currentIconPreview = "";

// Function to open the icon selector
function openIconSelector(inputId, previewId) {
  currentIconInput = inputId;
  currentIconPreview = previewId;

  // Select the current icon if it exists
  const currentIcon = $("#" + inputId).val();
  if (currentIcon) {
    $(".icon-item").removeClass("selected");
    $(`.icon-item[data-icon="${currentIcon}"]`).addClass("selected");
  }

  $("#icon-selector-modal").show();
}

// Function to close the icon selector
function closeIconSelector() {
  $("#icon-selector-modal").hide();
}

// Function to select an icon
function selectIcon(iconClass) {
  $("#" + currentIconInput).val(iconClass);
  $("#" + currentIconPreview).attr("class", iconClass + " icon-preview");
  closeIconSelector();
}

// Function to initialize the icon selector
function initIconSelector() {
  // List of popular icons by category
  const icons = {
    solid: [
      "fa-solid fa-envelope",
      "fa-solid fa-home",
      "fa-solid fa-user",
      "fa-solid fa-cog",
      "fa-solid fa-bell",
      "fa-solid fa-calendar",
      "fa-solid fa-search",
      "fa-solid fa-heart",
      "fa-solid fa-star",
      "fa-solid fa-check",
      "fa-solid fa-times",
      "fa-solid fa-plus",
      "fa-solid fa-minus",
      "fa-solid fa-trash",
      "fa-solid fa-edit",
      "fa-solid fa-save",
      "fa-solid fa-download",
      "fa-solid fa-upload",
      "fa-solid fa-link",
      "fa-solid fa-image",
      "fa-solid fa-video",
      "fa-solid fa-music",
      "fa-solid fa-file",
      "fa-solid fa-folder",
      "fa-solid fa-lock",
      "fa-solid fa-unlock",
      "fa-solid fa-key",
      "fa-solid fa-shield",
      "fa-solid fa-chart-bar",
      "fa-solid fa-chart-line",
      "fa-solid fa-chart-pie",
      "fa-solid fa-globe",
      "fa-solid fa-map",
      "fa-solid fa-location-dot",
      "fa-solid fa-phone",
      "fa-solid fa-mobile",
      "fa-solid fa-tablet",
      "fa-solid fa-laptop",
      "fa-solid fa-desktop",
      "fa-solid fa-server",
      "fa-solid fa-database",
      "fa-solid fa-cloud",
      "fa-solid fa-cloud-upload",
      "fa-solid fa-cloud-download",
      "fa-solid fa-comments",
      "fa-solid fa-comment",
      "fa-solid fa-message",
      "fa-solid fa-paper-plane",
      "fa-solid fa-share",
      "fa-solid fa-reply",
      "fa-solid fa-thumbs-up",
      "fa-solid fa-thumbs-down",
      "fa-solid fa-clock",
      "fa-solid fa-sync",
      "fa-solid fa-spinner",
      "fa-solid fa-exclamation",
      "fa-solid fa-question",
      "fa-solid fa-info",
      "fa-solid fa-warning",
      "fa-solid fa-ban",
      "fa-solid fa-sign-in",
      "fa-solid fa-sign-out",
      "fa-solid fa-arrow-up",
      "fa-solid fa-arrow-down",
      "fa-solid fa-arrow-left",
      "fa-solid fa-arrow-right",
      "fa-solid fa-expand",
      "fa-solid fa-compress",
      "fa-solid fa-print",
      "fa-solid fa-copy",
      "fa-solid fa-paste",
      "fa-solid fa-code",
      "fa-solid fa-terminal",
      "fa-solid fa-bug",
      "fa-solid fa-filter",
      "fa-solid fa-sort",
      "fa-solid fa-camera",
      "fa-solid fa-microphone",
      "fa-solid fa-volume-up",
      "fa-solid fa-volume-down",
      "fa-solid fa-play",
      "fa-solid fa-pause",
      "fa-solid fa-stop",
      "fa-solid fa-forward",
      "fa-solid fa-backward",
      "fa-solid fa-list",
      "fa-solid fa-th",
      "fa-solid fa-th-large",
      "fa-solid fa-align-left",
      "fa-solid fa-align-center",
      "fa-solid fa-align-right",
      "fa-solid fa-align-justify",
      "fa-solid fa-bold",
      "fa-solid fa-italic",
      "fa-solid fa-underline",
      "fa-solid fa-font",
      "fa-solid fa-table",
      "fa-solid fa-tasks",
      "fa-solid fa-check-square",
      "fa-solid fa-square",
      "fa-solid fa-circle",
      "fa-solid fa-ellipsis-h",
      "fa-solid fa-ellipsis-v",
      "fa-solid fa-bars",
      "fa-solid fa-sliders",
      "fa-solid fa-toggle-on",
      "fa-solid fa-toggle-off",
      "fa-solid fa-caret-up",
      "fa-solid fa-caret-down",
      "fa-solid fa-caret-left",
      "fa-solid fa-caret-right",
      "fa-solid fa-chevron-up",
      "fa-solid fa-chevron-down",
      "fa-solid fa-chevron-left",
      "fa-solid fa-chevron-right",
      "fa-solid fa-angle-up",
      "fa-solid fa-angle-down",
      "fa-solid fa-angle-left",
      "fa-solid fa-angle-right",
      "fa-solid fa-external-link",
      "fa-solid fa-share-square",
      "fa-solid fa-plus-square",
      "fa-solid fa-minus-square",
      "fa-solid fa-times-circle",
      "fa-solid fa-check-circle",
      "fa-solid fa-question-circle",
      "fa-solid fa-info-circle",
      "fa-solid fa-exclamation-circle",
      "fa-solid fa-exclamation-triangle",
      "fa-solid fa-lightbulb",
      "fa-solid fa-flag",
      "fa-solid fa-bookmark",
      "fa-solid fa-tag",
      "fa-solid fa-tags",
      "fa-solid fa-book",
      "fa-solid fa-newspaper",
      "fa-solid fa-sticky-note",
      "fa-solid fa-credit-card",
      "fa-solid fa-money-bill",
      "fa-solid fa-dollar-sign",
      "fa-solid fa-euro-sign",
      "fa-solid fa-pound-sign",
      "fa-solid fa-yen-sign",
      "fa-solid fa-ruble-sign",
      "fa-solid fa-rupee-sign",
      "fa-solid fa-won-sign",
      "fa-solid fa-bitcoin-sign",
      "fa-solid fa-credit-card",
      "fa-solid fa-wallet",
      "fa-solid fa-shopping-cart",
      "fa-solid fa-shopping-bag",
      "fa-solid fa-shopping-basket",
      "fa-solid fa-cart-plus",
      "fa-solid fa-cart-arrow-down",
      "fa-solid fa-cash-register",
      "fa-solid fa-receipt",
      "fa-solid fa-gift",
      "fa-solid fa-box",
      "fa-solid fa-boxes",
      "fa-solid fa-box-open",
      "fa-solid fa-truck",
      "fa-solid fa-shipping-fast",
      "fa-solid fa-dolly",
      "fa-solid fa-warehouse",
      "fa-solid fa-store",
      "fa-solid fa-store-alt",
      "fa-solid fa-shop",
      "fa-solid fa-cash-register",
      "fa-solid fa-person",
      "fa-solid fa-people-group",
      "fa-solid fa-user-group",
      "fa-solid fa-users",
      "fa-solid fa-user-plus",
      "fa-solid fa-user-minus",
      "fa-solid fa-user-check",
      "fa-solid fa-user-times",
      "fa-solid fa-user-edit",
      "fa-solid fa-user-cog",
      "fa-solid fa-user-gear",
      "fa-solid fa-user-shield",
      "fa-solid fa-user-lock",
      "fa-solid fa-user-clock",
      "fa-solid fa-user-doctor",
      "fa-solid fa-user-nurse",
      "fa-solid fa-user-graduate",
      "fa-solid fa-user-tie",
      "fa-solid fa-user-astronaut",
      "fa-solid fa-user-ninja",
      "fa-solid fa-user-secret",
      "fa-solid fa-address-book",
      "fa-solid fa-address-card",
      "fa-solid fa-id-badge",
      "fa-solid fa-id-card",
      "fa-solid fa-signature",
      "fa-solid fa-passport",
      "fa-solid fa-vcard",
      "fa-solid fa-building",
      "fa-solid fa-city",
      "fa-solid fa-hotel",
      "fa-solid fa-house",
      "fa-solid fa-school",
      "fa-solid fa-university",
      "fa-solid fa-church",
      "fa-solid fa-mosque",
      "fa-solid fa-synagogue",
      "fa-solid fa-cross",
      "fa-solid fa-star-of-david",
      "fa-solid fa-star-and-crescent",
      "fa-solid fa-om",
      "fa-solid fa-dharmachakra",
      "fa-solid fa-yin-yang",
      "fa-solid fa-peace",
      "fa-solid fa-menorah",
      "fa-solid fa-ankh",
      "fa-solid fa-hamsa",
      "fa-solid fa-pray",
      "fa-solid fa-praying-hands",
      "fa-solid fa-hands",
      "fa-solid fa-hand",
      "fa-solid fa-hand-point-up",
      "fa-solid fa-hand-point-down",
      "fa-solid fa-hand-point-left",
      "fa-solid fa-hand-point-right",
      "fa-solid fa-hand-paper",
      "fa-solid fa-hand-rock",
      "fa-solid fa-hand-scissors",
      "fa-solid fa-hand-spock",
      "fa-solid fa-hand-lizard",
      "fa-solid fa-thumbs-up",
      "fa-solid fa-thumbs-down",
      "fa-solid fa-fist-raised",
      "fa-solid fa-hands-helping",
      "fa-solid fa-handshake",
      "fa-solid fa-hands-wash",
      "fa-solid fa-hands-bubbles",
      "fa-solid fa-hands-clapping",
      "fa-solid fa-sign-language",
      "fa-solid fa-american-sign-language-interpreting",
      "fa-solid fa-assistive-listening-systems",
      "fa-solid fa-braille",
      "fa-solid fa-blind",
      "fa-solid fa-wheelchair",
      "fa-solid fa-accessible-icon",
      "fa-solid fa-closed-captioning",
    ],
    regular: [
      "fa-regular fa-envelope",
      "fa-regular fa-user",
      "fa-regular fa-bell",
      "fa-regular fa-calendar",
      "fa-regular fa-heart",
      "fa-regular fa-star",
      "fa-regular fa-circle",
      "fa-regular fa-square",
      "fa-regular fa-file",
      "fa-regular fa-folder",
      "fa-regular fa-image",
      "fa-regular fa-comment",
      "fa-regular fa-comments",
      "fa-regular fa-message",
      "fa-regular fa-paper-plane",
      "fa-regular fa-clipboard",
      "fa-regular fa-copy",
      "fa-regular fa-paste",
      "fa-regular fa-save",
      "fa-regular fa-edit",
      "fa-regular fa-bookmark",
      "fa-regular fa-flag",
      "fa-regular fa-eye",
      "fa-regular fa-eye-slash",
      "fa-regular fa-thumbs-up",
      "fa-regular fa-thumbs-down",
      "fa-regular fa-check-square",
      "fa-regular fa-clock",
      "fa-regular fa-calendar-alt",
      "fa-regular fa-calendar-check",
      "fa-regular fa-calendar-minus",
      "fa-regular fa-calendar-plus",
      "fa-regular fa-calendar-times",
      "fa-regular fa-address-book",
      "fa-regular fa-address-card",
      "fa-regular fa-building",
      "fa-regular fa-credit-card",
      "fa-regular fa-file-alt",
      "fa-regular fa-file-archive",
      "fa-regular fa-file-audio",
      "fa-regular fa-file-code",
      "fa-regular fa-file-excel",
      "fa-regular fa-file-image",
      "fa-regular fa-file-pdf",
      "fa-regular fa-file-powerpoint",
      "fa-regular fa-file-video",
      "fa-regular fa-file-word",
      "fa-regular fa-folder-open",
      "fa-regular fa-frown",
      "fa-regular fa-meh",
      "fa-regular fa-smile",
      "fa-regular fa-grin",
      "fa-regular fa-grin-alt",
      "fa-regular fa-grin-beam",
      "fa-regular fa-grin-beam-sweat",
      "fa-regular fa-grin-hearts",
      "fa-regular fa-grin-squint",
      "fa-regular fa-grin-squint-tears",
      "fa-regular fa-grin-stars",
      "fa-regular fa-grin-tears",
      "fa-regular fa-grin-tongue",
      "fa-regular fa-grin-tongue-squint",
      "fa-regular fa-grin-tongue-wink",
      "fa-regular fa-grin-wink",
      "fa-regular fa-kiss",
      "fa-regular fa-kiss-beam",
      "fa-regular fa-kiss-wink-heart",
      "fa-regular fa-laugh",
      "fa-regular fa-laugh-beam",
      "fa-regular fa-laugh-squint",
      "fa-regular fa-laugh-wink",
      "fa-regular fa-sad-cry",
      "fa-regular fa-sad-tear",
      "fa-regular fa-smile-beam",
      "fa-regular fa-smile-wink",
      "fa-regular fa-surprise",
      "fa-regular fa-tired",
      "fa-regular fa-angry",
      "fa-regular fa-dizzy",
      "fa-regular fa-flushed",
      "fa-regular fa-grimace",
      "fa-regular fa-hand-lizard",
      "fa-regular fa-hand-paper",
      "fa-regular fa-hand-peace",
      "fa-regular fa-hand-point-down",
      "fa-regular fa-hand-point-left",
      "fa-regular fa-hand-point-right",
      "fa-regular fa-hand-point-up",
      "fa-regular fa-hand-pointer",
      "fa-regular fa-hand-rock",
      "fa-regular fa-hand-scissors",
      "fa-regular fa-hand-spock",
      "fa-regular fa-handshake",
      "fa-regular fa-hdd",
      "fa-regular fa-hospital",
      "fa-regular fa-hourglass",
      "fa-regular fa-id-badge",
      "fa-regular fa-id-card",
      "fa-regular fa-image",
      "fa-regular fa-images",
      "fa-regular fa-keyboard",
      "fa-regular fa-lemon",
      "fa-regular fa-life-ring",
      "fa-regular fa-lightbulb",
      "fa-regular fa-list-alt",
      "fa-regular fa-map",
      "fa-regular fa-money-bill-alt",
      "fa-regular fa-moon",
      "fa-regular fa-newspaper",
      "fa-regular fa-object-group",
      "fa-regular fa-object-ungroup",
      "fa-regular fa-paper-plane",
      "fa-regular fa-pause-circle",
      "fa-regular fa-play-circle",
      "fa-regular fa-plus-square",
      "fa-regular fa-question-circle",
      "fa-regular fa-registered",
      "fa-regular fa-save",
      "fa-regular fa-share-square",
      "fa-regular fa-snowflake",
      "fa-regular fa-star-half",
      "fa-regular fa-sticky-note",
      "fa-regular fa-stop-circle",
      "fa-regular fa-sun",
      "fa-regular fa-thumbs-down",
      "fa-regular fa-thumbs-up",
      "fa-regular fa-times-circle",
      "fa-regular fa-trash-alt",
      "fa-regular fa-user-circle",
      "fa-regular fa-window-close",
      "fa-regular fa-window-maximize",
      "fa-regular fa-window-minimize",
      "fa-regular fa-window-restore",
    ],
    brands: [
      "fa-brands fa-500px",
      "fa-brands fa-accessible-icon",
      "fa-brands fa-accusoft",
      "fa-brands fa-acquisitions-incorporated",
      "fa-brands fa-adn",
      "fa-brands fa-adobe",
      "fa-brands fa-adversal",
      "fa-brands fa-affiliatetheme",
      "fa-brands fa-airbnb",
      "fa-brands fa-algolia",
      "fa-brands fa-alipay",
      "fa-brands fa-amazon",
      "fa-brands fa-amazon-pay",
      "fa-brands fa-amilia",
      "fa-brands fa-android",
      "fa-brands fa-angellist",
      "fa-brands fa-angrycreative",
      "fa-brands fa-angular",
      "fa-brands fa-app-store",
      "fa-brands fa-app-store-ios",
      "fa-brands fa-apper",
      "fa-brands fa-apple",
      "fa-brands fa-apple-pay",
      "fa-brands fa-artstation",
      "fa-brands fa-asymmetrik",
      "fa-brands fa-atlassian",
      "fa-brands fa-audible",
      "fa-brands fa-autoprefixer",
      "fa-brands fa-avianex",
      "fa-brands fa-aviato",
      "fa-brands fa-aws",
      "fa-brands fa-bandcamp",
      "fa-brands fa-battle-net",
      "fa-brands fa-behance",
      "fa-brands fa-behance-square",
      "fa-brands fa-bimobject",
      "fa-brands fa-bitbucket",
      "fa-brands fa-bitcoin",
      "fa-brands fa-bity",
      "fa-brands fa-black-tie",
      "fa-brands fa-blackberry",
      "fa-brands fa-blogger",
      "fa-brands fa-blogger-b",
      "fa-brands fa-bluetooth",
      "fa-brands fa-bluetooth-b",
      "fa-brands fa-bootstrap",
      "fa-brands fa-btc",
      "fa-brands fa-buffer",
      "fa-brands fa-buromobelexperte",
      "fa-brands fa-buy-n-large",
      "fa-brands fa-buysellads",
      "fa-brands fa-canadian-maple-leaf",
      "fa-brands fa-cc-amazon-pay",
      "fa-brands fa-cc-amex",
      "fa-brands fa-cc-apple-pay",
      "fa-brands fa-cc-diners-club",
      "fa-brands fa-cc-discover",
      "fa-brands fa-cc-jcb",
      "fa-brands fa-cc-mastercard",
      "fa-brands fa-cc-paypal",
      "fa-brands fa-cc-stripe",
      "fa-brands fa-cc-visa",
      "fa-brands fa-centercode",
      "fa-brands fa-centos",
      "fa-brands fa-chrome",
      "fa-brands fa-chromecast",
      "fa-brands fa-cloudflare",
      "fa-brands fa-cloudscale",
      "fa-brands fa-cloudsmith",
      "fa-brands fa-cloudversify",
      "fa-brands fa-codepen",
      "fa-brands fa-codiepie",
      "fa-brands fa-confluence",
      "fa-brands fa-connectdevelop",
      "fa-brands fa-contao",
      "fa-brands fa-cotton-bureau",
      "fa-brands fa-cpanel",
      "fa-brands fa-creative-commons",
      "fa-brands fa-css3",
      "fa-brands fa-css3-alt",
      "fa-brands fa-cuttlefish",
      "fa-brands fa-d-and-d",
      "fa-brands fa-dashcube",
      "fa-brands fa-deezer",
      "fa-brands fa-delicious",
      "fa-brands fa-deploydog",
      "fa-brands fa-deskpro",
      "fa-brands fa-dev",
      "fa-brands fa-deviantart",
      "fa-brands fa-dhl",
      "fa-brands fa-diaspora",
      "fa-brands fa-digg",
      "fa-brands fa-digital-ocean",
      "fa-brands fa-discord",
      "fa-brands fa-discourse",
      "fa-brands fa-dochub",
      "fa-brands fa-docker",
      "fa-brands fa-draft2digital",
      "fa-brands fa-dribbble",
      "fa-brands fa-dropbox",
      "fa-brands fa-drupal",
      "fa-brands fa-dyalog",
      "fa-brands fa-earlybirds",
      "fa-brands fa-ebay",
      "fa-brands fa-edge",
      "fa-brands fa-elementor",
      "fa-brands fa-ello",
      "fa-brands fa-ember",
      "fa-brands fa-empire",
      "fa-brands fa-envira",
      "fa-brands fa-erlang",
      "fa-brands fa-ethereum",
      "fa-brands fa-etsy",
      "fa-brands fa-evernote",
      "fa-brands fa-expeditedssl",
      "fa-brands fa-facebook",
      "fa-brands fa-facebook-f",
      "fa-brands fa-facebook-messenger",
      "fa-brands fa-facebook-square",
      "fa-brands fa-fantasy-flight-games",
      "fa-brands fa-fedex",
      "fa-brands fa-fedora",
      "fa-brands fa-figma",
      "fa-brands fa-firefox",
      "fa-brands fa-firefox-browser",
      "fa-brands fa-first-order",
      "fa-brands fa-flickr",
      "fa-brands fa-flipboard",
      "fa-brands fa-fly",
      "fa-brands fa-font-awesome",
      "fa-brands fa-fonticons",
      "fa-brands fa-fort-awesome",
      "fa-brands fa-forumbee",
      "fa-brands fa-foursquare",
      "fa-brands fa-free-code-camp",
      "fa-brands fa-freebsd",
      "fa-brands fa-fulcrum",
      "fa-brands fa-galactic-republic",
      "fa-brands fa-galactic-senate",
      "fa-brands fa-get-pocket",
      "fa-brands fa-gg",
      "fa-brands fa-git",
      "fa-brands fa-git-alt",
      "fa-brands fa-github",
      "fa-brands fa-github-alt",
      "fa-brands fa-github-square",
      "fa-brands fa-gitkraken",
      "fa-brands fa-gitlab",
      "fa-brands fa-gitter",
      "fa-brands fa-glide",
      "fa-brands fa-gofore",
      "fa-brands fa-goodreads",
      "fa-brands fa-google",
      "fa-brands fa-google-drive",
      "fa-brands fa-google-pay",
      "fa-brands fa-google-play",
      "fa-brands fa-google-plus",
      "fa-brands fa-google-plus-g",
      "fa-brands fa-google-plus-square",
      "fa-brands fa-google-wallet",
      "fa-brands fa-gratipay",
      "fa-brands fa-grav",
      "fa-brands fa-gripfire",
      "fa-brands fa-grunt",
      "fa-brands fa-gulp",
      "fa-brands fa-hacker-news",
      "fa-brands fa-hackerrank",
      "fa-brands fa-hips",
      "fa-brands fa-hire-a-helper",
      "fa-brands fa-hooli",
      "fa-brands fa-hornbill",
      "fa-brands fa-hotjar",
      "fa-brands fa-houzz",
      "fa-brands fa-html5",
      "fa-brands fa-hubspot",
      "fa-brands fa-ideal",
      "fa-brands fa-imdb",
      "fa-brands fa-instagram",
      "fa-brands fa-intercom",
      "fa-brands fa-internet-explorer",
      "fa-brands fa-invision",
      "fa-brands fa-ioxhost",
      "fa-brands fa-itch-io",
      "fa-brands fa-itunes",
      "fa-brands fa-java",
      "fa-brands fa-jedi-order",
      "fa-brands fa-jenkins",
      "fa-brands fa-jira",
      "fa-brands fa-joget",
      "fa-brands fa-joomla",
      "fa-brands fa-js",
      "fa-brands fa-js-square",
      "fa-brands fa-jsfiddle",
      "fa-brands fa-kaggle",
      "fa-brands fa-keybase",
      "fa-brands fa-keycdn",
      "fa-brands fa-kickstarter",
      "fa-brands fa-laravel",
      "fa-brands fa-lastfm",
      "fa-brands fa-leanpub",
      "fa-brands fa-less",
      "fa-brands fa-line",
      "fa-brands fa-linkedin",
      "fa-brands fa-linkedin-in",
      "fa-brands fa-linode",
      "fa-brands fa-linux",
      "fa-brands fa-lyft",
      "fa-brands fa-magento",
      "fa-brands fa-mailchimp",
      "fa-brands fa-mandalorian",
      "fa-brands fa-markdown",
      "fa-brands fa-mastodon",
      "fa-brands fa-maxcdn",
      "fa-brands fa-mdb",
      "fa-brands fa-medapps",
      "fa-brands fa-medium",
      "fa-brands fa-medrt",
      "fa-brands fa-meetup",
      "fa-brands fa-megaport",
      "fa-brands fa-mendeley",
      "fa-brands fa-microblog",
      "fa-brands fa-microsoft",
      "fa-brands fa-mix",
      "fa-brands fa-mixcloud",
      "fa-brands fa-mixer",
      "fa-brands fa-mizuni",
      "fa-brands fa-modx",
      "fa-brands fa-monero",
      "fa-brands fa-napster",
      "fa-brands fa-neos",
      "fa-brands fa-nimblr",
      "fa-brands fa-node",
      "fa-brands fa-node-js",
      "fa-brands fa-npm",
      "fa-brands fa-ns8",
      "fa-brands fa-nutritionix",
      "fa-brands fa-odnoklassniki",
      "fa-brands fa-old-republic",
      "fa-brands fa-opencart",
      "fa-brands fa-openid",
      "fa-brands fa-opera",
      "fa-brands fa-optin-monster",
      "fa-brands fa-orcid",
      "fa-brands fa-osi",
      "fa-brands fa-page4",
      "fa-brands fa-pagelines",
      "fa-brands fa-palfed",
      "fa-brands fa-patreon",
      "fa-brands fa-paypal",
      "fa-brands fa-penny-arcade",
      "fa-brands fa-periscope",
      "fa-brands fa-phabricator",
      "fa-brands fa-phoenix-framework",
      "fa-brands fa-phoenix-squadron",
      "fa-brands fa-php",
      "fa-brands fa-pied-piper",
      "fa-brands fa-pinterest",
      "fa-brands fa-pinterest-p",
      "fa-brands fa-pinterest-square",
      "fa-brands fa-playstation",
      "fa-brands fa-product-hunt",
      "fa-brands fa-pushed",
      "fa-brands fa-python",
      "fa-brands fa-qq",
      "fa-brands fa-quinscape",
      "fa-brands fa-quora",
      "fa-brands fa-r-project",
      "fa-brands fa-raspberry-pi",
      "fa-brands fa-ravelry",
      "fa-brands fa-react",
      "fa-brands fa-reacteurope",
      "fa-brands fa-readme",
      "fa-brands fa-rebel",
      "fa-brands fa-red-river",
      "fa-brands fa-reddit",
      "fa-brands fa-reddit-alien",
      "fa-brands fa-reddit-square",
      "fa-brands fa-redhat",
      "fa-brands fa-renren",
      "fa-brands fa-replyd",
      "fa-brands fa-researchgate",
      "fa-brands fa-resolving",
      "fa-brands fa-rev",
      "fa-brands fa-rocketchat",
      "fa-brands fa-rockrms",
      "fa-brands fa-safari",
      "fa-brands fa-salesforce",
      "fa-brands fa-sass",
      "fa-brands fa-schlix",
      "fa-brands fa-scribd",
      "fa-brands fa-searchengin",
      "fa-brands fa-sellcast",
      "fa-brands fa-sellsy",
      "fa-brands fa-servicestack",
      "fa-brands fa-shirtsinbulk",
      "fa-brands fa-shopify",
      "fa-brands fa-shopware",
      "fa-brands fa-simplybuilt",
      "fa-brands fa-sistrix",
      "fa-brands fa-sith",
      "fa-brands fa-sketch",
      "fa-brands fa-skyatlas",
      "fa-brands fa-skype",
      "fa-brands fa-slack",
      "fa-brands fa-slack-hash",
      "fa-brands fa-slideshare",
      "fa-brands fa-snapchat",
      "fa-brands fa-snapchat-ghost",
      "fa-brands fa-snapchat-square",
      "fa-brands fa-soundcloud",
      "fa-brands fa-sourcetree",
      "fa-brands fa-speakap",
      "fa-brands fa-speaker-deck",
      "fa-brands fa-spotify",
      "fa-brands fa-squarespace",
      "fa-brands fa-stack-exchange",
      "fa-brands fa-stack-overflow",
      "fa-brands fa-stackpath",
      "fa-brands fa-staylinked",
      "fa-brands fa-steam",
      "fa-brands fa-steam-square",
      "fa-brands fa-steam-symbol",
      "fa-brands fa-sticker-mule",
      "fa-brands fa-strava",
      "fa-brands fa-stripe",
      "fa-brands fa-stripe-s",
      "fa-brands fa-studiovinari",
      "fa-brands fa-stumbleupon",
      "fa-brands fa-stumbleupon-circle",
      "fa-brands fa-superpowers",
      "fa-brands fa-supple",
      "fa-brands fa-suse",
      "fa-brands fa-swift",
      "fa-brands fa-symfony",
      "fa-brands fa-teamspeak",
      "fa-brands fa-telegram",
      "fa-brands fa-telegram-plane",
      "fa-brands fa-tencent-weibo",
      "fa-brands fa-the-red-yeti",
      "fa-brands fa-themeco",
      "fa-brands fa-themeisle",
      "fa-brands fa-think-peaks",
      "fa-brands fa-tiktok",
      "fa-brands fa-trade-federation",
      "fa-brands fa-trello",
      "fa-brands fa-tripadvisor",
      "fa-brands fa-tumblr",
      "fa-brands fa-tumblr-square",
      "fa-brands fa-twitch",
      "fa-brands fa-twitter",
      "fa-brands fa-twitter-square",
      "fa-brands fa-typo3",
      "fa-brands fa-uber",
      "fa-brands fa-ubuntu",
      "fa-brands fa-uikit",
      "fa-brands fa-umbraco",
      "fa-brands fa-uniregistry",
      "fa-brands fa-unity",
      "fa-brands fa-unsplash",
      "fa-brands fa-untappd",
      "fa-brands fa-ups",
      "fa-brands fa-usb",
      "fa-brands fa-usps",
      "fa-brands fa-ussunnah",
      "fa-brands fa-vaadin",
      "fa-brands fa-viacoin",
      "fa-brands fa-viadeo",
      "fa-brands fa-viadeo-square",
      "fa-brands fa-viber",
      "fa-brands fa-vimeo",
      "fa-brands fa-vimeo-square",
      "fa-brands fa-vimeo-v",
      "fa-brands fa-vine",
      "fa-brands fa-vk",
      "fa-brands fa-vnv",
      "fa-brands fa-vuejs",
      "fa-brands fa-waze",
      "fa-brands fa-weebly",
      "fa-brands fa-weibo",
      "fa-brands fa-weixin",
      "fa-brands fa-whatsapp",
      "fa-brands fa-whatsapp-square",
      "fa-brands fa-whmcs",
      "fa-brands fa-wikipedia-w",
      "fa-brands fa-windows",
      "fa-brands fa-wix",
      "fa-brands fa-wizards-of-the-coast",
      "fa-brands fa-wolf-pack-battalion",
      "fa-brands fa-wordpress",
      "fa-brands fa-wordpress-simple",
      "fa-brands fa-wpbeginner",
      "fa-brands fa-wpexplorer",
      "fa-brands fa-wpforms",
      "fa-brands fa-wpressr",
      "fa-brands fa-xbox",
      "fa-brands fa-xing",
      "fa-brands fa-xing-square",
      "fa-brands fa-y-combinator",
      "fa-brands fa-yahoo",
      "fa-brands fa-yammer",
      "fa-brands fa-yandex",
      "fa-brands fa-yandex-international",
      "fa-brands fa-yarn",
      "fa-brands fa-yelp",
      "fa-brands fa-yoast",
      "fa-brands fa-youtube",
      "fa-brands fa-youtube-square",
      "fa-brands fa-zhihu",
    ],
  };

  // Function to generate the icon grid
  function generateIconGrid(category = "all") {
    const iconGrid = $("#icon-grid");
    iconGrid.empty();

    let iconsToShow = [];

    if (category === "all") {
      iconsToShow = [...icons.solid, ...icons.regular, ...icons.brands];
    } else {
      iconsToShow = icons[category] || [];
    }

    // Filter by search if necessary
    const searchTerm = $("#icon-search").val().toLowerCase();
    if (searchTerm) {
      iconsToShow = iconsToShow.filter((icon) =>
        icon.toLowerCase().includes(searchTerm)
      );
    }

    // Limit to 200 icons for performance reasons
    const limitedIcons = iconsToShow.slice(0, 200);

    // Generate HTML elements for each icon
    limitedIcons.forEach((icon) => {
      const iconName = icon.split(" ").pop().replace("fa-", "");
      const iconItem = $(`
                        <div class="icon-item" data-icon="${icon}" onclick="selectIcon('${icon}')">
                            <i class="${icon}"></i>
                            <span>${iconName}</span>
                        </div>
                    `);
      iconGrid.append(iconItem);
    });

    // If no icon is found
    if (limitedIcons.length === 0) {
      iconGrid.append(
        '<div style="grid-column: 1 / -1; text-align: center; padding: 20px;">No icons found</div>'
      );
    }
  }

  // Generate the initial icon grid
  generateIconGrid();

  // Filter icons by category
  $(".icon-category").click(function () {
    $(".icon-category").removeClass("active");
    $(this).addClass("active");
    generateIconGrid($(this).data("category"));
  });

  // Filter icons by search
  $("#icon-search").on("input", function () {
    const category = $(".icon-category.active").data("category");
    generateIconGrid(category);
  });
}