@extends('frontend.master')
@section('home')
    <!-- ================================
        START BREADCRUMB AREA
    ================================= -->


    <section class="mobile-breadcrumb-light">

        <div class="container">

            <div class="d-flex align-items-center py-2">

                <!-- Back Button -->
                <a href="/" class="btn btn-outline-dark btn-sm rounded-circle me-3">
                    <i class="la la-arrow-left"></i>
                </a>

                <!-- Page Title -->
                <div>
                    <h6 class="mb-0 fw-semibold text-dark">
                        Subscription
                    </h6>
                    <small class="text-muted">
                        <a href="/" class="text-muted text-decoration-none">Home</a> / Subscription
                    </small>
                </div>

            </div>

        </div>

    </section>

    <!-- ================================
       END BREADCRUMB AREA
    ================================= -->







    <section class="course-area pb-100px">

        <div class="container-fluid">


            <div class="section-heading text-center">

                <h2 class="section__title pt-5 pb-3 "> SUBSCRIPTION </h2>

                <h5 class="ribbon ribbon-lg mt-2 mb-2 "> Subscribe To Access TPOYM Enhanced Study </h5>
              
            </div><!-- end section-heading -->



            <ul class="nav nav-tabs generic-tab justify-content-center pb-3" id="myTab" role="tablist">

                <li class="nav-item">
                    <a class="nav-link text-dark active" id="monthly-tab" data-toggle="tab" href="#monthly" role="tab"
                        aria-controls="monthly" aria-selected="true"> MONTHLY </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link text-dark" id="quarterly-tab" data-toggle="tab" href="#quarterly" role="tab"
                        aria-controls="quarterly" aria-selected="false"> QUARTERLY </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link text-dark" id="annual-tab" data-toggle="tab" href="#annual" role="tab"
                        aria-controls="annual" aria-selected="false"> ANNUAL </a>
                </li>

            </ul>

        </div><!-- end container -->



        <div class="card-content-wrapper  pt-30px pb-100px">
            <div class="container">


                <div class="tab-content" id="myTabContent">


                    <!-- Monthly Subscription-->
                    <div class="tab-pane fade show active" id="monthly" role="tabpanel" aria-labelledby="monthly-tab">
                        <div class="row">



                            <!-- card 3 - Platinum -->
                            <div class="col-lg-4 responsive-column-half">
                                <div class="card card-item card-preview" data-tooltip-content="#tooltip_content_1"
                                    style="min-height: 450px;">

                                    <div class="card-body">

                                        <h6 class="ribbon ribbon-blue-bg fs-14 mb-3"> Monthly </h6>
                                        <div class="course-badge blue"> -50% </div>
                                        <h5 class="card-title text-center fs-29"> Subscription </h5>

                                        <div class="text-center mt-2">

                                            <p class="card-price before-price font-weight-light fs-16 py-1">
                                                <span> {{ $monthly_platinum->amount_esp * 2 }} Espees </span> | <span>
                                                    {{ $monthly_platinum->amount_usd * 2 }} USD </span>


                                            <p class="card-price text-black font-weight-bold fs-16 py-2">
                                                <span> {{ $monthly_platinum->amount_esp }} Espees </span> | <span>
                                                    {{ $monthly_platinum->amount_usd }} USD </span>
                                            </p>
                                        </div>

                                        <p class="card-text ">
                                        <ul class="py-3 lh-6">

                                            <li> <i class="la la-check fs-16 text-success"></i> Chapter Study </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Nuggets </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Reflections </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Testimonies and more </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Quick Quizzes </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Final Assessments </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Certificate of Completion </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Assisted Study Features   </li>

                                        </ul>
                                        </p>

                                        <br>




                                        <div class="text-center">
                                            <a href="{{ route('monthly.platinum') }}" class="btn btn-danger"> Get Started
                                            </a>
                                        </div>



                                    </div><!-- end card-body -->

                                </div><!-- end card -->
                            </div><!-- end col-lg-4 -->


                        </div><!-- end row -->
                    </div><!-- end tab-pane | Monthly Subscription End -->






                    <!-- Quarterly Subscriptions-->
                    <div class="tab-pane fade" id="quarterly" role="tabpanel" aria-labelledby="quarterly-tab">
                        <div class="row">



                            <!-- card 3 - Platinum -->
                            <div class="col-lg-4 responsive-column-half">
                                <div class="card card-item card-preview" data-tooltip-content="#tooltip_content_1"
                                    style="min-height: 450px;">

                                    <div class="card-body">

                                        <h6 class="ribbon ribbon-blue-bg fs-14 mb-3"> Quarterly </h6>
                                        <div class="course-badge blue"> -50% </div>
                                        <h5 class="card-title text-center fs-29"> Subscription </h5>

                                        <div class="text-center mt-2">

                                            <p class="card-price before-price font-weight-light fs-16 py-1">
                                                <span> {{ $quarterly_platinum->amount_esp * 2 }} Espees </span> | <span>
                                                    {{ $quarterly_platinum->amount_usd * 2 }} USD </span>
                                                {{-- |  <span>  NGN {{ $monthly_silver->amount_ngn }} </span> --}}
                                            </p>

                                            <p class="card-price text-black font-weight-bold fs-16 py-2">
                                                <span> {{ $quarterly_platinum->amount_esp }} Espees </span> | <span>
                                                    {{ $quarterly_platinum->amount_usd }} USD </span> {{-- | <span>  NGN {{ $quarterly_platinum->amount_ngn }} </span> --}}
                                            </p>
                                        </div>

                                        <p class="card-text ">
                                        <ul class="py-3 lh-6">


                                            <li> <i class="la la-check fs-16 text-success"></i> Chapter Study </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Nuggets </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Reflections </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Testimonies and more </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Quick Quizzes </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Final Assessments </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Certificate of Completion </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Assisted Study Features   </li>

                                        </ul>
                                        </p>

                                        <br>


                                        <div class="text-center">
                                            <a href="{{ route('quarterly.platinum') }}" class="btn btn-danger"> Get Started
                                            </a>
                                        </div>

                                    </div><!-- end card-body -->

                                </div><!-- end card -->
                            </div><!-- end col-lg-4 -->


                        </div><!-- end row -->
                    </div> <!-- end tab-pane  | Quarterly Subscription -->





                    <!-- Annual Subscriptions -->
                    <div class="tab-pane fade" id="annual" role="tabpanel" aria-labelledby="annual-tab">
                        <div class="row">


                            <!-- card 3 - Platinum -->
                            <div class="col-lg-4 responsive-column-half">
                                <div class="card card-item card-preview" data-tooltip-content="#tooltip_content_1"
                                    style="min-height: 450px;">

                                    <div class="card-body">

                                        <h6 class="ribbon ribbon-blue-bg fs-14 mb-3"> Yearly </h6>
                                        <div class="course-badge blue">-50%</div>
                                        <h5 class="card-title text-center fs-29">
                                            {{ $yearly_platinum->package_shortname }} </h5>

                                        <div class="text-center mt-2">



                                            <p class="card-price before-price font-weight-light fs-16 py-1">
                                                <span> {{ $yearly_platinum->amount_esp * 2 }} Espees </span> | <span>
                                                    {{ $yearly_platinum->amount_usd * 2 }} USD </span>
                                                {{-- |  <span>  NGN {{ $monthly_silver->amount_ngn }} </span> --}}
                                            </p>

                                            <p class="card-price text-black font-weight-bold fs-16 py-2">
                                                <span> {{ $yearly_platinum->amount_esp }} Espees </span> | <span>
                                                    {{ $yearly_platinum->amount_usd }} USD </span> {{-- |  <span>  NGN {{ $yearly_platinum->amount_ngn }} </span> --}}

                                            </p>
                                        </div>

                                        <p class="card-text ">
                                        <ul class="py-3 lh-6">

                                            <li> <i class="la la-check fs-16 text-success"></i> Chapter Study </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Nuggets </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Reflections </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Testimonies and more </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Quick Quizzes </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Final Assessments </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Certificate of Completion </li>
                                            <li> <i class="la la-check fs-16 text-success"></i> Assisted Study Features   </li>

                                        </ul>
                                        </p>

                                        <br>


                                        <div class="text-center">
                                            <a href="{{ route('annually.platinum') }}" class="btn btn-danger"> Get
                                                Started </a>
                                        </div>

                                    </div><!-- end card-body -->

                                </div><!-- end card -->
                            </div><!-- end col-lg-4 -->


                        </div><!-- end row -->
                    </div><!-- end tab-pane | Annual Subscription -->



                </div><!-- end tab-content -->


            </div><!-- end container -->
        </div><!-- end card-content-wrapper -->


    </section><!-- end courses-area -->
@endsection