@extends('layouts.app', ['class' => 'bg-default'])

@section('content')
    @include('layouts.headers.choose-plan-header')

    <style>
        .cards-wrapper {
        display: flex;
        justify-content: center;
        }
        
        .card img {
            max-width: 100%;
            max-height: 100%;
        }

        .card {
            margin: 0 0.5em;
            box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
            border: none;
            width: 30rem;
            height: 35rem;
        }
        .carousel-inner {
        padding: 1em;
        }
        .carousel-control-prev,
        .carousel-control-next {
        background-color: #e1e1e1;
        width: 5vh;
        height: 5vh;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        }

        @media (min-width: 768px) {
            .card img {
                height: 11em;
            }
        }

        .content {
        pointer-events: none;
        transition: all 0.4s;
        }

        .card-hghlght {
        pointer-events: auto;
        transform: scale(1);
        transition: all 0.4s;
        }

        .card-hghlght:hover {
        opacity: 1;
        transform: scale(1.02);
        }

        .content:hover .card-hghlght:not(:hover) {
        opacity: 0.5;
        transform: scale(0.9);
        }

        .disabled{
            pointer-events: none;
        }
        
    </style>

<link rel="stylesheet" href="{{ asset('css/frontend/custom-styles.css') }}"  type="text/css" />

<div class="col">
    <div id="carouselExampleControls" class="carousel carousel-dark slide mt--9 pb-8 d-none d-sm-block" data-ride="carousel">
    <input type="hidden" name="user_id" id="user_id" value='{{$user_id}}'>
    <input type="hidden" name="type" id="type" value='{{$type}}'>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="cards-wrapper content">

                <div class="card card-hghlght" id="card1">

                    <div class="card-body">

                        <h1 class="card-title d-flex justify-content-center">Starter</h1>

                        </br>

                        <h1 class="d-flex justify-content-center">0.00</h1>
                        <span class="d-flex justify-content-center">+10% fee per transaction</span>

                        <br>

                        <input type="checkbox" class="btn-check" id="starter" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center d-flex justify-content-center" for="starter" id="starter-label" style="background-color: #a000c8; color: white"><b>Start Free Trial</b></label><br>

                            <ul class="list-unstyled">
                                <li><span><i class="ni ni-check-bold"></i>Upload <b>1-10</b> Products</span></li>
                                <li><span><i class="ni ni-check-bold"></i>1 User Account only</span></li>
                                <li><span><i class="ni ni-check-bold"></i>30-day free trial period</span></li>
                            </ul>
                            
                        
                    </div>
                </div>

                <div class="card card-hghlght" id="card2">

                    <div class="card-body">

                        <h1 class="card-title d-flex justify-content-center m-0">Pro</h1>
                        <span class="d-flex justify-content-center">for as low as</span>

                        </br>

                        <h1 class="d-flex justify-content-center align-items-baseline">25.00 <small>/day</small></h1>
                        <span class="d-flex justify-content-center">+5% fee per transaction</span>

                        <br>

                        <input type="checkbox" class="btn-check" id="pro" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center d-flex justify-content-center" for="pro" id="pro-label" style="background-color: #a000c8; color: white"><b>Start Free Trial</b></label><br>

                        <ul class="list-unstyled">
                                <li><span><i class="ni ni-check-bold"></i>Upload <b>1-20</b> Products</span></li>
                                <li><span><i class="ni ni-check-bold"></i>3 User Accounts</span></li>
                                <li><span><i class="ni ni-check-bold"></i>30-day free trial period</span></li>
                            </ul>
                        
                    </div>
                </div>

                <div class="card card-hghlght" id="card3">

                    <div class="card-body">

                        <h1 class="card-title d-flex justify-content-center m-0">Premium</h1>
                        <span class="d-flex justify-content-center">for as low as</span>

                        </br>

                        <h1 class="d-flex justify-content-center align-items-baseline">75.00 <small>/day</small></h1>
                        <span class="d-flex justify-content-center">+2.5% fee per transaction</span>

                        <br>

                        <input type="checkbox" class="btn-check" id="premium" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center d-flex justify-content-center" for="premium" id="premium-label" style="background-color: #a000c8; color: white"><b>Start Free Trial</b></label><br>

                        <ul class="list-unstyled">
                                <li><span><i class="ni ni-check-bold"></i>Upload <b>1-50</b> Products</span></li>
                                <li><span><i class="ni ni-check-bold"></i>5 User Accounts</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Priority Support</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Shopify Integration available</span></li>
                                <li><span><i class="ni ni-check-bold"></i>30-day free trial period</span></li>
                            </ul>
                        
                    </div>
                </div>

                <div class="card card-hghlght" id="card4">

                    <div class="card-body">

                        <h1 class="card-title d-flex justify-content-center m-0">Enterprise</h1>

                        </br>

                        <h1 class="d-flex justify-content-center mb-5">Inquire for the Price</h1>

                        <br>

                        <!-- <input type="checkbox" class="btn-check" id="enterprise" autocomplete="off" style="visibility: hidden;" hidden>
                        <label class="btn align-self-center d-flex justify-content-center" for="enterprise" id="enterprise-label" style="background-color: #a000c8; color: white"><b>Contact Us</b></label><br> -->

                        <a href="{{ route('contact-us') }}" class="btn align-self-center d-flex justify-content-center mt-2" id="small-enterprise-label" style="background-color: #a000c8; color: white" tabindex="-1" role="button" aria-disabled="true"><b>Contact Us</b></a><br>

                        <ul class="list-unstyled">
                                <li><span><i class="ni ni-check-bold"></i>Upload <b>Unlimited</b> Products</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Unlimited User Accounts</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Priority Support</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Shopify Integration available</span></li>
                            </ul>
                        
                    </div>
                </div>

            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>
</div>

<!-- for smaller screens -->
    <div class="col">
        <div id="carouselExampleControlsSmaller" class="carousel carousel-dark slide mt--9 pb-8 d-sm-none" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->

                    <div class="card card-hghlght" id="starter">
                        <div class="card-body">

                            <h1 class="card-title d-flex justify-content-center">Starter</h1>

                            </br>

                            <h1 class="d-flex justify-content-center">0.00</h1>
                            <span class="d-flex justify-content-center">+10% fee per transaction</span>

                            <br>

                            <input type="checkbox" class="btn-check" id="starter" autocomplete="off" style="visibility: hidden;" hidden>
                            <label class="btn align-self-center d-flex justify-content-center" for="starter" id="small-starter-label" style="background-color: #a000c8; color: white"><b>Start Free Trial</b></label><br>

                                <ul class="list-unstyled">
                                    <li><span><i class="ni ni-check-bold"></i>Upload <b>1-10</b> Products</span></li>
                                    <li><span><i class="ni ni-check-bold"></i>1 User Account only</span></li>
                                    <li><span><i class="ni ni-check-bold"></i>30-day free trial period</span></li>
                                </ul>

                            </div>
                        </div>
                        <!-- will show in smaller screens end -->
                    </div>
            </div>
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->
                        <div class="card card-hghlght" id="pro">
                            <div class="card-body">
                                <h1 class="card-title d-flex justify-content-center m-0">Pro</h1>
                                <span class="d-flex justify-content-center">for as low as</span>

                                </br>

                                <h1 class="d-flex justify-content-center align-items-baseline">25.00 <small>/day</small></h1>
                                <span class="d-flex justify-content-center">+5% fee per transaction</span>

                                <br>

                                <input type="checkbox" class="btn-check" id="pro" autocomplete="off" style="visibility: hidden;" hidden>
                                <label class="btn align-self-center d-flex justify-content-center" for="pro" id="small-pro-label" style="background-color: #a000c8; color: white"><b>Start Free Trial</b></label><br>

                                <ul class="list-unstyled">
                                        <li><span><i class="ni ni-check-bold"></i>Upload <b>1-20</b> Products</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>3 User Accounts</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>30-day free trial period</span></li>
                                    </ul>
                                
                            </div>
                        </div>
                    <!-- will show in smaller screens end-->
                </div>
            </div>
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->
                        <div class="card card-hghlght" id="premium">
                            <div class="card-body">
                                <h1 class="card-title d-flex justify-content-center m-0">Premium</h1>
                                <span class="d-flex justify-content-center">for as low as</span>

                                </br>

                                <h1 class="d-flex justify-content-center align-items-baseline">75.00 <small>/day</small></h1>
                                <span class="d-flex justify-content-center">+2.5% fee per transaction</span>

                                <br>

                                <input type="checkbox" class="btn-check" id="premium" autocomplete="off" style="visibility: hidden;" hidden>
                                <label class="btn align-self-center d-flex justify-content-center" for="premium" id="small-premium-label" style="background-color: #a000c8; color: white"><b>Start Free Trial</b></label><br>

                                <ul class="list-unstyled">
                                        <li><span><i class="ni ni-check-bold"></i>Upload <b>1-50</b> Products</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>5 User Accounts</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>Priority Support</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>Shopify Integration available</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>30-day free trial period</span></li>
                                    </ul>
                                
                            </div>
                        </div>
                    <!-- will show in smaller screens end-->
                </div>
            </div>
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <!-- will show in smaller screens -->
                        <div class="card card-hghlght" id="enterprise">
                            <div class="card-body">
                                <h1 class="card-title d-flex justify-content-center m-0">Enterprise</h1>

                                </br>

                                <h1 class="d-flex justify-content-center mb-5">Inquire for the Price</h1>

                                <br>

                                <input type="checkbox" class="btn-check" id="enterprise" autocomplete="off" style="visibility: hidden;" hidden>
                                <label class="btn align-self-center d-flex justify-content-center" for="enterprise" id="small-enterprise-label" style="background-color: #a000c8; color: white"><b>Contact Us</b></label><br>

                                <a href="{{ route('contact-us') }}" class="btn align-self-center d-flex justify-content-center" id="small-enterprise-label" style="background-color: #a000c8; color: white" tabindex="-1" role="button" aria-disabled="true"><b>Contact Us</b></a><br>
                                

                                <ul class="list-unstyled">
                                        <li><span><i class="ni ni-check-bold"></i>Upload <b>Unlimited</b> Products</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>Unlimited User Accounts</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>Priority Support</span></li>
                                        <li><span><i class="ni ni-check-bold"></i>Shopify Integration available</span></li>
                                    </ul>
                                
                            </div>
                        </div>
                    <!-- will show in smaller screens end-->
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControlsSmaller" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControlsSmaller" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        </div>
    </div>

<div class="col-10 d-flex justify-content-end">
    <!-- <button type="submit" class="btn btn-primary mt-4">{{ __('Create account') }}</button> -->
    <a href="{{ route('go-to-dashboard') }}" class="btn btn-md disabled" style="background-color:yellow;" tabindex="-1" role="button" aria-disabled="true" id="next2">{{ __('Next') }}</a>
    
</div>

@endsection