<?php
/**
 * Business Interface Customizer upsell control class.
 *
 * @package     Business Interface
 * @since       1.0.0
 */

if (!defined('ABSPATH')) {
    exit;
}

if (!class_exists('Business_Interface_Customizer_Control_Upsell')):
    /**
     * Business Interface Customizer upsell control class.
     */
    class Business_Interface_Customizer_Control_Upsell extends Business_Interface_Customizer_Control
    {

        public $type = 'business-interface-upsell';

        public $url = '';

        public $button_text = 'Learn More';

        public function enqueue()
        {
            $business_interface_suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
            $business_interface_type = str_replace('business-interface-', '', $this->type);

            wp_enqueue_style(
                'business-interface-' . $business_interface_type . '-control-style',
                BUSINESS_INTERFACE_URI . '/inc/customizer/controls/' . $business_interface_type . '/' . $business_interface_type . $business_interface_suffix . '.css',
                false,
                BUSINESS_INTERFACE_VERSION,
                'all'
            );
        }

        public function to_json()
        {
            parent::to_json();

            $this->json['url'] = esc_url($this->url);
            $this->json['button_text'] = esc_html($this->button_text);
        }

        protected function content_template()
        {
            ?>
            <div class="business-interface-upsell-wrapper"
                style="padding: 15px; background: #e0f6ff; border-left: 4px solid #00a0d2; margin-top: 10px; margin-bottom: 15px;">
                <# if ( data.label ) { #>
                    <span class="customize-control-title"
                        style="font-size: 14px; font-weight: 600; color: #000; margin-bottom: 5px; display: block;">
                        {{{ data.label }}}
                    </span>
                    <# } #>

                        <# if ( data.description ) { #>
                            <div class="customize-control-description" style="color: #444; margin-bottom: 15px;">
                                {{{ data.description }}}
                            </div>
                            <# } #>

                                <# if ( data.url && data.button_text ) { #>
                                    <a href="{{ data.url }}" class="button button-primary" target="_blank" rel="noopener noreferrer"
                                        style="width: 100%; text-align: center;">
                                        {{ data.button_text }}
                                    </a>
                                    <# } #>
            </div>
            <?php
        }
    }
endif;
