@include('header')
<link rel="stylesheet" type="text/css" href="{{ asset('assessify_content/css/checkout.css') }}"/>
<style>
    body {
        background-color: #e6ebf4
    }

    .card {
        border: none;
        border-radius: 8px;
        box-shadow: 5px 6px 6px 2px #e9ecef
    }

    .heading {
        font-size: 23px;
        font-weight: 00
    }

    .text {
        font-size: 16px;
        font-weight: 500;
        color: #b1b6bd
    }

    .pricing {
        border: 2px solid #304FFE;
        background-color: #f2f5ff
    }

    .business {
        font-size: 20px;
        font-weight: 500
    }

    .plan {
        color: #aba4a4
    }

    .dollar {
        font-size: 16px;
        color: #6b6b6f
    }

    .amount {
        font-size: 50px;
        font-weight: 500
    }

    .year {
        font-size: 20px;
        color: #6b6b6f;
        margin-top: 19px
    }

    .detail {
        font-size: 22px;
        font-weight: 500
    }

    .cvv {
        height: 44px;
        width: 73px;
        border: 2px solid #eee
    }

    .cvv:focus {
        box-shadow: none;
        border: 2px solid #304FFE
    }

    .email-text {
        height: 55px;
        border: 2px solid #eee
    }

    .email-text:focus {
        box-shadow: none;
        border: 2px solid #304FFE
    }

    .payment-button {
        height: 70px;
        font-size: 20px
    }

    .footer-positioning{
        margin-top:0;
    }
</style>
<div class="container padding-top-100">
    <input type="hidden" id="anPageName" name="page" value="checkout"/>
    <div class="container-center-horizontal">
        <div class="checkout screen">
            <div class="overlap-group2">
                <div class="overlap-group1">
                    <div class="rectangle-4"></div>
                    <div class="assessify">Assessify</div>
                </div>
                <h1 class="purchase-a-plan-and">
                    <span class="span0">Purchase</span><span
                        class="span1"> a plan and get your report immediately.</span>
                </h1>
                <div class="frame-396">
                    <div class="choose-plan">Chosen plan</div>
                    <div class="frame-395">
                        <div class="frame-39">
                            <div class="frame-390">
                                <div class="frame-3">
                                    <div class="place inter-semi-bold-cloud-burst-18px"><b>{{$subscription_plan}}</b>
                                    </div>
                                </div>
                                <div class="price-3 inter-bold-cloud-burst-16px">
                                    ${{number_format($plan_pricing, 2)}}</div>
                            </div>
                            <div class="frame-3">
                                <div class="rectangle-20"></div>
                                <p class="customers-can-apply inter-normal-cloud-burst-14px">
                                    Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include("payment_area")

        </div>
    </div>

</div>
<div class="home screen">
    <div class="row full-width">
        <div class="col-12 no-padding">
            @include('footer')
        </div>
    </div>
</div>