@extends('components.customer-layout')

@section('header')
    <div class="page-header-breadcrumb d-md-flex d-block align-items-center justify-content-between ">
        {{-- <h4 class="fw-medium mb-0">Deposit </h4> --}}
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);" class="text-white-50">Dashboards</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Deposit</li>
        </ol>
    </div>
@endsection

{{-- @dd($wallets) --}}

@section('content')
    {{-- description --}}
    <!-- Start:: row-3 -->


    <div class="row justify-content-center align-items-center">
        <div class="col-xl-7 d-flex ">
            <!-- Add classes here -->
            <div class="card custom-card">
                <div class="card-body ">

                    <h5 class="text-primary text-center mb-3 mt-3">Deposit Funds</h5>
                    <form class="row" id="depositCrypto" data-URL="{{ route('user.web.deposit-crypto') }}">
                        @csrf
                        <div class="col-xl-12 mb-3">
                            <label for="">Network</label>
                            <div class="input-group mb-2">
                                <select required name="network" id="networkOptions" class="form-control form-control-lg">
                                    <option value="">Select Network</option>
                                    @if (isset($wallets))
                                        @foreach ($wallets as $wallet)
                                            <option data-network-address="{{ $wallet->network_address }}"
                                                data-price="{{ $wallet->usdPrice }}" value="{{ $wallet->id }}">
                                                {{ ucwords($wallet->symbol) }}</option>
                                        @endforeach
                                    @endif

                                </select>
                                <button style="color: #fff !important;" type="button" class="btn bg-primary text-light"
                                    data-clipboard-text="" id="networkButton"> <i class="fa fa-copy  mr-3 "></i> Copy
                                    Address</button>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Amount ( $ )</label>
                            <input required type="number" name="amount"
                                class="form-control withdraw-data amount _amountToSend form-control-lg"
                                placeholder="Enter Amount ($)" aria-label="Amount">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label">Transaction Hash</label>
                            <input required type="text" name="proof"
                                class="form-control withdraw-data proof  form-control-lg" placeholder="Enter Hash ID"
                                aria-label="Wallets Address">
                        </div>

                        <p class="text-justify">For USA Residents: You can deposit via bank transfer for amounts starting
                            from $50,000.
                            <a class=" text-primary " href="https://wa.me/message/QGRZ23TBTJVKG1" target="_blank">
                                <u><b> Click here to proceed.</b></u>
                            </a>
                        </p>

                        <div class="col-12 text-end" id="depositSubmit">
                            <button type="submit" id="" class="btn btn-primary m-auto _processDeposit"><i
                                    class="bi bi-arrow-right-circle-fill"></i> DEPOSIT</button>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

    <!-- End:: row-3 -->

    <script>
        function clipBoardCopy() {
            // Get the text from the input field
            const text = document.querySelector("#networkButton").getAttribute("data-clipboard-text");

            console.log(text);


            // Create a temporary input element
            const tempInput = document.createElement("input");
            tempInput.value = text;
            document.body.appendChild(tempInput);

            // Select the text in the temporary input
            tempInput.select();
            tempInput.setSelectionRange(0, 99999); // For mobile devices

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

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

            // Notify the user
            if (text == '') {
                alert("No Address copied");
            } else {
                alert(`Address ${text} copied`);
            }
        }

        function handleSelect(e) {
            const selectedOption = e.target.selectedOptions[0]; // Get the selected option
            const networkId = selectedOption.dataset.networkAddress; // Access the network address
            document.querySelector("#networkButton").setAttribute("data-clipboard-text", networkId);
        }

        document.querySelector("#networkOptions").onchange = handleSelect;

        document.querySelector("#networkButton").onclick = clipBoardCopy;
    </script>

@endsection