@php
  $networksData = array_map(function ($n) {
    return [
      'src' => $n['name'],
      'network' => $n['network'],
      'is_disabled' => $n['allow_deposit']
    ];
  }, $coin->networks?->toArray() ?? []);
@endphp
@push('javascript')
  <script>
    const networksData = @json($networksData, JSON_HEX_APOS | JSON_HEX_QUOT);
  </script>
@endpush
@extends('template.basic.layouts.wallet_base')

@section('content_detail')

  <div x-data="walletPage({
          currentNetwork: 'Select a Network',
          networks: networksData

      })" class="min-h-screen  text-gray-200">
    <!-- Top header -->
    <header class="bg-transparent border-b border-gray-800/60">
      <div class="max-w-6xl mx-auto px-4 py-4 flex items-center gap-4">
        <a href="{{ route('user.wallet.index', 'receive') }}"
          class="inline-flex items-center gap-2 hover:-translate-x-1 transition-transform">
          <!-- back arrow -->
          <svg class="w-8 h-8 text-gray-300 transform transition-transform duration-200 hover:-translate-x-1"
            viewBox="0 0 20 20" fill="currentColor">
            <path
              d="M7.975 15.683a.618.618 0 0 1-.442-.183l-5.058-5.058a.629.629 0 0 1 0-.884L7.533 4.5a.629.629 0 0 1 .884 0 .629.629 0 0 1 0 .883L3.8 10l4.617 4.617a.629.629 0 0 1 0 .883.605.605 0 0 1-.442.183z">
            </path>
            <path
              d="M17.083 10.625H3.058A.63.63 0 0 1 2.433 10a.63.63 0 0 1 .625-.625h14.025a.63.63 0 0 1 .625.625.63.63 0 0 1-.625.625z">
            </path>
          </svg>
        </a>

        <h1 class="text-lg font-semibold tracking-tight">
          Deposit <span class="text-beige">{{ $coin->name }}</span> <span
            class="text-gray-400">({{ $coin->symbol }})</span>
        </h1>

        <div class="ml-auto hidden sm:flex items-center gap-3 text-sm text-gray-400">
          <span>Network:</span>
          <button @click="openNetworkPicker()"
            class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-gray-800/60 hover:bg-gray-800/40 transition">
            <span x-text="currentNetwork"></span>
            <svg class="w-4 h-4 text-gray-400 transition-transform" :class="networkPickerOpen ? 'rotate-180' : ''"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-width="2" d="M6 9l6 6 6-6" />
            </svg>
          </button>
        </div>
      </div>
    </header>

    <main class="max-w-6xl mx-auto px-4 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

        <!-- Left: deposit card -->
        <section class="space-y-6">
          <div
            class="rounded-xl bg-gradient-to-br shadow-beige from-neutral-900/80 to-neutral-900/70 border border-dark3 p-6">
            <div class="space-y-4">
              <div>
                <div class="text-sm text-gray-400 font-medium">Network</div>
                <button @click="openNetworkPicker()"
                  class="mt-2 w-full flex items-center justify-between gap-4 px-4 py-3 rounded-lg bg-gray-800/40 hover:bg-gray-800/30 transition">
                  <div>
                    <div class="text-sm font-semibold" x-text="currentNetwork"></div>
                    <div class="text-xs text-gray-500" x-text="currentSrc"></div>
                  </div>
                  <svg class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-width="2" d="M6 9l6 6 6-6" />
                  </svg>
                </button>
              </div>

              <div x-show="depositShow" x-cloak x-transition.opacity aria-hidden="false">
                <div class="text-sm text-gray-400 font-medium">Deposit address <span class="text-rose-400">*</span></div>
                <div class="mt-2 flex items-center gap-3">
                  <div class="flex-1 rounded-lg bg-gray-800/30 border border-dark3 p-3">
                    <div class="text-sm font-medium break-all" x-text="currentAddress"></div>
                  </div>

                  <div class="flex flex-col gap-2">
                    <button @click="copyAddress()"
                      class="inline-flex items-center gap-2 px-3 py-2 rounded-md bg-gray-700/40 hover:bg-gray-700/30 transition transform hover:-translate-y-0.5"
                      :class="copied ? 'ring-2 ring-amber-400 ring-opacity-40' : ''" aria-label="Copy address">
                      <svg class="w-5 h-5 text-gray-300 transition-transform duration-200" viewBox="0 0 24 24"
                        fill="currentColor">
                        <path
                          d="M16.5 13.094v4.2c0 3.5-1.4 4.9-4.9 4.9H7.4c-3.5 0-4.9-1.4-4.9-4.9v-4.2c0-3.5 1.4-4.9 4.9-4.9h4.2c3.5 0 4.9 1.4 4.9 4.9z">
                        </path>
                        <path opacity="0.4"
                          d="M17.6 2.194h-4.2c-3.45 0-4.85 1.37-4.89 4.75h3.09c4.2 0 6.15 1.95 6.15 6.15v3.09c3.38-.04 4.75-1.44 4.75-4.89v-4.2c0-3.5-1.4-4.9-4.9-4.9z">
                        </path>
                      </svg>
                      <span x-text="copied ? 'Copied' : 'Copy'"></span>
                    </button>


                  </div>
                </div>
                <div class="w-full h-auto mt-4 flex items-center justify-center rounded-lg bg-gray-800/30 p-2">
                  {{-- QR placeholder (you can paste generated QR as an <img> here) --}}
                  <div class="w-20 h-20 bg-white/5 rounded-md flex items-center justify-center">
                    <img :src="qrSrc" alt="QR code" class="max-w-full max-h-full" />
                  </div>
                </div>
              </div>

              <div class="pt-2 border-t border-gray-800/50">
                <div class="flex items-center justify-between text-sm text-gray-400">
                  <div>Minimum deposit</div>
                  <div class="text-gray-200 font-medium">{{ $coin->min_deposit }} {{ $coin->symbol }}</div>
                </div>
              </div>

              <div class="mt-4 p-4 rounded-lg bg-amber-50/10 border border-amber-400/10">
                <div class="text-sm font-medium text-beige">Note</div>
                <ul class="mt-2 space-y-2 text-xs text-gray-300">
                  <li>• You must deposit at least <span class="font-semibold text-white">{{ $coin->min_deposit }}
                      {{ $coin->symbol }}</span>.</li>
                  <li>• This deposit address only accepts <span class="font-semibold text-white">{{ $coin->name }} (<span
                        x-text="currentNetwork"></span>)</span>.</li>
                  <li>• Deposits below the minimum will not be credited or refunded.</li>
                </ul>
              </div>

              <div class="mt-4">
                <a href="{{ route('user.wallet.history', [$coin->symbol, 'recieve']) }}"
                  class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg bg-amber-400 text-black font-semibold hover:scale-[0.997] transition">
                  History
                </a>
              </div>
            </div>
          </div>
        </section>

        <!-- Right: QR / details / small info -->
        <aside class="space-y-6">
          <div
            class="rounded-xl bg-gradient-to-br from-neutral-900/80 to-neutral-900/70 border border-dark3 p-6 shadow-beige">
            <div class="flex items-center gap-4">
              <div class="h-12 w-12 rounded-lg bg-gradient-to-br flex items-center justify-center">
                <img src="{{ secure_url('/') }}/assets/img/icons/{{ $coin->wallet }}" alt="{{ $coin->symbol }}"
                  class="w-6 h-6" />
              </div>
              <div>
                <div class="text-sm text-gray-400">Available to deposit</div>
                <div class="font-semibold text-white text-lg">{{ $coin->name }} ({{ $coin->symbol }})</div>
              </div>
            </div>

            <div class="mt-6 grid grid-cols-1 gap-3">
              <div class="rounded-md bg-gray-800/40 p-3">
                <div class="text-xs text-gray-400">Network</div>
                <div class="text-sm font-medium text-white" x-text="currentNetwork"></div>
              </div>

              <div class="rounded-md bg-gray-800/40 p-3">
                <div class="text-xs text-gray-400">Address</div>
                <div class="text-sm break-all text-white" x-text="currentAddress"></div>
              </div>
            </div>
          </div>

          <div
            class="rounded-xl bg-gradient-to-br from-neutral-900/70 to-neutral-900/60 border border-dark3 p-4 shadow-beige">
            <div class="text-xs text-gray-400">Quick tips</div>
            <ul class="mt-2 text-sm text-gray-300 space-y-2">
              <li>• Use the network shown above to deposit.</li>
              <li>• Double-check the address before sending funds.</li>
              <li>• Confirm the minimum deposit to be credited.</li>
            </ul>
          </div>
        </aside>

      </div>
    </main>

    <!-- Network Picker (Alpine modal / dropdown) -->
    <div x-show="networkPickerOpen" x-cloak x-transition.opacity
      class="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4" aria-hidden="false">
      <!-- backdrop -->
      <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeNetworkPicker()"></div>

      <div x-transition
        class="relative z-50 w-full max-w-2xl bg-[#0b0b0d] border border-dark3 rounded-xl shadow-2xl overflow-hidden"
        @keydown.escape.window="closeNetworkPicker()">
        <div class="p-4 flex items-center justify-between border-b border-gray-800/50">
          <h2 class="text-lg font-semibold">Select Network</h2>
          <button class="text-gray-400 hover:text-white" @click="closeNetworkPicker()">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div class="p-4 space-y-3 max-h-96 overflow-auto">
          <div class="mb-2 text-sm text-gray-400">Choose the correct network. Mismatching networks may result in loss of
            funds.</div>

          <template x-for="(n, idx) in networks" :key="idx">
            <div @click="selectNetwork(n)"
              class="flex items-center justify-between gap-4 p-3 rounded-lg border border-dark3 bg-gray-900/20 hover:scale-[1.01] hover:shadow-[0_0_18px_rgba(243,106,61,0.12)] transition cursor-pointer"
              :class="n.network === currentNetwork ? 'ring-2 ring-amber-400 ring-opacity-30 bg-gray-900/40' : ''">
              <div>
                <div class="font-medium" x-text="n.network"></div>
                <div class="text-xs text-gray-400" x-text="n.src"></div>
              </div>
              <div class="text-sm text-gray-300">Min {{ $coin->min_deposit }} {{ $coin->symbol }} </div>
            </div>
          </template>

        </div>

        <div class="p-4 border-t border-gray-800/50 flex justify-end gap-3">
          <button @click="closeNetworkPicker()"
            class="px-4 py-2 bg-gray-800/50 rounded-md hover:bg-gray-800/40">Cancel</button>
        </div>
      </div>
    </div>

    <!-- Toast -->
    <div x-show="toast" x-transition x-cloak class="fixed bottom-6 right-6 z-50" role="status" aria-live="polite">
      <div class="rounded-lg bg-black/80 text-white px-4 py-2 shadow-lg">
        <div x-text="toastMessage"></div>
      </div>
    </div>


  </div>

  z

@endsection

@push('javascript')
  <script>
    function walletPage(payload) {
      console.log(payload);
      //const baseUrl = "{{ url('/') }}";
      const baseUrl = "/laravel/public";
      return {
        currentNetwork: 'Select a Network',
        currentSrc: '',
        networks: payload.networks || [],
        networkPickerOpen: false,
        symbol: '{{ $coin->symbol }}',
        qrSrc: '',
        currentAddress: '',
        copied: false,
        toast: false,
        toastMessage: '',
        depositShow: false,
        openNetworkPicker() {
          this.networkPickerOpen = true;
          // when opening, blur is handled by backdrop
        },

        closeNetworkPicker() {
          this.networkPickerOpen = false;
        },
        selectNetwork(n) {
          console.log('selected');
          if (n.is_disabled == 0) return; // skip disabled networks

          this.networkPickerOpen = false;
          this.currentNetwork = n.network;
          this.currentSrc = n.src;
          this.currentAddress = 'Loading...';
          this.qrSrc = '';
          this.depositShow = true,

            // AJAX call to get network details
            fetch(`${baseUrl}/wallet/get-address/${this.symbol}/${n.network}`, {
              headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              }
            })
              .then(res => res.json())
              .then(data => {
                this.currentAddress = data.address;
                this.qrSrc = data.qr_url || '';
                this.showToast('Network updated');
              })
              .catch(err => {
                console.error(err);
                this.currentAddress = '';
                this.showToast('Failed to load network data', 'error');
              });
        },
        copyAddress() {
          if (!this.currentAddress) return;
          navigator.clipboard.writeText(this.currentAddress).then(() => {
            this.copied = true;
            this.showToast('Wallet address copied to clipboard.');
            setTimeout(() => { this.copied = false }, 1400);
          }).catch(() => {
            this.showToast('Failed to copy address.');
          });
        },

        showToast(msg, ms = 1800) {
          this.toastMessage = msg;
          this.toast = true;
          setTimeout(() => { this.toast = false; }, ms);
        },

      }
    }
  </script>
@endpush