@php
    $profitCalculatorContent = getContent('profit_calculator.content', true);
    $plans = App\Models\Plan::active()->get();
@endphp
@if (count($plans))
    <section class="calculator-section pt-120 pb-120">
        <div class="container">
            <div class="row gy-4">
                <!--<div class="col-lg-6 pe-lg-5">-->
                <!--    <h2 class="section-title text--base">{{ __(@$profitCalculatorContent->data_values->heading) }}</h2>-->
                <!--    <p class="mt-2">{{ __(@$profitCalculatorContent->data_values->subheading) }}</p>-->
                <!--    <ul class="cmn-list mt-4">-->
                <!--        <li>-->
                <!--            <h5 class="text-white">{{ __(@$profitCalculatorContent->data_values->service_one_title) }}-->
                <!--            </h5>-->
                <!--            <p class="para-white mt-2">-->
                <!--                {{ __(@$profitCalculatorContent->data_values->service_one_subheading) }}</p>-->
                <!--        </li>-->
                <!--        <li>-->
                <!--            <h5 class="text-white">{{ __(@$profitCalculatorContent->data_values->service_two_title) }}-->
                <!--            </h5>-->
                <!--            <p class="para-white mt-2">-->
                <!--                {{ __(@$profitCalculatorContent->data_values->service_two_subheading) }}</p>-->
                <!--        </li>-->
                <!--    </ul>-->
                <!--</div>-->
                <div class="col-lg-6">
                    <div class="calculator-box">
                        <h2 class="calculator-box__title">@lang('Calculate Your Profits')</h2>
                            <div class="calculator-box__calculate">
                                <div class="form-group">
                                    <label for="invest">@lang('Packages')</label>
                                    <div class="plan-form">
                                        <select name="plan_id" class="select2-basic">
                                            @foreach ($plans as $plan)
                                                <option data-plan="{{ $plan }}">{{ @$plan->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                @php
                                    $firstPlan = @$plans->first();
                                @endphp

                                <div class="form-group">
                                    <label for="invest">@lang('You Invest')</label>
                                    <div class="input--group">
                                        <input type="number" step="any" name="invest" placeholder="You Invest"
                                            class="form-control" value="{{ @$firstPlan->fixed_amount }}" id="invest"
                                            readonly="readonly">
                                        <span class="input-icon"><i class="fab fa-dollar-sign"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="calculator-box__content">
                                <div class="calculator-widget-wrapper">
                                    <div class="calculator-widget">
                                        <div class="calculator-widget__icon">
                                            <img src="{{ asset($activeTemplateTrue . 'images/profit_calculator/business-and-finance.svg') }}"
                                                alt="">
                                        </div>
                                        <div class="calculator-widget__content">
                                            <span class="calculator-widget__title">@lang('Invest')</span>
                                            <h4 class="fixed-type">{{ gs('cur_sym') }}<span
                                                    class="fixed_amo">{{ showAmount(@$firstPlan->fixed_amount, currencyFormat: false) }}
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="calculator-widget">
                                        <div class="calculator-widget__icon">
                                            <img src="{{ asset($activeTemplateTrue . 'images/profit_calculator/return-on-investment.svg') }}"
                                                alt="">
                                        </div>
                                        <div class="calculator-widget__content">
                                            <span class="calculator-widget__title">@lang('With Capital')</span>
                                            <h4 class="calculator-widget__amount">@lang('Yes')</h4>
                                        </div>
                                    </div>
                                    <div class="calculator-widget">
                                        <div class="calculator-widget__icon">
                                            <img src="{{ asset($activeTemplateTrue . 'images/profit_calculator/profits.svg') }}"
                                                alt="">
                                        </div>
                                        <div class="calculator-widget__content">
                                            <span class="calculator-widget__title">@lang('Net profit')</span>
                                            <h4 class="calculator-widget__amount net_profit">
                                                {{ showAmount(($firstPlan->fixed_amount * $firstPlan->interest) / 100) }}
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="calculator-widget">
                                        <div class="calculator-widget__icon">
                                            <img src="{{ asset($activeTemplateTrue . 'images/profit_calculator/profit.svg') }}"
                                                alt="">
                                        </div>
                                        <div class="calculator-widget__content">
                                            <span class="calculator-widget__title">@lang('Total Income')</span>
                                            <h4 class="calculator-widget__amount total_profit">
                                                {{ showAmount((@$firstPlan->fixed_amount * @$firstPlan->interest) / 100 + @$firstPlan->fixed_amount) }}
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

@push('style-lib')
    <link rel="stylesheet" href="{{ asset('assets/global/css/select2.min.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
@endpush

@push('style')
    <style>
        .calculator-box__calculate .select2-container--default .select2-selection--single {
            border: 1px solid rgb(46 59 81) !important;
        }

        .calculator-box__calculate .select2-container--open .select2-selection.select2-selection--single,
        .select2-container--open .select2-selection.select2-selection--multiple {
            box-shadow: none !important;
        }
    </style>
@endpush

@push('script')
    @if (count($plans))
        <script>
            (function($) {
                "use strict";

                $('.select2-basic').select2({
                    minimumResultsForSearch: "-1"
                });

                function makeDecimal(number) {
                    var strippedValue = number.toFixed("{{ gs('allow_decimal_after_number') }}");
                    return strippedValue;
                }

                $('select[name="plan_id"]').change(function(e) {
                    var plan = $(this).find(':selected').data('plan');

                    var amount = parseFloat(plan.fixed_amount);
                    var interestPercentage = parseFloat(plan.interest);
                    var interest = (amount * interestPercentage) / 100;
                    var total = amount + interest;

                    amount = makeDecimal(amount);
                    interest = makeDecimal(interest);
                    total = makeDecimal(total);


                    $('input[name="invest"]').val(amount)
                    $('.fixed_amo').text(amount)
                    $('.net_profit').text("{{ gs('cur_sym') }}" + interest)
                    $('.total_profit').text("{{ gs('cur_sym') }}" + total)
                });

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