@include("dashboard_header")
<style>

    .pricing-content .frame-339{
        margin-top:30px !important;
    }
    .plan-price {
        font-size: var(--font-size-xxxl) !important;
    }

    .advanced-plan {
        color: #0d6efd;
    }

    #advanced_level {
        width: 100%;
    }

    .actual-plan {
        font-weight: bold;
        color: green;
    }

    .most-popular {
        background-color: #0d6efd;
        width: 100%;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        position: absolute;
        height: 50px;
        padding: 5px;
        color: white;
        font-weight: bold;
        left: 0;
        top: -30px;
    }

    .pricing-content {
        position: relative;
    }

    .pricing_design {
        position: relative;
        margin: 0px 15px;
        /*max-width: 500px;*/
    }

    .pricing_design .single-pricing {
        background: #0e4595;
        padding: 60px 40px;
        border-radius: 30px;
        box-shadow: 0 10px 40px -10px rgba(0, 64, 128, .2);
        position: relative;
        z-index: 1;
        height: 610px;
        margin-bottom: 20px;
    }

    .pricing_design .single-pricing:before {
        content: "";
        background-color: #fff;
        width: 100%;
        height: 100%;
        border-radius: 18px 18px 190px 18px;
        border: 1px solid #eee;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
    }

    .price-head {
    }

    .price-head h2 {
        margin-bottom: 20px;
        font-size: 26px;
        font-weight: 600;
    }

    .price-head h1 {
        font-weight: 600;
        margin-top: 30px;
        margin-bottom: 5px;
    }

    .price-head span {
    }

    .single-pricing ul {
        list-style: none;
        margin-top: 30px;
        margin-left: 0;
        padding-left: 0;
        text-align: left;
    }

    .single-pricing ul li {
        line-height: 36px;
    }

    .single-pricing ul li i {
        /*background: #554c86; *!*/
        color: #020202;
        width: 20px;
        height: 20px;
        border-radius: 30px;
        /* font-size: 11px; */
        text-align: center;
        line-height: 20px;
        margin-right: 6px;
    }

    .popular {
        color: #0d6efd !important;
    }

    .pricing-price {
        /*position: absolute;*/
        /*bottom: 20px;*/
        text-align: center;
        /*width: 84%;*/
    }

    .price_btn {
        background: #554c86;
        padding: 10px 30px;
        color: #fff;
        display: inline-block;
        margin-top: 20px;
        border-radius: 2px;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .price_btn:hover {
        background: #0aa1d6;
    }

    a {
        text-decoration: none;
    }

    .section-title {
        margin-bottom: 60px;
    }

    .text-center {
        text-align: center !important;
    }

    .section-title h2 {
        font-size: 45px;
        font-weight: 600;
        margin-top: 0;
        position: relative;
        text-transform: capitalize;
    }

    #pricing {
        margin-top: 100px;
        /*margin-bottom: 100px;*/
    }

    .background-pricing {
    {{--background-image:url("{{asset("assessify_content/img/assessify-background-pricing.jpeg")}}");--}}
    {{--background-repeat: no-repeat;--}}
    {{--background-size: contain;--}}
    {{--background-color: rgba(255,255,255,92%);--}}
    {{--background-blend-mode: lighten;--}}

    }

    .monthly {
        color: #8d8383;
        font-size: 16px;
    }

    .tw-toggle {
        background: #0d6efd;
        display: inline-block;
        padding: 2px 3px;
        border-radius: 20px;
        position: relative;
        border: 2px solid #95A5A6;
        color: white;
    }

    .tw-toggle label {
        text-align: center;
        font-family: sans-serif;
        display: inline-block;
        /*color: #95A5A6;*/
        position: relative;
        z-index: 2;
        margin: 0;
        text-align: center;
        padding: 2px 3px;
        font-size: 15px;
        /* cursor: pointer; */
    }

    .tw-toggle input {
        /* display: none; */
        position: absolute;
        z-index: 3;
        opacity: 0;
        cursor: pointer;
        height: 30px;
        width: 70px;
    }

    .tw-toggle span {
        height: 30px;
        width: 64px;
        line-height: 21px;
        /* border-radius: 23%; */
        border-top-left-radius: 13px;
        border-bottom-left-radius: 13px;
        background: #fff;
        display: block;
        position: absolute;
        left: 22px;
        top: 0px;
        transition: all 0.3s ease-in-out;
    }

    .tw-toggle input[value="monthly"]:checked ~ span {
        background: #0d3167;
        left: 0;
        /*color:#fff;*/
    }

    .tw-toggle input[value="annual"]:checked ~ span {
        background: #0d3167;
        left: 135px;
        width: 59px;
        border-radius: 0;
        border-top-right-radius: 13px;
        border-bottom-right-radius: 13px;
    }

    .tw-toggle input[value="quarterly"]:checked ~ span {
        background: #0d3167;
        left: 66px;
        width: 68px;
        border-radius: 0;
    }

    .tw-toggle input[value="monthly"]:checked + label, .tw-toggle input[value="annual"]:checked + label {
        color: #fff;
    }

    .tw-toggle input[value="quarterly"]:checked + label {
        color: #fff;
    }
</style>
<div class="container-center-horizontal">
    <div class="home screen background-pricing">

        <div class="flex">
            <section id="pricing" class="pricing-content section-padding">
                <form method="POST"
                      action="{{ URL::to('/checkout/process_checkout/') }}"
                      id="subscription_form">
                    @csrf
                    <div class="container mx-auto margin-top-100">
                        <div class="section-title text-center">
                            <h2>Instant, Affordable Professional Tax Appeals Powered by AI<br>Save Thousands with Every
                                Report</h2>
                            <br>
                            <h4>Save 20% with annual payment</h4>
                            <div class="tw-toggle">
                                <input type="radio" class="plan-selection" name="plan_period" value="monthly" checked>
                                <label class="toggle toggle-yes">Monthly</label>
                                <input type="radio" class="plan-selection" name="plan_period" value="quarterly">
                                <label class="toggle toggle-yes">Quarterly</label>
                                <input type="radio" class="plan-selection" name="plan_period" value="annual">
                                <label class="toggle toggle-yes">Annual</label>
                                <span></span>
                            </div>
                        </div>
                        <br>
                        <div class="row text-center mx-auto">
                            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 wow fadeInUp mx-auto margin-bottom-50"
                                 data-wow-duration="1s"
                                 data-wow-delay="0.2s" data-wow-offset="0"
                                 style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeInUp;">
                                <div class="pricing_design">
                                    <div class="single-pricing">
                                        <div class="price-head">
                                            <h2>Standard</h2>
                                            <h1 class="price plan-price"><label
                                                    class="plan-price-label">$69</label><span
                                                    class="monthly">/Month</span></h1>


                                        </div>
                                        <div class="pricing-price">
                                                                                        <label class="actual-plan">Your actual plan</label>
                                                                                        </div>
                                        <br><br>
                                        <ul>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Unlimited</b>
                                                Access
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Coverage</b>
                                                for up to 1 Property
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Assessify
                                                    Data:</b> Local
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Premium</b>
                                                Support
                                            </li>
                                        </ul>


                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 wow fadeInUp mx-auto margin-bottom-20"
                                 data-wow-duration="1s"
                                 data-wow-delay="0.2s" data-wow-offset="0"
                                 style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeInUp;">
                                <div class="pricing_design">
                                    <label class="most-popular">Most Popular</label>
                                    <div class="single-pricing">
                                        <div class="price-head">
                                            <h2 class="advanced-plan">Advanced</h2>
                                            <h1 class="price plan-price advanced-price-label"><label
                                                    class="plan-price-label">$99</label><span
                                                    class="monthly">/Month</span></h1>
                                            <div class="pricing-price">
                                                                                                <label class="actual-plan">Your actual plan</label>
                                                                                                </div>
                                            <br>
                                            <input class="" type="range" id="advanced_level" name="advanced_level"
                                                   step="1" min="0" max="2" value="0"
                                                   onchange="switch_data('advanced', this.value);">
                                        </div>
                                        <ul>
                                            <li><i aria-hidden="true" class="fas fa-check-circle popular"></i><b>Unlimited</b>
                                                access
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle popular"></i><b>Coverage</b>
                                                for up to <span class="label-pnum">3</span> properties
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle popular"></i><b>Assessify
                                                    Data:</b> State and Local
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle popular"></i><b>Advanced</b>
                                                user access
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle popular"></i><b>Priority</b>
                                                Support
                                            </li>
                                        </ul>


                                    </div>
                                </div>
                            </div><!--- END COL -->
                            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 wow fadeInUp mx-auto margin-bottom-20"
                                 data-wow-duration="1s"
                                 data-wow-delay="0.3s" data-wow-offset="0"
                                 style="visibility: visible; animation-duration: 1s; animation-delay: 0.3s; animation-name: fadeInUp;">
                                <div class="pricing_design">
                                    <div class="single-pricing">
                                        <div class="price-head">
                                            <h2>Enterprise</h2>
                                            <h1 class="price plan-price"><label
                                                    class="plan-price-label">$469+</label><span
                                                    class="monthly">/Month</span></h1>
                                        </div>
                                        <div class="pricing-price">
                                                                                        <label class="actual-plan">Your actual plan</label>
                                                                                        </div>
                                        <br><br>
                                        <ul>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Unlimited</b>
                                                Access
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Coverage</b> up
                                                to 50 properties
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Assessify
                                                    Data:</b> Nationwide
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Advanced</b>
                                                user access
                                            </li>
                                            <li><i aria-hidden="true" class="fas fa-check-circle"></i><b>Dedicated</b>
                                                Support
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!--- END COL -->
                        </div><!--- END ROW -->
                        <h2><b>All</b> Plans Include:</h2>
                        <div class="col-12 all-included margin-bottom-50">

                            <div class="row">
                                <div class="col-md-4 col-lg-2 col-xl-2 col-sm-6">
                                    <i aria-hidden="true" class="fas fa-check-circle popular"></i> Assessify Score&trade;
                                </div>
                                <div class="col-md-4 col-lg-2 col-xl-2 col-sm-6">
                                    <i aria-hidden="true" class="fas fa-check-circle popular"></i> Downloadable,
                                    exportable, appeal ready appeals
                                    package
                                </div>
                                <div class="col-md-4 col-lg-2 col-xl-2 col-sm-6">
                                    <i aria-hidden="true" class="fas fa-check-circle popular"></i> County resources and
                                    quick tips
                                </div>
                                <div class="col-md-4 col-lg-2 col-xl-2 col-sm-6">
                                    <i aria-hidden="true" class="fas fa-check-circle popular"></i> Application Wizard
                                </div>
                                <div class="col-md-4 col-lg-2 col-xl-2 col-sm-6">
                                    <i aria-hidden="true" class="fas fa-check-circle popular"></i> Assessify Classroom
                                </div>
                                <div class="col-md-4 col-lg-2 col-xl-2 col-sm-6">
                                    <i aria-hidden="true" class="fas fa-check-circle popular"></i> Access maps, photos,
                                    and comp sales
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 col-xl-4 col-sm-12 margin-bottom-20">
                                <div class="card padding-20 min-height-260">
                                    <b><i class="fa-solid fa-user-ninja fa-3x blue-icon margin-16"></i></b>
                                    <h4>No Added Charges</h4>
                                    <br>
                                    Our monthly plans offer significant savings compared to costly real estate
                                    consultant and attorney fees.
                                </div>
                            </div>
                            <div class="col-md-12 col-xl-4 col-sm-12 margin-bottom-20">
                                <div class="card padding-20 min-height-260">
                                    <b><i class="fa-brands fa-free-code-camp fa-3x blue-icon margin-16"></i></b>
                                    <h4>No-Risk, Free Trial</h4>
                                    <br>
                                    Try our Service for Free, no obligation, <a href="{{URL::to("dashboard")}}">Click Here</a> for a free consultation. See how much you can save on
                                    your property taxes.
                                </div>
                            </div>
                            <div class="col-md-12 col-xl-4 col-sm-12">
                                <div class="card padding-20 min-height-260">
                                    <b><i class="fa-solid fa-clock fa-3x blue-icon margin-16"></i></b>
                                    <h4>Cancel Anytime</h4>
                                    <br>
                                    You're in control. Cancel anytime—no questions asked.
                                </div>
                            </div>
                        </div>

                        @include("learn/faq")

                    </div><!--- END CONTAINER -->
                    <input type="hidden" name="selected_subscription" id="selected_subscription">
                </form>
            </section>

        </div>
        <div class="row full-width">
            <div class="col-12 no-padding">
                                @include("dashboard_footer")
                            </div>
        </div>
    </div>
</div>


<script type="text/javascript">


    function select_advanced_plan() {
        if ($("#advanced_level").val() == "0") {
            $('#selected_subscription').val('advanced');
        } else if ($("#advanced_level").val() == "1") {
            $('#selected_subscription').val('advanced2');
        } else if ($("#advanced_level").val() == "2") {
            $('#selected_subscription').val('advanced3');
        }
    }

    $(function () {
        $(".price_btn").click("", function () {
            if ($("#selected_subscription").val().length > 0) {
                //SUBMIT THE FORM
                $("#subscription_form").submit();
            }
        });
    });
</script>