@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">
                        <br>
                        <h1 class="card-title d-flex justify-content-center">Starter</h1>

                        </br>

                        
                        <span class="d-flex justify-content-center">Standard Chat Commerce for Small Businesses</span>
                        <h1 class="d-flex justify-content-center">P25 Per Day</h1>

                        <br>

                        <input type="checkbox" class="btn-check" id="starter" autocomplete="off" style="visibility: hidden;" hidden>


                            <ul class="list-unstyled">
                                <li><span><i class="ni ni-check-bold"></i>7% Transaction Fee</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Billed Monthly or Annually<br>&emsp;(less 10% for Annual Payment)</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Pricing is Per Store</span></li>
                                <li><span><i class="ni ni-check-bold"></i><b><i>Free Month Trial!</i></b></span></li>
                            </ul>
                            
                        
                    </div>
                    <div class="card-footer">
                    <label class="btn align-self-center d-flex justify-content-center" for="starter" id="starter-label" style="background-color: #a000c8; color: white"><b>Select Plan</b></label><br>
                    </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="card2">

                    <div class="card-body">

                    <h1 class="card-title d-flex justify-content-center m-0"><span class="badge badge-sm bg-gradient-success text-white"><b>MOST POPULAR!</b></span></h1>
                        <h1 class="card-title d-flex justify-content-center m-0">Premium</h1>

                        </br>

                        
                        <span class="d-flex justify-content-center">Advanced Chat Commerce for <br>Single & Multi-Store Restaurants</span>
                        <h1 class="d-flex justify-content-center align-items-baseline">P75 Per Day</h1>

                        <br>

                        <input type="checkbox" class="btn-check" id="premium" autocomplete="off" style="visibility: hidden;" hidden>
                        
                        <ul class="list-unstyled">
                                <li><span><i class="ni ni-check-bold"></i>5% Transaction Fee</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Billed Monthly or Annually<br>&emsp;(less 10% for Annual Payment)</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Pricing is Per Store</span></li>
                                <li><span><i class="ni ni-check-bold"></i><b><i>Free Month Trial!</i></b></span></li>
                            </ul>
                        
                    </div>
                    <div class="card-footer">
                    <label class="btn align-self-center d-flex justify-content-center" for="premium" id="premium-label" style="background-color: #a000c8; color: white"><b>Select Plan</b></label><br>

                    </div>
                </div>

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

                    <div class="card-body">

                    <br>

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

                        </br>

                        <h1 class="d-flex justify-content-center mb-5">Please inquire on Pricing</h1>

                        <br>

                        <ul class="list-unstyled">
                                <li><span><i class="ni ni-check-bold"></i>4% Transaction Fee</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Billed Monthly or Annually<br>&emsp;(less 10% for Annual Payment)</span></li>
                                <li><span><i class="ni ni-check-bold"></i>Pricing is Per Store</span></li>
                            </ul>
                        
                    </div>
                    <div class="card-footer">
                        <a href="{{ route('contact-us') }}" class="btn align-self-center d-flex justify-content-center" id="small-enterprise-label" style="background-color: #a000c8;"><b style="color:white;">Contact Us</b></a><br>
                    </div>
                    
                </div>

            </div>
            
        </div>
        
    </div>
    <div class="col-10 d-flex justify-content-end" style="margin:50px;">
    <!-- <button type="submit" class="btn btn-primary mt-4">{{ __('Create account') }}</button> -->
    <a href="{{ route('connect-facebook') }}" class="btn btn-md disabled pb-0" style="background-color:yellow; color:black" tabindex="-1" role="button" aria-disabled="true" id="next2"><h3>{{ __('Next') }} <i class="fa fa-arrow-right"></i></h3></a>
    
</div>

    </div>
</div>



@endsection