@extends('template.basic.layouts.user_base')
@php
$price = 1;
$priceHistorical = [];

@endphp



@section('content_detail')
<div class=""  x-data="stakingPage()">
    <header class="w-full py-6 px-6 flex justify-between items-center sticky top-0 z-50">
    <h1 class="text-2xl font-semibold">Crypto Earn</h1>
   
  </header>

  <!-- HERO SECTION -->
  <section class="px-6 py-10  text-white">
    <h2 class="text-4xl font-bold mb-3">Earn Rewards on Your Crypto</h2>
    <p class="text-lg opacity-80">Stake, Save, and Grow your assets with flexible or fixed-term plans.</p>
  </section>
   
   <!-- FILTER TABS -->
  <div class="px-6 py-6 flex gap-4">
    <button @click="filter='flexible'" :class="filter==='flexible'?'bg-black text-white':'bg-white'" class="px-4 py-2 rounded-lg border">Flexible</button>
    <button @click="filter='fixed'" :class="filter==='fixed'?'bg-black text-white':'bg-white'" class="px-4 py-2 rounded-lg border">Fixed</button>
    <button @click="filter='popular'" :class="filter==='popular'?'bg-black text-white':'bg-white'" class="px-4 py-2 rounded-lg border">Popular</button>
  </div>
  

  <!-- STAKING GRID -->
  <div class="px-6 grid md:grid-cols-3 gap-6">
    <template x-for="item in filteredItems" :key="item.symbol">
 

      <div class="w-full sm:w-1/2 md:w-1/4 p-2"  @click="openStake(item)">
  <div class="bg-white border-border-primary dark:bg-gray-900 rounded-xl shadow-md overflow-hidden flex flex-col">
    
    <!-- Coin Info -->
    <div class="flex bg-border-primary items-center justify-between p-4">
      <div class="flex items-center space-x-3">
        <img :src="item.logo" :alt="item.name" class="w-10 h-10 rounded-full">
        <div class="text-lg font-semibold text-gray-900 dark:text-white" x-text="item.name"></div>
      </div>

      <!-- Countdown -->
    
    </div>

    <!-- Label -->
    <div class="px-4 text-sm font-medium text-primary-gradient">LITKEY Earnings Boost</div>

    <!-- Product Info -->
    <div class="px-4 py-2 flex justify-between border-b border-gray-200 dark:border-gray-700">
      <div class="text-gray-500 dark:text-gray-400 font-medium">APR</div>
      <div class="text-gray-500 dark:text-gray-400 font-medium">Duration</div>
    </div>
    <div class="px-4 py-2 flex justify-between">
      <div class="text-lg font-bold text-gray-900 dark:text-white" x-text="item.apr + '%' "></div>
      <div class="text-gray-600 dark:text-gray-300" x-text="item.duration"></div>
    </div>


    <!-- Button -->
    <div class="p-4">
      <button class="w-full bg-primary-gradient hover:beige text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
        Invest Now
      </button>
    </div>

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

  <!-- MODAL -->
  <div x-show="modalOpen" class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center p-4" x-transition>
    <div class="bg-[#0b0b0d] w-full max-w-md rounded-xl p-6 shadow-xl" @click.outside="modalOpen=false">
      <h2 class="text-xl font-bold mb-3" x-text="modalItem.symbol + ' Staking'"></h2>
      <p class="mb-4 text-whiye">Earn <span class="font-semibold" x-text="modalItem.apr + '%' "></span> APR on your staking.</p>

      <label class="block text-sm font-medium mb-1">Amount</label>
      <input type="number" class="w-full border form-control rounded-lg px-3 py-2 mb-4" x-model="amount">

      <button class="w-full bg-primary-gradient text-black py-3 rounded-lg" @click="stakeNow()">Confirm Stake</button>
    </div>
  </div>

  <div class="p-4  rounded-lg space-y-6 mt-8">
  <!-- Header -->
  <div class="flex justify-between items-center">
    <h2 class="text-xl font-semibold text-white">Explore Products</h2>
    <div class="relative">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" fill="none" viewBox="0 0 16 16"><path fill="#81858C" fill-rule="evenodd" d="M2 7.25a5.25 5.25 0 1 1 10.5 0 5.25 5.25 0 0 1-10.5 0ZM7.25.5a6.75 6.75 0 1 0 4.213 12.024l2.757 2.756a.75.75 0 1 0 1.06-1.06l-2.756-2.757A6.75 6.75 0 0 0 7.25.5Z" clip-rule="evenodd"></path></svg>
      <input type="text" placeholder="Search coin name" class="pl-8 pr-8 py-1 rounded bg-gray-800 text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
  </div>

  <!-- Tabs -->
  <div class="flex border-b border-gray-700">
    <button class="pb-2 px-3 text-white font-semibold border-b-2 border-blue-500">Steady returns</button>
    <button class="pb-2 px-3 ml-4 text-gray-400 hover:text-white font-semibold">Top gains</button>
    <button class="pb-2 px-3 ml-4 text-gray-400 hover:text-white font-semibold">VIP exclusive</button>
  </div>

  <!-- Table Header -->
  <div class="grid grid-cols-4 text-gray-400 text-sm font-medium border-b border-gray-700 py-2">
    <span>Assets</span>
    <span>Duration</span>
    <span>APR</span>
    <span>Action</span>
  </div>

  <!-- Collapsible Row Example -->
  <div x-data="{ open: true }" class="space-y-2">
    <div @click="open = !open" class="grid grid-cols-4 items-center cursor-pointer p-2 bg-gray-800 rounded hover:bg-gray-700">
      <div class="flex items-center space-x-2">
        <img src="/bycsi-root/app/assets/token/d9c8c35b4223b50d9773d7d5294d019f.svg" class="w-6 h-6">
        <span class="text-white font-medium">BTC</span>
      </div>
      <div class="text-gray-200">Flexible / Fixed</div>
      <div class="text-green-500">0.30% ~ 2.30%</div>
      <div>
        <svg :class="{ 'rotate-180': open }" class="w-4 h-4 text-gray-400 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8"><path fill="#121214" d="M.852.602a.917.917 0 0 1 1.296 0L7 5.454 11.852.602a.917.917 0 0 1 1.296 1.296l-5.5 5.5a.917.917 0 0 1-1.296 0l-5.5-5.5a.917.917 0 0 1 0-1.296Z"/></svg>
      </div>
    </div>

    <div x-show="open" class="bg-gray-800 p-2 rounded space-y-1 text-sm text-gray-200">
      <div class="flex justify-between items-center">
        <span>Easy Earn</span>
        <span>Flexible</span>
        <span class="text-green-500">2.30%</span>
        <button class="px-3 py-1 bg-blue-600 rounded text-white hover:bg-blue-500">Invest Now</button>
      </div>
      <div class="flex justify-between items-center">
        <span>Easy Earn</span>
        <span>30 Days</span>
        <span class="text-green-500">0.30%</span>
        <button class="px-3 py-1 bg-blue-600 rounded text-white hover:bg-blue-500">Invest Now</button>
      </div>
    </div>
  </div>

  <!-- Pagination -->
  <div class="flex items-center space-x-1 mt-4 text-gray-400">
    <button class="p-1 rounded disabled:opacity-50" disabled>
      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 1024 1024"><path d="M670.165 225.835a42.667 42.667 0 0 1 0 60.33L444.331 512l225.834 225.835a42.667 42.667 0 0 1-60.33 60.33l-256-256a42.667 42.667 0 0 1 0-60.33l256-256a42.667 42.667 0 0 1 60.33 0z"/></svg>
    </button>
    <button class="px-3 py-1 rounded bg-gray-700 text-white">1</button>
    <button class="px-3 py-1 rounded hover:bg-gray-700">2</button>
    <button class="px-3 py-1 rounded hover:bg-gray-700">3</button>
    <button class="p-1 rounded">
      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 1024 1024"><path d="M353.835 225.835a42.667 42.667 0 0 1 60.33 0l256 256a42.667 42.667 0 0 1 0 60.33l-256 256a42.667 42.667 0 0 1-60.33-60.33L579.669 512 353.835 286.165a42.667 42.667 0 0 1 0-60.33z"/></svg>
    </button>
  </div>
</div>



</div>
@endsection

@push('javascript')
<script>
    function stakingPage() {
      return {
        search: '',
        filter: 'popular',
        modalOpen: false,
        modalItem: {},
        amount: '',

        items: [
          { symbol: 'BTC', name: 'Bitcoin', apr: 4.8, duration: 'Flexible', logo: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png', type:'flexible' },
          { symbol: 'ETH', name: 'Ethereum', apr: 5.2, duration: '30 Days', logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png', type:'fixed' },
          { symbol: 'USDT', name: 'Tether', apr: 6.4, duration: 'Flexible', logo: 'https://cryptologos.cc/logos/tether-usdt-logo.png', type:'popular' },
          { symbol: 'SOL', name: 'Solana', apr: 8.1, duration: '60 Days', logo: 'https://cryptologos.cc/logos/solana-sol-logo.png', type:'fixed' },
        ],

        get filteredItems() {
          return this.items.filter(i =>
            (this.filter === 'popular' || i.type === this.filter) &&
            (i.symbol.toLowerCase().includes(this.search.toLowerCase()))
          );
        },

        openStake(item) {
          this.modalItem = item;
          this.modalOpen = true;
        },

        stakeNow() {
          alert(`Staked ${this.amount} ${this.modalItem.symbol}!`);
          this.modalOpen = false;
          this.amount = '';
        }
      }
    }
  </script>


@endpush