@extends('website.desktop.layouts.app-payment')
@section('title') Study Plans Page - Gradding @endsection
@section('main')
@php
    $features1 = json_decode(@$plans[0]->features);
    $features2 = json_decode(@$plans[1]->features);
@endphp
    <main>
        <section class="container">
            <div class="banner-content">
                <h2>Start Your <span>personalized</span> study abroad journey</h2>
                <p>We will take care of your complete study abroad journey from starting till you get admission in the
                    university.</p>
                <ul>
                    <li><img src="{{ asset('frontend') }}/assets-desktop/images/start-journey/right-tick.svg"
                            alt="">Streamlined coordination with university</li>
                    <li><img src="{{ asset('frontend') }}/assets-desktop/images/start-journey/right-tick.svg"
                            alt="">Support for Visa, Accommodation and building valuable Networks</li>
                </ul>
            </div>
            <div class="pricing-card-container">
                <div class="plan-features">
                    <ul>
                        <li>
                            <h4>Choose Your Plan<span class="offer-bedge">50% Off</span></h4>
                            <p>Choose your abroad plan according to your organisational</p>
                        </li>
                        @if(!empty($features1))
                            @foreach ($features1 as $feature)
                                <li>{{ @$feature->key_name }}</li>
                            @endforeach
                        @endif
                    </ul>
                </div>
                @if(!empty($plans))
                    @foreach ($plans as $plan)
                    <div class="plan-prices">
                        <div class="plan-types">{{ @$plan->label }}
                            @if(@$plan->label === 'PRO')
                                <img src="{{ asset('frontend') }}/assets-desktop/images/pro-plan-bedge.png" alt="">
                            @endif
                        </div>
                        <ul>
                            <li>
                                <span class="price">₹{{ @$plan->offer_price }}/-<del>₹{{ @$plan->price }}/-</del></span>
                                <a href="{{ route('payment.studentPlan',["id" => encrypt(@$plan->id)]) }}" class="select-plan-btn">Select Plan</a>
                            </li>
                            @php
                                $features = json_decode($plan->features);
                            @endphp
                            @if(!empty($features))
                            @foreach ($features as $feature)
                                @if(@$feature->value == 'custom' )
                                    <li>{{@$feature->custom_value}}</li>
                                @else
                                    @if(@$feature->value == 1)
                                        <li>
                                            <img src="{{ asset('frontend') }}/assets-desktop/images/start-journey/right-tick.svg"
                                            alt="">
                                        </li>
                                    @else
                                        <li>
                                            <img src="{{ asset('frontend') }}/assets-desktop/images/start-journey/cross.svg"
                                            alt="">
                                        </li>
                                    @endif
                                @endif
                            @endforeach
                            @endif
                        </ul>
                    </div>
                    @endforeach
                @endif
            </div>
            <p class="plan-desclaimer">Our LITE pack is not refundable. Rest all packs are 100% refundable if the above mentioned conditions are not fulfilled. So do not worry about your money and start your abroad journey now! <a href="/terms-condition">Click here</a> to view all terms nd conditions.</p>
        </section>
        <!-- Real Review Section -->
        <section class="real-review">
            <h2 class="align-center real-review-heading">Real Reviews. <span>From Real Students.</span></h2>
            <div class="real-review-slider">
                <div class="review-card">
                    <div class="review-content">
                        <h6 class="comment-card">The experts here are well-equipped with the latest updates regarding visa policy in the country. They helped me at each step and guided me to complete the entire documentation to get a visa without any rejection. </h6>
                    </div>
                    <div class="user d-flex">
                        <img src="{{ asset('backend') }}/image/default-user-review.png"
                            alt="reviewer-image" width="100%" height="100%">
                        <div class="user-name">
                            <h6>Riya Patel</h6>
                            <p>Mumbai,Maharashtra</p>
                        </div>
                    </div>
                </div>
                <div class="review-card">
                    <div class="review-content">
                        <h6 class="comment-card">Gradding.com is a friend who is always ready to support. The counsellors helped me to choose the appropriate course by listing all the pros and cons to make it easy to choose one.</h6>
                    </div>
                    <div class="user d-flex">
                        <img src="{{ asset('backend') }}/image/default-user-review.png"
                            alt="reviewer-image" width="100%" height="100%">
                        <div class="user-name">
                            <h6>Arjun Verma</h6>
                            <p>Delhi</p>
                        </div>
                    </div>
                </div>
                <div class="review-card">
                    <div class="review-content">
                        <h6 class="comment-card">My application was rejected 2 times due to inaccurate documents, and I started believing my studying abroad dream would be shattered. But, then Gradding.com became my angel and guided me on the correct path.</h6>
                    </div>
                    <div class="user d-flex">
                        <img src="{{ asset('backend') }}/image/default-user-review.png"
                            alt="reviewer-image" width="100%" height="100%">
                        <div class="user-name">
                            <h6>Nisha Kapoor</h6>
                            <p>Bangalore,Karnataka</p>
                        </div>
                    </div>
                </div>
                <div class="review-card">
                    <div class="review-content">
                        <h6 class="comment-card">The entire team at Gradding.com is very patient in resolving queries. They explained everything in detail about why and how they were planning to get my documents approved in the first trial.</h6>
                    </div>
                    <div class="user d-flex">
                        <img src="{{ asset('backend') }}/image/default-user-review.png"
                            alt="reviewer-image" width="100%" height="100%">
                        <div class="user-name">
                            <h6>Rohan Gupta</h6>
                            <p>Kolkata,West Bengal</p>
                        </div>
                    </div>
                </div>
                <div class="review-card">
                    <div class="review-content">
                        <h6 class="comment-card">Gradding.com has the most user-friendly interface that is easy to work with and explore things. Their detailed description of each institute helped me choose my perfect match.</h6>
                    </div>
                    <div class="user d-flex">
                        <img src="{{ asset('backend') }}/image/default-user-review.png"
                            alt="reviewer-image" width="100%" height="100%">
                        <div class="user-name">
                            <h6>Pooja Desai</h6>
                            <p>Ahmedabad,Gujarat</p>
                        </div>
                    </div>
                </div>
                <div class="review-card">
                    <div class="review-content">
                        <h6 class="comment-card">The experts at Gradding.com will not leave you until you get settled in a foreign land. They will help you to find affordable accommodation and help you with the loans too.</h6>
                    </div>
                    <div class="user d-flex">
                        <img src="{{ asset('backend') }}/image/default-user-review.png"
                            alt="reviewer-image" width="100%" height="100%">
                        <div class="user-name">
                            <h6>Siddharth Kumar</h6>
                            <p>Chennai,Tamil Nadu</p>
                        </div>
                    </div>
                </div>
                {{-- <div class="review-card">
                    <div class="review-content">
                        <h6 class="comment-card">Aliquet ridiculus mi porta habitant vulputate rhoncus, mattis amet
                            enim. Sit purus venenatis velit semper lectus sed ornare quam nulla. Lacus, ut congue
                            sagittis vel nisi integer imperdiet a vitae.</h6>
                    </div>
                    <div class="user d-flex">
                        <img src="{{ asset('frontend') }}/assets-desktop/images/start-journey/user.png"
                            alt="reviewer-image" width="100%" height="100%">
                        <div class="user-name">
                            <h6>Hellena John</h6>
                            <p>Co-founder</p>
                        </div>
                    </div>
                </div> --}}
            </div>
        </section>
    </main>
@endsection
@section('css')
    <link rel="stylesheet"
        href="{{ asset('frontend') }}/assets-desktop/css/studyPlans.css?v={{ env('ASSETS_VERSION') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link defer rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
        integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx.5remJ6z57x0dw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"
        integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection

@section('script')
    {{-- <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
        integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
    <script src="{{ asset('frontend') }}/assets-desktop/js/jquery-3.7.0.min.js?v={{env('ASSETS_VERSION')}}"></script>
    <script src="{{ asset('frontend') }}/assets-desktop/js/slick-carousel-1.8.1-slick.min.js?v={{env('ASSETS_VERSION')}}"></script>
    <script>
        $('.real-review-slider').slick({
            autoplay: true,
            autoplaySpeed: 1500,
            variableWidth: true,
            infinite: true,
            centerMode: true,
            centerPadding: '60px',
            slidesToShow: 3,
            arrows: false,
            responsive: [{
                    breakpoint: 768,
                    settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 3
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '40px',
                        slidesToShow: 1
                    }
                }
            ]
        });
    </script>
@endsection