@extends('layouts.horizontalLayout')

@section('title', 'Plan')

@section('content')
    <div class="container-xxxl container-fluid">
        <div class="card mt-4">
            <!-- Pricing Plans -->
            <div class="pb-4 rounded-top">
                <div class="container py-6">
                    <div class="row col-md-12">
                        <div class="col-md-3">&nbsp;</div>
                        <div class="col-md-6">
                            <h3 class="text-center">Pricing Plans</h3>
                            <p class="text-center mb-4">✨ Import. Sync. Fulfill. <br />Choose the subscription plan that
                                fits your
                                business and start growing today!
                            </p>
                            <div class="row mx-4 px-sm-12">
                                @if(!empty($allPlans) && count($allPlans) > 0)
                                    @foreach($allPlans as $key => $plan)
                                        <div class="col-xl mb-md-0">
                                            <div class="card border rounded shadow-none">
                                                <div class="card-body pt-12 px-4">
                                                    <h4 class="card-title text-center text-capitalize mb-1">{{$plan->name}}</h4>
                                                                                                        <div class="text-center h-px-50">
                                                        <div class="d-flex align-items-center justify-content-center mb-4">
                                                            <h2 class="text-heading mb-0">${{ $plan->price }}</h2>
                                                            <sub
                                                                class="h6 text-body mb-n3">/{{strtolower($plan->plan_type) == 'monthly' ? 'month' : 'year'}}</sub>
                                                        </div>
                                                    </div>

                                                    <button
                                                        class="btn btn-primary d-grid w-100 waves-effect waves-light purchase-plan-btn"
                                                        data-plan-id="{{ $plan->id }}">Subscribe</button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                </div>
                <!--/ Pricing Plans -->
            </div>
        </div>
@endsection
    @section('page-script')
        <script>
            document.addEventListener('DOMContentLoaded', function () {

                window.manageBillingConfirmation = function manageBillingConfirmation(subscribeBtn, selectedUrl) {
                    return new Promise((resolve, reject) => {
                        try {
                            window.billingConfirmationTab = window.open(selectedUrl, 'billingConfirmation');
                            const billingConfirmationInterval = window.setInterval(() => {
                                try {
                                    console.log(window.billingConfirmationTab);
                                    // if (window.billingConfirmationTab.closed) {
                                    //     subscribeBtn.prop('disabled', false).html('SubscribeXXX');
                                    //     window.clearInterval(billingConfirmationInterval);
                                    //     resolve(true);
                                    // }
                                } catch (e) {
                                    // window.clearInterval(billingConfirmationInterval);
                                    // subscribeBtn.prop('disabled', false).html('Subscribe');
                                    // reject(e);
                                }
                            }, 100);
                        } catch (e) {
                            // subscribeBtn.prop('disabled', false).html('Subscribe');
                            // reject(e);
                        }
                    });
                }

                document.querySelectorAll('.purchase-plan-btn').forEach(function (btn) {
                    const dashboardUrl = '{{ route('shopify.dashboard',['shop' => $s]) }}';
                    btn.addEventListener('click', function (e) {
                        e.preventDefault();
                        subscribeBtn = $(this);

                        subscribeBtn.removeClass('d-grid').prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Awaiting Payment...');

                        let planId = this.getAttribute('data-plan-id');
                        fetch("{{ route('shopify.create_subscription') }}", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                            },
                            body: JSON.stringify({
                                shop: '{{ $sd }}',
                                planId: planId,
                                _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                            })
                        })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success && data.confirmationUrl) {
                                    changeCurrentURL(data.confirmationUrl);
                                } else if (!data.success) {
                                    window.notyf.error(data.message || 'Could not create subscription');
                                } else {
                                    window.notyf.error('No confirmation URL returned');
                                }

                                subscribeBtn.prop('disabled', false).html('Subscribe').addClass('d-grid');

                                return false;
                            });
                    });
                });
            });
        </script>
    @endsection