@extends('layouts.user')

@section('title')
    Account Settings
@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/>

                @if(auth()->user()->kyc_status == null)
                    <div class="p-6 mt-2 mb-4 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <h5 class="mb-5 text-lg font-semibold text-red-600">KYC Incomplete :</h5>

                        <p class="mb-4 text-slate-400">Your profile is incomplete. Complete your kyc verification to make withdrawals of more than $1,000</p>

                        <a href="{{ route('kyc') }}" class="inline-block px-5 py-2 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-red-600 rounded-md">Complete KYC</a>
                    </div>
                @elseif(auth()->user()->kyc_status == 2)
                    <div class="p-6 mt-2 mb-4 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <h5 class="mb-5 text-lg font-semibold text-yellow-500">KYC On Review :</h5>

                        <p class="text-slate-400">Your profile is currently being reviewed. Your withdrawal limit will be increased upon approval</p>
                        <p class="mb-4 text-slate-400 text-sm">Note: Reviewing can take up to 24 hours.</p>
                    </div>
                @elseif(auth()->user()->kyc_status == 1)
                    <div class="p-6 mt-2 mb-4 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <h5 class="mb-5 text-lg font-semibold text-green-600">KYC Verified :</h5>

                        <p class="mb-4 text-slate-400">Profile Verified. You can now make withdrawals of more than $1,000</p>
                    </div>
                @endif

                <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <h5 class="mb-4 text-lg font-semibold">Personal Detail :</h5>
                    <form>
                        <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                            <div>
                                <label class="font-medium form-label">First Name :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="text" disabled value="{{ auth()->user()->first_name }}" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="First Name:" id="firstname" name="name" required="">
                                </div>
                            </div>
                            <div>
                                <label class="font-medium form-label">Last Name :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user-check" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="text" disabled value="{{ auth()->user()->last_name }}" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Last Name:" id="lastname" name="name" required="">
                                </div>
                            </div>
                            <div id="refer-a-friend">
                                <label class="font-medium form-label">Your Email :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="mail" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="email" disabled value="{{ auth()->user()->email }}" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Email" name="email" required="">
                                </div>
                            </div>
                            <div>
                                <label class="font-medium form-label">Store Name :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="bookmark" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input name="name" disabled value="{{ auth()->user()->username }}" id="occupation" type="text" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Occupation :">
                                </div>
                            </div>
                        </div><!--end grid-->

                        <div class="grid grid-cols-1">
                            <div class="mt-5">
                                <label class="font-medium form-label">Referral Code : </label>
                                <div class="relative mt-2 form-icon text-slate-500">
                                    {{ auth()->user()->username }}
                                </div>
                            </div>

                            <div class="mt-6">
                                <label class="font-medium form-label">Referral Link : </label>
                                <div id="myInput" class="relative mt-2 form-icon text-slate-500">
                                    {{ auth()->user()->referral_link }}
                                </div>
                            </div>
                        </div><!--end row-->

                        <button type="button" onclick="copyToClipboard()" id="submit" class="inline-block px-5 py-2 mt-5 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-md">Copy Link</button>
                    </form><!--end form-->
                </div>

                <div class="p-6 mt-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                        <div>
                            <h5 class="text-lg font-semibold">Withdrawal Wallet :</h5>
                            <p class="mb-4 text-slate-500">Required Wallet Type: USDT sol</p>
                            <form id="requestForm" onsubmit="submitRequestForm(); return false;">
                                @csrf
                                <div class="grid grid-cols-1 gap-5">
                                    <div>
                                        <label class="font-medium form-label">Wallet Address :</label>
                                        <div class="relative mt-2 form-icon">
                                            <textarea name="wallet" id="wallet" required class="w-full h-20 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0">{{ auth()->user()->wallet }}</textarea>
                                        </div>
                                    </div>
                                </div><!--end grid-->
                                <button id="requestButton" type="submit" class="inline-block px-5 py-2 mt-5 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-md">Confirm Wallet</button>
                            </form>
                        </div><!--end col-->
                        
                        <div> 
                            <h5 class="mb-4 text-lg font-semibold">Change password :</h5>
                            <form method="post" action="{{ route('password.change') }}">
                                @csrf
                                <div class="grid grid-cols-1 gap-5">
                                    <div>
                                        <label class="font-medium form-label">Current password :</label>
                                        <div class="relative mt-2 form-icon">
                                            <i data-feather="key" class="absolute w-4 h-4 top-3 start-4"></i>
                                            <input type="password" name="current_password" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Current password" required>
                                        </div>
                                        @error('current_password')
                                            <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                                <small class="text-center">{{ $message }}</small>
                                            </span>
                                        @enderror
                                    </div>

                                    <div>
                                        <label class="font-medium form-label">New password :</label>
                                        <div class="relative mt-2 form-icon">
                                            <i data-feather="key" class="absolute w-4 h-4 top-3 start-4"></i>
                                            <input type="password" name="new_password" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="New password" required>
                                        </div>
                                        @error('new_password')
                                            <span class="mx-auto text-red-600 invalid-feedback" role="alert">
                                                <small class="text-center">{{ $message }}</small>
                                            </span>
                                        @enderror
                                    </div>

                                    <div>
                                        <label class="font-medium form-label">Re-type New password :</label>
                                        <div class="relative mt-2 form-icon">
                                            <i data-feather="key" class="absolute w-4 h-4 top-3 start-4"></i>
                                            <input type="password" name="new_password_confirmation" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Re-type New password" required>
                                        </div>
                                    </div>
                                </div><!--end grid-->

                                <button class="inline-block px-5 py-2 mt-5 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-md">Save password</button>
                            </form>
                        </div><!--end col-->

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

<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("Link copied to clipboard");
}

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

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

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

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

        requestButton.removeAttribute('disabled');

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

        if (status === 200) {
            
            requestButton.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');
        
        // 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