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

<main
    class="w-full xl:px-[48px] px-4 pb-6 xl:pb-[48px] sm:pt-[156px] pt-[100px]"
    >
    <x-alert/>
    <!-- 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="goToWithdrawHistory()"
                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 Withdrawal History
            </button>
            </div>
            <button onclick="goToWithdraw()"
            class="w-full py-4 font-bold text-white transition-all rounded-lg bg-success-300 hover:bg-success-400 mt-14"
            >
            Withdraw Funds
            </button>
        </div>


        
        <div id="withdraw"
            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">
                    Withdraw 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>--}}

            <p class="mb-4 font-medium text-center text-bgray-900 dark:text-white">
                You can't make a withdrawal of any amount below ${{ $minWithdraw->description }}.
            </p>

            <form class="" method="post" id="requestForm" action="{{ route('withdraw_main') }}">
                @csrf
                <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" min="{{ $minWithdraw->description }}" required oninput="updateSection()"
                        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>

                <p class="mt-4 font-medium text-bgray-900 dark:text-white">
                    Withdrawal Charges: <span id="display-section" class="text-success-300"></span>
                </p>

                <button type="submit" id="requestButton"
                    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"
                >
                    Withdraw Amount
                </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="withdraw-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">Withdrawal 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"
                        >
                        Withdrawal 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"
                        >
                        Date</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($withdrawals as $withdrawal)
                    <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-error-300">
                                - USDT {{ number_format($withdrawal->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($withdrawal->status == 1)
                                    Pending...
                                @elseif($withdrawal->status == 2)
                                    Approved
                                @else
                                    Failed
                                @endif
                            </p>
                        </td>
                        <td>
                            <p class="text-base font-semibold text-bgray-900 dark:text-white">{{ $withdrawal->created_at->format('d F Y') }}</p>
                        </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 goToWithdraw(){
        $('html, body').animate({
            scrollTop: $("#withdraw").offset().top
        }, 1000);
    }

    function goToWithdrawHistory(){
        $('html, body').animate({
            scrollTop: $("#withdraw-history").offset().top
        }, 1000);
    }

    function updateSection() {
        let charge = '{{ $charge }}';

        // Get the entered amount
        const amountInput = document.getElementById('amount');
        const enteredAmount = parseFloat(amountInput.value) || 0;

        // Calculate 2% of the entered amount
        const percent = (enteredAmount * charge).toFixed(2);

        // Update the display section
        const displaySection = document.getElementById('display-section');
        displaySection.innerHTML = `$${percent}`;
    }

</script>

@endsection