@extends('layouts.user')
@section('content')

<main
    class="w-full xl:px-[48px] px-4 pb-6 xl:pb-[48px] sm:pt-[156px] pt-[100px]"
    >
    <!-- write your code here-->
    <div class="2xl:flex 2xl:space-x-[48px]">
        <div class="2xl:w-[424px]">
        <div class="w-full rounded-xl bg-white dark:bg-darkblack-600 px-4 md:px-7 py-11 mb-[48px]">
            <div class="px-4 py-8 pb-12 border rounded-lg md:px-7 border-bgray-300 dark:border-darkblack-400">
            <h3 class="text-2xl font-semibold text-bgray-900 dark:text-white">
                Main Balance
            </h3>
            <h2
                class="mb-2 text-3xl font-bold sm:text-4xl font-poppins text-bgray-900 dark:text-white"
            >
                ${{ number_format(auth()->user()->balance, 2) }}
                <span
                class="text-base font-medium uppercase text-bgray-500"
                >USDT</span
                >
            </h2>
            <div class="flex gap-4">
                <span class="text-base font-medium text-bgray-500 dark:text-darkblack-300"
                >{{ now()->format('d F Y') }}</span
                >
                    <span class="flex">
                    @if(auth()->user()->balance > 0)
                    <span class="text-base font-semibold text-success-300"
                        >Active</span
                    >
                    @else
                    <span class="text-base font-semibold" style="color: #ff2424;"
                        >In-Active</span
                    >
                    @endif
                </span>
            </div>
            </div>
            <div class="flex justify-center -mt-6">
            <button onclick="goToDepHistory()"
                class="px-6 py-3 text-sm font-medium bg-white border rounded-lg border-bgray-500 text-bgray-600 dark:bg-darkblack-600 dark:text-white"
            >
                View Deposit History
            </button>
            </div>
            <button onclick="goToDeposit()"
            class="w-full py-4 font-bold text-white transition-all rounded-lg bg-success-300 hover:bg-success-400 mt-14"
            >
            Add Funds
            </button>
        </div>


        
        <div id="deposit"
            class="relative w-full px-4 py-5 mb-6 bg-white rounded-lg dark:bg-darkblack-600 dark:border dark:border-darkblack-400 md:px-7"
        >
            <div class="w-full mb-8 my-wallet">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-lg font-bold text-bgray-900 dark:text-white">
                    Deposit Funds
                    </h3>
                </div>
            </div>
            <div class="w-full">
            <h3 class="mb-4 text-lg font-bold text-bgray-900 dark:text-white">
                Available Payment Method
            </h3>

            <form class="" method="post" action="{{ route('submit.payment') }}">
                @csrf
                <div class="relative mb-3 payment-select">
                    <button
                    onclick="dateFilterAction('#paymentFilter')"
                    type="button"
                    class="px-5 w-full h-[56px] border border-bgray-200 dark:border-darkblack-400 flex justify-between items-center rounded-lg overflow-hidden"
                    >
                    <div class="flex items-center space-x-2">
                        <span>
                        <img
                            src="https://nowpayments.io/images/coins/usdtsol.svg"
                            alt="master"
                        />
                        </span>
                        <span class="text-sm font-medium text-bgray-900 dark:text-white"
                        >
                            USDTSOL 
                        </span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm font-bold text-bgray-900 dark:text-white">
                            SOL Network
                        </span>
                        <span class="text-sm font-medium text-bgray-900">
                        <svg
                            width="16"
                            height="16"
                            viewBox="0 0 16 16"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                            d="M4 6L8 10L12 6"
                            stroke="#A0AEC0"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            />
                        </svg>
                        </span>
                    </div>
                    </button>
                    <div
                    id="paymentFilter"
                    class="absolute right-0 z-10 hidden w-full overflow-hidden bg-white rounded-lg shadow-lg dark:bg-darkblack-500 top-full"
                    >
                        <ul>
                            <li
                                onclick="dateFilterAction('#paymentFilter')"
                                class="px-5 py-2 text-sm font-semibold cursor-pointer text-bgray-90 dark:text-white hover:bg-bgray-100 hover:dark:bg-darkblack-600"
                            >
                                USDT SOL - SOL Network
                            </li>
                        </ul>
                    </div>
                </div>
                <div
                class="w-full rounded-lg border border-bgray-200 dark:border-darkblack-400 focus-within:border-success-300 p-4 h-[98px] flex flex-col justify-between"
                >
                <p class="text-sm font-medium text-bgray-600 dark:text-bgray-50">
                    Enter amount
                </p>
                <div
                    class="w-full h-[35px] flex justify-between items-center"
                >
                    <span class="text-2xl font-bold text-bgray-900 dark:text-white">USDT</span>
                    <label class="w-full">
                    <input
                        type="number" id="amount" name="amount"
                        class="w-full p-0 text-2xl font-bold border-none focus:outline-none dark:bg-darkblack-600 focus:ring-0 dark:border-darkblack-400 text-bgray-900 dark:text-white"
                    />
                    </label>
                    <div>
                    </div>
                </div>
                </div>
                <button type="submit"
                    data-target="#multi-step-modal"
                    class="w-full py-4 font-bold text-white transition-all rounded-lg bg-success-300 modal-open hover:bg-success-400 mt-7"
                >
                    Deposit Funds
                </button>
                </div>
            </form>
        </div>
        </div>
        <div class="2xl:flex-1">
        <div class="w-full xl:flex xl:space-x-[24px]">

        </div>



        
        
        <!--list table-->
        <div id="deposit-history" class="w-full py-[20px] px-[24px] rounded-lg bg-white dark:bg-darkblack-600">
            <div class="flex flex-col space-y-5">
            <div class="w-full flex h-[56px] space-x-4">
                <div
                class="w-full border border-transparent focus-within:border-success-300 h-full dark:bg-darkblack-500 bg-bgray-100 rounded-lg px-[18px]"
                >
                    <div
                        class="flex w-full h-full items-center space-x-[15px]"
                    >
                        <h1 class="text-bgray-90 dark:text-white">Deposit History<h1>
                    </div>
                </div>
            </div>
            <div class="w-full overflow-x-auto table-content">
                <table class="w-full">
                <tr class="border-b border-bgray-300 dark:border-darkblack-400">
                    <td
                    class="py-5 px-6 xl:px-0 w-[250px] lg:w-auto inline-block"
                    >
                    <div class="w-full flex space-x-2.5 items-center">
                        <span
                        class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                        >
                        Deposit Amount</span
                        >
                    </div>
                    </td>
                    <td class="px-6 py-5 xl:px-0">
                    <div class="w-full flex space-x-2.5 items-center">
                        <span class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                        >Status</span
                        >
                    </div>
                    </td>
                    <td class="px-8 py-5 xl:px-0">
                    <div class="flex space-x-2.5 items-center">
                        <span
                        class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                        >
                        Actions</span
                        >
                    </div>
                    <!-- </td>
                    <td class="py-5 px-6 xl:px-0 w-[165px]">
                    <div class="w-full flex space-x-2.5 items-center">
                        <span class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                        >Action</span
                        >
                    </div>
                    </td> -->
                    <td class="px-6 py-5 xl:px-0"></td>
                </tr>
                @forelse($deposits as $deposit)
                    <tr class="border-b border-bgray-300 dark:border-darkblack-400">
                        <td class="px-6 py-5 xl:px-0">
                            <p class="text-base font-semibold text-success-300">
                                + USDT {{ number_format($deposit->amount, 2) }}
                            </p>
                        </td>
                        <td class="px-6 py-5 xl:px-0">
                            <p class="text-base font-medium text-bgray-900 dark:text-white">
                                @if($deposit->status == 1)
                                    Completed
                                @elseif($deposit->status == 2)
                                    Failed
                                @else
                                    Pending...
                                @endif
                            </p>
                        </td>
                        <td class="py-5 px-7 xl:px-0">
                        <div class="">
                            <a href="{{ route('payment_info', $deposit->id) }}" class="text-bgray-900 dark:text-white">
                                View &rarr;
                            </a>
                        </div>
                        </td>
                    </tr>
                @empty
                    <p class="my-12 text-center text-bgray-900 dark:text-white">You have not yet deposited any funds!</p>
                @endforelse
                </table>
            </div>
        </div>
    </div>
    <!-- write your code here-->
    </main>


<script>
    function goToDeposit(){
        $('html, body').animate({
            scrollTop: $("#deposit").offset().top
        }, 1000);
    }

    function goToDepHistory(){
        $('html, body').animate({
            scrollTop: $("#deposit-history").offset().top
        }, 1000);
    }
</script>
@endsection