<?php
/**
 * Load admin view for Licensing Tab.
 *
 * @package miniorange-sms-order-notification-otp-verification/views
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

use WCSMSOTP\Helper\MoConstants;
use WCSMSOTP\Helper\MoUtility;

$mowc_circle_icon  = '
    <svg class="min-w-[8px] min-h-[8px]" width="8" height="8" viewBox="0 0 18 18" fill="none">
            <circle id="a89fc99c6ce659f06983e2283c1865f1" cx="9" cy="9" r="7" stroke="rgb(99 102 241)" stroke-width="4"></circle>
        </svg>
    ';
$mowc_country_list = MOWC_SMS_PRICING;

echo '
    <div class="w-full">
		<div class="mowc-header h-full">
			<p class="mowc-heading flex-1">' . esc_html( mowc_( 'Plans & Pricing' ) ) . '</p>
		</div>

        <div class="mowc-section">
            <div class="grid grid-cols-pricingPlans duration-150">
                <div class="mowc-section border-r flex flex-col" >
                    
                    <div class="flex items-center gap-mowc-2">
                        <h5 class="mowc-display small">' . esc_html( mowc_( 'Free Plan' ) ) . '</h5>
                    </div>
                    <div class="h-mowc-14 my-mowc-3 flex items-center">
                        <h2 class="mowc-display small"></h2>
                    </div>
                   
                
                        <ul id="mowc-gateway-features" class="mowc-features">
                            <div class="h-mowc-14 mowc-alert mowc-success">
                                <p>' . esc_html( mowc_( '10 Free Emails & SMS*' ) ) . '</p>
                            </div>';

foreach ( $mowc_free_plan_features as $mowc_features ) {
					echo '   <li class="feature-snippet">
                        ' . wp_kses( $mowc_circle_icon, MoUtility::mowc_allow_svg_array() ) . '
                                <p class="m-mowc-0">' . wp_kses( $mowc_features, MoUtility::mowc_allow_html_array() ) . '</p>
                            </li>';
}

echo '                   </ul>
                </div>

                <div class="mowc-section border-r flex flex-col" >
                    <div>
                        <h5 class="mowc-display small">' . esc_html( mowc_( 'Starter Plan' ) ) . '</h5>
                    </div>
                    <div class="h-mowc-14 my-mowc-3 flex items-center">
                        <b><h3 class="" style="font-size:1rem" >' . esc_html( mowc_( 'Transaction Based Pricing' ) ) . '</h3></b>
                    </div>

                        <ul id="mowc-gateway-features" class="mowc-features">
                            <li class="feature-snippet">
                                <p class="border rounded-smooth p-mowc-2 bg-slate-50 text-xs">
                                <span><b>' . esc_html( mowc_( 'Note:' ) ) . '</b> ' . esc_html( mowc_( 'Need to purchase the SMS/Email transactions from miniOrange.' ) ) . '</span></p>
                            </li>';

foreach ( $mowc_starter_plan_features as $mowc_features ) {
					echo '   <li class="feature-snippet">
                        ' . wp_kses( $mowc_circle_icon, MoUtility::mowc_allow_svg_array() ) . '
                                <p class="m-mowc-0">' . wp_kses( $mowc_features, MoUtility::mowc_allow_html_array() ) . '</p>
                            </li>';
}

echo '                       <li class="feature-snippet" style="display: table;margin: 0 auto;width: 100%;">
									<form action="" method="post" id="mo_sms_pricing" >';
									wp_nonce_field( 'mosmsnonce', 'mo_sms_pricing_nonce' );
echo '									<select name="languages" style="margin-bottom:0.5rem;width:100%;" id="mochoosecountry">
											<option>' . esc_html( mowc_( 'Select your target country' ) ) . '</option>';
foreach ( $mowc_country_list  as $mowc_key => $mowc_value ) {
	echo '									<option value="' . esc_attr( $mowc_key ) . '">' . esc_html( $mowc_key ) . '</option>';
}
echo '									</select>
										<select name="transactions" id="mosmspricing" style="width:100%;">
											<option id="moloading">' . esc_html( mowc_( 'Check SMS Transaction Pricing' ) ) . '</option>
											<option id="moloading">' . esc_html( mowc_( 'Select the target country to check pricing' ) ) . '</option>
										</select>
                                        <select class="mt-mowc-2 w-full" name="email_transactions" id="moemailpricing" >
											<option>' . esc_html( mowc_( 'Check Email Transaction Pricing' ) ) . '</option>
											<option >100 transactions- $2</option>
                                            <option >500 transactions- $5</option>
                                            <option >1000 transactions- $7</option>
                                            <option >5000 transactions- $20</option>
                                            <option >10000 transactions- $30</option>
                                            <option >50000 transactions- $45</option>
										</select>
									</form>
								</li>
                        
                        <span class="flex-1"></span>
                        <button id="see-pricing-btn" class="mt-mowc-4 w-full mowc-button primary" onclick="mowc_upgradeform(\'wp_otp_verification_basic_plan\')">' . esc_html( mowc_( 'Select' ) ) . '</button>                         
                    </ul>
                    
                </div>

                <div class="mowc-section border-r flex flex-col" >
                    <div>
                       <div class="flex items-center gap-mowc-2">
                           <h5 class="mowc-display small">' . esc_html( mowc_( 'Standard Plan' ) ) . '</h5>
                        </div>
                        <div class="h-mowc-14 my-mowc-3 flex items-center">
                            <h2 class="mowc-display small">' . esc_html( mowc_( '$49' ) ) . ' (<del>' . esc_html( mowc_( '$79' ) ) . '</del>)</h2><span style="font-size:1rem; margin-top:2%"><i>/' . esc_html( mowc_( 'Year' ) ) . '</i></span>
                        </div>
                    </div>
                
                    <ul id="mowc-gateway-features" class="mowc-features">
                
                    <li class="feature-snippet">
                        <p class="border rounded-smooth p-mowc-2 bg-slate-50 text-xs">
                        <span><b>' . esc_html( mowc_( 'Note:' ) ) . '</b> ' . esc_html( mowc_( 'Purchase the SMS/Email transactions from your Gateway/miniOrange Gateway.' ) ) . ' </span></p>
                    </li>';

foreach ( $mowc_standard_plan_features as $mowc_features ) {
				echo '<li class="feature-snippet">
                    ' . wp_kses( $mowc_circle_icon, MoUtility::mowc_allow_svg_array() ) . '
                            <p class="m-mowc-0">' . wp_kses( $mowc_features, MoUtility::mowc_allow_html_array() ) . '</p>
                     </li>';
}

echo '               <span class="flex-1"></span>  
                        <button id="see-pricing-btn" class="mt-mowc-4 w-full mowc-button primary" onclick="mowc_upgradeform(\'wp_notification_intranet_standard_plan\')">' . esc_html( mowc_( 'Select' ) ) . '</button>                         
                </ul>
                </div>


                <div class="mowc-section flex flex-col" >
                    <div>
                       <div class="flex items-center gap-mowc-2">
                           <h5 class="mowc-display small">' . esc_html( mowc_( 'Enterprise Plan' ) ) . '</h5>
                        </div>
                        <div class="h-mowc-14 my-mowc-3 flex items-center">
                            <h2 class="mowc-display small">' . esc_html( mowc_( '$99' ) ) . ' (<del>' . esc_html( mowc_( '$149' ) ) . '</del>)</h2><span style="font-size:1rem; margin-top:2%"><i>/' . esc_html( mowc_( 'Year' ) ) . '</i></span>
                        </div>
                    </div>
            
                <ul id="mowc-gateway-features" class="mowc-features">
                    <li class="feature-snippet">
                        <p class="border rounded-smooth p-mowc-2 bg-slate-50 text-xs">
                        <span><b>' . esc_html( mowc_( 'Note:' ) ) . '</b> ' . esc_html( mowc_( 'Purchase the SMS/Email transactions from your Gateway/ miniOrange Gateway.' ) ) . ' </span></p>
                    </li>';

foreach ( $mowc_enterprise_plan_features as $mowc_features ) {
			echo '  <li class="feature-snippet">
                ' . wp_kses( $mowc_circle_icon, MoUtility::mowc_allow_svg_array() ) . '
                        <p class="m-mowc-0">' . wp_kses( $mowc_features, MoUtility::mowc_allow_html_array() ) . '</p>
                    </li>';
}

echo '               <span class="flex-1"></span>  
                    <a class="mt-mowc-4 w-full mowc-button primary" onclick="mowc_upgradeform(\'wp_notification_intranet_enterprise_plan\')">' . esc_html( mowc_( 'Select' ) ) . '</a>                         
                </ul>
                </div>

            </div>
        
            <div class="mowc-alert w-max">
            <span>' . esc_html( mowc_( '*We support HTTP API based or SDK based gateways.' ) ) . ' <u><i><a href="' . esc_url( 'https://plugins.miniorange.com/supported-sms-email-gateways' ) . '" target="_blank" rel="noopener noreferrer">' . esc_html( mowc_( 'Click here to check all Supported Gateways.' ) ) . '</a></i></u></span>
            </div>
        </div>';

	echo '
         <div class="m-mowc-0 border dark:border-gray-700" id="otp_payment">
            <div id="otp_pay_method">
                <div class="mowc-header">
                    <p class="mowc-heading flex-1 mt-mowc-2">' . esc_html( mowc_( 'Supported Payment Methods' ) ) . '</p>              
                </div>
                <div class="mowc-pricing-container">
                    <div class="mo-card-pricing-deck">
                        <div class="mo-card-pricing mo-animation">
                            <div class="mo-card-pricing-header">
                                <img  src="' . esc_url( MOV_WC_CARD ) . '"  style="size: landscape;width: 100px; height: 27px; margin-bottom: 4px;margin-top: 4px;opacity: 1;padding-left: 8px;">
                            </div>
                            <hr style="border-top: 4px solid #fff;">
                            <div class="mo-card-pricing-body">
                                <p>' . esc_html( mowc_( 'If payment is made through Intenational Credit Card/Debit card, the license will be created automatically once payment is completed.' ) ) . '</p>
                                <p style="margin-top: 20%;"><i><b><a class="mo_links" href="' . esc_url( MoConstants::FAQ_PAY_URL ) . '" target="_blank" rel="noopener noreferrer">' . esc_html( mowc_( 'Click Here' ) ) . '</a> ' . esc_html( mowc_( 'to know more.' ) ) . '</b></i></p>
                            </div>
                        </div>
                        <div class="mo-card-pricing mo-animation">
                            <div class="mo-card-pricing-header">
                                <img  src="' . esc_url( MOV_WC_NETBANK ) . '"  style="size: landscape;width: 100px; height: 27px; margin-bottom: 4px;margin-top: 4px;opacity: 1;padding-left: 8px;">
                            </div>
                            <hr style="border-top: 4px solid #fff;">
                            <div class="mo-card-pricing-body">
                                <p>' . esc_html( mowc_( 'If you want to use net banking for payment then contact us at' ) ) . ' <i><b style="color:#1261d8">' . esc_html( MoConstants::SUPPORT_EMAIL ) . '</b></i> ' . esc_html( mowc_( 'so that we can provide you bank details.' ) ) . ' </i></p>
                                <p style="margin-top: 32%;"><i><b>' . esc_html( mowc_( 'Note:' ) ) . '</b> ' . esc_html( mowc_( 'There is an additional 18% GST applicable via Bank Transfer.' ) ) . '</i></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mo_otp_note px-mowc-8 my-mowc-3" style="margin-left:4rem; margin-right:4rem;">
                    <p><b>' . esc_html( mowc_( 'Note :' ) ) . '</b> ' . esc_html( mowc_( 'Once you have paid through Net Banking, please inform us so that we can confirm and update your License.' ) ) . '</p>
                    <p>' . wp_kses_post( sprintf( mowc_( 'For more information about payment methods visit <i><u><a href="%s" target="_blank" rel="noopener noreferrer">Supported Payment Methods.</a></u></i>' ), esc_url( MoConstants::FAQ_PAY_URL ) ) ) . '</p>
                </div>
            </div>
        </div>
            <div class="m-mo-4 border dark:border-gray-700" >
                 <div class="mowc-header">
                    <p class="mowc-heading flex-1 mt-mowc-2">' . esc_html( mowc_( 'Refund and Privacy Policy' ) ) . '</p>        
                </div>
                <div class="mo_otp_note px-mowc-4 my-mowc-3" style="margin-left:4rem; margin-right:4rem;">
                    <p>' . wp_kses_post( mowc_( '<b>Note :</b> Please read the <i><u><a class="font-semibold" href="https://plugins.miniorange.com/end-user-license-agreement" target="_blank" rel="noopener noreferrer">Refund Policy</a></u></i>  and <i><u><a class="font-semibold" href="https://plugins.miniorange.com/wp-content/uploads/2023/08/Plugins-Privacy-Policy.pdf" target="_blank" rel="noopener noreferrer">Plugin Privacy Policy</a></u></i> before upgrading to any plan.' ) ) . '</p>
                </div>
            </div>
    </div>
    <form style="display:none;" id="mocf_loginform" action="' . esc_url( $mowc_form_action ) . '" target="_blank" method="post">
        <input type="email" name="username" value="' . esc_attr( $mowc_email ) . '" />
        <input type="text" name="redirectUrl" value="' . esc_url( $mowc_redirect_url ) . '" />
        <input type="text" name="requestOrigin" id="requestOrigin"  />
    </form>
    <form style="display:none;" id="mowc_upgrade_form" action="' . esc_url( $mowc_portal_host ) . '" target="_blank" method="post">
        <input type="text" name="payment_referer" value="' . esc_url( admin_url() ) . 'admin.php?page=mowcpricing">
        <input type="text" name="requestOrigin" id="requestOriginUpgrade"  />
    </form>
    <script>
        const mowcSMSPricing = document.getElementById("mowc-sms-pricing");
        const mowcGatewayFeatures = document.getElementById("mowc-gateway-features");

        const seePricingBtn = document.getElementById("see-pricing-btn");
        const backtoFeaturesBtn = document.getElementById("backto-features-btn");

        mowcSMSPricing.style.display = "none";

        seePricingBtn.addEventListener("click",(e)=>{
            mowcGatewayFeatures.style.display = "none";
            mowcSMSPricing.style.display = "block";
        });

        backtoFeaturesBtn.addEventListener("click",(e)=>{
            mowcGatewayFeatures.style.display = "flex";
            mowcSMSPricing.style.display = "none";
        });

        function mowc_upgradeform(planType){
            jQuery("input[name=\'requestOrigin\']").val(planType);
            jQuery("#mowc_upgrade_form").submit();
        }

    </script>
';
