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


@section('css')
@endsection

@section('contents')
    <div class="min-h-screen">
        <!-- Top Navigation Spacer for Desktop -->
        <div class="hidden lg:block h-16"></div>
        <!-- Content Area -->
        <div class="p-6">
            <section class="mt-4 md:mt-12 lg:mt-20 lg:px-40">
                <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 md:w-80">
                            <button id="NewDepositModalBtn"
                                class="gradient-bg text-black py-2 px-4 rounded-xl w-full font-semibold">
                                New Deposit
                            </button>

                            <div
                                class="flex items-center space-x-2 border gradient-border3 text-black rounded-2xl px-2 py-2">
                                <img src="{{ asset('/assets/templates/lunex/images/search-icon.svg') }}" alt=""
                                    class="w-5 h-5" />
                                <input type="text" placeholder="Txn Ref" id="search-deposit-input"
                                    value="{{ request()->s }}"
                                    class="bg-transparent focus:outline-none text-sm flex-grow placeholder-gray-500 w-full" />
                                <div class="simple-pagination" data-paginator="deposits">
                                    <a href="" id="search-deposit-button"
                                        data-link="{{ route('user.deposits.index') }}"
                                        class="bg-[#a3dc2f] px-3 py-1 rounded-md text-sm hover:bg-gray-700 whitespace-nowrap paginator-link flex items-center justify-center">
                                        Search
                                    </a>
                                </div>
                            </div>
                        </div>

                        <h2 class="text-black text-xl font-semibold mb-2 md:mb-0 order-first">
                            Deposits
                        </h2>
                    </div>

                    <div id="deposits">
                        <!-- Table Section -->
                        <div class="border border-transparent bg-clip-border rounded-2xl p-2 md:p-4 mt-4 relative w-full"
                            style="background: linear-gradient(to right,#14f19510,#e39dff10,#80ecff10);">
                            <!-- Pseudo-element for gradient border -->
                            <div class="absolute inset-0 rounded-2xl pointer-events-none"
                                style="background: linear-gradient(to right,#14f195,#80ecff,#e39dff);padding: 1px;mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;">
                            </div>

                            <div
                                class="overflow-x-auto rounded-lg h-[calc(100vh-300px)] md:h-[60vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500 relative z-10">
                                <table class="w-full min-w-[640px]" id="depositTable">
                                    <thead>
                                        <tr class="">
                                            <th class="text-black px-3 md:px-4 py-3 text-left text-sm">
                                                AI Bots
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-end text-sm">
                                                Holdings
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-end text-sm">
                                                Date
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-end text-sm">
                                                Time
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-end text-sm">
                                                Status
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-end text-sm"></th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @forelse ($deposits as $deposit)
                                            <tr class="border-b border-gray-700">
                                                <td class="text-black px-3 md:px-4 py-4">
                                                    <div class="flex items-center space-x-2">
                                                        <img src="{{ 'https://nowpayments.io' . $deposit->depositCoin->logo_url }}"
                                                            alt="tron" class="w-5 h-5 md:w-6 md:h-6" />
                                                        <span
                                                            class="text-sm md:text-base">{{ $deposit->depositCoin->name }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-black px-3 md:px-4 py-4 text-end">
                                                    <div class="text-sm md:text-base">
                                                        <span>{{ formatAmount($deposit->amount) }}</span>
                                                    </div>
                                                    <div class="text-gray-400 text-xs">
                                                        <span>{{ $deposit->converted_amount . ' ' . $deposit->currency }}</span>
                                                    </div>
                                                </td>
                                                <td class="text-black px-3 md:px-4 py-4 text-end text-sm">
                                                    <span>{{ date('d-m-y', strtotime($deposit->created_at)) }}</span>
                                                </td>
                                                <td class="text-black px-3 md:px-4 py-4 text-end text-sm">
                                                    <span>{{ date('H:i:s', strtotime($deposit->created_at)) }}</span>
                                                </td>
                                                <td class="text-black px-3 md:px-4 py-4">
                                                    <div class="w-full flex justify-end">
                                                        @if ($deposit->status == 'waiting')
                                                            <button
                                                                class="inline-flex gap-1 items-center justify-center px-2 py-1 w-fit text-xs mb-1 border border-[#838486] rounded-md bg-[#838486]/22 text-[#838486]">
                                                                <img src="{{ asset('/assets/templates/lunex/images/waiting-dot.svg') }}"
                                                                    alt="" />
                                                                <span class="capitalize">{{ $deposit->status }}</span>
                                                            </button>
                                                        @elseif ($deposit->status == 'finished')
                                                            <button
                                                                class="inline-flex gap-1 items-center justify-center px-2 py-1 w-fit text-xs mb-1 border border-[#08c949] rounded-md bg-[#08c949]/13 text-[#08c949]">
                                                                <img src="{{ asset('/assets/templates/lunex/images/approved-icon.svg') }}"
                                                                    alt="" />
                                                                <span class="capitalize">{{ $deposit->status }}</span>
                                                            </button>
                                                        @elseif (
                                                            $deposit->status == 'rejected' ||
                                                                $deposit->status == 'failed' ||
                                                                $deposit->status == 'refunded' ||
                                                                $deposit->status == 'expired')
                                                            <button
                                                                class="inline-flex gap-1 items-center justify-center px-2 py-1 w-fit text-xs mb-1 border border-[#ea0a0e] rounded-md bg-[#ea0a0e]/11 text-[#ea0a0e]">
                                                                <img src="{{ asset('/assets/templates/lunex/images/rejected-badge.svg') }}"
                                                                    alt="" />
                                                                <span class="capitalize">{{ $deposit->status }}</span>
                                                            </button>
                                                        @else
                                                            <button
                                                                class="inline-flex gap-1 items-center justify-center px-2 py-1 w-fit text-xs mb-1 border border-[#309aff] rounded-md bg-[#309aff]/13 text-[#309aff]">
                                                                <img src="{{ asset('/assets/templates/lunex/images/pending-badge.svg') }}"
                                                                    alt="" />
                                                                <span class="capitalize">{{ $deposit->status }}</span>
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>
                                                <td class="px-3 md:px-4 py-4">
                                                    <div class="w-full flex justify-end">
                                                        <button id="view_deposit"
                                                            data-link="{{ route('user.deposits.view', ['ref' => $deposit->ref]) }}"
                                                            class="flex items-center justify-end text-[#a3dc2f] text-sm hover:bg-black px-2 py-1 rounded-lg cursor-pointer transition-colors w-auto view-single-deposit">
                                                            <img src="{{ asset('/assets/templates/lunex/images/eye-icon.svg') }}"
                                                                alt="" class="w-4 h-4 mr-1" />
                                                            View
                                                        </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. No depsoit found!</span>
                                                </td>
                                            </tr>
                                        @endforelse

                                    </tbody>
                                </table>
                            </div>
                        </div>

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

            </section>
        </div>
    </div>
    <!-- New Deposit Modal -->

    <div id="NewDepositModal"
        class="hidden  backdrop-custom bg-white fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center">

        <div class="bg-white w-[90%]  max-w-3xl rounded-3xl flex items-center justify-center">
            <div class="p-6 rounded-3xl w-full flex flex-col md:flex-row md:space-x-6 md:gap-12 relative"
                style="background: linear-gradient( to right, #14f19510,#e39dff10,#80ecff10);">
                <!-- Close button repositioned -->
                <button id="closeNewDepositModal"
                    class="absolute -top-3 -right-3 text-gray-400 hover:text-gray-600 bg-white rounded-full p-1 shadow-lg">
                    <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>

                <form action="{{ route('user.deposits.new') }}" method="post" id="depositForm">
                    @csrf
                    <div class="flex flex-col md:flex-row md:space-x-6 md:gap-12">
                        <!-- Left Side: Inputs -->
                        <div class="flex-1 space-y-4">
                            <h3 class="text-xl font-semibold text-black mb-6">New deposit</h3>


                            <div class="relative">
                                <label class="block text-xs text-black mb-1">Amount USD</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 border border-gray-700 rounded-xl p-3 pl-8 text-black focus:outline-none focus:border-blue-500" />
                                </div>
                            </div>

                            <!-- Coin Selection -->
                            <div class="relative">
                                <label class="block text-xs text-black mb-1">Select coin</label>
                                <button id="coinForDepositDropdownButton" type="button"
                                    class="w-full border border-gray-700 rounded-xl p-3 text-black focus:outline-none focus:border-blue-500 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>

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

                        <!-- Right Side: Important Information and Pay Now Button -->
                        <div class="flex-1 mt-6 md:mt-0">
                            <div class="flex items-center space-x-2 mb-2">
                                <span class="text-sm text-black">Important information</span>
                                <img src="{{ asset('/assets/templates/lunex/images/important-info-icon.svg') }}"
                                    alt="" />
                            </div>
                            <div class="rounded-xl p-4 space-y-2">
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-700">Minimum Deposit:</span>
                                    <span class="text-black">{{ formatAmount(site('min_deposit')) }}</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-700">Maximum Deposit:</span>
                                    <span class="text-black">{{ formatAmount(site('max_deposit')) }}</span>
                                </div>
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-700">Maximum Waiting Duration:</span>
                                    <span class="text-black">7 Days</span>
                                </div>
                                <p class="text-xs text-black mt-2 md:mt-4">
                                    <span class="text-red-500">Warning: </span> After selecting your
                                    preferred payment method and entering the amount you want to
                                    deposit, a new wallet address will be generated for your
                                    deposit. Sending to a previously/expired generated address or
                                    depositing an incorrect coin/token will result in a permanent
                                    loss.
                                </p>
                            </div>

                            <!-- Pay Now Button -->
                            <button type="submit"
                                class="w-full primaryBtn py-3 font-semibold rounded-3xl mt-4 hover:opacity-90 transition-opacity  flex items-center justify-center">
                                Pay Now
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <!-- Confirm Deposit Modal -->
    <div id="NewDepositInformationModal"
        class="hidden backdrop-custom bg-white fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center">

        <div class="bg-[#f3feed] p-6 rounded-3xl w-[90%] max-w-md">
            <!-- Header -->
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold text-black">Deposit Details</h3>
                <button id="closeNewDepositInfoModal" 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>

            <div id="paymentLink" class="hidden mt-5 mb-5 flex items-center justify-center w-36">
                <a href="" id="paymentLinkHref" target="_blank" rel="noopener noreferrer"
                    class="w-full bg-[#a3dc2f] text-black px-5 py-1 rounded uppercase text-center">Pay Now</a>
            </div>

            <!-- QR Code -->
            <div class="flex justify-center mb-6">
                <div class="bg-black p-2 rounded-2xl">
                    <div id="wallet_qrcode" class="clipboard" data-copy=""></div>
                </div>
            </div>

            <!-- Transaction Details -->
            <div class="space-y-4">
                <!-- Status -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-black">Status</span>
                    <div class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
                        <p class="text-gray-400">
                            <span id="display_deposit_status"></span>
                        </p>
                    </div>
                </div>

                <!-- Valid Until -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-black">Valid Until</span>
                    <p class="text-gray-400">
                        <span id="display_deposit_valid_until"></span>
                    </p>
                </div>

                <!-- Amount -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-black">Amount</span>
                    <p class="text-gray-400">
                        {{ site('currency') }}<span id="display_deposit_amount"></span>
                    </p>
                </div>

                <!-- Fee -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-black">Fee</span>
                    <p class="text-gray-400">
                        {{ site('currency') }}<span id="display_deposit_fee"></span>
                    </p>
                </div>

                <!-- Pay Amount -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-black">Pay Amount</span>
                    <p class="text-gray-400">
                        <span id="display_deposit_converted_amount" class="clipboard cursor-pointer" data-copy="">
                        </span>
                        <span id="display_deposit_currency"></span>
                    </p>
                </div>

                <!-- Network -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-black">Network</span>
                    <p class="text-gray-400">
                        <span id="display_deposit_network" class="clipboard cursor-pointer" data-copy=""></span>
                    </p>
                </div>

                <!-- Wallet Address -->
                <div class="flex flex-col gap-2 text-sm">
                    <span class="text-black">Wallet Address</span>
                    <div class="flex items-center justify-between gap-2 p-2 rounded-lg">
                        <p class="text-gray-400 text-xs truncate">
                            <span id="display_deposit_payment_wallet" class="clipboard cursor-pointer"
                                data-copy=""></span>
                        </p>
                        <button class="flex-shrink-0 clipboard" data-copy="">
                            <img src="{{ asset('/assets/templates/lunex/images/copy-icon.svg') }}" alt="" />
                        </button>
                    </div>
                </div>

                <!-- Transaction Reference -->
                <div class="flex justify-between items-center text-sm">
                    <span class="text-black">Txn Ref</span>
                    <p class="text-gray-400">
                        <span id="display_deposit_ref" class="clipboard cursor-pointer" data-copy=""></span>
                    </p>
                </div>
            </div>
        </div>

    </div>

    <!-- View Deposit Modal -->
    <div class="w-full">
        <div id="modalContent"
            class="hidden backdrop-custom bg-white fixed inset-0 bg-opacity-50 backdrop-blur-sm z-50 flex items-center justify-center">
            <div id="modalDisplay" class="bg-[#f3feed] p-6 rounded-3xl w-[90%] max-w-md">



            </div>
        </div>
    </div>
@endsection





@section('scripts')
    {{-- show modal --}}
    <script>
        function initializeDepositModals() {

            // Open Deposit Modal
            $(document).off("click", "#NewDepositModalBtn").on("click", "#NewDepositModalBtn", function() {
                $('#NewDepositModal').removeClass('hidden opacity-0').addClass('opacity-100');
            });

            // Close Deposit Modal
            $(document).off("click", "#closeNewDepositModal").on("click", "#closeNewDepositModal", function() {
                $('#NewDepositModal').removeClass('opacity-100').addClass('opacity-0');
                setTimeout(function() {
                    $('#NewDepositModal').addClass('hidden');
                }, 300); // Matches transition duration
            });

            // Close Deposit Information Modal
            $(document).off("click", "#closeNewDepositInfoModal").on("click", "#closeNewDepositInfoModal", function() {
                $('#NewDepositInformationModal').addClass('hidden');
            });
        }

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

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

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

    <script>
        let interval;
        //single deposit
        $(document).on('click', '.view-single-deposit', function(e) {
            var clicked = $(this);
            clicked.addClass('relative disabled bg-gray-800');
            clicked.append('<span class="button-spinner"></span>');
            clicked.prop('disabled', true);
            var link = $(this).data('link');

            $('#modalContent').removeClass('hidden');
            var html = $('#single-display-new-deposit-information');

            $.ajax({
                url: link,
                method: 'GET',
                success: function(response) {
                    var deposit = response.deposit;

                    var modalContent = `
                    <div class="block">
                        <!-- Header -->
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-xl font-semibold text-black">Deposit Details</h3>
                            <button id="closeDepositDetail" class="text-gray-400 hover:text-white">
                                <img src="{{ asset('/assets/templates/gopie/images/close-modal-icon.svg') }}"
                                    alt="" />
                            </button>
                        </div>

                        <!-- QR Code -->
                        <div class="flex justify-center mb-6">
                            <div class="bg-black p-2 rounded-2xl">
                                <div id="single_wallet_qrcode" class="clipboard" data-copy=""></div>
                            </div>
                        </div>

                        <!-- Transaction Details -->
                        <div class="space-y-4">
                            <!-- Status -->
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-black">Status</span>
                                <div class="flex items-center space-x-2">
                                    <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
                                    <p class="text-gray-400">
                                        <span id="single_display_deposit_status"></span>
                                    </p>
                                </div>
                            </div>

                            <!-- Valid Until -->
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-black">Valid Until</span>
                                <p class="text-gray-400">
                                    <span id="single_display_deposit_valid_until"></span>
                                </p>
                            </div>

                            <!-- Amount -->
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-black">Amount</span>
                                <p class="text-gray-400">
                                    {{ site('currency') }}
                                    <span id="single_display_deposit_amount"></span>
                                </p>
                            </div>

                            <!-- Fee -->
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-black">Fee</span>
                                <p class="text-gray-400">
                                    {{ site('currency') }}
                                    <span id="single_display_deposit_fee"></span>
                                </p>
                            </div>

                            <!-- Pay Amount -->
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-black">Pay Amount</span>
                                <p class="text-gray-400">
                                    <span id="single_display_deposit_converted_amount" class="clipboard cursor-pointer"
                                        data-copy="">
                                    </span>
                                    <span id="single_display_deposit_currency"></span>
                                </p>
                            </div>

                            <!-- Network -->
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-black">Network</span>
                                <p class="text-gray-400">
                                    <span id="single_display_deposit_network" class="clipboard cursor-pointer"
                                        data-copy=""></span>
                                </p>
                            </div>

                            <!-- Wallet Address -->
                            <div class="flex flex-col gap-2 text-sm">
                                <span class="text-black">Wallet Address</span>
                                <div
                                    class="flex items-center justify-between gap-2 p-2 rounded-lg ">
                                    <p class="text-gray-400 text-xs truncate">
                                        <span id="single_display_deposit_payment_wallet"
                                            class="wallet_address clipboard cursor-pointer" data-copy=""></span>
                                    </p>
                                    <button class="flex-shrink-0 clipboard" data-copy=""
                                        id="single_display_deposit_payment_wallet_icon">
                                        <img src="{{ asset('/assets/templates/lunex/images/copy-icon.svg') }}"
                                            alt="" />
                                    </button>
                                </div>
                            </div>

                            <!-- Transaction Reference -->
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-black">Txn Ref</span>
                                <p class="text-gray-400">
                                    <span id="single_display_deposit_ref" class="clipboard cursor-pointer" data-copy="">
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    `;

                    $('#modalContent').removeClass("hidden");
                    $('#modalDisplay').html(modalContent);

                    // Loop through the deposit object's properties
                    for (var key in deposit) {
                        if (deposit.hasOwnProperty(key)) {
                            var value = deposit[key];
                            var element = $('#single_display_deposit_' + key);
                            if (element.length > 0) {
                                element.text(value);
                            }


                            //update the copy attribute
                            if (element.hasClass('clipboard')) {
                                element.attr('data-copy', value);
                            }

                            // update clipboard attribute for only wallet view icon

                            if (key == 'payment_wallet') {
                                var walletViewIcon = $('#single_display_deposit_payment_wallet_icon');
                                walletViewIcon.attr('data-copy', deposit.payment_wallet);
                            }


                        }
                    }

                    // create qrcode
                    var qrCodeElement = document.getElementById('single_wallet_qrcode');
                    var qrCode = new QRCode(qrCodeElement, {
                        text: deposit.payment_wallet,
                        width: 200,
                        height: 200
                    });

                    var walletQrCodeDiv = document.getElementById('single_wallet_qrcode');
                    walletQrCodeDiv.setAttribute('data-copy', deposit.payment_wallet);
                    var imageElement = walletQrCodeDiv.querySelector('img');
                    imageElement.classList.add('rounded-lg', 'border', 'border-slate-800',
                        'hover:border-slate-600', 'cursor-pointer', 'p-1');
                    //imageElement.setAttribute('style', '');

                    //create a count down
                    var targetId = 'single_display_deposit_valid_until';
                    var targetDateString = deposit.valid_until;
                    if (interval) {
                        clearInterval(interval);
                    }

                    interval = setInterval(function() {
                        updateCountdown(targetId, targetDateString);
                    }, 1000);

                    // Check payment status
                    var ref = deposit.ref
                    setInterval(function() {
                        $.ajax({
                            url: "{{ url('/user/deposits/view') }}" + '/' + deposit
                                .ref,
                            method: 'GET',
                            success: function(response) {
                                var status = response.deposit.status;
                                $('#single_display_deposit_status').html(status);


                            }
                        });
                    }, 10000);


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

                }
            });

        });


        //close dposit details modal
        $('#modalDisplay').on('click', '#closeDepositDetail', function() {
            // You can add code to hide the modal here.
            $('#modalContent').addClass('hidden');
        });
    </script>

    {{-- for deposit --}}
    <script>
        //select coin for deposit
        $(document).ready(function() {
            // Toggle dropdown visibility with animation

            $('#coinForDepositDropdownButton').on('click', 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).on('click', function(e) {
                if (!$(e.target).closest('#coinForDepositDropdownButton, #coinForDepositDropdownMenu')
                    .length) {
                    $('#coinForDepositDropdownMenu')
                        .slideUp(200, function() {
                            $(this).addClass('hidden').removeClass('scale-100 opacity-100');
                        });
                }
            });

            // Handle selection
            $('#coinForDepositDropdownMenu li').on('click', 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-5 h-5');;

                // 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');
                    });
            });
        });
    </script>

    <script>
        // for new posit
        // handle deposit form
        $(document).on('submit', '#depositForm', function(e) {
            e.preventDefault();
            var amount = $('#amount').val() * 1;
            var currency_code = $('#currency_code').val();
            var min_deposit = "{{ site('min_deposit') }}" * 1;
            var max_deposit = "{{ site('max_deposit') }}" * 1;
            var currency = "{{ site('currency') }}";

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

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

            if (amount > max_deposit) {
                error = 'Maximum deposit amount is ' + currency + max_deposit;
            }

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

                var submitButton = $(this).find('button[type="submit"]');
                submitButton.addClass('relative disabled');
                submitButton.append('<span class="button-spinner"></span>');
                // new modification
                submitButton.removeClass('primaryBtn');
                submitButton.addClass('disabled-button');
                //
                submitButton.prop('disabled', true);
                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        $('#amount').val(0);
                        var deposit = response.deposit;
                        $('#NewDepositModal').toggleClass('hidden');
                        $('#NewDepositInformationModal').toggleClass('hidden');



                        if (deposit.link !== 'nill' && deposit.link !== 'undefined') {
                            // window.location.href = deposit.link;
                            // window.open(deposit.link, "_blank");
                            $("#paymentLink").removeClass('hidden');
                            $("#paymentLinkHref").attr('href', deposit.link);
                            window.location.href = deposit.link;
                        }

                        // Loop through the deposit object's properties
                        for (var key in deposit) {
                            if (deposit.hasOwnProperty(key)) {
                                var value = deposit[key];
                                var element = $('#display_deposit_' + key);
                                if (element.length > 0) {
                                    element.text(value);
                                }

                                //update the copy attribute
                                if (element.hasClass('clipboard')) {
                                    element.attr('data-copy', value);
                                }


                            }
                        }


                        //create a count down
                        var targetId = 'display_deposit_valid_until';
                        var targetDateString = deposit.valid_until;
                        const interval = setInterval(function() {
                            updateCountdown(targetId, targetDateString);
                        }, 1000);

                        // create qrcode
                        var qrCodeElement = document.getElementById('wallet_qrcode');
                        qrCodeElement.innerHTML = '';

                        var qrCode = new QRCode(qrCodeElement, {
                            text: deposit.payment_wallet,
                            width: 200,
                            height: 200
                        });

                        var walletQrCodeDiv = document.getElementById('wallet_qrcode');
                        walletQrCodeDiv.setAttribute('data-copy', deposit.payment_wallet);
                        var imageElement = walletQrCodeDiv.querySelector('img');
                        imageElement.classList.add('rounded-lg', 'border', 'border-slate-800',
                            'hover:border-slate-600', 'cursor-pointer', 'p-1');

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

                        // Check payment status
                        var ref = deposit.ref
                        setInterval(function() {
                            $.ajax({
                                url: "{{ url('/user/deposits/view') }}" + '/' + deposit
                                    .ref,
                                method: 'GET',
                                success: function(response) {
                                    var status = response.deposit.status;
                                    $('#display_deposit_status').html(status);
                                }
                            });
                        }, 10000);

                        ///function to update deposit table
                        var link = window.location.href;
                        var clicked = false;
                        var targetDiv = "#depositTable"
                        loadPage(link, clicked, targetDiv);


                    },
                    error: function(xhr, status, error) {
                        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');


                        }


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


                        submitButton.addClass('primaryBtn');
                        submitButton.removeClass('disabled-button');

                    }
                });
            } else {

                toastNotify('error', error);

            }

        });


        //toggle deposit modal
        $(document).ready(function() {
            //deposit information modal
            $('#NewDepositInformationModal').on('click', '#closeNewDepositInfoModal', function() {
                $('#NewDepositInformationModal').toggleClass('hidden');
            });

        });
    </script>
@endsection
