@extends('layouts.master')
@section('content')
    <link href="{{ asset('/css/pricing-page.css') }}" rel="stylesheet" type="text/css"/>

    <section class="section plan-section">
        <div class="container">
            <header class="page-header">
                <!--                        <div class="section-main-heading">
                                            <h4 class="">Plan Subscriptions</h4></div>-->
                <h1>Choose a Plan That’s Right for Your Business. </h1>
                <p>All payments are made through shopify app billings! </p>
            </header>

            <div class="bv-page__segment">
                <div class="bv-page__segment-content">
                    
                    <div>
                        <form id="update_pricing_plan" method="post" action="{{ route('update_pricing_plan') }}">
                            {{ csrf_field() }}
                            <div class="plans row">
                                <div class="col-md-4 col-sm-6 col-12 mt-mobile">
                                    <div class="plan basic ">
                                        <div class="box">
                                            <header>
                                                <h4 class="plan-title">Basic</h4>
                                                <div class="plan-cost">
                                                    <span class="sup">$</span>
                                                    <span class="plan-price">0</span>
                                                    <span class="plan-type">/month</span>
                                                    <div class="muted">USD Billed Monthly </div>
                                                </div>
                                            </header>
                                            <div class="text">
                                                <p>Everything you need to start a automation.</p>
                                            </div>
                                            <div class="plan-select"><a href="#" class="btn basic-submit-btn">Activate</a><span class="current"><i class="ion-checkmark-circled"> </i> &nbsp; Current Plan</span></div>
                                        </div>
                                        <ul class="plan-features">
                                            <li><i class="ion-checkmark"> </i>2 active Shopify configured data events e-g orders and customers</li>
                                            <li><i class="ion-checkmark"> </i>200 tasks per month e-g either 200 orders or customers synchronization</li>
                                            <li><i class="ion-checkmark"> </i>7 Days Logs Retention</li>
                                        </ul>
                                        <input id="basic-submit-btn" style="display: none;" type="submit" name="plan_type" value="basic"/>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-12 mt-mobile">
                                    <div class="plan professional ">
                                        <div class="ribbon ribbon-top-right"><span>Featured</span></div>
                                        <div class="box">
                                            <header>
                                                <h4 class="plan-title">Professional</h4>
                                                <div class="plan-cost">
                                                    <span class="sup">$</span>
                                                    <span class="plan-price">{{ config('shopify.professional_plan_price') }}</span>
                                                    <span class="plan-type">/month</span>
                                                    <div class="muted">USD Billed Monthly </div>
                                                </div>
                                            </header>
                                            <div class="text">
                                                <p>Suitable for Shopify Basic Store users.</p>
                                            </div>
                                            <div class="plan-select"><a href="#" class="btn professional-submit-btn">Activate</a><span class="current"><i class="ion-checkmark"> </i>Current Plan</span></div>
                                        </div>
                                        <ul class="plan-features">
                                            <li><i class="ion-checkmark"> </i>10 active Shopify configured data events e-g orders and customers</li>
                                            <li><i class="ion-checkmark"> </i>10K tasks per month e-g either 10K orders or customers synchronization</li>
                                            <li><i class="ion-checkmark"> </i>7 Days Logs Retention</li>
                                        </ul>
                                        <input id="professional-submit-btn" style="display: none;" type="submit" name="plan_type" value="professional"/>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6 col-12 mt-mobile">
                                    <div class="plan elite  featured">
                                        <div class="ribbon ribbon-top-right"><span>Featured</span></div>
                                        <div class="box">
                                            <header>
                                                <h4 class="plan-title">Elite</h4>
                                                <div class="plan-cost">
                                                    <span class="sup">$</span>
                                                    <span class="plan-price">{{ config('shopify.elite_plan_price') }}</span>
                                                    <span class="plan-type">/month</span>
                                                    <div class="muted">USD Billed Monthly </div>
                                                </div>
                                            </header>
                                            <div class="text">
                                                <p>Suitable for Shopify Advanced and Plus Store users.</p>
                                            </div>
                                            <div class="plan-select"><a href="#" class="btn elite-submit-btn">Activate</a><span class="btn current"><i class="ion-checkmark"> </i>Current Plan</span></div>
                                        </div>
                                    </div>
                                    <ul class="plan-features">
                                        <li><i class="ion-checkmark"> </i>Unlimited active Shopify configured data events</li>
                                        <li><i class="ion-checkmark"> </i>20K tasks per month e-g either 20K orders or customers synchronization</li>
                                        <li><i class="ion-checkmark"> </i>30 Days Logs Retention</li>
                                        <li><i class="ion-checkmark"> </i>Synchronize existing data in bulk (Two-way)</li>
                                    </ul>
                                    <input id="elite-submit-btn" style="display: none;" type="submit" name="plan_type" value="elite"/>
                                </div>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('last_scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on('click', '.basic-submit-btn', function () {
                swal({
                    title: "Are you sure to want choose this plan?",
                    text: "This plan allows you to enable up to 2 data events and includes a limited number of jobs per month to help you get started. Upgrade anytime to unlock additional features and capacity.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                    closeModal: true,
                    buttons: true
                }).then((value) => {
                    if (value) {
                        $('#basic-submit-btn').click();

                    }
                });
            });
            $(document).on('click', '.professional-submit-btn', function () {

                swal({
                    title: "Are you sure to want choose this plan?",
                    text: "If you're dowgrading from Elite Plan,then you might need to disable or delete exceeding registered webhooks to perform this operation.Please visit Guides & FAQs for more information.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                    closeModal: true,
                    buttons: true
                }).then((value) => {
                    if (value) {
                        $('#professional-submit-btn').click();
                        show_loading_img();
                    }
                });
            });
            $(document).on('click', '.elite-submit-btn', function () {
                $('#elite-submit-btn').click();
                show_loading_img();
            });
        });
    </script>

@endsection