@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-xl font-semibold sm:text-2xl text-bgray-900 dark:text-white">
                Deposit Amount
            </h3>
            <h2
                class="mb-2 text-2xl font-bold sm:text-4xl font-poppins text-bgray-900 dark:text-white"
            >
            {{ $pay_info['deposit']['amount'].' '.$pay_info['payment']['pay_currency'] }}
                <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"
                >ORDER ID: {{ $pay_info['payment']['order_id'] }}</span
                >
                    <span class="flex">
                    @if($pay_info['payment']['payment_status'] == 'finished')
                        <div class="text-base font-semibold text-success-300">
                            Payment Completed!
                        </div>
                    
                    @elseif($pay_info['payment']['payment_status'] == 'partially_paid')
                        <div class="text-base font-semibold text-warning-300">
                            Payment Incomplete. Please complete as soon as possible!
                        </div>

                    @elseif($pay_info['payment']['payment_status'] == 'waiting')
                        <div class="text-base font-semibold text-warning-300">
                            Waiting For Payment...
                        </div>

                    @elseif($pay_info['payment']['payment_status'] == 'expired')
                        <div class="text-base font-semibold" style="color: #ff2424;">
                            Payment Failed.
                        </div>

                    @elseif($pay_info['payment']['payment_status'] == 'failed')
                        <div class="text-base font-semibold" style="color: #ff2424;">
                            Payment Failed.
                        </div>

                    @else
                        <div class="text-base font-semibold text-warning-300">
                            Waiting For Payment...
                        </div>
                    @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">
                    @if($pay_info['payment']['payment_status'] == 'finished')
                            <small class="block sm:inline">Your Payment Has Been Completed and Verified!</small>
                    @elseif($pay_info['payment']['payment_status'] == 'partially_paid')
                            <small class="block sm:inline">Don't leave this page until deposit is complete, And click the button below when done, this is very important!</small>
                    @elseif($pay_info['payment']['payment_status'] == 'waiting')
                            <small class="block sm:inline">Don't leave this page until deposit is complete, And click the button below when done, this is very important!</small>
                    @elseif($pay_info['payment']['payment_status'] == 'expired')
                            <small class="block sm:inline">Your payment address has expired, this address is now in-valid. Make another payment by creating another deposit and pay within 20 minutes.</small>
                    @elseif($pay_info['payment']['payment_status'] == 'failed')
                            <small class="block sm:inline">Something went wrong! Your payment failed, this address is now in-valid. Make another payment by creating another deposit and pay within 20 minutes.</small>
                    @else
                            <small class="block sm:inline">Don't leave this page until deposit is complete, And click the button below when done, this is very important!</small>
                    @endif
                </button>
            </div>

            <p class="mt-8 font-semibold text-center text-bgray-900 dark:text-white">
                Send the funds to this address below
            </p>

            <div id="" class="my-4 text-center text-bgray-900 dark:text-white">
                <span class="block mt-4 text-center sm:inline" style="overflow: hidden;"><small id="myInput">{{ $pay_info['payment']['pay_address'] }}</small></span>
                <button type="button" onclick="copyToClipboard()" class="flex justify-between px-6 py-4 mx-auto mt-2 text-white transition-all rounded-lg" style="background: #ec595a">
                    Copy Address &nbsp;
                    <svg class="w-6 h-6 text-white"  
                        viewBox="0 0 24 24"  
                        fill="none"  
                        stroke="currentColor"  
                        stroke-width="2"  
                        stroke-linecap="round"  
                        stroke-linejoin="round">  
                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />  
                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                    </svg>
                </button>
            </div>

            <div id="" class="relative mt-4 text-bgray-900 dark:text-white alert" role="alert">
                <span class="block font-bold text-center sm:inline">Or Scan The QRCode Below</span>
            </div>

            <div class="mt-4">
                <img style="height: 200px;" class="mx-auto mt-3" src="{{asset('qr_codes/'.$pay_info['deposit']['qr_code'])}}" alt="$pay_info['deposit']['qr_code']"/>
            </div>


            @if($pay_info['payment']['payment_status'] == 'waiting') 
                <button onclick="refreshPage()" class="w-full py-4 font-bold text-white transition-all rounded-lg bg-success-300 hover:bg-success-400 mt-14">
                    I have made the transfer!
                </button>
            @endif
        </div>

    <!-- write your code here-->
    </main>


<script>
function copyToClipboard() {
    // Create a temporary input element
    var input = document.createElement("input");
    input.value = document.getElementById("myInput").textContent;

    // Append the input element to the document
    document.body.appendChild(input);

    // Select the content of the input element
    input.select();
    input.setSelectionRange(0, 99999); // For mobile devices

    // Copy the content to the clipboard
    document.execCommand("copy");

    // Remove the temporary input element
    document.body.removeChild(input);

    // Alert the user
    alert("Address copied to clipboard");
}

function refreshPage(){
    window.location.href = "{{ route('payment_info', $deposit->id) }}";
}
</script>
@endsection