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

<div class="main-content" style="min-height: 100vh">
    <div class="page-content dark:bg-zinc-700" style="padding-bottom: 400px; padding-top: 150px;">
        <div class="container-fluid px-[0.625rem]">
            <div class="grid grid-cols-1 mb-5">
                <div class="flex items-center justify-between">
                    <h4 class="text-lg font-semibold text-gray-800 mb-sm-0 grow dark:text-gray-100">My Wallet</h4>
                    <nav class="flex" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 ltr:md:space-x-3 rtl:md:space-x-0">
                            <li class="inline-flex items-center">
                                <a href="{{ route('home') }}" class="inline-flex items-center text-sm font-medium text-gray-800 hover:text-gray-900 dark:text-zinc-100 dark:hover:text-white">
                                    Dashboard
                                </a>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                    <a href="#" class="text-sm font-medium text-gray-500 ltr:ml-1 rtl:mr-1 hover:text-gray-900 ltr:md:ml-2 rtl:md:mr-2 dark:text-gray-100 dark:hover:text-white">Withdrawal Wallet</a>
                                </div>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>

            
            <div class="grid grid-cols-1 ">
                <div class="grid items-stretch grid-cols-12">
                    <div class="self-center col-span-12 lg:col-span-6">
                        <h5 class="text-gray-600 text-15 dark:text-gray-100">Wallet for receiving earnings 💰</h5>
                    </div>
                </div>

                
                    <div class="w-full md:w-[80%] lg:w-[50%] mx-auto flex items-center bg-yellow-50 rounded mt-12">
                        <div class="relative w-12 h-12 text-center bg-yellow-400 ltr:rounded-l rtl:rounded-r">
                            <div class="after:content-[''] after:border-[6px] after:border-transparent ltr:after:border-l-yellow-400 rtl:after:border-r-yellow-400 after:absolute ltr:after:-right-3 rtl:after:-left-3 after:top-[1.15rem]"></div>
                            <i class="mdi mdi-alert-outline align-middle text-white leading-[3.5]"></i>
                        </div>
                        <small class="text-yellow-700 ltr:ml-4 rtl:mr-4">Required Wallet Type: USDT</small> 
                    </div>
            

                <div class="relative mt-5 overflow-x-auto">
                    <div class="w-full md:w-[80%] lg:w-[50%] card dark:bg-zinc-800 dark:border-zinc-600 mx-auto">
                        <div class="card-body ">
                            @if(Auth::user()->wallet == null)       
                                <div id="infoText" class="relative my-4 text-gray-600 rounded dark:text-gray-100 alert" role="alert">
                                    <span class="block sm:inline"><small><i class="fas fa-exclamation-triangle"></i> You haven't linked a wallet to this account yet. We kindly request you to do so at your earliest convenience, as it is necessary for withdrawing earnings.</small></span>
                                </div>
                            @endif
                            <form class="pt-2 mt-4" id="requestForm" onsubmit="submitRequestForm(); return false;">
                                @csrf
                                <div class="mb-4">
                                    <label class="block mb-2 font-medium text-gray-600 dark:text-gray-100">Wallet Address</label>
                                    <textarea name="wallet" required rows="3" class="w-full py-2 border-gray-100 rounded placeholder:text-sm dark:bg-zinc-700/50 dark:border-zinc-600 dark:text-gray-100 dark:placeholder:text-zinc-100/60" id="wallet" placeholder="Enter Your Wallet Address">{{ Auth::user()->wallet }}</textarea>
                                </div>
                                <div class=""> 
                                    <button id="requestButton" class="flex justify-center items-center btn border-transparent w-full py-2.5 text-white w-100 waves-effect waves-light shadow-md shadow-violet-200 dark:shadow-zinc-600" 
                                    style="background-color: #ec595a" type="submit">
                                        <span>Add Wallet</span>
                                        <div id="requestLoader" class="w-5 hidden h-5 ml-4 loader relative z-[2]"></div>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>




<script>
function submitRequestForm() {
    // Get form data
    let formData = new FormData(document.getElementById('requestForm'));

    let requestButton = document.getElementById('requestButton');

    let requestLoader = document.getElementById('requestLoader');

    let infoText = document.getElementById('infoText');

    requestButton.setAttribute('disabled', 'true');

    requestLoader.classList.remove('hidden');

    // Make an asynchronous POST request using Axios
    axios.post(`{{ route('wallet_update') }}`, formData)
    .then(response => {

        requestButton.removeAttribute('disabled');

        requestLoader.classList.add('hidden');

        // Check the value of 'status' in the response
        const status = response.data;

        if (status === 200) {
            
            requestButton.classList.add('hidden');

            infoText.classList.add('hidden');
            // Show success SweetAlert
            Swal.fire({
                icon: "success",
                title: 'Yay, The Wallet Has Been Successfully Binded To Your Account',
                toast: true,
                position: "top",
                showConfirmButton: false,
                timer: 4000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
        } else {
            // Default to a general error SweetAlert
            Swal.fire({
                icon: "error",
                title: 'Oops, An Error Has Occured, Please Try Again Later',
                toast: true,
                position: "top",
                showConfirmButton: false,
                timer: 4000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
        }
    })
    .catch(error => {

        requestButton.removeAttribute('disabled');

        requestLoader.classList.add('hidden');
        
        // Handle network or other errors
        Swal.fire({
            icon: "error",
            title: 'Oops, An Error Has Occured, Please Try Again Later',
            toast: true,
            position: "top",
            showConfirmButton: false,
            timer: 4000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            }
        });
    });
}
//onclick="return confirm('Dear {{ Auth::user()->first_name }}, Please note that you can only add a withdrawal wallet once, and once set, it cannot be changed or altered. Crypto Flip Arbitrage disclaims responsibility for any consequences arising from mistakes or incorrect values added by you. \n\nDo you confirm the accuracy of the wallet Address below ?');"
</script>
@endsection