zane
/
pogCocos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964
							<!DOCTYPE html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>POG Airdrop</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.23/full.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.min.js"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

      * {
        font-family: "Inter", sans-serif;
      }

      .gradient-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .gradient-bg-2 {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .gradient-bg-3 {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .card-hover {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }

      .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f7fafc;
      }

      .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
      }

      .scrollbar-thin::-webkit-scrollbar-track {
        background: #f7fafc;
      }

      .scrollbar-thin::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 3px;
      }

      .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }

      .animate-bounce-slow {
        animation: bounce 2s infinite;
      }

      .glass-effect {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      .neon-glow {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
      }

      .floating {
        animation: floating 3s ease-in-out infinite;
      }

      @keyframes floating {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-10px);
        }
        100% {
          transform: translateY(0px);
        }
      }

      .shimmer {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.4),
          transparent
        );
        background-size: 200% 100%;
        animation: shimmer 2s infinite;
      }

      @keyframes shimmer {
        0% {
          background-position: -200% 0;
        }
        100% {
          background-position: 200% 0;
        }
      }

      .stat-card {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.05) 100%
        );
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .reward-item {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transition: all 0.3s ease;
      }

      .reward-item:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
      }

      .address-item {
        transition: all 0.3s ease;
      }

      .address-item:hover {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        transform: translateX(5px);
      }

      .btn-glow {
        position: relative;
        overflow: hidden;
      }

      .btn-glow::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.4),
          transparent
        );
        transition: left 0.5s;
      }

      .btn-glow:hover::before {
        left: 100%;
      }

      .item-icon {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
      }

      .item-icon:hover {
        transform: scale(1.1);
      }

      .icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .icon-container:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
      }
    </style>
  </head>
  <body
    class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900"
  >
    <div id="app" class="container mx-auto p-4 md:p-8">
      <!-- Animated Background -->
      <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div
          class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-bounce-slow"
        ></div>
        <div
          class="absolute -bottom-40 -left-40 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-bounce-slow"
          style="animation-delay: 1s"
        ></div>
        <div
          class="absolute top-40 left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-bounce-slow"
          style="animation-delay: 2s"
        ></div>
      </div>

      <!-- Header -->
      <div class="text-center mb-12 relative z-10">
        <div class="floating mb-4">
          <i class="fas fa-rocket text-6xl text-white mb-4"></i>
        </div>
        <h1 class="text-5xl font-bold text-white mb-4 neon-glow">
          POG Airdrop
        </h1>
        <p class="text-xl text-purple-200 shimmer">
          Mass Reward Distribution System
        </p>
        <div class="flex justify-center mt-6 space-x-4">
          <div class="stat-card rounded-lg p-4 text-white">
            <div class="text-2xl font-bold">{{ addressList.length }}</div>
            <div class="text-sm opacity-80">Addresses</div>
          </div>
          <div class="stat-card rounded-lg p-4 text-white">
            <div class="text-2xl font-bold">{{ totalRewardCount }}</div>
            <div class="text-sm opacity-80">Rewards</div>
          </div>
          <div class="stat-card rounded-lg p-4 text-white">
            <div class="text-2xl font-bold">
              {{ totalRewardCount * addressList.length }}
            </div>
            <div class="text-sm opacity-80">Total</div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 relative z-10">
        <!-- Left: Reward Management -->
        <div class="space-y-8">
          <!-- Reward Management -->
          <div class="glass-effect rounded-2xl shadow-2xl card-hover">
            <div class="p-6">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-white">
                  <i class="fas fa-gift text-purple-300 mr-3"></i>
                  Reward Management
                </h2>
                <div class="badge badge-primary badge-lg animate-pulse-slow">
                  {{ waitAddRewardList.length }} Types
                </div>
              </div>

              <div
                v-if="waitAddRewardList.length === 0"
                class="text-center py-12"
              >
                <div class="text-8xl mb-6 animate-bounce-slow">🎁</div>
                <p class="text-purple-200 text-lg">No rewards added yet</p>
                <p class="text-purple-300 text-sm mt-2">
                  Click the button below to add rewards
                </p>
              </div>

              <div
                v-else
                class="space-y-4 max-h-80 overflow-y-auto scrollbar-thin"
              >
                <div
                  v-for="reward in waitAddRewardList"
                  :key="reward.id"
                  class="reward-item rounded-xl p-4 border border-white/20"
                >
                  <div class="flex justify-between items-center">
                    <div class="flex items-center space-x-4">
                      <div class="w-12 h-12 icon-container backdrop-blur-sm">
                        <img
                          :src="getItemIcon(reward.id)"
                          :alt="getItemName(reward.id)"
                          class="w-8 h-8 item-icon"
                          @error="handleImageError"
                        />
                      </div>
                      <div>
                        <div class="font-semibold text-lg">
                          {{ getItemName(reward.id) }}
                        </div>
                        <div class="text-sm opacity-80">
                          {{ reward.count }} per address
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <input
                        type="number"
                        v-model="reward.count"
                        min="1"
                        class="input input-bordered input-sm w-20 text-center bg-white/20 border-white/30 text-white placeholder-white/50"
                        @change="updateRewardCount(reward.id, reward.count)"
                      />
                      <button
                        class="btn btn-circle btn-sm bg-red-500 border-0 hover:bg-red-600"
                        @click="removeWaitReward(reward.id)"
                      >
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="text-center mt-6">
                <button
                  class="btn btn-primary btn-lg gradient-bg-2 border-0 text-white shadow-lg btn-glow"
                  @click="showAddRewardDialog = true"
                >
                  <i class="fas fa-plus mr-2"></i>
                  Add Reward
                </button>
              </div>
            </div>
          </div>

          <!-- Send Preview -->
          <div class="glass-effect rounded-2xl shadow-2xl card-hover">
            <div class="p-6">
              <h2 class="text-2xl font-bold text-white mb-6">
                <i class="fas fa-chart-line text-blue-300 mr-3"></i>
                Send Preview
              </h2>

              <!-- Statistics -->
              <div class="grid grid-cols-3 gap-4 mb-8">
                <div class="stat-card rounded-xl p-4 text-center">
                  <div class="text-3xl font-bold text-white mb-1">
                    {{ addressList.length }}
                  </div>
                  <div class="text-sm text-purple-200">Addresses</div>
                </div>
                <div class="stat-card rounded-xl p-4 text-center">
                  <div class="text-3xl font-bold text-white mb-1">
                    {{ totalRewardCount }}
                  </div>
                  <div class="text-sm text-purple-200">Rewards</div>
                </div>
                <div class="stat-card rounded-xl p-4 text-center">
                  <div class="text-3xl font-bold text-white mb-1">
                    {{ totalRewardCount * addressList.length }}
                  </div>
                  <div class="text-sm text-purple-200">Total</div>
                </div>
              </div>

              <!-- Item Summary -->
              <div v-if="waitAddRewardList.length > 0">
                <h3 class="text-xl font-semibold text-white mb-4">
                  Item Summary
                </h3>
                <div class="space-y-3 max-h-60 overflow-y-auto scrollbar-thin">
                  <div
                    v-for="reward in waitAddRewardList"
                    :key="reward.id"
                    class="flex justify-between items-center p-3 bg-white/10 rounded-lg backdrop-blur-sm"
                  >
                    <div class="flex items-center space-x-3">
                      <div class="w-8 h-8 icon-container">
                        <img
                          :src="getItemIcon(reward.id)"
                          :alt="getItemName(reward.id)"
                          class="w-6 h-6 item-icon"
                          @error="handleImageError"
                        />
                      </div>
                      <span class="font-medium text-white"
                        >{{ getItemName(reward.id) }}</span
                      >
                    </div>
                    <div class="flex items-center space-x-2">
                      <span class="text-sm text-purple-200"
                        >{{ reward.count }} × {{ addressList.length }}</span
                      >
                      <span class="font-bold text-yellow-300"
                        >= {{ reward.count * addressList.length }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right: Address Management -->
        <div class="space-y-8">
          <!-- Address Input -->
          <div class="glass-effect rounded-2xl shadow-2xl card-hover">
            <div class="p-6">
              <h2 class="text-2xl font-bold text-white mb-6">
                <i class="fas fa-users text-green-300 mr-3"></i>
                Address Management
              </h2>

              <div class="form-control">
                <label class="label">
                  <span class="label-text font-medium text-white"
                    >Wallet Address List</span
                  >
                  <span class="label-text-alt text-purple-300"
                    >{{ addressList.length }} addresses</span
                  >
                </label>
                <textarea
                  v-model="waitInputAddresses"
                  rows="8"
                  placeholder="Enter wallet addresses, one per line&#10;Example:&#10;0x1234567890abcdef...&#10;0xabcdef1234567890..."
                  class="textarea textarea-bordered w-full font-mono text-sm bg-white/10 border-white/30 text-white placeholder-white/50"
                  @input="parseAddresses"
                ></textarea>
                <label class="label">
                  <span class="label-text-alt text-purple-200"
                    >Support batch paste, one address per line</span
                  >
                </label>
              </div>

              <!-- Quick Actions -->
              <div class="flex flex-wrap gap-2 mt-6">
                <button
                  class="btn btn-sm btn-outline border-white/30 text-white hover:bg-white/10"
                  @click="clearAddresses"
                >
                  <i class="fas fa-trash mr-1"></i> Clear
                </button>
                <button
                  class="btn btn-sm btn-outline border-white/30 text-white hover:bg-white/10"
                  @click="exportAddresses"
                >
                  <i class="fas fa-download mr-1"></i> Export
                </button>
                <button
                  class="btn btn-sm btn-outline border-white/30 text-white hover:bg-white/10"
                  @click="importAddresses"
                >
                  <i class="fas fa-upload mr-1"></i> Import
                </button>
              </div>
            </div>
          </div>

          <!-- Address List -->
          <div class="glass-effect rounded-2xl shadow-2xl card-hover">
            <div class="p-6">
              <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-white">
                  <i class="fas fa-list text-orange-300 mr-3"></i>
                  Address List
                </h2>
                <div class="flex items-center space-x-3">
                  <input
                    type="text"
                    v-model="searchAddress"
                    placeholder="Search addresses..."
                    class="input input-bordered input-sm w-48 bg-white/10 border-white/30 text-white placeholder-white/50"
                  />
                  <div class="badge badge-outline border-white/30 text-white">
                    {{ filteredAddresses.length }}/{{ addressList.length }}
                  </div>
                </div>
              </div>

              <div v-if="addressList.length === 0" class="text-center py-12">
                <div class="text-8xl mb-6 animate-bounce-slow">👤</div>
                <p class="text-purple-200 text-lg">No addresses yet</p>
                <p class="text-purple-300 text-sm mt-2">
                  Please enter addresses above
                </p>
              </div>

              <div v-else class="max-h-80 overflow-y-auto scrollbar-thin">
                <div
                  v-for="(address, index) in filteredAddresses"
                  :key="index"
                  class="address-item flex justify-between items-center p-3 rounded-lg mb-2 bg-white/5 backdrop-blur-sm"
                >
                  <div class="flex items-center space-x-4">
                    <div
                      class="w-8 h-8 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full flex items-center justify-center text-xs font-bold text-white"
                    >
                      {{ index + 1 }}
                    </div>
                    <div class="font-mono text-sm text-white">
                      {{ address }}
                    </div>
                  </div>
                  <button
                    class="btn btn-circle btn-sm bg-red-500 border-0 hover:bg-red-600"
                    @click="removeAddress(index)"
                  >
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Bottom Send Button -->
      <div class="mt-12 text-center relative z-10">
        <button
          class="btn btn-primary btn-xl gradient-bg-3 border-0 text-white shadow-2xl btn-glow neon-glow"
          @click="sendAllRewards"
          :disabled="addressList.length === 0 || waitAddRewardList.length === 0"
        >
          <i class="fas fa-rocket mr-3 animate-bounce-slow"></i>
          Launch Airdrop ({{ totalRewardCount * addressList.length }} rewards)
        </button>
      </div>

      <!-- Add Reward Modal -->
      <div class="modal" :class="{ 'modal-open': showAddRewardDialog }">
        <div class="modal-box max-w-md glass-effect border border-white/20">
          <h3 class="font-bold text-2xl mb-6 text-white">
            <i class="fas fa-gift text-purple-300 mr-2"></i>
            Add Reward
          </h3>
          <div class="space-y-6">
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium text-white"
                  >Select Item</span
                >
              </label>
              <div
                class="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto scrollbar-thin"
              >
                <div
                  v-for="item in staticGoods"
                  :key="item.id"
                  @click="selectedReward = item.id"
                  :class="[
                      'p-3 rounded-lg border-2 cursor-pointer transition-all duration-200',
                      selectedReward == item.id 
                        ? 'border-purple-400 bg-purple-500/20' 
                        : 'border-white/20 bg-white/5 hover:bg-white/10'
                    ]"
                >
                  <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 icon-container">
                      <img
                        :src="getItemIcon(item.id)"
                        :alt="item.name"
                        class="w-6 h-6 item-icon"
                        @error="handleImageError"
                      />
                    </div>
                    <div>
                      <div class="font-medium text-white text-sm">
                        {{ item.name }}
                      </div>
                      <div class="text-xs text-purple-200">
                        Stock: {{ item.count }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium text-white"
                  >Quantity per Address</span
                >
              </label>
              <input
                type="number"
                v-model="rewardQuantity"
                min="1"
                class="input input-bordered w-full bg-white/10 border-white/30 text-white placeholder-white/50"
                placeholder="Enter quantity"
              />
            </div>
          </div>
          <div class="modal-action">
            <button
              class="btn btn-primary gradient-bg-2 border-0 text-white"
              @click="addRewardConfirm"
              :disabled="!selectedReward || !rewardQuantity || rewardQuantity <= 0"
            >
              <i class="fas fa-check mr-2"></i>
              Add Reward
            </button>
            <button class="btn btn-ghost text-white" @click="closeModal">
              Cancel
            </button>
          </div>
        </div>
        <div class="modal-backdrop" @click="closeModal"></div>
      </div>

      <!-- Toast Container -->
      <div class="toast toast-top toast-end">
        <div v-if="toast.show" :class="['alert', toast.type, 'glass-effect']">
          <div>
            <span class="text-white">{{ toast.message }}</span>
          </div>
        </div>
      </div>
    </div>

    <script>
      const { createApp } = Vue;
      const API_BASE_URL = "http://54.169.180.142:10234";

      const Toast = {
        template: `
        <div class="toast toast-top toast-end">
          <div v-if="show" :class="['alert', type, 'glass-effect']">
            <div>
              <span class="text-white">{{ message }}</span>
            </div>
          </div>
        </div>
      `,
        props: ["show", "type", "message"],
      };

      createApp({
        data() {
          return {
            waitInputAddresses: "",
            addressList: [],
            waitAddRewardList: [],
            showAddRewardDialog: false,
            selectedReward: "",
            rewardQuantity: "",
            searchAddress: "",
            staticGoods: [],
            toast: {
              show: false,
              type: "alert-info",
              message: "",
            },
          };
        },
        computed: {
          totalRewardCount() {
            return this.waitAddRewardList.reduce(
              (total, reward) => total + reward.count,
              0
            );
          },
          filteredAddresses() {
            if (!this.searchAddress) return this.addressList;
            return this.addressList.filter((addr) =>
              addr.toLowerCase().includes(this.searchAddress.toLowerCase())
            );
          },
        },
        components: {
          Toast,
        },
        methods: {
          // Parse addresses
          parseAddresses() {
            if (this.waitInputAddresses.trim()) {
              const addresses = this.waitInputAddresses
                .split("\n")
                .map((addr) => addr.trim())
                .filter((addr) => addr && addr.length > 0);
              this.addressList = addresses;
            } else {
              this.addressList = [];
            }
          },

          // Remove address
          removeAddress(index) {
            this.addressList.splice(index, 1);
            this.updateAddressInput();
            this.showToast(`Address removed`, "alert-info");
          },

          // Update address input
          updateAddressInput() {
            this.waitInputAddresses = this.addressList.join("\n");
          },

          // Clear addresses
          clearAddresses() {
            this.addressList = [];
            this.waitInputAddresses = "";
            this.showToast("All addresses cleared", "alert-info");
          },

          // Export addresses
          exportAddresses() {
            if (this.addressList.length === 0) {
              this.showToast("No addresses to export", "alert-error");
              return;
            }
            const text = this.addressList.join("\n");
            const blob = new Blob([text], { type: "text/plain" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = `addresses_${
              new Date().toISOString().split("T")[0]
            }.txt`;
            a.click();
            URL.revokeObjectURL(url);
            this.showToast(
              `Exported ${this.addressList.length} addresses`,
              "alert-success"
            );
          },

          // Import addresses
          importAddresses() {
            const input = document.createElement("input");
            input.type = "file";
            input.accept = ".txt,.csv";
            input.onchange = (e) => {
              const file = e.target.files[0];
              if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                  const content = e.target.result;
                  this.waitInputAddresses = content;
                  this.parseAddresses();
                  this.showToast(
                    `Imported ${this.addressList.length} addresses`,
                    "alert-success"
                  );
                };
                reader.readAsText(file);
              }
            };
            input.click();
          },

          // Add reward confirmation
          addRewardConfirm() {
            if (
              this.selectedReward &&
              this.rewardQuantity &&
              this.rewardQuantity > 0
            ) {
              const itemId = parseInt(this.selectedReward);
              const count = parseInt(this.rewardQuantity);

              // Check if item already exists
              const existingIndex = this.waitAddRewardList.findIndex(
                (item) => item.id === itemId
              );

              if (existingIndex > -1) {
                // If exists, increase quantity
                this.waitAddRewardList[existingIndex].count += count;
                this.showToast(
                  `Added ${count} more ${this.getItemName(itemId)}`,
                  "alert-success"
                );
              } else {
                // If not exists, add new item
                this.waitAddRewardList.push({
                  id: itemId,
                  count: count,
                });
                this.showToast(
                  `Added ${count} ${this.getItemName(itemId)}`,
                  "alert-success"
                );
              }

              this.closeModal();
            }
          },

          // Update reward count
          updateRewardCount(id, count) {
            const reward = this.waitAddRewardList.find(
              (item) => item.id === id
            );
            if (reward && count > 0) {
              reward.count = parseInt(count);
              this.showToast(
                `Updated ${this.getItemName(id)} quantity to ${count}`,
                "alert-info"
              );
            }
          },

          // Remove reward
          removeWaitReward(id) {
            const index = this.waitAddRewardList.findIndex(
              (item) => item.id === id
            );
            if (index > -1) {
              const removedReward = this.waitAddRewardList.splice(index, 1)[0];
              this.showToast(
                `Removed ${removedReward.count} ${this.getItemName(id)}`,
                "alert-info"
              );
            }
          },

          // Get item name
          getItemName(id) {
            const item = this.staticGoods.find((item) => item.id == id);
            return item ? item.name : `Unknown Item (${id})`;
          },

          // Get item icon
          getItemIcon(id) {
            const item = this.staticGoods.find((item) => item.id == id);
            if (item && item.icon) {
              return `img/${item.icon}.png`;
            }
            return "img/default_icon.png";
          },

          // Handle image error
          handleImageError(event) {
            // Replace with fallback icon or hide the image
            event.target.style.display = "none";
            const parent = event.target.parentElement;
            if (parent) {
              parent.innerHTML =
                '<i class="fas fa-question text-white/50"></i>';
            }
          },

          // Send all rewards
          sendAllRewards() {
            if (this.addressList.length === 0) {
              this.showToast(
                "Please add wallet addresses first",
                "alert-error"
              );
              return;
            }

            if (this.waitAddRewardList.length === 0) {
              this.showToast("Please add rewards first", "alert-error");
              return;
            }

            // Build send data
            const sendData = {
              addresses: this.addressList,
              rewards: this.waitAddRewardList,
              totalAddresses: this.addressList.length,
              totalRewards: this.totalRewardCount,
              rewardTypes: this.waitAddRewardList.length,
            };

            console.log("Send data:", sendData);

            // Here you can add actual API call
            // Example: call send API
            this.showToast(
              `Preparing to send ${this.totalRewardCount} rewards to ${this.addressList.length} addresses`,
              "alert-info"
            );

            // Simulate sending process
            setTimeout(() => {
              this.showToast(
                "Airdrop completed successfully!",
                "alert-success"
              );
              // You can clear lists or keep data after sending
            }, 2000);
          },

          closeModal() {
            this.showAddRewardDialog = false;
            this.selectedReward = "";
            this.rewardQuantity = "";
          },

          showToast(message, type = "alert-info") {
            this.toast = {
              show: true,
              type: type,
              message: message,
            };
            setTimeout(() => {
              this.toast.show = false;
            }, 3000);
          },
        },

        mounted() {
          const m = {
            1: {
              name: "POG",
              count: 100,
              icon: "icon_pog",
            },
            2: {
              name: "Diamond",
              count: 100,
              icon: "icon_gem",
            },
            3: {
              name: "GAME_SHARD",
              count: 100,
              icon: "icon_puzzle",
            },
            5: {
              name: "CRIT_CARD",
              count: 100,
              icon: "icon_crit",
            },
            6: {
              name: "FREE_ITEM_BOX",
              count: 100,
              icon: "icon_item_box",
            },
            7: {
              name: "ITEM_BOX",
              count: 100,
              icon: "icon_item_box",
            },
            8: {
              name: "FREE_POG_BOX",
              count: 100,
              icon: "icon_pog_box",
            },
            9: {
              name: "POG_BOX",
              count: 100,
              icon: "icon_pog_box",
            },
          };
          this.staticGoods = [];
          for (const key in m) {
            this.staticGoods.push({
              id: key,
              name: m[key].name,
              count: m[key].count,
            });
          }

          console.log(this.staticGoods);
        },
      }).mount("#app");
    </script>
  </body>
</html>