<?php
if (! class_exists('AI_App_Onsite_App_Preview')) {
	class AI_App_Onsite_App_Preview
	{

		public static function render_app_preview_content()
		{
			ob_start(); ?>

            <!-- Render your app preview content here -->
            <div class="app-preview-content">
                <div class="form-wrapper">
                    <div class="#">
                        <div class="d-flex align-items-baseline justify-content-between mb-2">
                            <label class="font-bold fs-medium-14 mb-0 app-preview-content__heading">Add App To Website</label>
                            <p class="font-regular mb-0 app-preview-content__description">Use the Shortcode or Name Block to add your app to a page. Adjust style settings or test your app prompt below.</p>
                        </div>
                    </div>
                    <div>
                        <div class="row" id="shortcode-box">
                            <div class="col-lg-6">
                                <label for="app-selector" class="d-block fs-medium-14 mb-only-4 text-muted">Shortcode</label>
                                <div class="select-box-icon">
                                    <span class="field-icon">
                                        <div class="assets-shortcode-icon"></div>
                                    </span>
                                    <div class="select-box-icon">
                                       <span class="field-icon">
                                        <div class="assets-shortcode-icon"></div>
                                        </span>
                                        <input type="text" id="ai-app-onsite-openAi-app-shortcode" class="ai-app-onsite-openAi-app-shortcode" data-target="#ai-app-onsite-openAi-app-shortcode" readonly>
                                        <span class="field-copy-icon" onclick="ai_app_onsite_openAi_app_shortcode()">
                                            <div class="assets-copy-icon"></div>
                                        </span>
                                    </div>
                                </div>
                                <p class="neutral-black-fs-60 fs-regular-12 mb-0">Copy to add in Wordpress Classic Editor</p>
                            </div>
                            <div class="col-lg-6">
                                <label for="app-selector" class="d-block fs-medium-14 mb-only-4 text-muted">Name Block</label>
                                <div class="select-box-icon">
                                    <span class="field-icon">
                                        <div class="assets-shortcode-icon"></div>
                                    </span>
                                    <input type="text" id="openAi-app-gutenberg-block" class="openAi-app-gutenberg-block" data-target="#openAi-app-gutenberg-block" readonly>
                                    <span class="field-copy-icon" onclick="ai_app_onsite_openAi_app_gutenberg_block()">
                                        <div class="assets-copy-icon"></div>
                                    </span>
                                </div>
                                <p class="neutral-black-fs-60 fs-regular-12 mb-0">Name block to add in Gutenberg</p>
                            </div>
                        </div>
                        <div class="divider-light"></div>
                        <div class="row" id="system-settings-container">
                            <p class="fs-6 font-semibold">Style Settings</p>
                            <form class="form-wrapper" method="POST" id="app_preview_settings_form" enctype="multipart/form-data">
								<?php wp_nonce_field('ai_app_onsite_app_properties_nonce', 'ai_app_onsite_app_properties_nonce_field'); ?>
                                <!-- Colors Selector -->
                                <div class="color-box-content">
                                    <div class="flex-row" style="width:100%">
                                        <div class="custom-col-lg-4">
                                            <label class="label-text">
                                                <span class="label-icon">
                                                    <div class="assets-text-color-icon"></div>
                                                </span>Title Color
                                            </label>
                                            <div class="color-box">
                                                <div class="input-group-color">
                                                    <label class="color-container title-color green-check">
                                                        <input type="radio" name="title-color" value="#5c5c5c" checked="checked">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container title-color purple-check">
                                                        <input type="radio" name="title-color" value="#8d949a">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container title-color yellow-check">
                                                        <input type="radio" name="title-color" value="#3b7dbb">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="btn-add-color color-container select-color ai-app-color-trigger" data-color-field="title-color" data-color-label="Title Color" data-allow-gradient="0" role="button" tabindex="0" aria-label="Add custom title color">
                                                        <div class="assets-add-color-icon"></div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="custom-col-lg-4">
                                            <label class="label-text">
                                                <span class="label-icon">
                                                    <div class="assets-font-color-icon"></div>
                                                </span>Font Color
                                            </label>
                                            <div class="color-box">
                                                <div class="input-group-color">
                                                    <label class="color-container font-color white-check">
                                                        <input type="radio"  name="font-color" value="#8d949a" checked="checked">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container font-color red-check">
                                                        <input type="radio" name="font-color" value="#000000">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container font-color cyan-check">
                                                        <input type="radio" name="font-color" value="#053f3e">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="btn-add-color color-container select-color ai-app-color-trigger" data-color-field="font-color" data-color-label="Font Color" data-allow-gradient="0" role="button" tabindex="0" aria-label="Add custom font color">
                                                        <div class="assets-add-color-icon"></div>
                                                        <p id="color-test"></p>
                                                    </label>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="custom-col-lg-4">
                                            <label class="label-text">
                                                <span class="label-icon">
                                                    <div class="assets-bg-color-icon"></div>
                                                </span>Background Color
                                            </label>
                                            <div class="color-box last-box">
                                                <div class="input-group-color">
                                                    <label class="color-container bg-color grey-check">
                                                        <input type="radio" name="bg-color" value="#f4f4f4" checked="checked">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container bg-color light-green-check">
                                                        <input type="radio" name="bg-color" value="#e4fcff">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container bg-color lighter-green-check">
                                                        <input type="radio" name="bg-color" value="#effdf9">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="btn-add-color color-container select-color ai-app-color-trigger" data-color-field="bg-color" data-color-label="Background Color" data-allow-gradient="1" role="button" tabindex="0" aria-label="Add custom background color">
                                                        <div class="assets-add-color-icon"></div>
                                                        <p id="color-test"></p>
                                                    </label>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-row" style="width:100%">
                                        <div class="custom-col-lg-4">
                                            <label class="label-text">
                                                <span class="label-icon">
                                                    <div class="assets-text-color-icon"></div>
                                                </span>Button Bg Color
                                            </label>
                                            <div class="color-box">
                                                <div class="input-group-color">
                                                    <label class="color-container btn-color green-check">
                                                        <input type="radio" name="btn-color" value="#5c5c5c" checked="checked">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container btn-color purple-check">
                                                        <input type="radio" name="btn-color" value="#8d949a">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container btn-color yellow-check">
                                                        <input type="radio" name="btn-color" value="#3b7dbb">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="btn-add-color color-container select-color ai-app-color-trigger" data-color-field="btn-color" data-color-label="Button Background Color" data-allow-gradient="1" role="button" tabindex="0" aria-label="Add custom button background color">
                                                        <div class="assets-add-color-icon"></div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="custom-col-lg-4">
                                            <label class="label-text">
                                                <span class="label-icon">
                                                    <div class="assets-font-color-icon"></div>
                                                </span>Button Font Color
                                            </label>
                                            <div class="color-box">
                                                <div class="input-group-color">
                                                    <label class="color-container btn-font-color white-check">
                                                        <input type="radio"  name="btn-font-color" value="#8d949a" checked="checked">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container btn-font-color red-check">
                                                        <input type="radio" name="btn-font-color" value="#000000">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container btn-font-color cyan-check">
                                                        <input type="radio" name="btn-font-color" value="#053f3e">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="btn-add-color color-container select-color ai-app-color-trigger" data-color-field="btn-font-color" data-color-label="Button Font Color" data-allow-gradient="0" role="button" tabindex="0" aria-label="Add custom button font color">
                                                        <div class="assets-add-color-icon"></div>
                                                        <p id="color-test"></p>
                                                    </label>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="custom-col-lg-4">
                                            <label class="label-text">
                                                <span class="label-icon">
                                                    <div class="assets-bg-color-icon"></div>
                                                </span>Response Bg Color
                                            </label>
                                            <div class="color-box last-box">
                                                <div class="input-group-color">
                                                    <label class="color-container response-bg-color grey-check">
                                                        <input type="radio" name="response-bg-color" value="#f4f4f4" checked="checked">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container response-bg-color light-green-check">
                                                        <input type="radio" name="response-bg-color" value="#e4fcff">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="color-container response-bg-color lighter-green-check">
                                                        <input type="radio" name="response-bg-color" value="#effdf9">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="btn-add-color color-container select-color ai-app-color-trigger" data-color-field="response-bg-color" data-color-label="Response Background Color" data-allow-gradient="1" role="button" tabindex="0" aria-label="Add custom response background color">
                                                        <div class="assets-add-color-icon"></div>
                                                        <p id="color-test"></p>
                                                    </label>
                                                </div>

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

                                <div id="ai-app-color-popup" class="ai-app-color-popup ai-app-hidden" aria-hidden="true">
                                    <div class="ai-app-color-popup__header">
                                        <div class="ai-app-color-popup__header-main">
                                            <button type="button" class="ai-app-color-popup__mode" id="ai-app-color-mode-button" aria-expanded="false">
                                                <span id="ai-app-color-mode-label">Solid</span>
                                                <span class="ai-app-color-popup__mode-caret"></span>
                                            </button>
                                            <span class="ai-app-color-popup__gradient-hint ai-app-hidden" id="ai-app-color-gradient-hint">↓Click to add gradient colors</span>
                                        </div>
                                        <button type="button" class="ai-app-color-popup__close" aria-label="Close color picker">&times;</button>
                                    </div>
                                    <div class="ai-app-color-popup__mode-menu ai-app-hidden" id="ai-app-color-mode-menu">
                                        <button type="button" class="ai-app-color-popup__mode-option" data-mode="solid">Solid</button>
                                        <button type="button" class="ai-app-color-popup__mode-option" data-mode="linear">Linear</button>
                                        <button type="button" class="ai-app-color-popup__mode-option" data-mode="radial">Radial</button>
                                    </div>
                                    <div class="ai-app-color-popup__gradient-bar ai-app-hidden" id="ai-app-color-gradient-bar">
                                        <div class="ai-app-color-popup__gradient-track" id="ai-app-color-gradient-track"></div>
                                        <div class="ai-app-color-popup__gradient-stops" id="ai-app-color-gradient-stops"></div>
                                    </div>
                                    <div class="ai-app-color-popup__panel" id="ai-app-color-panel">
                                        <div class="ai-app-color-popup__panel-white"></div>
                                        <div class="ai-app-color-popup__panel-black"></div>
                                        <div class="ai-app-color-popup__panel-thumb" id="ai-app-color-panel-thumb"></div>
                                    </div>
                                    <div class="ai-app-color-popup__slider ai-app-color-popup__hue" id="ai-app-color-hue">
                                        <div class="ai-app-color-popup__slider-thumb" id="ai-app-color-hue-thumb"></div>
                                    </div>
                                    <div class="ai-app-color-popup__slider ai-app-color-popup__alpha" id="ai-app-color-alpha">
                                        <div class="ai-app-color-popup__slider-track" id="ai-app-color-alpha-track"></div>
                                        <div class="ai-app-color-popup__slider-thumb" id="ai-app-color-alpha-thumb"></div>
                                    </div>
                                    <div class="ai-app-color-popup__angle ai-app-hidden" id="ai-app-color-angle">
                                        <span class="ai-app-color-popup__angle-label">Angle</span>
                                        <div class="ai-app-color-popup__angle-dial" id="ai-app-color-angle-dial">
                                            <span class="ai-app-color-popup__angle-indicator"></span>
                                        </div>
                                        <input type="number" id="ai-app-color-angle-input" min="0" max="360" value="90">
                                        <button type="button" class="ai-app-color-popup__angle-rotate" id="ai-app-color-angle-rotate" aria-label="Rotate angle">
                                            <span class="ai-app-color-popup__angle-rotate-icon"></span>
                                        </button>
                                        <button type="button" class="ai-app-color-popup__trash ai-app-hidden" id="ai-app-color-angle-trash-button" aria-label="Remove selected gradient stop" data-tooltip="Remove the selected colors from gradient">
                                            <i class="fa-solid fa-trash-can" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="ai-app-color-popup__footer">
                                        <input type="text" id="ai-app-color-hex-input" value="#0B37FF">
                                        <input type="text" id="ai-app-color-opacity-input" value="100%">
                                        <button type="button" class="ai-app-color-popup__format" id="ai-app-color-format-button" aria-expanded="false" disabled aria-disabled="true">
                                            HEX <span class="ai-app-color-popup__mode-caret"></span>
                                        </button>
                                        <button type="button" class="ai-app-color-popup__trash ai-app-hidden" id="ai-app-color-footer-trash-button" aria-label="Remove selected gradient stop" data-tooltip="Remove the selected colors from gradient">
                                            <i class="fa-solid fa-trash-can" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                    <div class="ai-app-color-popup__actions">
                                        <button type="button" class="ai-app-color-popup__action ai-app-color-popup__action--secondary" id="ai-app-color-reset-button">Reset</button>
                                        <button type="button" class="ai-app-color-popup__action ai-app-color-popup__action--primary" id="ai-app-color-apply-button">Apply</button>
                                    </div>
                                </div>

                                <!-- Shape & Border Selector -->
                                <div class="row">
                                    <div class="col-lg-6">
                                        <label for="app-corner" class="d-block fs-medium-14 mb-only-4 text-muted">App Corner</label>
                                        <div class="select-box mb-20">
                                            <select id="app-corner" name="app-corner" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8">
                                                <option value="">Select App Corner</option>
                                                <option value="sharp-corner">Sharp Corner</option>
                                                <option value="soft-corner" selected="selected">Soft Corner</option>
                                                <option value="round-corner">Round Corner</option>
                                            </select>
                                            <p id="model-error" class="fields-error"></p>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label for="app-height" class="d-block fs-medium-14 mb-only-4 text-muted">Drop-Shadow </label>
                                        <div class="select-box mb-20">
                                            <select id="app-height" name="app-height" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8">
                                                <option value="">Select Drop-Shadow</option>
                                                <option value="no-height">No Lift/Shadow</option>
                                                <option value="slight-lift" selected="selected">Slight Lift/Shadow</option>
                                                <option value="more-lift">More Lift/Shadow</option>
                                            </select>
                                            <p id="model-error" class="fields-error"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <label for="app-width-figure" class="d-block fs-medium-14 mb-only-4 text-muted">App Width (% of page)</label>
                                        <div class="select-box mb-20">
                                            <select id="app-width-figure" name="app-width-figure" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8">
                                                <option value="30">30%</option>
                                                <option value="50">50%</option>
                                                <option value="60">60%</option>
                                                <option value="70" selected>70%</option>
                                                <option value="80">80%</option>
                                                <option value="90">90%</option>
                                                <option value="100">100%</option>
                                            </select>
                                            <p id="model-error" class="fields-error"></p>
                                        </div>
                                    </div>
                                    <div class="col-lg-6"></div>
                                </div>
                                <div class="text-end mb-3" id="preview-action-container">
                                    <button type="button" id="preview_ai_app_app_properties_data" role="button" class="btn fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-white" name="preview-plugin-settings" onclick="ai_app_onsite_create_app_preview_form(true)">Preview</button>
                                    <button type="button" id="save_ai_app_app_properties_data" class="btn btn-purple fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-purple-100 text-white" id="ai_app_onsite_update_style_properties_only" onclick="ai_app_onsite_update_style_properties_only()">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="app-properties-msg-container-preview" class="message-container mb-3"></div>
                    <div id="form-container" class="ai_app_onsite_openAi_app_form"></div>
                    
                    <!-- Response Background Color Preview -->
                    <label for="response-bg-preview" class="d-block font-bold fs-medium-14 mb-only-4 mt-2 text-muted">Response Preview</label>
                    <div id="response-bg-preview" class="response-bg-preview-container">
                        <div id="ai-app-motivational-heading" style="margin-bottom: 10px;">
                            <h6>Response Header</h6>
						</div>
                    </div>
                    
                    <div class="form-group mt-2" id="test-app-container">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="d-block font-bold fs-medium-14 mb-only-4 mt-2 text-muted">Test Response</label>
                            <button type="button" class="#" name="ai-app-onsite-test" id="ai-app-onsite-test" onclick="ai_app_onsite_test_from()">
                                <span>Click To Test App</span>
                            </button>
                        </div>
                        <div class="select-box-icon select-box-icon-textarea mb-30">
                            <span class="field-icon">
                                <div class="assets-response-icon"></div>
                            </span>
                            <div class="border text-write w-100 fs-regular-14 neutral-black-fs-100 radius-6 " placeholder="Result" id="ai-app-onsite-test-response"></div>
                        </div>
                    </div>
                    <div id="message-container"></div>
                </div>
            </div>

			<?php
			return ob_get_clean();
		}
	}
}
