@extends('layouts.user')

@section('title')
    Withdraw Funds
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
            <div class="relative md:container container-fluid">
                <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-[url('../../assets/images/hero/pages.html')] bg-center bg-no-repeat bg-cover" 
                style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
            </div><!--end container-->

            <div class="container relative mt-16 md:mt-24">
                <div class="md:flex">
                    <div class="lg:w-1/4 md:w-1/3 md:px-3">
                        <div class="relative -mt-32 md:-mt-48">
                            <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                                <div class="mb-5 text-center profile-pic">
                                    <!-- <input id="pro-img" name="profile-image" type="file" class="hidden" onchange="loadFile(event)" /> -->
                                    <div>
                                        <div class="relative mx-auto h-28 w-28">
                                            <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                            <label class="absolute inset-0 cursor-pointer" for="pro-img"></label>
                                        </div>

                                        <div class="mt-4">
                                            <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                            <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Side Nav -->
                                <x-side-nav/>
                                
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">
                        <x-alert/>
                        <div class="pt-4 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                           
                        <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>

                            
                            {{-- Bank withdrawal entry point.
                                 Gated on the same flag as the sidebar entry, so
                                 nothing appears until the rail is live. This page
                                 is the USDT rail: a user here has no other signal
                                 that taking naira to their own bank is possible. --}}
                            @if(filter_var(config('services.remvo.withdrawal_enabled', false), FILTER_VALIDATE_BOOLEAN))
                            <a href="{{ route('remvo.wd.page') }}"
                               style="display:block;text-decoration:none;"
                               class="relative w-full px-4 py-5 mt-6 mb-6 rounded-lg md:px-7 bg-white dark:bg-darkblack-600 dark:border dark:border-darkblack-400"
                               id="fiatWithdrawEntry">
                                <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                                    <div style="flex-shrink:0;width:44px;height:44px;border-radius:12px;background:rgba(249,115,22,0.12);display:flex;align-items:center;justify-content:center;">
                                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                                        </svg>
                                    </div>
                                    <div style="flex:1;min-width:200px;">
                                        <h3 class="text-lg font-bold text-bgray-900 dark:text-white" style="margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
                                            Bank withdrawal
                                            <span style="background:#f97316;color:#fff;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;font-size:9px;letter-spacing:0.06em;line-height:1;padding:3px 5px;border-radius:3px;">NEW</span>
                                        </h3>
                                        <p class="text-sm text-bgray-600 dark:text-bgray-50" style="margin:4px 0 0;">
                                            Transfer your balance directly to a bank account in your name.
                                        </p>
                                    </div>
                                    <div style="flex-shrink:0;">
                                        <span style="display:inline-flex;align-items:center;gap:6px;background:#f97316;color:#fff;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:700;white-space:nowrap;">
                                            Continue
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                                        </span>
                                    </div>
                                </div>
                            </a>
                            @endif

                            <div id="withdraw" class="relative w-full px-4 py-5 mt-6 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>--}}

                                                                        @if($withdrawThreshold->description == 1)
                                        @if(auth()->user()->wdrwl_count == 0)
                                                                                <p class="mb-4 font-medium text-center text-md text-bgray-900 dark:text-white">
                                            You can't make first withdrawal of any amount below $15.
                                        </p>
                                        @elseif(auth()->user()->wdrwl_count >= 1)
                                                                                <p class="mb-4 font-medium text-center text-md text-bgray-900 dark:text-white">
                                            You can't make a withdrawal of any amount below $50.
                                        </p>
                                        @endif
                                    @else
                                                                        <p class="mb-4 font-medium text-center text-md text-bgray-900 dark:text-white">
                                        You can't make a withdrawal of any amount below ${{ $minWithdraw->description }}.
                                    </p>
                                    @endif
                                    
                                    
                                    
                                    <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">$</span>
                                            <label class="w-full">
                                            <input
                                                type="number" id="amount" name="amount" min="{{ $conditionArr[$condition] }}" 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-md text-bgray-900 dark:text-white">
                                            Withdrawal Charges ({{ $charge * 100 }}%): <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 bg-orange-500 rounded-lg modal-open hover:bg-success-400 mt-7"
                                        >
                                            Withdraw Amount
                                        </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <h5 class="px-4 mt-12 mb-6 text-lg font-semibold">My Withdrawal History</h5>
                        <div class="relative px-4 overflow-x-auto rounded-md shadow dark:shadow-gray-800">
                            <table class="w-full text-start text-slate-500 dark:text-slate-400">
                                <thead class="text-sm uppercase bg-slate-50 dark:bg-slate-800">
                                    <tr class="text-start">
                                        <th scope="col" class="px-2 py-3 text-start">Amount</th>
                                        <th scope="col" class="px-2 py-3 text-start">Status</th>
                                        <th scope="col" class="px-2 py-3 text-start">Date</th>
                                        {{--<th scope="col" class="px-2 py-3 text-start">Action</th>--}}
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($withdrawals as $withdrawal)
                                    <tr class="bg-white dark:bg-slate-900 text-start">
                                        <th class="px-2 py-3 text-start" scope="row">- USDT {{ number_format($withdrawal->amount, 2) }}</th>
                                        @if($withdrawal->status == 1)
                                        <td class="px-2 py-3 text-yellow-500 text-start">Pending...</td>
                                        @elseif($withdrawal->status == 2)
                                        <td class="px-2 py-3 text-green-600 text-start">Approved</td>
                                        @else
                                        <td class="px-2 py-3 text-red-600 text-start">Failed</td>
                                        @endif
                                        <td class="px-2 py-3 text-start">{{ $withdrawal->created_at->format('d F Y') }}</td>
                                        {{--<td class="px-2 py-3 text-start"><a href="" class="text-orange-500">View <i class="mdi mdi-chevron-right"></i></a></td>--}}
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End Hero -->

<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