@extends($activeTemplate . 'layouts.master')
@section('content')
    <section class="py-120 section-bg">
        <div class="container">
            <div class="row gy-4 justify-content-center flex-wrap-reverse">

                <div class="col-xl-8 col-lg-6">
                    @php
                        $planPrice = $type == 'monthly' ? $plan->monthly_price : $plan->yearly_price;
                    @endphp

                    <form action="{{ route('user.deposit.insert') }}" method="post">
                        @csrf
                        <input type="hidden" name="currency">
                        <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                        <input type="hidden" name="type" value="{{ $type }}">

                        <div class="card custom--card">
                            <div class="card-body">

                                <h5 class="text-center">@lang('You need to pay') {{ showAmount($planPrice) }} {{ $general->cur_text }}</h5>

                                <div class="form-group mt-3">
                                    <label class="form--label">@lang('Select Gateway')</label>
                                    <select class="form--control form-select control-two" name="gateway" required>
                                        <option value="">@lang('Select One')</option>
                                        @foreach ($gatewayCurrency as $data)
                                            <option value="{{ $data->method_code }}" @selected(old('gateway') == $data->method_code) data-gateway="{{ $data }}">{{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <input type="hidden" name="amount" value="{{ $planPrice }}">

                                <div class="my-3 preview-details d-none">
                                    <ul class="list-group list-group-flush">

                                        <li class="list-group-item d-flex justify-content-between">
                                            <span>@lang('Charge')</span>
                                            <span><span class="charge fw-bold">0</span> {{ __($general->cur_text) }}</span>
                                        </li>

                                        <li class="list-group-item d-flex justify-content-between">
                                            <span>@lang('Payable')</span> <span><span class="payable fw-bold"> 0</span> {{ __($general->cur_text) }}</span>
                                        </li>

                                        <li class="list-group-item justify-content-between d-none rate-element">

                                        </li>
                                        <li class="list-group-item justify-content-between d-none in-site-cur">
                                            <span>@lang('In') <span class="method_currency"></span></span>
                                            <span class="final_amo fw-bold">0</span>
                                        </li>
                                        <li class="list-group-item justify-content-center crypto_currency d-none">
                                            <span>@lang('Conversion with') <span class="method_currency"></span> @lang('and final value will Show on next step')</span>
                                        </li>
                                    </ul>
                                </div>

                                <button type="submit" class="btn btn--base w-100 mt-3">@lang('Submit')</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-xl-4 col-lg-6">
                    <div class="card custom--card">
                        <div class="card-body">
                            <h6 class="text-center text-muted">@lang('Your Selection')</h6>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item flex-between"><span>@lang('Plan title')</span> <span>{{ __($plan->title) }}</span></li>
                                <li class="list-group-item flex-between"><span>@lang('Validity')</span> <span>{{ ucfirst($type) }}</span></li>
                                <li class="list-group-item flex-between">
                                    <span>@lang('Price')</span>
                                    <span>
                                        {{ $general->cur_sym . showAmount($planPrice) }}
                                    </span>
                                </li>
                                <li class="list-group-item flex-between">
                                    <span>@lang('Expired On')</span>
                                    @if ($type == 'monthly')
                                        <span>{{ showDateTime(now()->addMonth(), 'd M, Y') }}</span>
                                    @else
                                        <span>{{ showDateTime(now()->addYear(), 'd M, Y') }}</span>
                                    @endif
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        (function($) {
            "use strict";
            $('select[name=gateway]').change(function() {

                if (!$('select[name=gateway]').val()) {
                    $('.preview-details').addClass('d-none');
                    return false;
                }

                var resource = $('select[name=gateway] option:selected').data('gateway');
                var fixed_charge = parseFloat(resource.fixed_charge);
                var percent_charge = parseFloat(resource.percent_charge);
                var rate = parseFloat(resource.rate)
                if (resource.method.crypto == 1) {
                    var toFixedDigit = 8;
                    $('.crypto_currency').removeClass('d-none');
                } else {
                    var toFixedDigit = 2;
                    $('.crypto_currency').addClass('d-none');
                }
                $('.min').text(parseFloat(resource.min_amount).toFixed(2));
                $('.max').text(parseFloat(resource.max_amount).toFixed(2));
                var amount = parseFloat($('input[name=amount]').val());
                if (!amount) {
                    amount = 0;
                }
                if (amount <= 0) {
                    $('.preview-details').addClass('d-none');
                    return false;
                }
                $('.preview-details').removeClass('d-none');
                var charge = parseFloat(fixed_charge + (amount * percent_charge / 100)).toFixed(2);
                $('.charge').text(charge);
                var payable = parseFloat((parseFloat(amount) + parseFloat(charge))).toFixed(2);
                $('.payable').text(payable);
                var final_amo = (parseFloat((parseFloat(amount) + parseFloat(charge))) * rate).toFixed(
                    toFixedDigit);
                $('.final_amo').text(final_amo);
                if (resource.currency != '{{ $general->cur_text }}') {
                    var rateElement =
                        `<span class="fw-bold">@lang('Conversion Rate')</span> <span><span  class="fw-bold">1 {{ __($general->cur_text) }} = <span class="rate">${rate}</span>  <span class="method_currency">${resource.currency}</span></span></span>`;
                    $('.rate-element').html(rateElement)
                    $('.rate-element').removeClass('d-none');
                    $('.in-site-cur').removeClass('d-none');
                    $('.rate-element').addClass('d-flex');
                    $('.in-site-cur').addClass('d-flex');
                } else {
                    $('.rate-element').html('')
                    $('.rate-element').addClass('d-none');
                    $('.in-site-cur').addClass('d-none');
                    $('.rate-element').removeClass('d-flex');
                    $('.in-site-cur').removeClass('d-flex');
                }
                $('.method_currency').text(resource.currency);
                $('input[name=currency]').val(resource.currency);
                $('input[name=amount]').on('input');
            });

        })(jQuery);
    </script>
@endpush