@extends('theme::user.layouts.app') @section('content')

<div class="bk-checkout-page">
    <div class="card-wrapper">
        <div class="card-title-wrapper d-flex justify-content-end align-items-center">
    <div>
        <svg width="100" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"> 
            <circle cx="13" cy="13" r="12" fill="#F3CF5D" stroke="#F3CF5D" stroke-width="1.5"/>
            <circle cx="13" cy="13" r="7" fill="white"/>
            <circle cx="87" cy="13" r="12" fill="#F4F7FA" stroke="#F4F7FA" stroke-width="1.5"/>
            <path d="M35 13H64" stroke="#F4F7FA" stroke-width="2" stroke-linecap="round"/>
        </svg>
    </div>
</div>


        <div class="card-body mx-auto">
            <form action="#" class="theme-form">
                <p class="card-body-title">Company Secretary subscription packages</p>

                <div class="bk-packages-page" style="width: 100%; margin: 0 auto;">
                    <div class="row package-list">
                        <div class="col-md-12 flex justify-center">
                            <div class="package-box" style="width: 70%;">
                                <div class="package-box-header">
                                    <h3 class="header-title">Company Secretary service</h3>
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="subscriptionType" />
                                        <span class="slider"></span>
                                        <span class="labels" data-on="Monthly" data-off="Annually"></span>
                                    </label>

                                    <div class="package-box-price" style="width: 40%; margin-left: 30%;">
                                        <div class="package-box-price-inner" data-price-type="annually">HK<span class="bigger-text">$4,600</span></div>
                                        <div class="package-box-price-inner" data-price-type="monthly" style="display: none;">HK<span class="bigger-text">$422</span></div>
                                    </div>
                                </div>

                                <div class="package-box-body" style="text-align: center; align-self: center;">
                                    <span class="package-box-body-title">Service include</span>
                                    <ul class="package-box-body-list">
                                        <li>Corporate Secretary essentials</li>
                                        <li>Personal support by your Corporate Secretary via chat</li>
                                        <li>Annual General Meeting papers</li>
                                        <li>Annual Returns Filing</li>
                                        <li>Forever free documents e‑storage</li>
                                        <li>Automated and timely reminders on filing deadlines</li>
                                        <li>Online shares distribution management & capital table</li>
                                    </ul>
                                    <span class="package-box-body-title">Government & Tax Filings</span>
                                    <ul class="package-box-body-list">
                                        <li>Unaudited Financial Statements</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center">
                    <a href="{{ route('wave.user.payment-flow.index') }}" class="btn gray-btn py-20">Previous</a>
                    <div class="d-flex justify-content-center align-items-center">
                        <a href="{{ route('wave.user.payment-flow.index') }}" class="btn blue-btn py-20 mr-5">Save and Leave</a>
                        <a href="{{ route('wave.user.payment-flow.cart-summary') }}" class="btn blue-btn py-20">Checkout</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection


@section('script')
    <script>
        $(function() {
			setPrice();

            $('#subscriptionType').click(function() {
				setPrice();
            });

			function setPrice() {
				$('.package-list .package-box-price-inner').hide();
				
				if ($('#subscriptionType').is(':checked')) {
					$('.package-list .package-box-price-inner[data-price-type="monthly"]').show();
				}
				else {
					$('.package-list .package-box-price-inner[data-price-type="annually"]').show();
				}
			}
        });
    </script>
@endsection