@extends('layouts.user')

@section('title')
   Send Product
@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="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="mb-4 text-lg font-semibold">Submit Delivery Details :</h5>
                            <form method="post" action="{{ route('send-product', $product->id) }}">
                                @csrf
                                <div class="grid grid-cols-1 gap-5">
                                    <div>
                                        <label class="font-medium form-label">Tracking ID :</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="text" name="tracking_id" 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="Enter Tracking Id Of Package" required>
                                        </div>
                                    </div>

                                    <div>
                                        <label class="font-medium form-label">Courier Service :</label>
                                        <div class="relative mt-2 form-icon">
                                            <i data-feather="truck" class="absolute w-4 h-4 top-3 start-4"></i>
                                            <input type="text" name="courier" 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="Enter Courier Service Used" required>
                                        </div>
                                    </div>

                                    <div>
                                        <label class="font-medium form-label">Drop Off Location :</label>
                                        <div class="relative mt-2 form-icon">
                                            <i data-feather="map-pin" class="absolute w-4 h-4 top-3 start-4"></i>
                                            <input type="text" name="dropoff" 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="Enter Drop Off Location" 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">Submit</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