@extends('layouts.horizontal', ['withLoader' => true])
@section('css')
<style>
    .btn {
        color: #1e9f5c !important;
    }

    .btn-light-green {
        background-color: #e7f6ef !important;
    }

    .btn-light-green:hover {
        background-color: #e2e6ea !important;
        border-color: #dae0e5 !important;
    }

    .card-price {
        font-size: 24px;
        font-weight: 500;
    }

    .plan-title{
        font-size: 18px;
        font-weight: 500;
    }

    .card-special {
        position: absolute;
        background-color: white;
        color: #1e9f5c;
        padding: 5px 10px 5px 10px;
        border-radius: 30px;
        width: 285px;
        left: 50%;
        margin-left: -142px;
        /* left: 28px;
        right: 28px; */
        top: -15px;
        font-weight: 500;
    }
</style>
@endsection

@section('content')
<div class="account-pages my-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10 col-xl-8">
                <div class="row">
                    <div class="col-12 text-center">
                        <h3 class="mt-5 text-success">Choose Plan</h3>
                        <p class="mt-2 mb-5 font-size-18">Get massive discounts when you pay yearly. See prices below!</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card-deck">
                            <div class="card">
                                <div class="card-body">
                                    <p class="card-text text-success plan-title">Monthly Plan</p>
                                    <p class="card-text"><span class="card-price">€1.20</span> / child</p>
                                    <a href="{{route('billing.start-trial', $backTo)}}" role="button" class="btn btn-light-green">Start Trial (14 days free)</a>
                                </div>
                            </div>
                            <div class="card text-white bg-success">
                                <div class="card-special">
                                    <span class="text-center">Most Popular! €1 per child, per month</span>
                                </div>
                                <div class="card-body">
                                    <p class="card-text plan-title">Yearly Plan</p>
                                    <p class="card-text"><span class="card-price">€12</span>  / child</p>
                                    <a href="{{route('billing.start-trial', $backTo)}}" role="button" class="btn btn-light">Start Trial (14 days free)</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 text-center">
                        <p class="mt-5 font-size-16">Credit card not required for free trial!</p>
                        <p class="mt-2 font-size-16">Note: You can always add or remove children later</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- end container -->
</div>
<!-- end account-pages -->
@endsection