@extends(getTemplate() . '.panel.layouts.panel_layout')
@push('styles_top')
    <style type="text/css">
        @import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800);

        .pricing1 {
            font-family: "Montserrat", sans-serif;
            color: #8d97ad;
            font-weight: 300;
        }

        .pricing1 h1,
        .pricing1 h2,
        .pricing1 h3,
        .pricing1 h4,
        .pricing1 h5,
        .pricing1 h6 {
            color: #3e4555;
        }

        .pricing1 .font-weight-medium {
            font-weight: 500;
        }

        .pricing1 .bg-light {
            background-color: #f4f8fa !important;
        }

        .pricing1 .subtitle {
            color: #8d97ad;
            line-height: 24px;
            font-size: 14px;
        }

        .pricing1 .font-14 {
            font-size: 14px;
        }

        .pricing1 h5 {
            line-height: 22px;
            font-size: 18px;
        }

        .pricing1 .card.card-shadow {
            -webkit-box-shadow: 0px 0px 5px rgba(115, 128, 157, 0.1);
            box-shadow: 0px 0px 5px rgba(115, 128, 157, 0.1);
        }

        .pricing1 .on-hover {
            -webkit-transition: 0.1s;
            -o-transition: 0.1s;
            transition: 0.1s;
        }

        .pricing1 .on-hover:hover {
            -ms-transform: scale(1.05);
            transform: scale(1.05);
            -webkit-transform: scale(1.05);
            -webkit-font-smoothing: antialiased;
        }

        .pricing1 .btn-success-gradiant {
            background: #2cdd9b;
            background: -webkit-linear-gradient(legacy-direction(to right), #2cdd9b 0%, #1dc8cc 100%);
            background: -webkit-gradient(linear, left top, right top, from(#2cdd9b), to(#1dc8cc));
            background: -webkit-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
            background: -o-linear-gradient(left, #2cdd9b 0%, #1dc8cc 100%);
            background: linear-gradient(to right, #2cdd9b 0%, #1dc8cc 100%);
        }

        .pricing1 .btn-success-gradiant:hover {
            background: #1dc8cc;
            background: -webkit-linear-gradient(legacy-direction(to right), #1dc8cc 0%, #2cdd9b 100%);
            background: -webkit-gradient(linear, left top, right top, from(#1dc8cc), to(#2cdd9b));
            background: -webkit-linear-gradient(left, #1dc8cc 0%, #2cdd9b 100%);
            background: -o-linear-gradient(left, #1dc8cc 0%, #2cdd9b 100%);
            background: linear-gradient(to right, #1dc8cc 0%, #2cdd9b 100%);
        }

        .pricing1 .btn-danger-gradiant {
            background: #ff4d7e;
            background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
            background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
            background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
            background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
            background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
        }

        .pricing1 .btn-danger-gradiant:hover {
            background: #ff6a5b;
            background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
            background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
            background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
            background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
            background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
        }

        .pricing1 .btn-md {
            padding: 15px 30px;
            font-size: 16px;
        }

        .pricing1 .onoffswitch {
            width: 70px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            margin: 0 auto;
        }

        .pricing1 .onoffswitch-label {
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 20px;
        }

        .pricing1 .onoffswitch-inner {
            width: 200%;
            margin-left: -100%;
            -webkit-transition: margin 0.3s ease-in 0s;
            -o-transition: margin 0.3s ease-in 0s;
            transition: margin 0.3s ease-in 0s;
        }

        .pricing1 .onoffswitch-inner::before,
        .pricing1 .onoffswitch-inner::after {
            display: block;
            float: left;
            width: 50%;
            height: 30px;
            padding: 0;
            line-height: 30px;
            font-size: 14px;
            color: white;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .pricing1 .onoffswitch-inner::before {
            content: "";
            padding-right: 27px;
            background-color: #2cdd9b;
            color: #FFFFFF;
        }

        .pricing1 .onoffswitch-inner::after {
            content: "";
            padding-right: 24px;
            background-color: #3e4555;
            color: #999999;
            text-align: right;
        }

        .pricing1 .onoffswitch-switch {
            width: 23px;
            margin: 6px;
            height: 23px;
            top: -1px;
            bottom: 0;
            right: 35px;
            border-radius: 20px;
            -webkit-transition: all 0.3s ease-in 0s;
            -o-transition: all 0.3s ease-in 0s;
            transition: all 0.3s ease-in 0s;
        }

        .pricing1 .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }

        .pricing1 .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
            right: 0px;
        }

        .pricing1 .price-badge {
            top: -13px;
            left: 0;
            right: 0;
            width: 100px;
            margin: 0 auto;
        }

        .pricing1 .badge-inverse {
            background-color: #3e4555;
        }

        .pricing1 .display-5 {
            font-size: 3rem;
            color: #263238;
        }

        .pricing1 .pricing sup {
            font-size: 18px;
            top: -20px;
        }



        .pricing1 .monthly {
            display: inline-block;
        }

        .pricing1 .hidden {
            display: none !important;
        }

        .pricing1 .visible {
            display: inline-block !important;
        }
    </style>
@endpush

@section('content')
    <div class="container ">
        <div class="row">
            {{-- <div class="col-6">
                @if (!empty($activePackage))
                    <div class="card border-success border-2 shadow-sm mb-4">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1">
                                    <h5 class="mb-1">Your Active Package</h5>
                                    <p class="mb-0">{{ $activePackage->registrationPackage->title }} - Expires on
                                        {{ $activePackage->current_period_end }}</p>
                                </div>
                                <a href="{{ route('panel.subscription.manage') }}" class="btn btn-primary btn-sm">
                                    Manage Subscription
                                </a>
                            </div>
                        </div>
                    </div>
                @endif
            </div> --}}

            <div class="pricing1 py-5">
                <div class="row justify-content-center">
                    <div class="col-md-8 text-center">
                        <h3 class="mt-3 font-weight-medium mb-1">Pricing to make your Work Effective</h3>
                        <h6 class="subtitle">We offer 100% satisafaction and Money back Guarantee</h6>
                        <div class="switcher-box mt-4 d-flex align-items-center justify-content-center">
                            <span class="font-14 font-weight-medium">MONTHLY</span>
                            <div class="onoffswitch position-relative mx-2">
                                <input type="checkbox" name="onoffswitch1" class="onoffswitch-checkbox d-none"
                                    id="myonoffswitch1">
                                <label class="onoffswitch-label d-block overflow-hidden" for="myonoffswitch1">
                                    <span class="onoffswitch-inner d-block"></span>
                                    <span class="onoffswitch-switch d-block bg-white position-absolute"></span>
                                </label>
                            </div>
                            <span class="font-14 font-weight-medium">YEARLY</span>
                        </div>
                    </div>
                </div>
                <!-- Row  -->
                <div class="row mt-10 justify-content-center">
                    <!-- User package -->
                    <div class="col-lg-3 col-md-6">
                        <div class="card text-center card-shadow on-hover border-0 mb-4 min-h-450px">
                            <div class="card-body font-14">
                                <h5 class="mt-3 mb-1 font-weight-medium">{{ $monthlyUserPackage->title }}</h5>
                                <h6 class="subtitle font-weight-normal">{{ $monthlyUserPackage->description }}</h6>
                                <div class="pricing my-3">
                                    <sup>$</sup>
                                    <span class="monthly display-5">{{ $monthlyUserPackage->price }}</span>
                                    <span class="yearly hidden display-5">{{ $yearlyUserPackage->price }}</span>
                                    <small class="monthly">/mo</small>
                                    <small class="yearly hidden">/yr</small>
                                    <span class="d-block">&nbsp;</span>
                                </div>
                                <ul class="list-inline">
                                    <li class="d-block py-2">Access to ToC Course Library</li>
                                    <li class="d-block py-2">Certificates of Completion</li>
                                    <li class="d-block py-2">&nbsp;</li>
                                    <li class="d-block py-2">&nbsp;</li>
                                    <li class="d-block py-2">&nbsp;</li>
                                </ul>
                                <div class="bottom-btn">
                                    <form class="monthly"
                                        action="{{ route('panel.subscription.pay', ['package_id' => $monthlyUserPackage->id]) }}"
                                        method="get">
                                        <button type="submit" class="btn btn-primary w-100">Choose Plan</button>
                                    </form>
                                    <form class="yearly hidden"
                                        action="{{ route('panel.subscription.pay', ['package_id' => $yearlyUserPackage->id]) }}"
                                        method="get">
                                        <button type="submit" class="btn btn-primary w-100">Choose Plan</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-lg-3 col-md-6">
                        <div class="card text-center card-shadow on-hover border-0 mb-4  min-h-450px">
                            <div class="card-body font-14">
                                <h5 class="mt-3 mb-1 font-weight-medium">{{ $monthlyOrganisationPackage->title }}</h5>
                                <h6 class="subtitle font-weight-normal">{{ $monthlyOrganisationPackage->description }}</h6>
                                <div class="pricing my-3">
                                    <sup>$</sup>
                                    <span class="monthly display-5">{{ $monthlyOrganisationPackage->price }}</span>
                                    <span class="yearly hidden display-5">{{ $yearlyOrganisationPackage->price }}</span>
                                    <small class="monthly">/mo</small>
                                    <small class="yearly hidden">/yr</small>
                                    <span class="d-block"><i>Per User</i></span>
                                    {{-- <span class="d-block">Save <span class="font-weight-medium">$30</span> a Year</span> --}}
                                </div>
                                <ul class="list-inline">
                                    <li class="d-block py-2">Up to 100 employees</li>
                                    <li class="d-block py-2">Access to ToC Course Library</li>
                                    <li class="d-block py-2">Certification Tracking</li>
                                    <li class="d-block py-2">Advanced Reporting</li>
                                    <li class="d-block py-2">&nbsp;</li>
                                </ul>
                                <div class="bottom-btn">
                                    <form class="monthly"
                                        action="{{ route('panel.subscription.pay', ['package_id' => $monthlyOrganisationPackage->id]) }}"
                                        method="get">
                                        <button type="submit" class="btn btn-primary w-100">Choose Plan</button>
                                    </form>
                                    <form class="yearly hidden"
                                        action="{{ route('panel.subscription.pay', ['package_id' => $yearlyOrganisationPackage->id]) }}"
                                        method="get">
                                        <button type="submit" class="btn btn-primary w-100">Subscribe</button>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-lg-3 col-md-6">
                        <div class="card text-center card-shadow on-hover border-0 mb-4  min-h-450px">
                            <div class="card-body font-14">
                                <h5 class="mt-3 mb-1 font-weight-medium">Enterprise</h5>
                                <h6 class="subtitle font-weight-normal">For Large Organisations</h6>
                                <div class="pricing my-3">
                                    <div class="pricing my-3">

                                        <span class="display-5">Contact Us</span>
                                        <span class="display-5">&nbsp;</span>
                                        <small class="">&nbsp;</small>
                                        <span class="d-block"><i>&nbsp;</i></span>
                                        {{-- <span class="d-block">Save <span class="font-weight-medium">$30</span> a Year</span> --}}
                                    </div>
                                </div>
                                <ul class="list-inline">
                                    <li class="d-block py-2">Custom Solutions</li>
                                    <li class="d-block py-2">100+ Employees</li>
                                    <li class="d-block py-2">Advanced Reporting</li>
                                    <li class="d-block py-2">Certification Tracking</li>
                                    <li class="d-block py-2">&nbsp;</li>
                                </ul>
                                <div class="bottom-btn">
                                    <a class="btn btn-success btn-md text-white btn-block"
                                        href="mailto:sales@theorangecard.com.au"><span>Learn More</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->

                </div>
            </div>

        </div>
    </div>
@endsection

@push('scripts_bottom')
    <script>
        $(".pricing1 .onoffswitch-label").click(function() {
            $(".pricing1 .monthly").toggleClass('hidden');
            $(".pricing1 .yearly").toggleClass('hidden');
        });
    </script>
@endpush