<?php
if (!class_exists("AI_App_Onsite_Plugin_Settings")) {
  class AI_App_Onsite_Plugin_Settings
  {
    public static function render_plugin_settings()
    {
      $plugin_data = get_plugin_data(plugin_dir_path(__DIR__) . "/ai-app-onsite.php");
      $version = $plugin_data["Version"];
      ob_start();
?>
  <div class="app-plugin-settings">
  	<div class="form-wrapper">
  		<div class="col-12 col-md-12">
            <div class="row d-flex align-items-center mb-2">
				<div class="col-md-6">
					<label class="font-bold fs-medium-14 mb-0">Access Key</label>
				</div>
  				<div class="col-md-6">
				  	<div class="api-key-icon d-flex justify-content-end align-items-center">
					  	<span class="px-3" >
                            <div class="assets-api-key-icon"> </div>
                        </span>
				  		<p class="fs-7 cursor-pointer mb-0" data-bs-toggle="modal" data-bs-target="#license_key_info_modal">   
							 Key Management
						</p>
					</div>
				</div>
  			</div>	
			<div class="row d-flex align-items-center">
				<div class="col-md-12">
				<p class="fs-7 mb-0">Unlock powerful extra features with an AIappOnsite premium plan. <a href="https://aiapponsite.com/pricing" class="open-new-tab">Learn more</a> and get your access key now</p>
				</div>
  			</div>	
  			<div class="row d-flex justify-content-center mt-3">
  				<div class="col-12 col-md-4 align-items-center mb-3" id="license_status">
  					<div class="row d-flex">
  						<label for="licence_key" class="d-block fs-regular-10 mb-only-4">Verification Status</label>
  						<p class="font-bold mb-1" id="license_key_status"></p>
  					</div>
  				</div>
  				<div class="col-12 col-md-4 align-items-center mb-3" id="expiry_status">
  					<div class="row d-flex">
  						<label for="licence_key" class="d-block fs-regular-10 mb-only-4">Expiry Date</label>
  						<p class="font-bold mb-1" id="license_key_expiry_date"></p>
  					</div>
  				</div>
				<div class="col-12 col-md-4 align-items-center mb-3" id="key_status">
  					<div class="row d-flex">
  						<label for="licence_key" class="d-block fs-regular-10 mb-only-4">Key Status</label>
  						<p class="font-bold mb-1" id="license_key_disabled_status"></p>
  					</div>
  				</div>
  			</div>
  			<div class="divider-light mt-2 mb-2"></div>
  		</div>
  		<form enctype="multipart/form-data" id="app_settings_form"> 
			<?php wp_nonce_field("ai_app_onsite_plugin_settings_nonce","ai_app_onsite_plugin_settings_nonce_field"); ?> <div class="mb-20">
  				<div class="d-flex justify-content-between mt-2 mb-3 align-items-center">
  					<label class="font-bold fs-medium-14 mb-0">Get Started</label>
  					<p class="fs-7 neutral-black-fs-60 mb-0">Version: <?php echo $version; ?> </p>
  				</div>
  				<div class="terms-form-group form-group mb-0">
  					<input type="checkbox" id="terms_of_service-old" name="terms_of_service-old" onChange="ai_app_onsite_show_terms_of_service()">
  					<label for="terms_of_service-old" class="custom-checkbox no-cursor fs-medium-14">
  						<span class="ml-1">Agree to</span>
  					</label>
					<a class="fs-medium-14" href="#" onClick="ai_app_onsite_show_terms_of_service()">Terms of Service
					</a>
  				</div>
  				<p class="fs-regular-14 ml-25 mb-1 text-muted"> You must agree to the terms of service to use this plugin. Please read the terms carefully before proceeding. </p>
  				<p id="terms_of_service-error" class="ml-25 fields-error"></p>
  			</div>
			<div class="mb-3 app_selector_input">
  				<label for="app_selector_input" class="d-block fs-medium-14 mb-only-4 app_selector_input_label" >App Name <span class="text-danger">*</span>
  				</label>
  				<div class="select-box-icon">
  					<span class="field-icon">
  						<div class="assets-folder-icon"></div>
  					</span>
  					<input type="text" id="app_selector" name="app_selector" placeholder="Please Enter Your App Name" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-60 radius-6 px-10 py-8">
					<p id="app_selector-error" class="fs-regular-12 mb-2 fields-error"></p>
  				</div>
  			</div>
  			<div class="mb-3">
  				<label for="email-notification" class="d-block fs-medium-14 mb-only-4">App Email (for form data passing) <span class="fs-regular-14"></span>
  				</label>
  				<div class="select-box-icon">
  					<span class="field-icon">
  						<div class="assets-email-icon"></div>
  					</span>
  					<input type="email" name="app_email" id="app_email" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-60  radius-6 px-10 py-8">
  				</div>
  			</div>
            <div class="mb-3">
                <label for="ai_app_onsite-user-stats" class="d-block fs-medium-14 mb-only-4">User Stats</label>
                <div class="download-icon-box">
                    <div class="select-box-icon">
                        <span class="field-icon">
                          <div class="assets-calendar-icon"></div>
                        </span>
                        <select id="ai_app_onsite-user-stats" class="border border-1 w-100 mb-1 fs-medium-14 neutral-black-fs-60 radius-6 px-10 py-8">
                            <option value="#" selected disabled>Choose duration</option>
                            <option value="today">Today</option>
                            <option value="last_7_days">Last 7 Days</option>
                            <option value="current_month">Current Month (To Date)</option>
                            <option value="last_month">Last Month</option>
                            <option value="#" disabled>Last 3 Months (Full) [Upgrade to Premium]</option>
                            <option value="#" disabled>Current Year (To Date) [Upgrade to Premium]</option>
                            <option value="#" disabled>Last 12 Months (Full) [Upgrade to Premium]</option>
                            <option value="#" disabled>All Time [Upgrade to Premium]</option>
                        </select>
                        <p id="ai_app_onsite-user-stats-error" class="fields-error"></p>
                    </div>
                    <a href="#" class="neutral-black-10 rounded-circle px-8 py-8 download-icon disabled"
                       onclick="ai_app_onsite_download_user_stats(event)">
                        <div class="assets-download-icon"></div>
                    </a>
                </div>
            </div>
  			<div class="mb-3">
  				<label for="banned_words" class="d-block fs-medium-14 mb-only-4">Banned/blocked words (comma Separated)</label>
  				<div class="multi-select-container select-box-icon mb-20 fs-regular-14 neutral-black-fs-100 border border-1  radius-6 px-10 py-8">
  					<span class="field-icon">
  						<div class="assets-banned-icon"></div>
  					</span>
  					<div class="multi-select">
  						<select multiple data-multi-select-plugin id="bannedWords" name="bannedWords"></select>
  					</div>
  				</div>
  			</div>
  			<div class="form-group">
  				<label class="fs-medium-14">Upload Banned/Block CSV</label>
  				<div class="file-drop-area border ">
  					<span class="fake-btn">
  						<div class="assets-upload-file-icon"></div>
  					</span>
  					<div>
  						<p class="file-msg-top mb-0 neutral-black-fs-110">
  							<span class="text-purple">Click to upload</span> or drag and drop
  						</p>
  						<p class="neutral-black-fs-50 mb-0 fs-regular-12">CSV</p>
  					</div>
  					<input class="file-input" type="file" id="csv-upload" name="csv-file" accept=".csv" onchange="validateCSVFile(this)">
  				</div>
  				<p id="fileError" class="mt-1 fields-error"></p>
  			</div>
  			<div class="divider-light"></div>
  			<div class="text-end">
  				<button type="button" id="cancel_ai_app_plugin_settings_data" role="button" class="btn fs-medium-14 neutral-black-fs-60 radius-6 py-8 px-16 border border-2 bg-white" name="save-plugin-settings">Cancel</button>
  				<button type="button" id="save_ai_app_plugin_settings_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" name="save-plugin-settings" onclick="ai_app_onsite_save_plugin_settings()">Save</button>
  			</div>
  		</form>
  	</div>
	<!-- Modal -->
	<div class="modal fade bd-example-modal-sm plugin-setting" id="license_key_info_modal" tabindex="-1" role="dialog" aria-labelledby="license_key_info_modalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm modal-400 modal-dialog-centered" role="document">
			<div class="modal-content">
				<div id="modal-message-container" class="message-container"></div>
				<div class="modal-header">
					<h5 class="fs-bold-16 mb-0" id="terms_conditions_modal_label">AIappOnsite Access Key</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<form method="POST" id="license-validation-form" enctype="multipart/form-data">
					<?php wp_nonce_field('ai_app_onsite_app_verify_license_key_nonce', 'ai_app_onsite_app_verify_license_key_nonce_field'); ?>
						<p class="fs-regular-14 neutral-black-fs-100">Enter your access key to enable Aiapponsite premium features. For more details, visit our <a href="https://aiapponsite.com/pricing" class="open-new-tab">pricing page</a>. </p>
						<div class="form-group mb-0">
							<label class="fs-medium-14 fw-semibold">Access Key *</label>
							<div class="select-box-icon right-icon">
								<input type="text" id="licence_key" name="licence_key" class="border border-1 w-100 fs-regular-14 neutral-black-fs-60 radius-6 px-10 py-8 mt-2" required>
								<input type="hidden" id="licence_key_hidden" name="licence_key_hidden">
							</div>
						</div>
						<div class="row align-items-center my-2">
							<div class="col-md-12" id="key_note">
								<p class="fs-regular-12 text-opacity-50 text-dark fst-italic">Enter your Premium Add-On access key.</p>
							</div>
						</div>
						<div class="divider-light mt-2 mb-3"></div>
						<div class="row d-flex align-items-center mt-3 mb-3">
							<div class="col-md-12">
								<p class="text-muted text-center">You can find and manage your access key on <a href="https://aiapponsite.com/my-account/" class="open-new-tab">My Account</a>. </p>
							</div>
						</div>
						<div class="flex-row alignment-items-center mt-3 mb-3">
                            <div class="col-50">
                            <button type="button" class="btn remove-btn align-items-center" id="remove_ai_app_plugin_license_key" onclick="ai_app_onsite_app_remove_license_key()">
                                <span class="btn-icon me-1">
                                <div class="assets-delete-icon"></div>
                                </span> Remove Key</button>
                            </div>
                            <div class="col-50">
                            <div class="enable-switch-box d-flex justify-content-between align-items-baseline">
                                <span class="fs-medium-14 text-switch me-2" id="license-text-switch">Disabled</span>
                                <label class="switch">
									<input type="checkbox" id="key-disable-btn" onchange="ai_app_onsite_disable_license_key()">
									<span class="slider round"></span>
                                </label>
                            </div>
                            </div>
                        </div>
						<div class="button-wrap">
							<button type="button" role="button" id="cancel" class="btn fs-medium-14 neutral-black-fs-60 radius-6 py-6 px-16 border  border-2 bg-white" name="save-plugin-settings" data-bs-dismiss="modal" data-role="cancel" >Cancel</button>
							<button type="button" class="btn btn-purple fs-medium-14 neutral-black-fs-60 radius-6 py-6 px-16 border border-2  bg-purple text-white" name="active-plugin-licence-key" id="active_ai_app_plugin_license_key" onclick="ai_app_onsite_app_verify_license_key()">Save</button>
						</div>
					</form>
					<div id="app-license-msg-container" class="message-container mb-3"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal -->
    <div id="Plugin-settings-msg-container" class="message-container"></div>
  </div>
<?php 
      return ob_get_clean();
    }
  }
}
