@push('javascript')
  <script>
    const networksData = @json($networks, JSON_HEX_APOS | JSON_HEX_QUOT);
    console.log(networksData);
  </script>
@endpush
@extends('template.basic.layouts.wallet_base')

@section('content_detail')
  <div x-data="withdrawForm()" class="withdraw-form relative w-full lg:w-4/5">
    <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', 'send') }}"
          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">
          Send <span class="text-beige">{{ $coin->name }}</span> <span class="text-gray-400">({{ $coin->symbol }})</span>
        </h1>


      </div>
    </header>
    <div class="flex flex-col justify-center lg:justify-start lg:flex-row lg:space-x-2">

      <!-- Step Indicator -->
      <div class="hidden lg:flex flex-col items-center md:items-start space-y-4 md:w-8 relative">
        <template x-for="(step, index) in steps" :key="index">
          <div class="flex flex-col items-center relative">
            <!-- Step circle -->
            <div :class="stepClass(index)"
              class="w-8 h-8 flex items-center justify-center rounded-full font-semibold transition-colors duration-300 ease-in-out">
              <template x-if="step.status === 'complete'">
                <svg fill="currentColor" viewBox="0 0 24 24"
                  class="w-5 h-5 text-white transition-transform duration-300 transform scale-100">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M7.035 16.812l-.001.002 2.121 2.121.002-.002 2.121-2.12 9.19-9.192-2.12-2.121-9.191 9.19-3.536-3.534-2.121 2.12 3.535 3.536z">
                  </path>
                </svg>
              </template>
              <template x-if="step.status !== 'complete'">
                <span :class="stepTextClass(index)" x-text="index + 1"></span>
              </template>
            </div>

            <!-- Animated Step Line -->
            <div class="w-px h-12 bg-gray-600 relative overflow-hidden mt-1">
              <div class="absolute top-0 left-0 w-px bg-green-500 transition-all duration-500 ease-in-out"
                :style="{ height: (steps[index].status === 'complete' || steps[index].status === 'current') ? '100%' : '0%' }">
              </div>
            </div>
          </div>
        </template>
      </div>

      <!-- Step Content -->
      <div class="flex-1 flex flex-col shadow-beige lg:shadow-none space-y-8 mt-4 md:mt-0">

        <!-- Step 1: Select Coin -->
        <div class=" p-4 rounded-md shadow space-y-2 transition-opacity duration-300"
          :class="{ 'opacity-100': steps[0].status !== 'pending', 'opacity-50': steps[0].status === 'pending' }">
          <h3 class="text-white font-semibold text-lg">Select Coin</h3>
          <button @click="selectCoin('{{ $coin->symbol }}', '{{ $coin->name }}', '{{ $coin->logo }}')"
            class="flex items-center justify-between w-full h-12 px-3 border border-border-primary form-control">
            <div class="flex items-center gap-2">
              <img :src="selectedCoin.icon" alt="{{ $coin->symbol }}" class="w-5 h-5">
              <div class="flex items-center space-x-3">
                <div class="text-white font-medium" x-text="selectedCoin.symbol"></div>
                <div class="text-gray-400 text-sm truncate" x-text="selectedCoin.name"></div>
              </div>
            </div>
            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12.11 12.178L16 8.287l1.768 1.768-5.657 5.657-1.768-1.768-3.889-3.889 1.768-1.768 3.889 3.89z">
              </path>
            </svg>
          </button>
        </div>

        <!-- Step 2: Withdraw to Address -->
        <div class=" p-4 rounded-md shadow space-y-2 transition-opacity duration-300"
          :class="{ 'opacity-100': steps[1].status !== 'pending', 'opacity-50': steps[1].status === 'pending' }">
          <h3 class="text-white font-semibold text-lg">Withdraw to</h3>
          <input type="text" placeholder="Enter Address" x-model="withdrawAddress" @blur="updateSteps()"
            class="w-full h-12 px-3  border border-border-primary form-control text-white focus:outline-none focus:border-beige">
          <button @click="openNetworkPicker()"
            class="mt-4 w-full flex border border-border-primary form-control items-center justify-between gap-4 px-4 py-3 rounded-lg text-white hover:bg-gray-800/30 transition">
            <div class="flex space-x-2 items-center">
              <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>

        <!-- Step 3: Withdraw Amount -->
        <div class=" p-4 rounded-md shadow space-y-4 transition-opacity duration-300"
          :class="{ 'opacity-100': steps[2].status !== 'pending', 'opacity-50': steps[2].status === 'pending' }">
          <h3 class="text-white font-semibold text-lg">Withdraw amount</h3>
          <div class="relative">
            <input type="text" id="withdraw-amount-input" x-model="withdrawAmount" @keyup="setAmount()"
              placeholder="Minimal 0.00003"
              class="w-full h-12 px-3  border border-border-primary form-control text-white focus:outline-none focus:border-beige">
            <div class="absolute inset-y-0 right-3 flex items-center gap-2">
              <span class="text-white font-bold" x-text="selectedCoin.symbol"></span>
              <button @click="setMax()" class="text-beige hover:underline">MAX</button>
            </div>
          </div>

          <div class="flex justify-between text-gray-400 text-sm">
            <span>Available Withdraw</span>
            <span>{{coin_format($wallet->balance ?? 0, $coin->digits) }} {{ $coin->symbol }}</span>
          </div>

          <div class="border-t border-gray-600"></div>

          <div class="flex justify-between items-center">
            <div class="space-y-1">
              <div class="text-gray-400 text-sm">Amount to Receive</div>
              <div class="text-white text-xl font-semibold"><span x-text="totalAmount || '0.00'"></span>
                {{ $coin->symbol }}</div>
              <div class="flex items-center gap-1 text-gray-400 text-sm">
                <span>Network Fee</span><span><span x-text="networkFee"></span>{{ $coin->symbol }}</span>
              </div>
            </div>
            <button :disabled="!canSubmit()" @click="openPreviewSend()"
              class="bg-primary-gradient hover:bg-beige text-black font-semibold px-4 py-2 rounded min-w-[120px] disabled:opacity-50 transition-colors duration-300">
              Withdraw
            </button>
          </div>
        </div>

        <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-xl bg-[#0b0b0d] border border-dark3 rounded-xl shadow-beige 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">
                    <div>
                      Network Fee: <span x-text="n.fee"></span> {{ $coin->symbol }}
                    </div>

                    <div>
                      Minimum: <span x-text="n.minimum"></span> {{ $coin->symbol }}
                    </div>
                  </div>
                </div>
              </template>

            </div>

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

        <div x-show="previewSend" 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="closePreviewSend()"></div>

          <div x-transition
            class="relative z-50 w-full max-w-lg bg-[#0b0b0d] border border-dark3 rounded-xl shadow-beige overflow-hidden"
            @keydown.escape.window="closePreviewSend()">
            <div class="w-full flex flex-col p-6">
              <div class="py-3 mb-4 mobile:p-m flex items-center justify-between">
                <div class="text-white text-base flex items-center">Withdrawal</div>
                <div class="flex flex-1 justify-end">
                  <svg @click="closePreviewSend()" class="bn-svg h-xl w-xl text-white  text-base cursor-pointer"
                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M6.697 4.575L4.575 6.697 9.88 12l-5.304 5.303 2.122 2.122L12 14.12l5.303 5.304 2.122-2.122L14.12 12l5.304-5.303-2.122-2.122L12 9.88 6.697 4.575z"
                      fill="currentColor"></path>
                  </svg>
                </div>
              </div>
              <div class="text-white  max-h-[450px] mobile:max-h-[644px] flex-1 overflow-y-auto">

                <!-- Info Fields -->
                <div class="flex flex-col space-y-4">

                  <!-- Address -->
                  <div class="flex justify-between items-start gap-2 text-sm">
                    <div class="text-gray-500">Address</div>
                    <div class="flex max-w-[80%] items-center text-right">
                      <span class="break-all" x-text="withdrawAddress"></span>
                    </div>
                  </div>

                  <!-- Network -->
                  <div class="flex justify-between items-center gap-2 text-sm">
                    <div class="text-gray-500">Network</div>
                    <div class="max-w-[80%]"><span x-text="currentNetwork"></span> <span x-text="currentSrc"></span></div>
                  </div>

                  <!-- Amount -->
                  <div class="flex justify-between items-start gap-2 text-sm">
                    <div class="text-gray-500">Amount</div>
                    <div class="max-w-[80%]"><span x-text="withdrawAmount"></span> {{ $coin->symbol }}</div>
                  </div>

                  <!-- Receive -->
                  <div class="flex justify-between items-start gap-2 text-sm">
                    <div class="text-gray-500">Receive</div>
                    <div class="max-w-[80%]"><span x-text="totalAmount"></span> {{ $coin->symbol }}</div>
                  </div>

                  <!-- Fee -->
                  <div class="flex justify-between items-start gap-2 text-sm">
                    <div class="text-gray-500">Fee</div>
                    <div class="max-w-[80%]"><span x-text="networkFee"></span> {{ $coin->symbol }}</div>
                  </div>

                  <!-- Source -->
                  <div class="flex justify-between items-center gap-2 text-sm">
                    <div class="text-gray-500">Source</div>
                    <div class="max-w-[80%]">Spot Wallet</div>
                  </div>

                </div>

                <!-- Divider -->
                <div class="my-6 h-px bg-border2 w-full"></div>

                <!-- Notes -->
                <div class="space-y-2">
                  <div class="flex items-center">
                    <svg class="w-4 h-4 text-white flex-shrink-0" viewBox="0 0 24 24">
                      <path d="M12.243 8L8 12.243l4.243 4.242 4.242-4.242L12.243 8z" fill="currentColor" />
                    </svg>
                    <p class="ml-2 text-sm text-white">
                      Ensure that the address is correct and on the same network.
                    </p>
                  </div>

                  <div class="flex items-center">
                    <svg class="w-4 h-4 text-white flex-shrink-0" viewBox="0 0 24 24">
                      <path d="M12.243 8L8 12.243l4.243 4.242 4.242-4.242L12.243 8z" fill="currentColor" />
                    </svg>
                    <p class="ml-2 text-sm text-white">
                      Transactions cannot be cancelled.
                    </p>
                  </div>
                </div>
              </div>

              <!-- Form -->




              <button id="crypto_withdraw_confirm_btn" type="button" @click="confirmSend()"
                class="w-full py-3 mt-4 bg-primary-gradient hover:bg-beige text-black text-center font-semibold rounded-lg shadow">
                Continue
              </button>

            </div>

          </div>
        </div>

        <div x-show="privateKeyModal" x-cloak x-transition.opacity
          class="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4">
          <!-- backdrop -->
          <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closePrivateKey()"></div>

          <div x-transition :class="{
                'max-w-sm': $store.global.size === 'sm',
                'max-w-md': $store.global.size === 'md',
                'max-w-lg': $store.global.size === 'lg'
            }" class="relative z-50 w-full bg-[#0b0b0d] border border-dark3 rounded-xl overflow-hidden"
            @keydown.escape.window="closePrivateKey()">
            <div class="w-full flex flex-col p-6">
              <!-- Header -->
              <div class="py-3 mb-4 flex items-center justify-between">
                <div class="text-white text-base flex items-center">Verify Private Key</div>
                <svg @click="closePrivateKey()" class="h-6 w-6 text-white cursor-pointer" viewBox="0 0 24 24">
                  <path
                    d="M6.697 4.575L4.575 6.697 9.88 12l-5.304 5.303 2.122 2.122L12 14.12l5.303 5.304 2.122-2.122L14.12 12l5.304-5.303-2.122-2.122L12 9.88 6.697 4.575z"
                    fill="currentColor" />
                </svg>
              </div>
              <!-- Content -->
              <div x-html="privateKeyContent" class="pb-6"></div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>



@endsection



@push('javascript')
  <script>
    function withdrawForm() {
      return {
        steps: [
          { title: 'Select Coin', status: 'complete' },
          { title: 'Withdraw to', status: 'current' },
          { title: 'Amount', status: 'pending' },
        ],
        networks: networksData || [],
        selectedCoin: { symbol: '{{ $coin->symbol }}', name: '{{ $coin->name }}', icon: '{{ $coin->logo }}' },
        withdrawAddress: '',
        withdrawAmount: 0,
        currentNetwork: 'Choose a Network',
        currentSrc: '',
        networkPickerOpen: false,
        previewSend: false,
        withdrawNework: '',
        networkFee: 0,
        minimum: 0,
        totalAmount: 0,
        privateKeyModal: false,
        privateKey: '',
        privateKeyContent: '',
        balance: parseFloat('{{ $wallet->balance }}'),

        stepClass(index) {
          const status = this.steps[index].status;
          return {
            'bg-green-500 text-white': status === 'complete',
            'bg-beige text-black': status === 'current',
            'bg-gray-600 text-white': status === 'pending',
          };
        },
        stepTextClass(index) {
          const status = this.steps[index].status;
          return {
            'text-white': status !== 'current',
            'text-black font-semibold': status === 'current',
          };
        },
        selectCoin(symbol, name, icon) {
          this.selectedCoin = { symbol, name, icon };
          this.updateSteps();
        },
        setMax() {
          this.withdrawAmount = parseFloat(this.balance);
          this.totalAmount = this.withdrawAmount - this.networkFee
          this.updateSteps();
        },
        openNetworkPicker() {
          this.networkPickerOpen = true;
          // when opening, blur is handled by backdrop
        },

        closeNetworkPicker() {
          this.networkPickerOpen = false;
        },
        closePrivateKey() {
          this.privateKey = false;
        },
        openPreviewSend() {
          this.previewSend = true;
          // when opening, blur is handled by backdrop
        },

        closePreviewSend() {
          this.previewSend = false;
        },
        selectNetwork(n) {
          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;
          this.minimum = n.minimum;
          this.networkFee = parseFloat(n.fee);
          this.totalAmount = this.withdrawAmount > 0 ? this.withdrawAmount - n.fee : 0;
          // AJAX call to get network details

          this.updateSteps()
        },

        async confirmSend() {
          this.previewSend = false;
          const modal = document.querySelector('[x-show="$store.global.open"]');
          const data = await fetchAndShowModal({
            url: `${baseUrl}/wallet/send/execute/${this.selectedCoin.symbol}`,
            method: 'POST',
            body: {
              coin_id: "{{ hash_of($coin->id) }}",
              wallet_id: "{{ hash_of($wallet->id) }}",
              coin_symbol: this.selectedCoin.symbol,
              network_name: this.currentNetwork,
              amount: this.withdrawAmount,
              address: this.withdrawAddress,
            }
          });
          if (data?.view || data?.content) {
            this.privateKeyContent = data.view
            this.privateKeyModal = true;
          }


        },
        async submitPrivateKey() {
          //event.preventDefault(); // prevent the default form submit

          const form = document.getElementById('wallet_private_key');
          console.log(this.privateKey);

          const url = form.getAttribute('action'); // get URL from form action

          try {
            const data = await fetchAndShowModal({
              url: url,          // use form action
              method: 'POST',
              body: {
                coin_id: "{{ hash_of($coin->id) }}",
                wallet_id: "{{ hash_of($wallet->id) }}",
                private_key: this.privateKey // bind from input
              }
            });
            console.log(data);
            if (data.status) {
              if (data?.redirect) {
                window.location.href = data.redirect;
              }
            } else {
              Alpine.store('modal').showNotification('error', data.error || 'Something went wrong');
              
            }
          } catch (err) {
            console.error(err);
            Alpine.store('modal').showNotification('error', err.message || 'Something went wrong');
          }
        },
        setAmount() {
          const amtDiv = document.getElementById('withdraw-amount-input');
          const amount = parseFloat(this.withdrawAmount) || 0;
          // amount > balance → highlight red
          if (amount > this.balance) {
            amtDiv.classList.add('border-red-600');   // Tailwind, not bootstrap
          } else {
            amtDiv.classList.remove('border-red-600');
          }
          // calculate final amount
          this.totalAmount = amount > 0 ? amount - this.networkFee : 0;

        },

        canSubmit() {
          return this.selectedCoin.symbol && this.withdrawAddress && this.currentNetwork && this.withdrawAmount && (this.withdrawAmount <= this.balance);
        },

        updateSteps() {
          this.steps[0].status = this.selectedCoin.symbol ? 'complete' : 'pending';
          this.steps[1].status = (this.withdrawAddress && this.currentNetwork) ? 'complete' : (this.steps[0].status === 'complete' ? 'current' : 'pending');
          this.steps[2].status = this.withdrawAmount ? 'current' : (this.steps[1].status === 'complete' ? 'current' : 'pending');

        },
      };
    }
  </script>
@endpush