@extends('backend.layouts.app')

@section('title', 'Upgrade Plan')

@section('content')
    <style>
        .cards-wrapper {
            display: flex;
            justify-content: center;
        }

        .card {
            margin: 0 0.5em;
            box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
            border: none;
        }

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

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

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

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

        .gray-color {
            background-color: #808080;
            width: 100%;
        }

        .purple-color {
            background-color: #a000c8;
            width: 100%;
        }
    </style>

    <div class="container-fluid">
        <div style="margin-top:4%;">
            <input type="hidden" id="user_id" value='{{$user->id}}'>
            <div class="cards-wrapper content">
                <div class="card card-hghlght">
                    <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>

                        <button class="btn align-self-center d-flex justify-content-center {{ $user->plan_id >= 1  ? 'gray-color' : 'purple-color'  }}" for="starter" id="upgrade-btn" style="color: white;" value="1" {{ $user->plan_id >= 1  ? 'disabled' : ''  }}><b>{{ $user->plan_id == 1  ? 'Your Current Plan' : 'Starter'  }}</b></button>
                        
                        <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">
                    <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>

                        <button class="btn align-self-center d-flex justify-content-center {{ $user->plan_id >= 2  ? 'gray-color' : 'purple-color'  }}" for="pro" id="upgrade-btn" style="color: white" value="2" {{ $user->plan_id >= 2  ? 'disabled' : ''  }}><b>{{ $user->plan_id == 2  ? 'Your Current Plan' : 'Pro'  }}</b></button>
                        
                        <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">
                    <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>

                        <button class="btn align-self-center d-flex justify-content-center {{ $user->plan_id >= 3  ? 'gray-color' : 'purple-color'  }}" id="upgrade-btn" style="color: white" value="3"
                        {{ $user->plan_id >= 3  ? 'disabled' : ''  }}><b>{{ $user->plan_id == 3  ? 'Your Current Plan' : 'Premium'  }}</b></button><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">
                    <div class="card-body">
                        <h1 class="card-title d-flex justify-content-center m-0">Enterprise</h1>

                        </br>

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

                        <br>

                        <button class="btn align-self-center d-flex justify-content-center {{ $user->plan_id >= 4  ? 'gray-color' : 'purple-color'  }}" id="upgrade-btn" style="color: white;margin-top: 57px;" value="4"
                        {{ $user->plan_id >= 4  ? 'disabled' : ''  }}><b>{{ $user->plan_id == 4  ? 'Your Current Plan' : 'Contact Us'  }}</b></button>
                        
                        <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>

    @include('backend.my-account.plan.modal-contact-us')


@endsection

@section('after-scripts')
    <script src="{{ asset('js/my-account/plan/index.js') }}"></script>
@endsection