@extends('layouts.user.app')
@push('style')
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
        }

        /* Firefox */
        input[type=number] {
        -moz-appearance: textfield;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{!! asset('assets/css/notify.css') !!}">
@endpush
@section('content')
<div class="row justify-content-center text-center g-6">
    <h4 class="p-3">Deposit Funds</h4>
    <span class="fs-5 text-success">Via Crypto Wallet</span>
    <div class="col-md-6 mt-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @csrf
                    <input type="number" class="form-control" name="rate" value="{{$rate}}" hidden/>
                    <div class="col-12">
                        <div class="row mb-3">
                            @foreach($accounts as $account)
                            <div class="col-md mb-md-0 mb-5">
                                <div class="form-check custom-option custom-option-icon">
                                    <label class="form-check-label custom-option-content" for="accountWallet{{$account->id}}" >
                                        <span class="custom-option-body">
                                            <img class="img-fluid" style="height: 55px;" src="/assets/img/wallets/{{$account->wallet}}.png" alt="{{$account->wallet}}">
                                        </span>
                                        <input name="cryptoWallet" class="form-check-input chooseWallet" type="radio" value="{{$account->id}}" data-id="{{$account->id}}" data-address="{{$account->address}}" required id="accountWallet{{$account->id}}" />
                                    </label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="col-12 mt-3" style="display: none;" id="walletInfo">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="form-floating col-7">
                                <input type="text" class="form-control numbersOnly" id="walletAddress" name="walletAddress" value="" readonly />
                                <label for="walletAddress">Wallet Address</label>
                            </div>
                            <button class="btn btn-lg btn-icon btn-success copyButton" type="button"  data-clipboard-target="#walletAddress" id="copyAddress" data-clipboard-text="" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy" data-bs-custom-class="tooltip-success"><i class="ti ti-copy"></i></button>
                            <div class="col-3" id="getQRCode">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<script src="/assets/vendor/js/jquery.number.min.js"></script>
<script src="/assets/js/notify.min.js"></script>
    <script>
        $('.chooseWallet').on('click', function(){
            let address = $(this).data('address');
            let walletId = $(this).data('id');

            var settings = {
                "url": "/user/wallet/"+walletId,
                "method": "GET",
                "timeout": 0,
                "headers": {
                    "Accept": "application/json",
                }
            };
            $.ajax(settings).done(function (response) {
                $('#walletInfo').show();
                $('#walletAddress').val(address);
                $('#getQRCode').html(response)
            });
        });

        (function () {
            "use strict";
            window.addEventListener(
                "load",
                function () {
                    // Get the forms we want to add validation styles to
                    var forms = $("#validateDeposit");
                    // Loop over them and prevent submission of the form
                    var validation = Array.prototype.filter.call(forms, function (form) {
                        form.addEventListener(
                            "submit",
                            function (event) {
                                if (form.checkValidity() === false) {
                                    event.preventDefault();
                                    event.stopPropagation();
                                }
                                form.classList.add("was-validated");
                            },
                            false
                        );
                    });
                },
                false
            );
        })();

        const rate = {{$rate}};
        $('#amountInUSD').on('keyup', function(){
            let amountInBTC = $('#amountInBTC');
            let sum = $(this).val() * rate;
            amountInBTC.val($.number(sum, 2));
        });
        $('#amountInBTC').on('keyup', function(){
            let amountInUSD = $('#amountInUSD');
            let sum = (1 / rate) * $(this).val();
            amountInUSD.val($.number(sum, 2));
        });
    </script>
@endpush