@extends('template.basic.layouts.wallet_base')

@section('content_detail')
    <div  x-data="wallet()" class="flex lg:flex-1 justify-center lg:justify-start  tablet:pt-0">

        <div class="max-w-4/5 lg:max-w-4/5 md:w-full  ps-4 md:px-5 md:pt-5">

            <!-- Page Heading -->
            <h5 class="hidden lg:block text-white font-ibm text-2xl font-semibold leading-8">
                Wallet
                @if($type == 'send')
                    (Send - Only coins with balance)
                @elseif($type == 'receive')
                    (Receive)
                @endif
            </h5>

            <!-- Main Wrap -->
            <div class="pt-6">

                <!-- Wallet List Box -->
                <div class="rounded-xl">

                    <!-- Search + Header -->
                    <div class="pb-4">
                        <div class="flex justify-between items-center">

                            <!-- Search Container -->
                            <div class="w-full max-w-xs">
                                <div class="flex items-center h-9 px-3 rounded-full border border-gray-400 bg-transparent">

                                    <!-- Icon -->
                                    <svg width="20" height="20" viewBox="0 0 20 20" class="text-gray-400">
                                        <path fill="currentColor"
                                            d="M9.167 17.5C4.573 17.5.833 13.76.833 9.167c0-4.594 3.74-8.334 8.334-8.334 4.593 0 8.333 3.74 8.333 8.334 0 4.593-3.74 8.333-8.333 8.333zm0-15.447c-3.927 0-7.114 3.195-7.114 7.114 0 3.918 3.187 7.113 7.114 7.113s7.114-3.195 7.114-7.113c0-3.92-3.187-7.114-7.114-7.114z" />
                                        <path fill="currentColor"
                                            d="M18.097 19.167c-.272 0-.543-.1-.758-.315l-2.861-2.859a1.078 1.078 0 0 1 0-1.515 1.08 1.08 0 0 1 1.516 0l2.861 2.859c.415.415.415 1.1 0 1.515a1.061 1.061 0 0 1-.758.315z" />
                                    </svg>

                                    <input id="searchWalletCoin" placeholder="Search" autocomplete="on" spellcheck="true"
                                        data-action="search-wallet-coin"
                                        class="w-full bg-transparent text-sm border-0 text-white placeholder-gray-400 outline-none ml-2 font-ibm" />
                                </div>
                            </div>

                        </div>

                        <!-- Coins Title -->
                        <div class="py-4">
                            <h5 class="text-white font-ibm text-2xl font-medium leading-8">
                                Coins
                            </h5>
                        </div>
                    </div>

                    <!-- Wallet List -->
                    <div class="w-full border border-border-primary rounded-2xl">
                        <div class="grid grid-cols-5 py-4 pt-4">
                            <div class="col-span-2 text-[10px]">Coin</div>
                            <div class="col-span-1 text-[10px]">Amount</div>
                            <div class="col-span-1 text-[10px]">{{ $user->userCurrency }}</div>
                            <div class="col-span-1 text-[10px]">actions</div>
                        </div>
                        @forelse($wallets as $wallet)
                            @php
                                $wallet = $wallet['wallet'];

                            @endphp


                            @include('template.basic.user.wallets.wallet', [
                                'wallet' => $wallet,
                                'type' => $type,
                                'user' => $user
                            ])

                        @empty
                            <p class="text-gray-400 text-center py-8">
                                No wallets found.
                            </p>
                        @endforelse
                    </div>

                </div>
            </div>

        </div>
<div class="fixed top-0 right-0 h-full w-96 bg-dark-secondary shadow-lg transform transition-transform duration-300 z-50"
      :class="walletDrawerOpen ? 'translate-x-0' : 'translate-x-full'" x-cloak>
      <div class="p-6 flex flex-col h-full">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-semibold">Trade</h2>
          <button @click="walletDrawerOpen = false" class="text-white hover:text-beige text-3xl">&times;</button>
        </div>
        <input type="text" x-model="searchCoin" placeholder="Search coin"
          class="w-full border border-border-primary rounded-full px-4 py-2 mb-4">
        <div class="flex-1 overflow-y-auto">
          
        </div>
      </div>
    </div>
    </div>

@endsection

@push('javascript')
<script>
function wallet() {
    return {
        walletDrawerOpen: false,
        walletDrawerType: '',
        searchCoin: '',

        openWalletDrawer(type) {
            this.walletDrawerType = type;
            this.walletDrawerOpen = true;
        },
        closeWalletDrawer() {
            this.walletDrawerOpen = false;
        }
    }
}
</script>

@endpush