{% extends 'partials/base.html' %}
{% load humanize %}
{% block content %}

<style>
    #marketplace {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="p-3 sm:p-4 lg:p-6 pb-32 overflow-y-auto h-full text-xs sm:text-sm">
  <div
    x-data="{ showFilters: false }"
    class="bg-white dark:bg-gray-900 min-h-screen py-6 sm:px-6 lg:px-8 text-gray-800 dark:text-gray-200"
  >
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1
          class="text-2xl sm:text-3xl font-bold text-orange-600 dark:text-orange-400"
        >
          🛍️ Marketplace
        </h1>
        <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
          Browse and buy available products instantly
        </p>
      </div>
    </div>

    <!-- Search bar + Filter toggle (mobile) -->
    <div class="flex items-center gap-2 mb-6 lg:hidden">
      <form method="POST" class="flex-1">
          {% csrf_token %}
        <input
          type="text"
          name="search"
          value=""
          class="w-full px-4 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
          placeholder="🔍 Search products..."
        />
      </form>
      <button
        @click="showFilters = true"
        class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white"
      >
        <i class="fas fa-filter"></i>
      </button>
    </div>

    <!-- Main content layout -->
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- Left Filter Sidebar (desktop only) -->
      <aside
        class="hidden lg:block w-full lg:w-64 bg-gray-50 dark:bg-gray-800 text-sm rounded-xl shadow p-4"
      >
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">
          Account Category
        </h2>
        <form method="POST" class="space-y-4">
            {% csrf_token %}
          <div
            class="border-b border-gray-300 dark:border-gray-700 pb-3 space-y-2"
          >
            <label class="flex items-center gap-2">
              <input
                type="radio"
                name="category"
                value="all"
                class="accent-orange-600"
                checked=""
              />
              All Categories
            </label>
            {% for c in c %}
            <label class="flex items-center gap-2">
              <input
                type="radio"
                name="category"
                value="{{ c.id }}"
                class="accent-orange-600"
              />
              {{ c.name }} ({{ c.log_count }})
            </label>
            {% endfor %}
          </div>

          <!-- Price -->
          <div class="space-y-2">
            <label class="font-medium text-gray-800 dark:text-gray-100 block"
              >Price range</label
            >
            <div class="flex items-center gap-2">
              <input
                type="number"
                name="min_price"
                placeholder="Min"
                value=""
                class="w-full px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-xs"
              />
              <input
                type="number"
                name="max_price"
                placeholder="Max"
                value=""
                class="w-full px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-xs"
              />
            </div>
          </div>

          <button
            type="submit"
            class="w-full bg-orange-600 text-white py-2 rounded text-sm hover:bg-orange-700"
          >
            Show Accounts
          </button>
        </form>
      </aside>

      <!-- Mobile Slide-in Filter -->
      <div
        x-show="showFilters"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 bg-black/40 flex justify-end lg:hidden mobile-filter-overlay"
        style="display: none"
      >
        <div
          class="w-3/4 max-w-sm bg-white dark:bg-gray-900 shadow-xl p-5 overflow-y-auto transform transition-transform duration-300"
          x-transition:enter="transform translate-x-full"
          x-transition:enter-start="transform translate-x-full"
          x-transition:enter-end="transform translate-x-0"
          x-transition:leave="transform translate-x-0"
          x-transition:leave-start="transform translate-x-0"
          x-transition:leave-end="transform translate-x-full"
          @click.away="showFilters = false"
        >
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">
              Filter
            </h2>
            <button
              @click="showFilters = false"
              class="text-gray-500 dark:text-gray-300 text-lg"
            >
              ×
            </button>
          </div>

          <form method="POST" class="space-y-4">
              {% csrf_token %}
            <!-- Categories -->
            <div class="space-y-2">
              <label class="block font-medium text-gray-800 dark:text-white"
                >Categories</label
              >
              <label class="flex items-center gap-2">
                <input
                  type="radio"
                  name="category"
                  value="all"
                  class="accent-orange-600"
                  checked=""
                />
                All Categories
              </label>
              {% for c in c %}
            <label class="flex items-center gap-2">
              <input
                type="radio"
                name="category"
                value="{{ c.id }}"
                class="accent-orange-600"
              />
              {{ c.name }} ({{ c.log_count }})
            </label>
            {% endfor %}
            </div>

            <!-- Price -->
            <div class="space-y-2">
              <label class="font-medium text-gray-800 dark:text-white block"
                >Price Range</label
              >
              <input
                type="number"
                name="min_price"
                placeholder="Min"
                value=""
                class="w-full px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-xs"
              />
              <input
                type="number"
                name="max_price"
                placeholder="Max"
                value=""
                class="w-full px-2 py-1 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-xs"
              />
            </div>

            <button
              type="submit"
              class="w-full bg-orange-600 text-white py-2 rounded text-sm hover:bg-orange-700"
            >
              Show Accounts
            </button>
            <button
              type="button"
              @click="showFilters = false"
              class="w-full text-orange-500 text-sm underline mt-2"
            >
              Close
            </button>
          </form>
        </div>
      </div>

      <!-- Right Content (keep your existing product grid here) -->
      <div class="flex-1">
        <!-- Product Grid -->

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-5">
            {% for l in l %}
          <div
            id="product-893"
            class="bg-white dark:bg-gray-800 rounded-xl shadow border border-gray-200 dark:border-gray-700 hover:shadow-md transition overflow-hidden"
          >
            <div class="p-4 border-b border-gray-100 dark:border-gray-600">
              <div class="flex items-center gap-3 mb-1">
                <img
                  src="{{ l.cat.image }}"
                  alt="{{ l.name }}"
                  class="w-8 h-8 rounded-full object-cover border border-gray-300 dark:border-gray-600"
                />
                <h3 class="font-bold text-sm text-gray-800 dark:text-gray-100">
                  {{ l.name }}
                </h3>
              </div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {% if l.description %}
                {{ l.description }}
                {% endif %}
              </p>

              <div class="mt-2 flex items-center justify-between text-xs">
                <span
                  class="bg-orange-100 text-orange-800 px-2 py-0.5 rounded font-medium"
                >
                  ₦{{ l.price|floatformat:2|intcomma }}
                </span>

                <span
                  class="flex items-center gap-1 text-orange-600 font-semibold"
                >
                  👑 Admin

                  <span class="ml-1" title="Verified Admin">
                    <svg
                      class="inline h-4 w-4 text-yellow-500"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <circle cx="12" cy="12" r="10" fill="#facc15"></circle>
                      <path
                        d="M10.5 13.8l-2-2 1.1-1.1 0.9 0.9 3.9-3.9 1.1 1.1-5 5z"
                        fill="white"
                      ></path>
                    </svg>
                  </span>
                </span>
              </div>
            </div>

            <form
              method="POST"
              action="/buy/{{ l.id }}"
              class="p-4 space-y-3 buy-form"
              data-product-id="{{ l.id }}"
            >
                {% csrf_token %}
              <div class="text-sm text-gray-700 dark:text-gray-200">
                Available: {{ l.qty }}
              </div>

              <div class="flex items-center gap-2">
                <label
                  class="text-xs font-medium text-gray-600 dark:text-gray-400"
                  >Qty:</label
                >
                <input
                  type="number"
                  name="quantity"
                  min="1"
                  max="{{ l.qty }}"
                  id="data-qty-{{ l.id }}"
                  class="w-20 border border-gray-300 dark:border-gray-600 px-2 py-1 rounded bg-white dark:bg-gray-900 text-sm"
                  value="1"
                />
              </div>

              <div
                class="max-h-28 overflow-y-auto space-y-2 text-xs text-gray-800 dark:text-gray-100"
              >
                  {% if l.from_api %}
                  {% elif l.from_api %}
                  {% else %}
                <div
                  class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded"
                  style="display: none;"
                >
                  <label class="flex items-center gap-2 flex-1">
                    <input
                      type="checkbox"
                      name="selected_ids[]"
                      value="3191"
                      class="accent-orange-600"
                      :disabled="submitting"
                      @change="updateQtyMode()"
                      @click="updateQtyMode()"
                    />
                    <span class="truncate">https://fb.com/100007366965945</span>
                  </label>
                  <div class="flex items-center gap-1">
                    <button
                      type="button"
                      onclick="copyToClipboard('https://fb.com/100007366965945')"
                      class="text-orange-500 hover:text-orange-600"
                      :disabled="submitting"
                    >
                      <i class="fas fa-copy text-xs"></i>
                    </button>
                    <a
                      href="https://fb.com/100007366965945"
                      target="_blank"
                      class="text-orange-500 hover:text-orange-600"
                    >
                      <i class="fas fa-eye text-xs"></i>
                    </a>
                  </div>
                </div>
                {% endif %}
              </div>
              {% if request.user.is_authenticated %}
              {% if l.qty == "0" %}
              <button
                type="submit"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
                 disabled
              >
                Buy Now
              </button>
              {% else %}
              {% if l.from_api %}
              <button
                type="button"
                id="btnAPIBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% elif l.from_acc %}
              <button
                type="button"
                id="accBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% else %}
              <button
                type="button"
                id="btnBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% endif %}
              {% endif %}
              {% else %}
              <a
                href="/user/signin"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </a>
              {% endif %}
            </form>
          </div>
          {% endfor %}
          
          {% for l in o %}
          <div
            id="product-893"
            class="bg-white dark:bg-gray-800 rounded-xl shadow border border-gray-200 dark:border-gray-700 hover:shadow-md transition overflow-hidden"
          >
            <div class="p-4 border-b border-gray-100 dark:border-gray-600">
              <div class="flex items-center gap-3 mb-1">
                <img
                  src="{{ l.cat.image }}"
                  alt="{{ l.name }}"
                  class="w-8 h-8 rounded-full object-cover border border-gray-300 dark:border-gray-600"
                />
                <h3 class="font-bold text-sm text-gray-800 dark:text-gray-100">
                  {{ l.name }}
                </h3>
              </div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {% if l.description %}
                {{ l.description }}
                {% endif %}
              </p>

              <div class="mt-2 flex items-center justify-between text-xs">
                <span
                  class="bg-orange-100 text-orange-800 px-2 py-0.5 rounded font-medium"
                >
                  ₦{{ l.price|floatformat:2|intcomma }}
                </span>

                <span
                  class="flex items-center gap-1 text-orange-600 font-semibold"
                >
                  👑 Admin

                  <span class="ml-1" title="Verified Admin">
                    <svg
                      class="inline h-4 w-4 text-yellow-500"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <circle cx="12" cy="12" r="10" fill="#facc15"></circle>
                      <path
                        d="M10.5 13.8l-2-2 1.1-1.1 0.9 0.9 3.9-3.9 1.1 1.1-5 5z"
                        fill="white"
                      ></path>
                    </svg>
                  </span>
                </span>
              </div>
            </div>

            <form
              method="POST"
              action="/buy/{{ l.id }}"
              class="p-4 space-y-3 buy-form"
              data-product-id="{{ l.id }}"
            >
                {% csrf_token %}
              <div class="text-sm text-gray-700 dark:text-gray-200">
                Available: {{ l.qty }}
              </div>

              <div class="flex items-center gap-2">
                <label
                  class="text-xs font-medium text-gray-600 dark:text-gray-400"
                  >Qty:</label
                >
                <input
                  type="number"
                  name="quantity"
                  min="1"
                  max="{{ l.qty }}"
                  id="data-qty-{{ l.id }}"
                  class="w-20 border border-gray-300 dark:border-gray-600 px-2 py-1 rounded bg-white dark:bg-gray-900 text-sm"
                  value="1"
                />
              </div>

              <div
                class="max-h-28 overflow-y-auto space-y-2 text-xs text-gray-800 dark:text-gray-100"
              >
                  {% if l.from_api %}
                  {% elif l.from_api %}
                  {% else %}
                <div
                  class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded"
                  style="display: none;"
                >
                  <label class="flex items-center gap-2 flex-1">
                    <input
                      type="checkbox"
                      name="selected_ids[]"
                      value="3191"
                      class="accent-orange-600"
                      :disabled="submitting"
                      @change="updateQtyMode()"
                      @click="updateQtyMode()"
                    />
                    <span class="truncate">https://fb.com/100007366965945</span>
                  </label>
                  <div class="flex items-center gap-1">
                    <button
                      type="button"
                      onclick="copyToClipboard('https://fb.com/100007366965945')"
                      class="text-orange-500 hover:text-orange-600"
                      :disabled="submitting"
                    >
                      <i class="fas fa-copy text-xs"></i>
                    </button>
                    <a
                      href="https://fb.com/100007366965945"
                      target="_blank"
                      class="text-orange-500 hover:text-orange-600"
                    >
                      <i class="fas fa-eye text-xs"></i>
                    </a>
                  </div>
                </div>
                {% endif %}
              </div>
              {% if request.user.is_authenitcated %}
              {% if l.qty == "0" %}
              <button
                type="submit"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
                 disabled
              >
                Buy Now
              </button>
              {% else %}
              {% if l.from_api %}
              <button
                type="button"
                id="btnAPIBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% elif l.from_acc %}
              <button
                type="button"
                id="accBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% else %}
              <button
                type="button"
                id="btnBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% endif %}
              {% endif %}
              {% else %}
              <a
                href="/user/signin"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </a>
              {% endif %}
            </form>
          </div>
          {% endfor %}
          
          {% for l in log %}
          <div
            id="product-893"
            class="bg-white dark:bg-gray-800 rounded-xl shadow border border-gray-200 dark:border-gray-700 hover:shadow-md transition overflow-hidden"
          >
            <div class="p-4 border-b border-gray-100 dark:border-gray-600">
              <div class="flex items-center gap-3 mb-1">
                <img
                  src="/media/{{ l.image }}"
                  alt="{{ l.name }}"
                  class="w-8 h-8 rounded-full object-cover border border-gray-300 dark:border-gray-600"
                />
                <h3 class="font-bold text-sm text-gray-800 dark:text-gray-100">
                  {{ l.name }}
                </h3>
              </div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {% if l.description %}
                {{ l.description }}
                {% endif %}
              </p>

              <div class="mt-2 flex items-center justify-between text-xs">
                <span
                  class="bg-orange-100 text-orange-800 px-2 py-0.5 rounded font-medium"
                >
                  ₦{{ l.price|floatformat:2|intcomma }}
                </span>

                <span
                  class="flex items-center gap-1 text-orange-600 font-semibold"
                >
                  👑 Admin

                  <span class="ml-1" title="Verified Admin">
                    <svg
                      class="inline h-4 w-4 text-yellow-500"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <circle cx="12" cy="12" r="10" fill="#facc15"></circle>
                      <path
                        d="M10.5 13.8l-2-2 1.1-1.1 0.9 0.9 3.9-3.9 1.1 1.1-5 5z"
                        fill="white"
                      ></path>
                    </svg>
                  </span>
                </span>
              </div>
            </div>

            <form
              method="POST"
              action="/buy/{{ l.id }}"
              class="p-4 space-y-3 buy-form"
              data-product-id="{{ l.id }}"
            >
                {% csrf_token %}
              <div class="text-sm text-gray-700 dark:text-gray-200">
                Available: {{ l.qty }}
              </div>

              <div class="flex items-center gap-2">
                <label
                  class="text-xs font-medium text-gray-600 dark:text-gray-400"
                  >Qty:</label
                >
                <input
                  type="number"
                  name="quantity"
                  min="1"
                  max="{{ l.qty }}"
                  id="data-qty-{{ l.id }}"
                  class="w-20 border border-gray-300 dark:border-gray-600 px-2 py-1 rounded bg-white dark:bg-gray-900 text-sm"
                  value="1"
                />
              </div>

              <div
                class="max-h-28 overflow-y-auto space-y-2 text-xs text-gray-800 dark:text-gray-100"
              >
                  {% if l.from_api %}
                  {% elif l.from_api %}
                  {% else %}
                  {% for d in l.profilelog.all %}
                    <div
                  class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded"
                >
                  <label class="flex items-center gap-2 flex-1">
                    <input
                      type="checkbox"
                      name="selected_ids[]"
                      value="3191"
                      class="accent-orange-600"
                      :disabled="submitting"
                      @change="updateQtyMode()"
                      @click="updateQtyMode()"
                    />
                    <span class="truncate">{{ d.details }}</span>
                  </label>
                  <div class="flex items-center gap-1">
                    <button
                      type="button"
                      onclick="copyToClipboard('{{ d.details }}')"
                      class="text-orange-500 hover:text-orange-600"
                      :disabled="submitting"
                    >
                      <i class="fas fa-copy text-xs"></i>
                    </button>
                    <a
                      href="{{ d.details }}"
                      target="_blank"
                      class="text-orange-500 hover:text-orange-600"
                    >
                      <i class="fas fa-eye text-xs"></i>
                    </a>
                  </div>
                </div>
                {% endfor %}
                {% endif %}
              </div>
              {% if request.user.is_authenitcated %}
              {% if l.qty == "0" %}
              <button
                type="submit"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
                 disabled
              >
                Buy Now
              </button>
              {% else %}
              {% if l.from_api %}
              <button
                type="button"
                id="btnAPIBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% elif l.from_acc %}
              <button
                type="button"
                id="accBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% else %}
              <button
                type="button"
                id="btnBuy"
                data-id="{{ l.id }}"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </button>
              {% endif %}
              {% endif %}
              {% else %}
              <a
                href="/user/signin"
                class="w-full bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white py-2 rounded text-sm font-medium flex items-center justify-center gap-2 transition-colors"
              >
                Buy Now
              </a>
              {% endif %}
            </form>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Ensure Alpine.js is loaded before DOM content
  document.addEventListener('alpine:init', () => {
    Alpine.data('marketplace', () => ({
      showFilters: false
    }));
  });

  document.addEventListener('DOMContentLoaded', () => {
    const hash = window.location.hash;
    if (hash && hash.startsWith('#product-')) {
      setTimeout(() => {
        const el = document.querySelector(hash);
        if (el) {
          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
          el.classList.add('ring-2', 'ring-orange-500', 'shadow-lg');
          setTimeout(() => el.classList.remove('ring-2', 'ring-orange-500', 'shadow-lg'), 3000);
        }
      }, 800);
    }

    ['category', 'sort'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.addEventListener('change', () => el.form.submit());
    });

    // Additional form validation for mobile devices
    document.querySelectorAll('.buy-form').forEach(form => {
      form.addEventListener('submit', function(e) {
        const checkboxes = this.querySelectorAll('input[type=checkbox][name^=selected_ids]:checked');
        const qtyInput = this.querySelector('input[name=quantity]');
        const qtyValue = qtyInput ? parseInt(qtyInput.value) || 0 : 0;
        
        console.log('Native form validation:', {
            checkedBoxes: checkboxes.length,
            quantityValue: qtyValue,
            quantityDisabled: qtyInput ? qtyInput.disabled : false
        });
        
        // Fallback validation for browsers where Alpine.js might not work
        if (checkboxes.length === 0 && (qtyValue <= 0 || isNaN(qtyValue))) {
            e.preventDefault();
            alert('Please select items or enter a valid quantity.');
            return false;
        }
      });
    });
  });

  function copyToClipboard(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text)
        .then(() => alert('Copied!'))
        .catch(() => fallbackCopyToClipboard(text));
    } else {
      fallbackCopyToClipboard(text);
    }
  }

  function fallbackCopyToClipboard(text) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
      document.execCommand('copy');
      alert('Copied!');
    } catch (err) {
      alert('Copy failed');
    } finally {
      document.body.removeChild(textArea);
    }
  }
</script>

{% if messages %}
{% for m in messages %}
{% if m == "error" %}
<script aria-hidden="true">
  
      Swal.fire({
      title: 'Error',
      text: "\ud83d\udeab Insufficient wallet balance.",
      icon: 'error',
      confirmButtonColor: '#FF5722'
    });
  
</script>
{% elif m == "qty" %}
<script aria-hidden="true">
  
      Swal.fire({
      title: 'Error',
      text: "\ud83d\udeab Not available",
      icon: 'error',
      confirmButtonColor: '#FF5722'
    });
  
</script>
{% elif m == "success" %}
<script aria-hidden="true">
  
      Swal.fire({
      title: 'Success',
      text: "\ud83d\udeab Purchased Successfully",
      icon: 'success',
      confirmButtonColor: '#FF5722'
    });
  
</script>
{% elif m == "avi" %}
<script aria-hidden="true">
  
      Swal.fire({
      title: 'Error',
      text: "\ud83d\udeab Error",
      icon: 'error',
      confirmButtonColor: '#FF5722'
    });
  
</script>
{% else%}
{% endif %}
{% endfor %}
{% endif %}

<script>
            $(document).on("click", "#btnBuy", function() {
            console.log("To Pay Button");
            $(this).html('<i class="fa fa-spinner fa-spin"></i> Loading...').prop('disabled', true);
            
            
            let id = $(this).attr("data-id")
            let qty = $(`#data-qty-${id}`).val()
            
            
            // $("#change_p").empty()
            // $("#change_p").append("₦",total)

            
            console.log("ID:", id);
            console.log("Qty:", qty);
            
            
            // window.location.href = 'https://www.example.com';
            
            $.ajax({
                url: '/place-order/',
                data: {
                    // "price": total,
                    "qty": qty,
                    // "name": name,
                    "id": id,
                },
                cache: false,
                success: function(res) {
                    if (res.bool === true){
                        console.log("Can Order");
                        
                    }
                    if (res.bool === false){
                        $('#btnBuy').html('Insufficient Funds').prop('disabled', true);
                        Swal.fire({
                          title: 'Error',
                          text: "\ud83d\udeab Insufficient wallet balance.",
                          icon: 'error',
                          confirmButtonColor: '#FF5722'
                        });
                        console.log("Can't Order");
                    }
                    if (res.qty === true){
                        console.log("Order Successful");
                        $('#btnBuy').html('Order Successful').prop('disabled', true);
                        // $("#purchased").empty()
                        // $("#purchased").append("Account Purchased")
                        // setTimeout(function() {
                        //     $("#popup").hide();
                        // }, 2000);
                        window.location.href = "https://preciselogs.net/history/";

                        // $.ajax({
                        //     url: '/order-email/',
                        // })
                    }
                    if (res.qty === false){
                        $('#btnBuy').html('The requested quantity is not available.').prop('disabled', true);
                        Swal.fire({
                          title: 'Error',
                          text: "\ud83d\udeab Not Available",
                          icon: 'error',
                          confirmButtonColor: '#FF5722'
                        });
                    }
                }
            })
        })
                        </script>
<script>
            $(document).on("click", "#btnAPIBuy", function() {
            console.log("To Pay Button");
            $(this).html('<i class="fa fa-spinner fa-spin"></i> Loading...').prop('disabled', true);
            
        
            let id = $(this).attr("data-id")
            let qty = $(`#data-qty-${id}`).val()
            
            // $("#change_p").empty()
            // $("#change_p").append("₦",total)

            
            console.log("ID:", id);
            console.log("Qty:", qty);
            
            
            // window.location.href = 'https://www.example.com';
            
            $.ajax({
                url: '/buy-api-fb/',
                data: {
                    // "price": total,
                    "qty": qty,
                    // "name": name,
                    "id": id,
                },
                cache: false,
                success: function(res) {
                    if (res.bool === true){
                        console.log("Can Order");
                        
                    }
                    if (res.bool === false){
                        $('#btnAPIBuy').html('Insufficient Funds').prop('disabled', true);
                        console.log("Can't Order");
                    }
                    if (res.done === true){
                        console.log("Order Successful");
                        $('#btnBuy').html('Order Successful').prop('disabled', true);
                        // $("#purchased").empty()
                        // $("#purchased").append("Account Purchased")
                        // setTimeout(function() {
                        //     $("#popup").hide();
                        // }, 2000);
                        window.location.href = "https://preciselogs.net/history/";

                        // $.ajax({
                        //     url: '/order-email/',
                        // })
                    }
                    if (res.done === false){
                        $('#btnAPIBuy').html('The requested quantity is not available.').prop('disabled', true);
                    }
                }
            })
        })
                        </script>
                        
<script>
            $(document).on("click", "#accBuy", function() {
            console.log("To Pay Button");
            $(this).html('<i class="fa fa-spinner fa-spin"></i> Loading...').prop('disabled', true);
            
            
            let id = $(this).attr("data-id")
            let qty = $(`#data-qty-${id}`).val()
            
            // $("#change_p").empty()
            // $("#change_p").append("₦",total)

            
            console.log("ID:", id);
            console.log("Qty:", qty);
            
            
            // window.location.href = 'https://www.example.com';
            
            $.ajax({
                url: '/acc-buy-api-fb/',
                data: {
                    // "price": total,
                    "qty": qty,
                    // "name": name,
                    "id": id,
                },
                cache: false,
                success: function(res) {
                    if (res.bool === true){
                        console.log("Can Order");
                        
                    }
                    if (res.bool === false){
                        $('#accBuy').html('Insufficient Funds').prop('disabled', true);
                        console.log("Can't Order");
                    }
                    if (res.done === true){
                        console.log("Order Successful");
                        $('#accBuy').html('Order Successful').prop('disabled', true);
                        // $("#purchased").empty()
                        // $("#purchased").append("Account Purchased")
                        // setTimeout(function() {
                        //     $("#popup").hide();
                        // }, 2000);
                        window.location.href = "https://preciselogs.net/history/";

                        // $.ajax({
                        //     url: '/order-email/',
                        // })
                    }
                    if (res.done === false){
                        $('#accBuy').html('The requested quantity is not available.').prop('disabled', true);
                    }
                }
            })
        })
                        </script>
  
{% endblock content %}