@extends('user.user_dashboard')
@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="{{ route('dashboard') }}" 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="{{ route('dashboard') }}" class="text-muted text-decoration-none"> Dashboard </a> /
                        Subscription
                    </small>
                </div>

            </div>

        </div>

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




    @php
        $id = Auth::user()->id;
        $profileData = App\Models\User::find($id);

        // Get the latest active subscription if it exists
        $subscription = $profileData
            ->subscriptions()
            ->where('status', 'active')
            ->where('end_date', '>', now())
            ->latest()
            ->first();

        $today = now();

        // Get eighteen deluxe months subscription if it exists
        $subscriptiondeluxe = $profileData
            ->subscriptions()
            ->where('status', 'active')
            ->where('subscription_duration', 'eighteen')
            ->latest()
            ->first();

    @endphp






    @if ($subscription)
        <!--======================================
            START CTA AREA
    ======================================-->
        <section class="cta-area py-2 position-relative overflow-hidden">
            <span class="stroke-shape stroke-shape-1"></span>
            <span class="stroke-shape stroke-shape-2"></span>
            <span class="stroke-shape stroke-shape-3"></span>
            <span class="stroke-shape stroke-shape-4"></span>
            <span class="stroke-shape stroke-shape-5"></span>
            <span class="stroke-shape stroke-shape-6"></span>

            <div class="container">

                <div class="row align-items-center">

                    <div class="col-lg-6">
                        <div class="cta-content-wrap">

                            <div class="media media-card align-items-center">

                                {{--
                        <div class="media-img media--img media-img-md rounded-full">
                          
                        </div>
                        --}}

                                <div class="media-body py-4">
                                    <h6 class="fs-20 text-center">

                                        You Have An Active {{ $subscription->subscription_duration }} <span class="fw-bold">
                                            {{ $subscription->subscription_name }} </span>
                                    </h6>
                                </div><!-- end media-body -->


                            </div><!-- end media -->

                        </div>
                    </div><!-- end col-lg-6 -->


                    <div class="col-lg-6 pb-2">
                        <div class="client-logo-wrap text-right">

                            <span class="ribbon p-2 fs-16 client-logo-item client--logo-item-2 pr-3 text-center">

                                Subscription Expires: <span class="fw-bold">
                                    {{ \Carbon\Carbon::parse($subscription->end_date)->format('F jS, Y') }} </span>

                            </span>


                        </div><!-- end client-logo-wrap -->
                    </div><!-- end col-lg-6 -->
                </div><!-- end row -->
            </div><!-- end container -->

        </section><!-- end cta-area -->
        <!--======================================
            END CTA AREA
    ======================================-->
    @else
    @endif












    <!-- normal subscription menu -->


    <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>


                @if ($subscription)
                @else
                    <h5 class="ribbon ribbon-lg mt-2 mb-2 "> Subscribe To Access TPOYM Enhanced Study </h5>
                @endif

                {{--  <span class="section-divider"></span> --}}

            </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 active text-dark" 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="d-flex flex-wrap align-items-center justify-content-between pt-2 pb-5">
                    <form method="POST" action="{{ route('voucher.redeem') }}">
                        @csrf

                        <div class="input-group mb-2">
                            <input class="form-control form--control pl-3" type="text" name="voucher_code"
                                placeholder="Enter Voucher Code:" required>



                            <div class="input-group-append">
                                <button type="submit" class="btn theme-btn"> Redeem Voucher</button>
                            </div>
                        </div>

                        @error('voucher_code')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                    </form>
                </div>


                <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>
                                                {{-- |  <span>  NGN {{ $monthly_silver->amount_ngn }} </span> --}}
                                            </p>

                                            <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> {{-- | <span>  NGN {{ $monthly_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('monthly.platinum') }}" class="btn btn-danger"> Choose Plan
                                            </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"> Choose
                                                Plan </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"> Subscription </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"> Choose
                                                Plan </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