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

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

      <!--  Render your plugin setting tab page here -->
      <div>
        <form class="form-wrapper" id="app-details-form" method="POST" enctype="multipart/form-data">
          <?php wp_nonce_field('ai_app_onsite_app_properties_nonce', 'ai_app_onsite_app_properties_nonce_field'); ?>
          <div class="d-flex justify-content-between mb-3 align-items-center">
  					<label class="font-bold fs-medium-14 mb-0">Add App Details</label>
  				</div>
          <div class="form-group mb-20">
            <label class="fs-medium-14">App Name<span class="text-danger">*</span></label>
            <div class="col-12 d-flex flex-column flex-md-row">
              <!-- First div with the text input -->
              <div class="col-12 col-md-7 select-box-icon mb-3 mb-md-0 me-md-2">
                <span class="field-icon">
                  <div class="assets-folder-icon"></div>
                </span>
                <input type="text" name="app-name" id="app-name" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-60 radius-6 px-10 py-8 app-name" disabled>
                <p id="app-name-error" class="fields-error"></p>
              </div>

              <!-- Second div with the checkbox -->
              <div class="col-12 col-md-5 m-2">
                <label for="app-name-toggle" class="d-flex align-items-center">
                  <input type="checkbox" name="app-name-toggle" id="app-name-toggle" class="me-2">
                  <span>Disable app name display</span>
                </label>
              </div>
            </div>

          </div>
          <div class="form-group">
            <label class="fs-medium-14 mb-1">App Image</label>
            <div class="col-12 d-flex flex-column flex-md-row">
              <!-- First div with the file input and preview -->
              <div class="col-12 col-md-12 select-box-icon mb-3 mb-md-0 me-md-2">
                <div id="previewImage"></div>
                <div class="row d-flex align-items-center mt-2">
                  <div class="col-md-8" id="file-upload-div">
                    <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">SVG, PNG, JPG or GIF (max. 800x400px)</p>
                      </div>
                      <input class="file-input" type="file" id="file-upload" name="fileUpload" accept=".svg, .png, .jpg, .gif" onchange="validateFile(this)">
                    </div>
                  </div>
                  <!-- Second div with the button and cross icon -->
                  <div class="col-md-4" id="remove-logo-btn">
                    <button type="button" class="btn btn-outline-danger d-flex align-items-center" onclick="removeLogoFile(this)">
                      <span class="me-2">
                        <div class="assets-cross-icon"></div> <!-- You can replace this with an actual cross icon -->
                      </span>
                      <span>Remove Image</span>
                    </button>

                  </div>

                </div>
                <p id="fileError" class="mt-1 fields-error"></p>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="d-block fs-medium-14 mb-only-4">App Description<span class="text-danger">*</span></label>
            <div class="select-box-icon select-box-icon-textarea">
              <span class="field-icon">
                <div class="assets-pen-icon"></div>
              </span>
              <textarea class="border text-write w-100 fs-regular-14 neutral-black-fs-100 radius-6" id="app-description" name="app-description" rows="4" cols="50" placeholder=""></textarea>
              <p class="neutral-black-fs-60 fs-regular-12 mb-0" id="wordCount">5000 characters left</p>
              <p id="app-description-error" class="fields-error"></p>
            </div>
          </div>
          <div class="form-group">
            <label class="d-block fs-medium-14 mb-only-4">App Disclaimer<span class="text-danger">*</span></label>
            <div class="select-box-icon select-box-icon-textarea mb-30">
              <span class="field-icon">
                <div class="assets-pen-icon"></div>
              </span>
              <textarea id="app-disclaimer" class="border text-write w-100 fs-regular-14 neutral-black-fs-100 radius-6 "  name="app-disclaimer" placeholder=""></textarea>
              <p class="neutral-black-fs-60 fs-regular-12 mb-2" id="wordCountDisclaimer">500 characters left</p>
              <p class="neutral-black-fs-60 fs-regular-12 mb-0">Note: This app uses an AI LLM to generate suggestions and feedback. Be mindful of the information you share when using AI tools.</p>
              <p id="app-disclaimer-error" class="fields-error"></p>
            </div>
          </div>
          <div class="input-btn-text">
            <div class="input-btn-first">
              <label class="neutral-black-fs-110 font-medium">Submit Button Text: </label>
              "<input type="text" id="submit-btn-txt" name="submit-button-text" class="input-button-text" value="Submit" onchange="change_preview()">"
            </div>
            <div class="input-btn-first">
              <label class="neutral-black-fs-110 font-medium">Preview: </label>
              <button type="button" id="preview-submit-btn-txt" role="button" class="btn fs-medium-14 neutral-black-fs-100 radius-6 py-8 px-16 border border-2 bg-white" name="save-plugin-settings">Submit</button>
            </div>
          </div>
          <div class="divider-light"></div>
          <div class="form-group">
            <label class="d-block fs-medium-14 mb-only-4">Response Header (Also used in user email subject line)</label>
            <div class="col-12 col-md-12 select-box-icon mb-3 mb-md-0 me-md-2">
              <span class="field-icon">
                <div class="assets-pen-icon"></div>
              </span>
              <input type="text" name="response-header" id="response-header" placeholder="Enter response header" class="border border-1 w-100 mb-1 fs-regular-14 neutral-black-fs-100 radius-6 px-10 py-8">
            </div>
            <p id="response-header-error" class="fields-error"></p>
          </div>
          <div class="form-group">
            <label class="d-block fs-medium-14 mb-only-4">Post Response Message</label>
            <div class="select-box-icon select-box-icon-textarea">
              <span class="field-icon">
                <div class="assets-pen-icon"></div>
              </span>
              <textarea class="border text-write w-100 fs-regular-14 neutral-black-fs-100 radius-6" id="response-message" name="response-message" rows="2" cols="50" placeholder=""></textarea>
              <p id="response-message-error" class="fields-error"></p>
            </div>
          </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_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" name="save-plugin-settings" onclick="ai_app_onsite_save_app_properties()">Save</button>
          </div>
        </form>
      </div>
      <div id="app-properties-msg-container" class="message-container"></div>
<?php
      return ob_get_clean();
    }
  }
}
