@extends('site.layouts.master')

@section('title', 'Your Wallet Addresses')
@section('description', env('APP_NAME').' system allows you to send spoof SMS messages , use wallet and submit the PDF. You can access these services base on our package')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('dashboard_d/assets/styles/vendor/datatables.min.css')}}">
@endsection
@section('content')

    <div id="content" class="pt-3 pt-sm-4 pt-md-0">
        <div class="breadcrum">
            <div class="bg-img pb-0" style="min-height: 70vh">
                <div class="container">
                    <h2 class="pt-5 mt-sm-5 text-white text-center fw-bold">Deposit Here To Recharge Your Account</h2>

                    <div class="row">
                        <div class="col-lg-4 pt-5">
                            <div class="text-nav ">
                                <div class="heading2 text-white text-center display-inline-block">Alert
                                    <svg xmlns="http://www.w3.org/2000/svg" width="38" height="46" viewbox="0 0 38 46"
                                         fill="none" style="margin-top: -50px;">
                                        <path
                                            d="M10.1501 28.6324C13.835 25.1233 24.0331 16.9879 35.3457 12.5187M13.8035 40.7067C17.0357 40.4323 25.4105 40.4869 33.0524 42.9013M2.95566 19.8167C4.12796 16.7921 7.85358 9.29141 13.3777 3.48513"
                                            stroke="#7D3CF3" stroke-width="5" stroke-linecap="round"></path>
                                    </svg>
                                </div>
                                <div class=" text-white">
                                    <p>Please note that blockchain confirmations can take some time depending on the
                                        cryptocurrency network's current activity. Typically, confirmations are
                                        completed
                                        within:
                                    </p>
                                    <ul class="py-2">
                                        <li><strong>Bitcoin (BTC):</strong> 10-60 minutes</li>
                                        <li><strong>Ethereum (ETH):</strong> 5-15 minutes</li>
                                        {{--                                        <li><strong>TRON (TRX):</strong> 1-5 minutes</li>--}}
                                        <li><strong>USDT (ERC-20):</strong> 5-15 minutes</li>
                                        <li><strong>USDT (TRC-20):</strong> 1-5 minutes</li>
                                    </ul>
                                    <p>As soon as your payment is confirmed, we will activate your package subscription.
                                        We
                                        appreciate your patience.
                                    </p>
                                </div>
                                <img src="{{asset('site/assets/images/supported-crypto-tree.png')}}" alt="img"
                                     class=" rounded-5 w-100 h-100 p-sm-5 p-3"/>
                            </div>
                        </div>
                        <div class="col-lg-8 pt-5">
                            <div class="table-responsive">
                                <table class="display table table-bordered" id="deafult_ordering_table"
                                       style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>Coin</th>
                                        <th>Label</th>
                                        <th>Address</th>
                                        <th>QR Code</th>
                                        <th>Copy Address</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($coins_address as $address)
                                        <tr>

                                            <td>

                                                <img src="{{asset($address->coin->image ?? '')}}"
                                                     style="height: 50px;width: 50px"
                                                     alt="{{$address->coin->short_name ?? ''}}">

                                            </td>
                                            <td>{{$address->label}}</td>
                                            <td>{{$address->address}}</td>
                                            <td>
                                                <img style="height: 100px;width: 100px" src="{{$address->qr_code ?? ''}}"
                                                     alt="QR CODE">
                                            </td>
                                            <td>
                                                <button class="btn btn-primary btn-sm "
                                                        onclick="copyAddress(`{{$address->address}}`)"><i class="fa fa-copy"></i>
                                                </button>
                                            </td>

                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{ asset('dashboard_d/assets/js/vendor/datatables.min.js') }}"></script>
    <script>
        function copyAddress(address) {
            navigator.clipboard.writeText(address);

            Swal.fire({
                icon: 'success',
                title: "Success",
                text: 'Address copied to the clipboard',
            }).then(() => {

            });

        }

        $('#deafult_ordering_table').DataTable({
            // "order": [
            //     [1, "ASC"]
            // ]
        });
    </script>
@endsection