@extends(backpack_view('blank'))

@section('content')
<div class="row pt-4">
    <div class="col-md-12 bold-labels billing-container">
        <div class="card">
            <div class="card-body">
                <div class="text-center">
                    <div class="badge  Low badge-pill mb-2">
                        SIMPLE, TRANSPARENT PRICING</div>
                    </div>
                    <div class="text-center">
                        <h2>Choose the Chloe plan that's right for your pharmacy.</h2>
                    </div>
                    <div class="d-flex justify-content-center gap-4">
                        <div><i class="las la-tag me-1"></i>No setup fees.  No Hidden costs.</div>
                        <div><i class="las la-tag me-1"></i>Cancel anytime on monthly plans.</div>
                        <div><i class="las la-tag me-1"></i>Save two month when you pay annually</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="pricing-toggle text-center mb-4">

                            <div class="billing-switch">

                                <button class="billing-btn active"
                                        data-plan="monthly">
                                    Monthly
                                </button>

                                <button class="billing-btn"
                                        data-plan="annual">
                                    Annually
                                    <span class="save-badge">2 months free</span>
                                </button>

                            </div>

                        </div>
                        <div class="table-responsive shadow-sm rounded-4 overflow-hidden">
                            <table class="table align-middle text-center mb-0 pricing-table">

                                <thead>
                                    <tr>
                                        <th class="text-start"></th>

                                        @foreach($plans as $plan)
                                            @if ($plan->slug != "trial")
                                                <th class="text-{{ $plan->class_name }}">
                                                    {{ $plan->name }}
                                                    @if ( $plan->slug == "essentials")
                                                        <div>
                                                            <span class="badge bg-primary mt-1">MOST POPULAR</span>
                                                        </div>
                                                    @endif 
                                                </th>
                                            @endif
                                        @endforeach
                                        

                                        <th class="text-orange">
                                            Chloe Enterprise
                                        </th>
                                    </tr>
                                </thead>

                                <tbody>

                                    <tr>
                                        <td class="text-start fw-semibold">
                                            Included AI Minutes
                                        </td>
                                        @foreach($plans as $plan)
                                            @if ($plan->slug != "trial")
                                                <td class="text-{{ $plan->class_name }} ">
                                                    {{ number_format($plan->ai_minutes) }}
                                                </td>
                                            @endif
                                        @endforeach

                                        <td class="text-orange fw-bold">Custom</td>
                                    </tr>

                                    <tr>
                                        <td class="text-start fw-semibold">
                                            Included SMS Messages
                                        </td>

                                        @foreach($plans as $plan)
                                            @if ($plan->slug != "trial")
                                                <td class="text-{{ $plan->class_name }} fw-bold">
                                                    {{ number_format($plan->sms_messages) }}
                                                </td>
                                            @endif
                                        @endforeach
                                        <td class="text-orange fw-bold">Custom</td>
                                    </tr>

                                    <tr>
                                        <td class="text-start fw-semibold">Extra AI Minutes</td>
                                        @foreach($plans as $plan)
                                            @if ($plan->slug != "trial")
                                                <td class="text-{{ $plan->class_name }}">
                                                    ${{ $plan->additional_ai_minutes }} NZD/min
                                                </td>
                                            @endif
                                        @endforeach
                                        <td class="text-orange fw-bold">Custom</td>
                                    </tr>

                                    <tr>
                                        <td class="text-start fw-semibold">Extra SMS Messages</td>
                                        @foreach($plans as $plan)
                                            @if ($plan->slug != "trial")
                                                <td class="text-{{ $plan->class_name }}">
                                                    ${{ $plan->additional_sms_messages }} NZD/message
                                                </td>
                                            @endif
                                        @endforeach
                                        <td class="text-orange fw-bold">Custom</td>
                                    </tr>


                                    <tr>
                                        <td class="text-start fw-semibold">Price</td>

                                        @foreach($plans as $plan)
                                            @if ($plan->slug != "trial")
                                                <td class="text-{{ $plan->class_name }} fw-bold price" data-monthly="${{ $plan->monthly_price }}" data-annual="${{ $plan->yearly_price }}">
                                                    ${{ number_format($plan->monthly_price) }} NZD/mo
                                                </td>
                                            @endif
                                        @endforeach

                                        <td class="text-orange fw-bold">Custom Pricing</td>
                                    </tr>

                                    <tr>
                                        <td>&nbsp;</td>
                                        @foreach($plans as $plan)
                                            @if ($plan->slug != "trial")
                                                <td>
                                                    @if ($pharmacy->plan_id == $plan->id && $currentBillingCycle == "monthly")
                                                        <button class="btn text-{{ $plan->class_name }} choose-plan" data-plan="{{ $plan->id }}" disabled>
                                                            You are currently on {{ $plan->name }}
                                                        </button>
                                                    @else
                                                        <button class="btn text-{{ $plan->class_name }} choose-plan" data-plan="{{ $plan->id }}">
                                                        Choose {{ $plan->name }}
                                                    </button>
                                                    @endif

                                                </td>
                                            @endif
                                        @endforeach
                                        <td><a href="mailto:info@pharmasolve.co.nz"" class="btn text-orange">Contact Sales</butaton></td>
                                    </tr>

                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('after_scripts')
    <script>
        const buttons = document.querySelectorAll('.billing-btn');
        const prices = document.querySelectorAll('.price');
        const choosePlans = document.querySelectorAll('.choose-plan');

        let billingCycle = 'monthly';

        buttons.forEach(button => {

            button.addEventListener('click', () => {

                buttons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');

                billingCycle = button.dataset.plan;
                

                prices.forEach(price => {

                    if (billingCycle === 'monthly') {
                        price.textContent = price.dataset.monthly + " NZD/mo";
                    } else {
                        price.textContent = price.dataset.annual + " NZD/year";
                    }

                });
                @if ($currentBillingCycle)
                    choosePlans.forEach(choosePlan => {
                        choosePlanBtnPlan = choosePlan.dataset.plan;
                        console.log(choosePlanBtnPlan  + " " + billingCycle );

                        if (choosePlanBtnPlan == '{{ $currentPlan->id }}' && billingCycle == '{{ $currentBillingCycle }}') {
                            choosePlan.disabled = true;
                            choosePlan.innerHTML = 'You are currently on {{ $currentPlan->name }}';
                        }
                        else {
                            console.log("enable button");
                            choosePlan.disabled = false;
                            choosePlan.innerHTML = 'Choose {{ $currentPlan->name }}';
                        }
                        
                    })
                @endif

            });

        });

        document.querySelectorAll('.choose-plan').forEach(button => {
            button.addEventListener('click', () => {

                let form = document.createElement('form');

                form.method = 'POST';
                form.action = "{{ route('backpack.account.checkout') }}";


                form.innerHTML = `
                    @csrf
                    <input type="hidden" name="plan_id" value="${button.dataset.plan}">
                    <input type="hidden" name="billing" value="${billingCycle}">
                `;

                document.body.appendChild(form);
                form.submit();

            });

        });
    </script>

@endsection