@extends('layouts.user.base')

@section('page-title')
    Plans
@endsection

@php
    $user = auth()->user()->load(['wallet', 'bonus_wallet']);
    $wallet = $user->wallet;
    $bonus_wallet = $user->bonus_wallet;
    $active_system_setting = active_system_setting();
    $use_prp_token = $active_system_setting->use_prp_token;
@endphp

@section('content')
    <div class="row">
        <div class="col mb-3 mb-xl-4 mb-lg-3 mb-md-3">
            <div class="row d-flex">

                @include('user.plans.components.plan', ['plan_model' => $plan])


                <div class="col-md-5 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                    <div class="card card-bg border-0">
                        <div class="card-body">
                            <form id="buyplanform" method="get" action="{{ route('user_complete_buy_plan', $plan->id) }}">
                                <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                                <input type="hidden" id="cval" name="cval" value="0">
                                <div class="row">
                                    @php

                                        $tokn_transactions = collect();
                                        foreach ($user->additional_users as $au) {
                                            if ($au->tokn_transaction) {
                                                $tokn_transactions->add($au->tokn_transaction);
                                            }
                                        }
                                        $tokn_worth = ($user->tokn_wallet->balance + $tokn_transactions->sum('amount')) / $active_system_setting->tokn_multiplier;
                                        $enough_tokn = $tokn_worth >= $plan->minimum_amount;
                                        $enough_bonus = $bonus_wallet->balance >= $plan->minimum_amount;
                                        $payment_columns = ($enough_tokn || $enough_bonus) ? "col-6 col-sm-6 col-md-6 col-lg-6 mb-3 mb-xl-4 mb-lg-3 mb-md-3" : "col-6 col-sm-6 col-md-6 col-lg-6 mb-3 mb-xl-4 mb-lg-3 mb-md-3";
                                    @endphp

                                    <div class="col-12"><label class="col-form-label">Payment Method</label></div>
                                    <div class="{{ $payment_columns }}">
                                        <label class="form-label" for="{{ PAYMENT_METHOD_CRYPTO }}" style="width:100%;">
                                            <div class="p-method d-flex" x-on:click="$refs.{{ PAYMENT_METHOD_CRYPTO }}1.checked">
                                                <input required id="{{ PAYMENT_METHOD_CRYPTO }}" type="radio" name="paymentMethods"
                                                    value="{{ PAYMENT_METHOD_CRYPTO }}" x-model="paymentmethod" x-ref="{{ PAYMENT_METHOD_CRYPTO }}1" />
                                                <span class="form-label ms-2 mt-2">Cryptocurrency</span>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="{{ $payment_columns }}">
                                        <label class="form-label" for="{{ PAYMENT_METHOD_WALLET }}" style="width:100%;">
                                            <div class="p-method d-flex" x-on:click="$refs.{{ PAYMENT_METHOD_WALLET }}1.checked">
                                                <input required id="{{ PAYMENT_METHOD_WALLET }}" type="radio" name="paymentMethods" value="{{ PAYMENT_METHOD_WALLET }}" x-model="paymentmethod" x-ref="{{ PAYMENT_METHOD_WALLET }}1" />
                                                <span class="form-label ms-2 mt-2">Wallet ({{ formatMoney($wallet->balance) }}) @if($use_prp_token) + Token ({!! formatMoney($tokn_worth) !!}) @endif</span>
                                            </div>
                                        </label>
                                    </div>
                                    @if($enough_tokn)
                                    <div class="{{ $payment_columns }}">
                                        <label class="form-label" for="{{ PAYMENT_METHOD_TOKN }}" style="width:100%;">
                                            <div class="p-method d-flex" x-on:click="$refs.{{ PAYMENT_METHOD_TOKN }}1.checked">
                                                <input required id="{{ PAYMENT_METHOD_TOKN }}" type="radio" name="paymentMethods"
                                                    value="{{ PAYMENT_METHOD_TOKN }}" x-model="paymentmethod" x-ref="{{ PAYMENT_METHOD_TOKN }}1" />
                                                <span class="form-label ms-2 mt-2">Token ({!! formatMoney($tokn_worth) !!})</span>
                                            </div>
                                        </label>
                                    </div>
                                    @endif
                                    @if($enough_bonus)
                                    <div class="{{ $payment_columns }}">
                                        <label class="form-label" for="{{ PAYMENT_METHOD_BONUS }}" style="width:100%;">
                                            <div class="p-method d-flex" x-on:click="$refs.{{ PAYMENT_METHOD_BONUS }}1.checked">
                                                <input required id="{{ PAYMENT_METHOD_BONUS }}" type="radio" name="paymentMethods"
                                                    value="{{ PAYMENT_METHOD_BONUS }}" x-model="paymentmethod" x-ref="{{ PAYMENT_METHOD_BONUS }}1" />
                                                <span class="form-label ms-2 mt-2">Bonus ({!! formatMoney($bonus_wallet->balance) !!})</span>
                                            </div>
                                        </label>
                                    </div>
                                    @endif



                                    <div class="col-12"><label class="col-form-label">Payment Details</label></div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                        <div>
                                            <label class="form-label" for="cryptoSelect">Cryptocurrency</label>
                                            <select id="cryptoSelect" name="crypto" class="form-select" onchange="calc(this)">
                                                <optgroup label="Preffered Cryptocurrency">
                                                    <option value selected>- Select -</option>
                                                    @foreach (CRYPTOCURRENCIES as $item)
                                                        <option value="{{ $item }}">{{ $item }}</option>
                                                    @endforeach
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                        <div><label class="form-label align" for="amount">Amount to Invest
                                                ({{ CURRENCY }})</label><input onkeyup="cryptoprice()"
                                                class="form-control" type="number" name="amount" id="amount"
                                                step="0.01" min="{{ $plan->minimum_amount }}"
                                                max="{{ $plan->maximum_amount }}" placeholder="{{ request()->query('amount') ?? '' }}" required=""></div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                        <div>
                                            <label class="form-label" for="cryptoSelect">Payout Option</label>
                                            <select id="cryptoSelect" name="payout_option_id" class="form-select">
                                                <optgroup label="Preffered Payout Option">
                                                    @foreach ($plan->payout_options as $option)
                                                        <option value="{{ $option->id }}">{{ $option->name }}</option>
                                                    @endforeach

                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                                        <div>
                                            <div class="form-group mb-3">
                                                <button class="btn btn-primary" type="submit">Continue</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
                    <div class="card card-bg border-0">
                        <div class="card-body">
                            <label class="form-label"></label>
                            <div class="d-flex">
                                <h4 class="card-title _cryptoprice"></h4>
                                <span class="mt-1 ms-1 _cryptoselected"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        var paymentmethod = 'Cryptocurrency'
        var selectedCrypto = ''
        var btcprice = ''
        var ethprice = ''
        var ltcprice = ''
        var bchprice = ''
        var price = 0
        var amount = 0

        $(document).ready(function() {
            fetch(
                    "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Clitecoin%2Cbitcoin-cash%2C&vs_currencies=usd")
                .then(response => response.json()).then(result => {
                    console.log(result)
                    btcprice = result.bitcoin.usd;
                    ethprice = result.ethereum.usd;
                    ltcprice = result.litecoin.usd;
                    bchprice = result['bitcoin-cash'].usd;
                    // console.log("btc price:" + this.btcprice + " " + "eth price:" + this.ethprice + " " + "litecoin price:" + this.ltcprice + " " + "bch price:" + this.bchprice);
                }).catch(error => console.log('error', error));



                $('input[name=paymentMethods]').on('change', function() {
                    var paymentMethod = $('input[name=paymentMethods]:checked').val();
                    if (paymentMethod == "{{ PAYMENT_METHOD_CRYPTO }}") {
                        $('#cryptoSelect').prop('disabled', false)
                    } else {
                        $('#cryptoSelect').prop('disabled', true)
                    }
                });
        })

        function calc(el) {
            selectedCrypto = $(el).val()
            $("._cryptoprice").html('')
            $('#amount').val(0)
            $("._cryptoselected").html(selectedCrypto)
            switch (selectedCrypto) {
                case "Bitcoin":
                    price = btcprice;
                    break;
                case "Ethereum":
                    price = ethprice;
                    break;
                case "Litecoin":
                    price = ltcprice;
                    break;
                case "Bitcoin Cash":
                    price = bchprice;
                    break;
                default:
                    price = 1;
                    break;
            }
        }

        function cryptoprice() {
            if (selectedCrypto != '') {
                $("._cryptoselected").html(selectedCrypto)
                var total = (1.35 / parseFloat(price) * parseFloat($('#amount').val()))
                $("._cryptoprice").html(total.toFixed(3))
                $("#cval").val(total)
            }
        }
    </script>
@endsection