@extends('layouts.user')

@section('title', 'Deposit')

@section('content')
    <div class="nk-content ">
        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="components-preview wide-md mx-auto">
                        <div class="nk-block-head nk-block-head-lg wide-sm">
                            <div class="nk-block-head-content">
                                <div class="nk-block-head-sub"><a class="back-to" href="{{ route('account') }}"><em class="icon ni ni-arrow-left"></em><span>Dashboard</span></a></div>
                                <h2 class="nk-block-title fw-normal">Deposit</h2>
                                <div class="nk-block-des">
                                    <p class="lead"></p>
                                </div>
                            </div>
                        </div><!-- .nk-block -->

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12 mb-5">
                                                @if(session('error'))
                                                    <div class="alert alert-danger" role="alert">
                                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                        <i class="fe fe-alert-triangle air__menuLeft__icon"></i> {{ session('error') }}
                                                    </div>
                                                @endif
                                                @if(session('success'))
                                                    <div class="alert alert-success" role="alert">
                                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                        <i class="fe fe-check-square air__menuLeft__icon"></i> {{ session('success') }}
                                                    </div>
                                                @endif
                                                <form id="invest-form" name="form-validation" method="POST" action="{{ route('create-address') }}" enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Plan</label>
                                                        <select id="plan" name="plan" onchange="getPlan()" class="form-control" required>
                                                            <option>Select trading plan</option>
                                                            @foreach($plans as $plan)
                                                                <option value="{{ $plan->name }}">{{ $plan->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">payout</label>
                                                        <input
                                                            id="percentage"
                                                            class="form-control"
                                                            type="text"
                                                            readonly
                                                        />
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Minimum</label>
                                                        <input
                                                            id="minimum"
                                                            class="form-control"
                                                            type="text"
                                                            readonly
                                                        />
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Maximum</label>
                                                        <input
                                                            id="maximum"
                                                            class="form-control"
                                                            name="maximum"
                                                            type="text"
                                                            readonly
                                                        />
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Contract period</label>
                                                        <input
                                                            id="duration"
                                                            class="form-control"
                                                            type="text"
                                                            readonly
                                                        />
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Amount</label>
                                                        <input onkeyup="calculate()"
                                                            id="amount"
                                                            class="form-control"
                                                            name="amount"
                                                            type="text"
                                                            oninput="this.value = this.value.replace(/[^0-9,.]/g, '').replace(/(\..*)\./g, '$1')"
                                                        />
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Daily Profit</label>
                                                        <input
                                                            id="profit"
                                                            class="form-control"
                                                            type="text"
                                                            readonly
                                                        />
                                                    </div>

                                                    <!--<div class="form-group">-->
                                                    <!--    <label class="form-label" for="validation-username">Total</label>-->
                                                    <!--    <input-->
                                                    <!--        id="total"-->
                                                    <!--        class="form-control"-->
                                                    <!--        type="text"-->
                                                    <!--        readonly-->
                                                    <!--    />-->
                                                    <!--</div>-->

                                                    <div class="form-group">
                                                        <label class="form-label" for="validation-username">Payment method</label>
                                                        <select type="text" class="form-control " name="currency" id="validation-username" required>
                                                            <option value="BTC">Bitcoin</option>
                                                            <option value="ETH">Ethereum</option>
                                                            <!--<option value="BNB">Binance Coin</option>-->
                                                            {{--<option value="USDC">USD Coin</option>--}}
                                                            <!--<option value="USDT">USD Tether</option>-->
                                                        </select>
                                                    </div>

                                                    <div class="form-actions">
                                                        <button type="submit" class="btn btn-primary">Invest</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div><!-- .components-preview -->
                </div>
            </div>
        </div>
    </div>

    <script>
        function getPlan() {
            let category = $("#category").val();
            let name = $("#plan").val();
            $.ajax({
                url: "{{ route('getPlan') }}",
                type: 'GET',
                data: {name:name, category:category},
            }).done(function( res ) {
                $('#percentage').val((res.data.percentage)+'%')
                $('#minimum').val('$ '+(res.data.minimum))
                $('#maximum').val('$ '+(res.data.maximum))
                $('#duration').val(Math.round(res.data.duration)+' day(s)')
                $('#amount').val('')
                $('#profit').val('$0')
                $('#total').val('$0')
            }).fail(function() {

            });
        }
    </script>

    <script>
        function calculate(){
            let capital = $('#amount').val().replace(/[^\w\s]/gi, '')
            let interest = $('#percentage').val().replace(/[&\/\#,a-z+()$~%'":*?<>{}]/g, '')
            let duration = $('#duration').val().match(/(\d+)/);
            let percentage = interest/100
            let profit = percentage * capital
            let total = +profit + +capital
            $('#profit').val('$'+Number(profit).toLocaleString('en'))
            $('#total').val('$'+Number(total).toLocaleString('en'))
        }
    </script>

    <script>
        $('#amount').keyup(function(event) {
            // skip for arrow keys
            if(event.which >= 37 && event.which <= 40) return;
            // format number
            $(this).val(function(index, value) {
                return value
                    .replace(/\D/g, "")
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            });
        });
    </script>
@endsection