@extends('frontend.default.auth.layouts.app')
@section('styles')
    <style>
        .login_logo img {
            max-width: 140px;
            margin: 0 auto;
        }
        .register_part {
            background: var(--background_color) !important;
            min-height: 100vh !important;
            height: auto !important;
        }
        .register_form .form-group input {
            padding: 24px 20px!important;
            border: 1px solid var(--border_color);
            border-radius: 0;
            font-size: 13px;
            color: #8f8f8f;
            text-transform: none;
        }
        .register_form .form-group textarea {
            height: 160px;
            width: 100%;
            padding: 20px;
            font-size: 13px;
            border: 1px solid var(--border_color);
        }
        .term_link_set ,.policy_link_set{
            color: var(--base_color);
        }
        .mb-10{
            margin-bottom: 10px;
        }
    </style>
@endsection
@section('content')
<section class="register_part">
    <div>
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-12">
                <div class="register_form_iner">
                    <div class="login_logo text-center mb-3">
                        <a href="{{url('/')}}"><img src="{{showImage(app('general_setting')->logo)}}" alt=""></a>
                    </div>
                    <h2>{{ __('subscription::subscription.please_select_a_plan') }}</h2>
                    
                    <div class="card-deck mb-3 text-center">
                        @foreach ($plans as $key => $plan)
                        <div class="card mb-4 box-shadow">
                            <div class="card-header">
                                <h4 class="my-0 font-weight-normal">{{@$plan->title}}</h4>
                            </div>
                            <div class="card-body">
                                <h1 class="card-title pricing-card-title">${{@$plan->price}} <small class="text-muted">/ {{@$plan['per']}}</small></h1>
                                <p class="mt-3 mb-4 flex-grow-1">{{@$plan->about}}</p>
                                @if (false)
                                <ul class="list-unstyled mt-3 mb-4">
                                    <li>10 users included</li>
                                    <li>2 GB of storage</li>
                                    <li>Email support</li>
                                    <li>Help center access</li>
                                </ul>
                                @endif
                                <a href="{{url('/register')}}?plan={{$plan->id}}" class="btn btn-lg btn-block btn-outline-primary">{{@$plan->btn_txt}}</a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')

<script>
    (function($){
        "use strict";
        $(document).ready(function(){

            $(document).on('submit', '.register_form', function(event){

                if($("#policyCheck").prop('checked')!=true){
                    event.preventDefault();
                    toastr.error("{{__('common.please_agree_with_our_policy_privacy')}}","{{__('common.error')}}");
                    return false;
                }

            });

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