@foreach($styles as $style)
    {!! $style !!}
@endforeach
<div class="freeJoinWrap">
    <div class="formWrapper">
        <div class="error"></div>
        <div class="freejoinBox col-sm-10 col-sm-offset-1">
            <div class="col-sm-3 freejoinIcon">
                <img src="{{ $imagePath }}/free_pay.webp" class="img-responsive">
            </div>
            <div class="col-sm-9">
                <div class="freejoinInstruction">
                    <i class="fa fa-exclamation"></i>
                    <div class="freejoinDescription">
                        {{_mt($id,'FreePay.click_here_ro_proceed_free_join')}}
                    </div>
                    <button class="btn primaryButton ladda-button registerMeFreeJoin" type="button" data-style="contract">
                        {{_mt($id,'FreePay.proceed')}}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="success">
        <h2><i class="fa fa-check"></i>{{_mt($id,'FreePay.payment_success')}}</h2>
        <div class="description">
            {{_mt($id,'FreePay.done_payment')}}
        </div>
    </div>
</div>

<input type="hidden" name="moduleId" value="{{ $id }}">

<script type="text/javascript">
    "use strict";

    $(function () {
        Ladda.bind('.ladda-button');
    });

    //Send registration

    $('.registerMeFreeJoin').click('.registerMeFreeJoin', function () {

        var options = {
            actionUrl: '{{ scopeRoute("payment.handler") }}',
            successCallBack: function (response) {
                Ladda.stopAll();
                if (window.hasOwnProperty('paymentSuccessCallback')) {
                    window.paymentSuccessCallback(response, 'freejoin');
                } else {
                    $('.freeJoinWrap .formWrapper').slideUp()
                        .siblings('.success').slideDown().promise().done(function () {
                        $('.freeJoinWrap .formWrapper').addClass('done');
                    });
                }
            },
            failCallBack: function (response) {
                Ladda.stopAll();
                switch (response.status) {
                    case 422:
                        if (window.hasOwnProperty('paymentFailureCallback')) {
                            window.paymentFailureCallback(response);
                        }
                        break;
                    default:
                        break;
                }
            }
        };
        sendForm(options);
    });

</script>