@extends('templates.' . site('template') . '.layouts.user')

@section('css')
@endsection


@section('contents')
    <div class="min-h-screen" id="pageContent">
        <!-- Top Navigation Spacer for Desktop -->
        <div class="hidden lg:block h-16"></div>
        <!-- Content Area -->
        <div class="p-4 md:p-6" x-data="{
            activeTab: 'history'
            {{-- activeTab: 'wallets' --}}
        }">
            <section class="mt-4 md:mt-12 lg:mt-20 lg:px-20" id="refresh">
                <div class="grid grid-cols-1 gap-4 mb-4">
                    <!-- Header and Controls Section -->
                    <div class="flex flex-col md:flex-row justify-between w-full">
                        <div class="flex flex-col space-y-3 w-full md:w-[500px]">
                            <!-- Button Container -->
                            <div class="flex flex-col sm:flex-row gap-2 w-full">
                                <button id="NewWithdrawalModalBtn"
                                    class="gradient-btn-filled2 text-white py-2 px-4 rounded-xl w-full sm:w-1/2">
                                    New Withdrawal
                                </button>
                                <button @click="activeTab = activeTab === 'wallets' ? 'history' : 'wallets'"
                                    class="gradient-btn-filled2 text-white py-2 px-4 rounded-xl w-full sm:w-1/2">
                                    Withdrawal Wallets
                                </button>
                            </div>

                            <!-- Search Container -->
                            <div
                                class="flex items-center space-x-2 border border-gray-800 text-white rounded-2xl px-2 py-1 w-68 md:col-span-1 md:ml-auto">
                                <!-- Search Icon -->
                                <img src="{{ asset('/assets/templates/cavit/images/search-icon.png') }}" alt="" />

                                <!-- Input Field -->
                                <input type="text" placeholder="Txn Ref" id="search-withdrawal-input"
                                    value="{{ request()->s }}"
                                    class="bg-transparent focus:outline-none text-sm flex-grow placeholder-gray-500" />

                                <!-- Search Button -->
                                <div class="simple-pagination" data-paginator="withdrawals">
                                    <a id="search-withdrawal-button" data-link="{{ route('user.withdrawals.index') }}"
                                        href=""
                                        class="paginator-link bg-gray-800 px-3 py-1 rounded-md text-sm hover:bg-gray-700 flex items-center justify-center">
                                        Search
                                    </a>
                                </div>


                            </div>
                        </div>

                        <h2 class="text-white text-lg font-semibold mb-2 md:mb-0 order-first">
                            <span x-show="activeTab === 'history'">Withdrawal History</span>
                            <span x-show="activeTab === 'wallets'">Withdrawal Wallets</span>
                        </h2>
                    </div>

                    <!-- Table Section -->
                    <div x-show="activeTab === 'history'" class="block" id="withdrawals">
                        <div class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-4 relative">
                            <div class="absolute inset-0 rounded-2xl"
                                style="z-index: -1; background: linear-gradient(to bottom, #ff3bff, #5c24ff); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                            </div>

                            <!-- Withdrawal History Table -->
                            <div
                                class="w-full overflow-x-auto rounded-lg max-h-[50vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500">
                                <table class="w-full">
                                    <thead>
                                        <tr class="bg-gray-800 border-b border-gray-700">
                                            <th class="text-gray-500 px-4 py-3 text-left">
                                                AI Bots
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-end">
                                                Holdings
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-end">Date</th>
                                            <th class="text-gray-500 px-4 py-3 text-end">Time</th>
                                            <th class="text-gray-500 px-4 py-3 text-end">
                                                Status
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($withdrawals as $withdrawal)
                                            <tr class="border-b border-gray-700">
                                                <td class="text-white px-4 py-4 flex items-center">
                                                    <img src="{{ 'https://nowpayments.io' . $withdrawal->depositCoin->logo_url }}"
                                                        alt="coin" class="w-6 h-6 mr-2" />
                                                    <p>
                                                        {{ $withdrawal->depositCoin->name }}
                                                        <span
                                                            class="text-gray-400 text-xs block mt-1 clipboard cursor-pointer"
                                                            data-copy="{{ $withdrawal->wallet_address }}">{{ $withdrawal->wallet_address }}</span>
                                                    </p>
                                                </td>
                                                <td class="text-white px-4 py-4 text-end text-sm">
                                                    {{ formatAmount($withdrawal->amount - $withdrawal->fee) }}
                                                    <p class="text-xs block">
                                                        {{ $withdrawal->converted_amount . ' ' . $withdrawal->depositCoin->code }}
                                                        /
                                                        <span
                                                            class="text-red-500">{{ $withdrawal->depositCoin->network ?? $withdrawal->depositCoin->code }}</span>
                                                    </p>
                                                </td>
                                                <td class="text-white px-4 py-4 text-end text-sm">
                                                    {{ date('d-m-y', strtotime($withdrawal->created_at)) }}
                                                </td>
                                                <td class="text-white px-4 py-4 text-end text-sm">
                                                    {{ date('H:i:s', strtotime($withdrawal->created_at)) }}
                                                </td>
                                                <td class="text-white px-4 py-4 cursor-pointer text-end">
                                                    <div class="flex flex-col items-end">
                                                        <button
                                                            class="inline-flex gap-1 items-center justify-end w-32 h-8 text-xs mb-1">
                                                            @if ($withdrawal->status == 'pending')
                                                                <svg width="19" height="19" viewBox="0 0 19 19"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <rect x="0.0830078" y="0.801758" width="18"
                                                                        height="18" rx="9" fill="#D8D8D8"
                                                                        fill-opacity="0.11"></rect>
                                                                    <circle cx="5" cy="5" r="5"
                                                                        transform="matrix(-1 0 0 1 14.083 4.80176)"
                                                                        fill="#D8D8D8"></circle>
                                                                </svg>
                                                            @elseif ($withdrawal->status == 'approved')
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                    height="24" viewBox="0 0 24 24" fill="none">
                                                                    <path opacity="0.3" fill-rule="evenodd"
                                                                        clip-rule="evenodd"
                                                                        d="M10.6324 1.621C10.9863 1.26747 11.46 1.05945 11.9598 1.03798C12.4596 1.0165 12.9494 1.18314 13.3324 1.505L13.4604 1.622L15.3604 3.521H18.0464C18.5508 3.52109 19.0365 3.71177 19.4063 4.05483C19.776 4.3979 20.0025 4.86801 20.0404 5.371L20.0464 5.521V8.207L21.9464 10.107C22.3002 10.461 22.5084 10.9349 22.5298 11.4349C22.5513 11.935 22.3845 12.4249 22.0624 12.808L21.9454 12.935L20.0454 14.835V17.521C20.0455 18.0256 19.8549 18.5116 19.5119 18.8815C19.1688 19.2515 18.6985 19.4782 18.1954 19.516L18.0464 19.521H15.3614L13.4614 21.421C13.1073 21.7748 12.6335 21.983 12.1334 22.0045C11.6334 22.026 11.1434 21.8591 10.7604 21.537L10.6334 21.421L8.73336 19.521H6.04636C5.54178 19.5212 5.05579 19.3306 4.68581 18.9875C4.31583 18.6444 4.0892 18.1742 4.05136 17.671L4.04636 17.521V14.835L2.14636 12.935C1.79255 12.581 1.58435 12.1071 1.56288 11.6071C1.5414 11.107 1.70821 10.6171 2.03036 10.234L2.14636 10.107L4.04636 8.207V5.521C4.04645 5.01659 4.23713 4.53085 4.58019 4.16108C4.92326 3.79131 5.39337 3.56483 5.89636 3.527L6.04636 3.521H8.73236L10.6324 1.621Z"
                                                                        fill="#08C949" />
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M15.1255 8.50434L10.8815 12.7483L9.11345 10.9803C8.92581 10.7928 8.67137 10.6875 8.4061 10.6876C8.14083 10.6877 7.88646 10.7932 7.69895 10.9808C7.51144 11.1685 7.40616 11.4229 7.40625 11.6882C7.40634 11.9535 7.51181 12.2078 7.69945 12.3953L10.1035 14.7993C10.2056 14.9015 10.3269 14.9826 10.4604 15.0379C10.5939 15.0932 10.737 15.1217 10.8815 15.1217C11.0259 15.1217 11.169 15.0932 11.3025 15.0379C11.436 14.9826 11.5573 14.9015 11.6595 14.7993L16.5395 9.91835C16.7216 9.72974 16.8224 9.47714 16.8201 9.21494C16.8178 8.95275 16.7127 8.70193 16.5273 8.51653C16.3419 8.33112 16.0911 8.22595 15.8289 8.22367C15.5667 8.22139 15.3141 8.32219 15.1255 8.50434Z"
                                                                        fill="#F0FCFF" />
                                                                </svg>
                                                            @elseif (
                                                                $withdrawal->status == 'rejected' ||
                                                                    $withdrawal->status == 'failed' ||
                                                                    $withdrawal->status == 'refunded' ||
                                                                    $withdrawal->status == 'expired')
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="18"
                                                                    height="18" viewBox="0 0 18 18" fill="none">
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M7.93948 1.57537C8.20497 1.31022 8.56019 1.15421 8.93506 1.1381C9.30993 1.122 9.67723 1.24697 9.96448 1.48837L10.0605 1.57612L11.4855 3.00037H13.5C13.8783 3.00044 14.2426 3.14345 14.5199 3.40075C14.7972 3.65804 14.9671 4.01063 14.9955 4.38787L15 4.50037V6.51487L16.425 7.93987C16.6903 8.2054 16.8465 8.56077 16.8626 8.93582C16.8787 9.31086 16.7536 9.67832 16.512 9.96562L16.4242 10.0609L14.9992 11.4859V13.5004C14.9993 13.8788 14.8564 14.2433 14.5991 14.5208C14.3418 14.7983 13.9891 14.9682 13.6117 14.9966L13.5 15.0004H11.4862L10.0612 16.4254C9.7957 16.6907 9.44032 16.8469 9.06528 16.863C8.69023 16.8791 8.32278 16.754 8.03548 16.5124L7.94023 16.4254L6.51523 15.0004H4.49998C4.12155 15.0005 3.75705 14.8576 3.47957 14.6002C3.20208 14.3429 3.03211 13.9902 3.00373 13.6129L2.99998 13.5004V11.4859L1.57498 10.0609C1.30962 9.79534 1.15348 9.43996 1.13737 9.06492C1.12126 8.68987 1.24637 8.32242 1.48798 8.03512L1.57498 7.93987L2.99998 6.51487V4.50037C3.00005 4.12206 3.14306 3.75776 3.40036 3.48043C3.65765 3.2031 4.01024 3.03324 4.38748 3.00487L4.49998 3.00037H6.51448L7.93948 1.57537Z"
                                                                        fill="#EA0A0E" />
                                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                                        d="M11.3093 6.7369L8.1263 9.9199L6.8003 8.5939C6.65957 8.45327 6.46874 8.3743 6.26978 8.37437C6.07083 8.37444 5.88006 8.45355 5.73942 8.59428C5.59879 8.73501 5.51983 8.92584 5.5199 9.12479C5.51997 9.32374 5.59907 9.51452 5.7398 9.65515L7.5428 11.4582C7.61941 11.5348 7.71038 11.5956 7.8105 11.6371C7.91061 11.6786 8.01793 11.6999 8.1263 11.6999C8.23467 11.6999 8.34198 11.6786 8.4421 11.6371C8.54222 11.5956 8.63319 11.5348 8.7098 11.4582L12.3698 7.7974C12.5064 7.65595 12.582 7.4665 12.5803 7.26985C12.5786 7.0732 12.4997 6.88509 12.3607 6.74604C12.2216 6.60698 12.0335 6.5281 11.8369 6.5264C11.6402 6.52469 11.4508 6.60028 11.3093 6.7369Z"
                                                                        fill="#F0FCFF" />
                                                                </svg>
                                                            @else
                                                                <svg width="19" height="19" viewBox="0 0 19 19"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <rect x="0.0830078" y="0.801758" width="18"
                                                                        height="18" rx="9" fill="#D8D8D8"
                                                                        fill-opacity="0.11"></rect>
                                                                    <circle cx="5" cy="5" r="5"
                                                                        transform="matrix(-1 0 0 1 14.083 4.80176)"
                                                                        fill="#D8D8D8"></circle>
                                                                </svg>
                                                            @endif
                                                            <span class="capitalize">{{ $withdrawal->status }}</span>
                                                        </button>
                                                        <span class="text-gray-400 text-xs clipboard cursor-pointer"
                                                            data-copy="{{ $withdrawal->ref }}">
                                                            {{ $withdrawal->ref }}</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td
                                                    class="w-full flex justify-center items-center ts-gray-3 p-2 rounded-lg border border-slate-800 hover:border-slate-600 cursor-pointer">
                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                        class="w-5 h-5 text-orange-500" fill="currentColor"
                                                        class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                                                        <path
                                                            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                                    </svg>
                                                    <span>Empty Record!</span>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                        </div>

                        <div class="cursor-pointer simple-pagination" data-paginator="withdrawals">
                            {{ $withdrawals->links('templates.' . site('template') . '.paginations.simple') }}
                        </div>
                    </div>


                    {{-- wallets --}}
                    <div x-show="activeTab === 'wallets'" class="lg:flex gap-6 w-full" id="wallets">

                        <div
                            class="shadow-lg border border-transparent bg-clip-border rounded-2xl p-4 relative mb-6 w-full">
                            <div class="absolute inset-0 rounded-2xl"
                                style="z-index: -1; background: linear-gradient(to bottom, #ff3bff, #5c24ff); padding: 1px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; ">
                            </div>

                            <!-- Withdrawal Wallets Table -->
                            <div
                                class="w-full overflow-x-auto rounded-lg max-h-[50vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500">
                                <table class="w-full">
                                    <thead>
                                        <tr class="bg-gray-800 border-b border-gray-700">
                                            <th class="text-gray-500 px-4 py-3 text-left w-1/3">
                                                Wallet Type
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-center w-1/3">
                                                Default
                                            </th>
                                            <th class="text-gray-500 px-4 py-3 text-end w-1/3">
                                                Wallet Address
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($auto_wallets as $wallet)
                                            <tr class="border-b border-gray-700">
                                                <td class="text-white px-4 py-4 flex items-center w-1/3">
                                                    <img src="{{ 'https://nowpayments.io' . $wallet->depositCoin->logo_url }}"
                                                        alt="coin" class="w-6 h-6 mr-2" />
                                                    <span>{{ $wallet->depositCoin->name }}</span>
                                                </td>
                                                <td class="px-4 py-4 text-center w-1/3">
                                                    <p>
                                                        @if ($wallet->whitelisted == 1)
                                                            <span class="text-red-500">No</span>
                                                        @else
                                                            <span class="text-green-500">Yes</span>
                                                        @endif
                                                    </p>
                                                </td>
                                                <td class="text-white px-4 py-4 w-1/3">
                                                    <div class="flex items-center gap-2 justify-end">
                                                        <span class="text-gray-400 truncate clipboard cursor-pointer"
                                                            data-copy="{{ $wallet->wallet_address }}">{{ $wallet->wallet_address }}</span>
                                                        <button
                                                            class="text-pink-400 hover:text-white flex-shrink-0  clipboard cursor-pointer"
                                                            data-copy="{{ $wallet->wallet_address }}">
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
                                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                                    stroke-width="2"
                                                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td
                                                    class="w-full flex justify-center items-center ts-gray-3 p-2 rounded-lg border border-slate-800 hover:border-slate-600 cursor-pointer">
                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                        class="w-5 h-5 text-orange-500" fill="currentColor"
                                                        class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                                                        <path
                                                            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                                    </svg>
                                                    <span>Empty Record!</span>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="max-w-md">
                            <div class="bg-[#1c1c1c] p-6 rounded-3xl">
                                <div class="flex justify-between items-center mb-6">
                                    <h3 class="text-xl font-semibold text-white"> Add Wallets Address</h3>
                                </div>

                                <form action="{{ route('user.auto-wallets.new') }}" method="post" id="addWalletForm"
                                    class="dgen-form" data-action="reload">
                                    @csrf
                                    <div class="space-y-4">

                                        <!-- Coin Selection -->
                                        <div class="relative">
                                            <label class="block text-xs text-gray-400 mb-1">Select coin</label>
                                            <button id="coinForDepositDropdownButton_2" type="button"
                                                class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 text-white flex items-center justify-between">

                                                <div class="flex items-center w-full">
                                                    <img src="" class=" rounded-full mr-2"
                                                        id="selectedCoinImg_2" />
                                                    <span id="selectedCoinText_2">Select Coin</span>
                                                </div>


                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                    class="h-5 w-5 transition-transform" viewBox="0 0 20 20"
                                                    fill="currentColor">
                                                    <path fill-rule="evenodd"
                                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 111.414 1.414l-4 4a1 1 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                            </button>
                                            <!-- Dropdown Menu -->
                                            <ul id="coinForDepositDropdownMenu_2"
                                                class="hidden h-48 overflow-y-auto absolute left-0 right-0 mt-2 bg-[#282828] border border-gray-700 rounded-xl shadow-lg z-50">
                                                @foreach ($coins as $coin)
                                                    @if (!array_key_exists($coin->code, $auto_wallets_array))
                                                        <li class="flex items-center px-4 py-2 text-gray-900 cursor-pointer hover:bg-blue-600"
                                                            data-value="{{ $coin->code }}"
                                                            data-label="{{ $coin->name }}"
                                                            data-target="{{ $coin->code . 2 }}"
                                                            data-currency_code="{{ $coin->code }}"
                                                            data-img="{{ 'https://nowpayments.io' . $coin->logo_url }}">
                                                            <img src="{{ 'https://nowpayments.io' . $coin->logo_url }}"
                                                                alt="coin" class="h-8 w-8 rounded-full mr-2" />
                                                            <p class="" id="{{ $coin->code . 2 }}">
                                                                <span class="text-white"
                                                                    style="text-transform: uppercase;">
                                                                    @if ($coin->network)
                                                                        {{ $coin->network }}
                                                                    @endif
                                                                </span>
                                                                <span class="text-white">
                                                                    {{ $coin->name }}</span>
                                                            </p>
                                                        </li>
                                                    @endif
                                                @endforeach

                                            </ul>

                                            <!-- Hidden Input for selected coin -->
                                            <input type="hidden" value="" name="currency_code"
                                                id="currency_code_2" />
                                        </div>

                                        <!-- Amount Input -->
                                        <div class="relative">
                                            <label class="block text-xs text-gray-400 mb-1">Wallet Address</label>
                                            <div class="relative">
                                                <span
                                                    class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">$</span>
                                                <input type="text" placeholder="Wallet Address" name="wallet_address"
                                                    id="wallet_address" value=""
                                                    @if (site('auto_withdraw') == 1) readonly @endif required
                                                    class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 pl-8 text-white focus:outline-none focus:border-blue-500" />
                                            </div>
                                        </div>

                                        <div class="text-gray-400 text-xs">
                                            <span class="text-red-500">WARNING:</span> For security reasons, newly added
                                            wallet
                                            address will be on security lock until the address is whitelisted. During this
                                            period,
                                            you wouldn't be able to use them for withdrawal.
                                        </div>

                                        <!-- Pay Now Button -->
                                        <button type="submit"
                                            class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 rounded-xl mt-4 hover:opacity-90 transition-opacity flex items-center justify-center">
                                            Add Address
                                        </button>
                                    </div>
                                </form>

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


                </div>


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

    <!-- New Deposit Modal -->
    <div id="NewWithdrawalModal"
        class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center hidden">
        <div class="bg-[#1c1c1c] p-6 rounded-3xl w-[90%] max-w-md">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold text-white">New withdrawal</h3>

                <button id="closeWithdrawalModal" class="text-gray-400 hover:text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd" />
                    </svg>
                </button>

            </div>

            <form action="{{ route('user.withdrawals.new') }}" method="post" id="withdrawalForm" {{-- class="gen-form" --}}
                data-action="reload">
                @csrf

                <div class="space-y-4">
                    <!-- Amount Input -->
                    <div class="relative">
                        <label class="block text-xs text-gray-400 mb-1">Amount {{ site('currency') }}</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">$</span>
                            <input type="number" step="any" placeholder="Amount ({{ site('currency') }})"
                                id="amount" name="amount" value="0" required
                                class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 pl-8 text-white focus:outline-none focus:border-blue-500" />
                        </div>
                    </div>

                    <!-- Wallet Address Input -->
                    <div class="relative">
                        <label class="block text-xs text-gray-400 mb-1">Wallet Address</label>
                        <div class="relative">
                            <input type="text" placeholder="Enter wallet address" id="wallet_address"
                                name="wallet_address" value="" @if (site('auto_withdraw') == 1) readonly @endif
                                required
                                class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 text-white focus:outline-none focus:border-blue-500" />
                        </div>
                    </div>

                    <!-- Coin Selection -->
                    <div class="relative">
                        <label class="block text-xs text-gray-400 mb-1">Select coin</label>
                        @if (site('auto_withdraw') == 1)
                            @if ($auto_wallets->count() > 0)
                                <button id="coinForDepositDropdownButton" type="button"
                                    class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 text-white flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        <img src="" alt="" class=" rounded-full" id="selectedCoinImg" />
                                        <span id="selectedCoinText">Select Coin</span>
                                    </div>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 111.414 1.414l-4 4a1 1 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </button>
                                <!-- Dropdown Menu -->
                                <ul id="coinForDepositDropdownMenu"
                                    class="hidden h-48 overflow-y-auto absolute left-0 right-0 mt-2 bg-[#282828] border border-gray-700 rounded-xl shadow-lg z-50">
                                    @foreach ($coins as $coin)
                                        @if (array_key_exists($coin->code, $auto_wallets_array))
                                            <li class="flex items-center px-4 py-2 cursor-pointer text-white hover:bg-gray-700 text-sm"
                                                data-value="{{ $coin->code }}" data-label="{{ $coin->name }}"
                                                data-img="{{ 'https://nowpayments.io' . $coin->logo_url }}">
                                                <img src="{{ 'https://nowpayments.io' . $coin->logo_url }}"
                                                    alt="coin" class="h-8 w-8 rounded-full mr-2" />
                                                <p class="">
                                                    <span class="text-white" style="text-transform: uppercase;">
                                                        @if ($coin->network)
                                                            {{ $coin->network }}
                                                        @endif
                                                    </span>
                                                    <span class="text-white"> {{ $coin->name }}</span>
                                                </p>
                                            </li>
                                        @endif
                                    @endforeach

                                </ul>
                            @else
                                <div
                                    class="w-full flex justify-center items-center ts-gray-3 p-2 rounded-lg border border-slate-800 hover:border-slate-600 cursor-pointer">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500"
                                        fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                                        <path
                                            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                    </svg>
                                    <span>You have not added any withdrawal wallet!</span>
                                </div>
                            @endif
                        @else
                            <button id="coinForDepositDropdownButton" type="button"
                                class="w-full bg-[#282828] border border-gray-700 rounded-xl p-3 text-white flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <img src="" alt="" class=" rounded-full" id="selectedCoinImg" />
                                    <span id="selectedCoinText">Select Coin</span>
                                </div>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
                                    viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 111.414 1.414l-4 4a1 1 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd" />
                                </svg>
                            </button>
                            <!-- Dropdown Menu -->
                            <ul id="coinForDepositDropdownMenu"
                                class="hidden h-48 overflow-y-auto absolute left-0 right-0 mt-2 bg-[#282828] border border-gray-700 rounded-xl shadow-lg z-50">
                                @foreach ($coins as $coin)
                                    <li class="flex items-center px-4 py-2 cursor-pointer text-white hover:bg-gray-700 text-sm"
                                        data-value="{{ $coin->code }}" data-label="{{ $coin->name }}"
                                        data-img="{{ 'https://nowpayments.io' . $coin->logo_url }}">
                                        <img src="{{ 'https://nowpayments.io' . $coin->logo_url }}" alt="coin"
                                            class="h-8 w-8 rounded-full mr-2" />
                                        <p class="">
                                            <span class="text-white" style="text-transform: uppercase;">
                                                @if ($coin->network)
                                                    {{ $coin->network }}
                                                @endif
                                            </span>
                                            <span class="text-white"> {{ $coin->name }}</span>
                                        </p>
                                    </li>
                                @endforeach

                            </ul>
                        @endif
                        <!-- Hidden Input for selected coin -->
                        <input type="hidden" value="" name="currency_code" id="currency_code" />
                    </div>

                    <!-- Important Information -->
                    <div class="mt-6">
                        <div class="flex items-center space-x-2 mb-2">
                            <span class="text-sm text-white">Important information</span>
                            <img src="{{ asset('/assets/templates/cavit/images/important-info-icon.svg') }}"
                                alt="" />
                        </div>
                        <div class="bg-[#282828] rounded-xl p-4 space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-pink-500">Minimum Withdrawal:</span>
                                <span class="text-white">{{ formatAmount(site('min_withdrawal')) }}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-pink-500">Maximum Withdrawal:</span>
                                <span class="text-white">{{ formatAmount(site('max_withdrawal')) }}</span>
                            </div>

                            <p class="text-xs text-gray-400 mt-2">
                                <span class="text-red-500">Warning: </span> Ensure your wallet
                                address is valid. Withdrawals to wrong or invalid wallet
                                address are not reversible.
                            </p>
                        </div>
                    </div>

                    <!-- Pay Now Button -->
                    <button type="submit"
                        class="w-full bg-gradient-to-t from-blue-500 to-blue-100 text-white py-3 rounded-2xl mt-4 hover:opacity-90 transition-opacity flex items-center justify-center">
                        Withdraw Now
                    </button>
                </div>

            </form>

        </div>
    </div>
@endsection

@section('scripts')
    {{-- show modal --}}
    <script>
        function initializeWithdrawalModals() {
            $(document).ready(function() {
                // Open Withdrawal Modal
                $(document).off("click", "#NewWithdrawalModalBtn").on("click", "#NewWithdrawalModalBtn",
                    function() {
                        $('#NewWithdrawalModal').removeClass('hidden opacity-0');
                    });

                // Close Withdrawal Modal
                $(document).off("click", "#closeWithdrawalModal").on("click", "#closeWithdrawalModal", function() {
                    $('#NewWithdrawalModal').addClass('hidden opacity-0');
                    setTimeout(function() {
                        $('#NewWithdrawalModal').addClass('hidden');
                    }, 300);
                });
            });
        }

        // Run modal initialization on page load
        $(document).ready(function() {
            initializeWithdrawalModals();
        });
    </script>


    {{-- for withdrawal history --}}
    <script>
        // search withdrawal
        $(document).on('input keyup', '#search-withdrawal-input', function(e) {
            var ref = $(this).val();
            var base_link = $('#search-withdrawal-button').data('link');
            var encodedRef = encodeURIComponent(ref);

            // Append the query parameter to the URL
            var link = base_link + '?s=' + encodedRef;
            $('#search-withdrawal-button').attr('href', link);
        });
    </script>


    {{-- withdrawal form --}}
    <script>
        let interval;

        // handle withdrawal form
        $(document).on('submit', '#withdrawalForm', function(e) {
            e.preventDefault();
            var amount = $('#amount').val() * 1;
            var currency_code = $('#currency_code').val();
            var min_withdrawal = "{{ site('min_withdrawal') }}" * 1;
            var max_withdrawal = "{{ site('max_withdrawal') }}" * 1;
            var currency = "{{ site('currency') }}";

            //check the currency code
            var error = null;
            if (!currency_code) {
                error = 'You have not selected a withdrawal method';
            }

            //check min and max withdrawal
            if (amount < min_withdrawal) {
                error = 'Minimum withdrawal amount is ' + currency + min_withdrawal;
            }

            if (amount > max_withdrawal) {
                error = 'Maximum withdrawal amount is ' + currency + max_withdrawal;
            }

            if (error === null) {
                var form = $(this);
                var formData = new FormData(this);

                var submitButton = $(this).find('button[type="submit"]');
                submitButton.addClass('relative disabled bg-black');
                submitButton.append('<span class="button-spinner"></span>');
                submitButton.prop('disabled', true);

                submitButton.removeClass(
                    'bg-gradient-to-t'
                );
                submitButton.addClass('not-allowed-cursor');

                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function(response) {


                        loadPage(window.location.href, submitButton, '#pageContent');

                        $('html, body').animate({
                            scrollTop: 0 + 100
                        }, 800);
                        toastNotify('success', 'withdrawal request initated successfully');

                        submitButton.addClass(
                            'bg-gradient-to-t'
                        );
                        submitButton.removeClass('not-allowed-cursor');




                    },
                    error: function(xhr, status, error) {

                        if (xhr.status == 422) {
                            var errors = xhr.responseJSON.errors;

                            if (errors) {
                                $.each(errors, function(field, messages) {
                                    var fieldErrors = '';
                                    $.each(messages, function(index, message) {
                                        fieldErrors += message + '<br>';
                                    });

                                    toastNotify('error', fieldErrors);
                                });
                            } else {
                                toastNotify('error', 'An Error occured, try again later');

                                submitButton.addClass(
                                    'bg-gradient-to-t'
                                );
                                submitButton.removeClass('not-allowed-cursor');
                            }
                        } else {
                            toastNotify('error', 'Server Error occured, try again later');

                            submitButton.addClass(
                                'bg-gradient-to-t'
                            );
                            submitButton.removeClass('not-allowed-cursor');
                        }



                    },
                    complete: function() {
                        submitButton.removeClass('disabled');
                        submitButton.find('.button-spinner').remove();
                        submitButton.prop('disabled', false);

                        // hide modal
                        $("#withdrawalForm")[0].reset();
                        $('#NewWithdrawalModal').addClass('hidden');
                    }
                });
            } else {

                toastNotify('error', error);

            }

        });
    </script>

    <script>
        //select coin for deposit
        function initializeDepositDropdown() {
            // console.log("Dropdown Initialized");

            // Toggle dropdown visibility with animation
            $(document).off("click", "#coinForDepositDropdownButton").on("click", "#coinForDepositDropdownButton",
                function() {
                    const coinForDepositDropdownMenu = $("#coinForDepositDropdownMenu");
                    if (coinForDepositDropdownMenu.hasClass("hidden")) {
                        coinForDepositDropdownMenu
                            .removeClass("hidden")
                            .addClass("scale-100 opacity-100")
                            .hide()
                            .slideDown(200);
                    } else {
                        coinForDepositDropdownMenu
                            .slideUp(200, function() {
                                $(this).addClass("hidden").removeClass("scale-100 opacity-100");
                            });
                    }
                });

            // Close dropdown when clicking outside
            $(document).off("click", "body").on("click", "body", function(e) {
                if (!$(e.target).closest("#coinForDepositDropdownButton, #coinForDepositDropdownMenu").length) {
                    $("#coinForDepositDropdownMenu")
                        .slideUp(200, function() {
                            $(this).addClass("hidden").removeClass("scale-100 opacity-100");
                        });
                }
            });

            // Handle selection
            $(document).off("click", "#coinForDepositDropdownMenu li").on("click", "#coinForDepositDropdownMenu li",
                function() {
                    const label = $(this).data("label");
                    const imgSrc = $(this).data("img");
                    const value = $(this).data("value");

                    // Update the button with the selected coin
                    $("#selectedCoinText").text(label);
                    $("#selectedCoinImg").attr("src", imgSrc).addClass("w-8 h-8");

                    // Update the hidden input value
                    $("#currency_code").val(value);

                    // Hide the dropdown menu
                    $("#coinForDepositDropdownMenu").slideUp(200, function() {
                        $(this).addClass("hidden").removeClass("scale-100 opacity-100");
                    });
                });
        }

        // Run dropdown initialization on page load
        $(document).ready(function() {
            initializeDepositDropdown();
        });
    </script>


    {{-- add wallet address --}}
    <script>
        /////////////////////--ADD WALLET ADDRESS--///////////////////////////////
        $(document).on('submit', '#addWalletForm', function(e) {
            e.preventDefault();

            var form = $(this);
            var successAction = form.data('action');
            var redirectUrl = form.data('url');
            var formData = new FormData(this);

            var submitButton = form.find('button[type="submit"]');
            submitButton.addClass('relative disabled bg-black').prop('disabled', true);
            submitButton.append('<span class="button-spinner"></span>');
            var passwordInputs = form.find('input[type="password"]');

            submitButton.removeClass(
                'bg-gradient-to-r'
            );
            submitButton.addClass('not-allowed-cursor');

            $.ajax({
                url: form.attr('action'),
                method: 'POST',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(response) {
                    var message = response.message;

                    // Clear password fields after success
                    if (successAction !== 'none' && passwordInputs.length > 0) {
                        passwordInputs.val('');
                    }

                    /////////////////// notification
                    toastNotify('success', message);

                    if (successAction === 'reload') {
                        $.ajax({
                            url: window.location.href,
                            method: 'GET',
                            success: function(response) {
                                $('#refresh').html($(response).find('#refresh').html());

                                // Reinitialize func after reload
                                initializeDropdown();
                                initializeTabsSlide();
                            },
                            error: function() {
                                //console.error('Error fetching new content');
                            }
                        });
                    } else if (successAction === 'redirect' && redirectUrl) {
                        window.location.href = redirectUrl;
                    } else if (successAction === 'reset') {
                        form.find('input[type!="hidden"]').val('');
                    }
                },
                error: function(xhr) {
                    var errors = xhr.responseJSON ? xhr.responseJSON.errors : null;
                    var errorMessage = 'An error occurred. Please try again later.';

                    if (errors) {
                        errorMessage = '';
                        $.each(errors, function(field, messages) {
                            $.each(messages, function(index, message) {
                                errorMessage += message + '<br>';
                            });
                        });
                    }

                    /////////////////// notification
                    toastNotify('error', errorMessage);
                },
                complete: function() {
                    submitButton.removeClass('disabled bg-black').prop('disabled', false);
                    submitButton.find('.button-spinner').remove();
                    submitButton.removeClass('not-allowed-cursor');
                    submitButton.addClass('bg-gradient-to-r');
                }
            });
        });

        function initializeDropdown() {

            // Toggle dropdown visibility
            $(document).off('click', '#coinForDepositDropdownButton_2').on('click', '#coinForDepositDropdownButton_2',
                function() {
                    const menu = $('#coinForDepositDropdownMenu_2');
                    if (menu.hasClass('hidden')) {
                        menu.removeClass('hidden').hide().slideDown(200);
                    } else {
                        menu.slideUp(200, function() {
                            $(this).addClass('hidden');
                        });
                    }
                });

            // Close dropdown when clicking outside
            $(document).off('click', 'body').on('click', 'body', function(e) {
                if (!$(e.target).closest('#coinForDepositDropdownButton_2, #coinForDepositDropdownMenu_2').length) {
                    $('#coinForDepositDropdownMenu_2').slideUp(200, function() {
                        $(this).addClass('hidden');
                    });
                }
            });

            // Handle dropdown item selection
            $(document).off('click', '#coinForDepositDropdownMenu_2 li').on('click', '#coinForDepositDropdownMenu_2 li',
                function() {
                    const label = $(this).data('label');
                    const imgSrc = $(this).data('img');
                    const value = $(this).data('value');

                    // Update the button with the selected coin
                    $('#selectedCoinText_2').text(label);
                    $('#selectedCoinImg_2').attr('src', imgSrc).addClass('w-8 h-8');

                    // Update the hidden input value
                    $('#currency_code_2').val(value);

                    // Hide the dropdown menu
                    $('#coinForDepositDropdownMenu_2').slideUp(200, function() {
                        $(this).addClass('hidden');
                    });
                });
        }

        // Run dropdown initialization on page load
        $(document).ready(function() {
            initializeDropdown();
        });

        // Run tab slide initialization on page load
        function initializeTabsSlide() {
            //hide filter form
            $('#filterForm').hide();


            // Toggle modal
            $(document).off("click", "#myWithdrawalWalletsBtn").on("click", "#myWithdrawalWalletsBtn", function() {
                $("#myWithdrawalWallets").slideDown().removeClass('hidden');
                $("#myWithdrawalHistory").slideUp().addClass('hidden');

                $("#myWithdrawalHistoryBtn").removeClass('withdrawal_button_gradient_small');
                $("#myWithdrawalWalletsBtn").addClass('withdrawal_button_gradient_small');

                $('#filterForm').hide();
            });

            // Swap between tabs
            $(document).off("click", "#myWithdrawalHistoryBtn").on("click", "#myWithdrawalHistoryBtn", function() {
                $("#myWithdrawalHistory").slideDown().removeClass('hidden');
                $("#myWithdrawalWallets").slideUp().addClass('hidden');

                $("#myWithdrawalWalletsBtn").removeClass('withdrawal_button_gradient_small');
                $("#myWithdrawalHistoryBtn").addClass('withdrawal_button_gradient_small');

                $('#filterForm').show();
            });
        }

        // Run tabs initialization on page load
        $(document).ready(function() {
            initializeTabsSlide();
        });
    </script>
@endsection
