@php
    $percent = 20/100 * $pay_info['payment']['price_amount'];
    $sum = $pay_info['payment']['price_amount'] - $percent;
@endphp

@extends('layouts.auth')

@section('title')
    Setup Payment Details
@endsection

@section('content')

<div class="pb-8 mx-auto my-auto" style="margin-top: 100px !important;">

    <div>
        <div class="mx-auto mt-5 mb-3 text-center rounded-full">
        <a href="{{ url('/') }}"><img src="{{ asset('images/logo-dark.png') }}" style="height: 40px;" alt="" class="mx-auto mb-6"></a>
        </div>
    </div>

    <div class="text-center">
        <h5 class="text-lg font-bold text-gray-600 dark:text-gray-100 montserrat"><span class="text-orange-500">C2C </Colg>Store Name</span> Setup Fee</h5>
    </div>

<div style="max-width: 800px; margin: auto;" class="flex justify-center">
    <x-alert/>
</div>

    <div class="2xl:flex 2xl:space-x-[48px] max-w-[400px] mx-auto mt-12 mb-12">
        <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-4 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'].' - '.$pay_info['deposit']['network'] }}
                    <span
                    class="text-base font-medium uppercase text-bgray-500"
                    >USDT</span
                    >
                </h2>
                <div class="flex gap-4">
                    <span class="text-sm 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' || $pay_info['payment']['actually_paid'] >= $sum)
                            <div class="text-sm font-semibold text-green-600">
                                Payment Completed!
                            </div>
                        
                        @elseif($pay_info['payment']['payment_status'] == 'partially_paid')

                            @if($pay_info['payment']['actually_paid'] >= $sum)
                                <div class="text-sm font-semibold text-green-600">
                                    Payment Completed!
                                </div>
                            @else
                            <div class="text-sm font-semibold" style="color: #ff2424;">
                                Payment Failed.
                            </div>
                            @endif

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

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

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

                        @else
                            <div class="text-sm font-semibold text-yellow-500">
                                Waiting For Payment...
                            </div>
                        @endif
                    </span>
                </div>
            </div>
            
            <div class="flex justify-center mt-6">
                <button onclick="goToDepHistory()" class="px-4 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! Kindly click on the "Proceed To Store" button below to proceed to your store.</small>
                    @elseif($pay_info['payment']['payment_status'] == 'partially_paid')
                        @if($pay_info['payment']['actually_paid'] >= $sum)
                            <small class="block sm:inline">Your Payment Has Been Completed and Verified! Kindly click on the "Proceed To Store" button below to proceed to your store.</small>
                        @else
                            <small class="block sm:inline">Something went wrong! Your payment failed, this address is now in-valid. Click on the button below to generate another payment address.</small>
                        @endif
                    @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. Click on the button below to generate another payment address.</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. Click on the button below to generate another payment address.</small>
                    @else
                            <small class="block sm:inline">Don't leave this page until the deposit is complete, And click the "I have made the transfer" button below when done, this is very important!</small>
                    @endif
                </button>
            </div>

            @if($pay_info['payment']['payment_status'] == 'waiting')
                <p class="mt-8 font-semibold text-center text-bgray-900 dark:text-white">
                    Send the funds to this address below<br>
                    Adress Expires in 20 minutes
                </p>
            @else
                <p class="mt-8 font-semibold text-center text-bgray-900 dark:text-white">
                    Address has become invalid, Do not use!
                </p>
            @endif

            <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>
                @if($pay_info['payment']['payment_status'] == 'waiting')
                    <button type="button" onclick="copyToClipboard()" class="flex justify-between p-3 mx-auto mt-2 text-white transition-all bg-orange-500 rounded-lg">
                        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>
                @endif
            </div>

            @if($pay_info['payment']['payment_status'] == 'waiting')
            <div id="" class="relative mt-6 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>
            @endif

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


            @if($pay_info['payment']['payment_status'] == 'finished')
                <button onclick="dashboard()" class="w-full py-4 mt-8 font-bold text-white transition-all rounded-lg bg-slate-900">
                    Proceed To Store
                </button>
            @elseif($pay_info['payment']['payment_status'] == 'waiting') 
                <button onclick="refreshPage()" class="w-full py-4 mt-8 font-bold text-white transition-all rounded-lg bg-slate-900">
                    I have made the transfer!
                </button>
            @elseif($pay_info['payment']['payment_status'] == 'partially_paid')
                @if($pay_info['payment']['actually_paid'] >= $sum)
                    <button onclick="dashboard()" class="w-full py-4 mt-8 font-bold text-white transition-all rounded-lg bg-slate-900">
                        Proceed To Store
                    </button>
                @else
                    <form class="d-inline max-w-[400px] p-6 mx-auto" method="POST" action="{{ route('setup-payment') }}">
                        @csrf
                        <input type="hidden" name="type" value="setup"/>
                        <input type="hidden" name="amount" value="20"/>
                        <button type="submit" class="w-full py-4 mt-8 font-bold text-white transition-all rounded-lg bg-slate-900">
                            Proceed to pay $20 USDT sol
                        </button>
                    </form>
                @endif
            @else
                <form class="d-inline max-w-[400px] p-6 mx-auto" method="POST" action="{{ route('setup-payment') }}">
                    @csrf
                    <input type="hidden" name="type" value="setup"/>
                    <input type="hidden" name="amount" value="20"/>
                    <button type="submit" class="w-full py-4 mt-8 font-bold text-white transition-all rounded-lg bg-slate-900">
                        Proceed to pay $20 USDT sol
                    </button>
                </form>
            @endif
    </div>

</div>


<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('setup_made', $deposit->id) }}";
}

function dashboard(){
    window.location.href = "{{ route('home') }}";
}

function tryAgain(){
    window.location.href = "{{ route('store-setup') }}";
}
</script>

@endsection