<div class="modal fade" id="investModal">
    <div class="modal-dialog modal-dialog-centered modal-content-bg">
        <div class="modal-content">
            <div class="modal-header">
                @if (auth()->check())
                    <strong class="modal-title" id="ModalLabel">
                        @lang('Confirm to invest on') <span class="planName"></span>
                    </strong>
                @else
                    <strong class="modal-title" id="ModalLabel"> @lang('Access Your Investment Plans') </strong>
                @endif
                <button type="button" class="close bg--base-2" data-bs-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>

            <form action="{{ route('user.invest.submit') }}" method="post">
                @csrf
                <input type="hidden" name="plan_id">
                @if (auth()->check())
                    <div class="modal-body">
                        <div class="form-group">
                            <h6 class="text-center investAmountRange"></h6>
                            <p class="text-center mt-1 interestDetails"></p>
                            <label>@lang('Select Wallet')</label>
                            <select class="form-control form--control" name="wallet_type" required>
                                <option value="">@lang('Select One')</option>
                                @if (auth()->user()->balance > 0)
                                    <option value="balance">@lang('Balance - ' . showAmount(auth()->user()->balance))</option>
                                @endif
                                @foreach ($gateways as $data)
                                    <option value="{{ $data->id }}" @selected(old('wallet_type') == $data->method_code)
                                        data-gateway="{{ $data }}">{{ $data->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>@lang('Invest Amount')</label>
                            <div class="input-group">
                                <input type="number" step="any" class="form-control form--control" name="amount"
                                    required>
                                <span class="input-group-text">{{ gs('cur_text') }}</span>
                            </div>
                            <code class="gateway-info d-none">@lang('Charge'): <span class="charge"></span>
                                {{ gs('cur_text') }}. @lang('Total amount'): <span class="total"></span>
                                {{ gs('cur_text') }}. @lang('Limit') <span class="min_amount"></span>-<span
                                    class="max_amount"></span> <span class="g-currency"></span>
                            </code>
                        </div>
                    </div>
                @else
                    <p class="p-3">@lang('Welcome back! Please log in to explore and invest in our plans.')</p>
                @endif
                <div class="modal-footer">
                    @if (auth()->check())
                        <button type="button" class="btn btn-dark btn-md"
                            data-bs-dismiss="modal">@lang('No')</button>
                        <button type="submit" class="btn btn--base btn-md">@lang('Yes')</button>
                    @else
                        <a href="{{ route('user.login') }}"
                            class="btn btn--base btn-md w-100 text-center">@lang('Log In to Your Account')</a>
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>

@push('script')
    <script>
        var symbol = '{{ gs('cur_sym') }}';
        var currency = '{{ gs('cur_text') }}';
    </script>
    <script src="{{ asset($activeTemplateTrue . 'js/plans.js') }}"></script>
@endpush
