@extends('layouts.user.app')
@push('style')
<link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />

    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
        }

        /* Firefox */
        input[type=number] {
        -moz-appearance: textfield;
        }
    </style>
@endpush
@section('content')
<div class="row justify-content-center text-center g-6">
    <h4 class="p-3">Withdraw Funds</h4>
    <span class="fs-5 text-success">Withdraw funds from your account directly.</span>
    <div class="col-md-6 mt-3">
        <div class="card">
            <div class="card-body">
                <form class="row" method="POST" action="{{route('user.withdraw.store')}}" id="validateWithdraw" novalidate>
                    @csrf
                    <input type="number" class="form-control" name="rate" value="{{$rate}}" hidden/>


                    <div class="col-md-12 p-0 ">
                        <div class="form-floating">
                            <select name="accountId" id="selectAccount" class="selectpickera w-100 form-control form-control-lg m-0" required >
                                @foreach ($accounts as $item)
                                    <option @if($account->id == $item->id) selected @endif value="{{$item->id}}">{{$item->name." - $ ".number_format($item->balance, 2)}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 mb-4">

                    </div>
                    <div class="col-md-12">
                        <div class="form-floating">
                            <input type="text" class="form-control" id="BTCWallet" name="BTCWallet" placeholder="Wallet Address" required />
                            <label for="BTCWallet">Wallet Address</label>
                        </div>
                    </div>

                    <div class="col-md-12 mt-3 position-relative">
                        <div class="form-floating">
                            <input type="text"  pattern="[0-9]+(\.[0-9]{1,2})?%?" class="form-control numbersOnly" id="amountInUSD" name="amountInUSD" value="" placeholder="MAX: {{$account->balance}}$" required />
                            <label for="amountInUSD">USD</label>
                            <div id="floatingInputHelp" class="form-text text-end">1 USD = {{number_format($rate, 6)}} BTC</div>
                        </div>
                    </div>

                    <div class="col-12 text-center mt-4">
                        <button type="submit" class="mb-3 w-100 btn btn-lg btn-success" id="witdhrawBTCAmount">Withdraw</button>
                        <a class="mt-3 btn btn-label-danger" href="{{route('user.transactions.index')}}">Go Back</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection


@push('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js" integrity="sha512-KFHXdr2oObHKI9w4Hv1XPKc898mE4kgYx58oqsc/JqqdLMDI4YjOLzom+EMlW8HFUd0QfjfAvxSL6sEq/a42fQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/assets/vendor/js/jquery.number.min.js"></script>

<script src="/assets/js/forms-selects.js"></script>

    <script>
        $('.selectpickera').selectpicker({
            showSubtext: true,
            showContent: false
        });
        (function () {
            "use strict";
            window.addEventListener(
                "load",
                function () {
                    // Get the forms we want to add validation styles to
                    var forms = $("#validateWithdraw");
                    // 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 = $('#witdhrawBTCAmount');
            let sum = $(this).val() * rate;
            amountInBTC.html('Withdraw '+$.number(sum, 5)+'<i class="ti ti-currency-bitcoin"></i>');
        });
    </script>
@endpush