@extends('layouts.master')
@section('title', 'Subscriptions')

@section("styles")
    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous"
    />
@endsection
@section('content')
    <div class="main">
        @include('auth.partials.error')
        <div class="student mb-60">
            <div class="header mb-30">
                <h1 class="hd">Subscription Plans</h1>
            </div>

            <div class="subHeading mb-30">
                <div class="leftsub">
                    <div
                        data-modal-target="#allStudents"
                        class="leftsubLinks l-active"
                    >
                        <h4 class="t-active">Schools</h4>
                        <span class="number active">Plans</span>
                    </div>
                </div>
            </div>

            <!-- card carousel -->
            <div
                style="
                outline: none;
                margin: 0 auto;
                height: 400px;
                box-shadow: 4px 24px 7px 24px rgba(189, 189, 189, 0.1);
              "
                id="carouselExampleIndicators"
                class="carousel-width carousel slide"
                data-bs-ride="carousel"
            >
                <div class="carousel-indicators">
                    <button
                        type="button"
                        data-bs-target="#carouselExampleIndicators"
                        data-bs-slide-to="0"
                        class="active"
                        aria-current="true"
                        aria-label="Slide 1"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="#carouselExampleIndicators"
                        data-bs-slide-to="1"
                        aria-label="Slide 2"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="#carouselExampleIndicators"
                        data-bs-slide-to="2"
                        aria-label="Slide 3"
                    ></button>
                </div>
                <div class="carousel-inner">
                    @foreach($pricingPlans as $pricingPlan)
                        <div class="carousel-item @if($loop->last) active @endif">
                            <div
                                style="width: 100%; height: 420px"
                                class="card text-center"
                            >
                                <div class="card-header bg-primary fs-3 fw-bold text-white">
                                    {{$pricingPlan->name}}
                                </div>
                                <div class="bg-primary card-body">
                                    <h2 class="card-title fw-bold">&#x20A6;{{$pricingPlan->price}}
                                        /{{$pricingPlan->duration}} days</h2>
                                    <p style="width: 40% text-center" class="card-text">
                                        {{$pricingPlan->description}}
                                    </p>
                                    @if(auth()->user()->pricing_plan_id)
                                        @if(auth()->user()->pricing_plan_id == $pricingPlan->id)
                                            <a href="#" class="btn btn-primary">Current Plan</a>
                                        @endif
                                    @else
                                        <a href="{{route('admin.subscribe',$pricingPlan->id)}}" class="btn btn-primary">Get Plan</a>
                                    @endif

                                </div>
                                @if(auth()->user()->pricing_plan_id == $pricingPlan->id)
                                    @if(auth()->user()->subscription_ends_at->greaterThan(now()))
                                    <div class="card-footer text-muted">The subscription ends in {{auth()->user()->subscription_ends_at->diffInDays()}} days</div>
                                    @else
                                        <div class="card-footer text-muted">The subscription has ended</div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                <button
                    class="carousel-control-prev"
                    type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev"
                >
                <span
                    class="carousel-control-prev-icon"
                    aria-hidden="true"
                ></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button
                    class="carousel-control-next"
                    type="button"
                    data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next"
                >
                <span
                    class="carousel-control-next-icon"
                    aria-hidden="true"
                ></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
            integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"
    ></script>
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
        crossorigin="anonymous"
    ></script>
@endsection