<?php
if (!defined('ABSPATH')) {
  exit;
}

?>
<div class="wrap awxct-admin-page">
  <h1><?php esc_html_e('JSON (JS based)', 'anywarex-clone-translate'); ?></h1>

  <p>
    <?php esc_html_e(
      'AnyWareX Clone Translate provides JavaScript-based translations for strings that appear in JavaScript. These translations are stored in JSON files in the uploads directory and are automatically loaded according to the active locale.',
      'anywarex-clone-translate'
    ); ?>
  </p>

  <hr>

  <h2><?php esc_html_e('1. Example JSON file (JS)', 'anywarex-clone-translate'); ?></h2>

  <p><?php esc_html_e('A JSON translation file for JavaScript typically looks like this:', 'anywarex-clone-translate'); ?></p>

<pre><code>{
  "header": {
    "cta": "Buy Now",
    "appointment": "Book an Appointment"
  }
}
</code></pre>

  <p><?php esc_html_e('JS translation files are stored at:', 'anywarex-clone-translate'); ?></p>

<pre><code>/wp-content/uploads/anywarex-clone-translate/i18n/js/{locale}.json</code></pre>

  <p>
    <?php esc_html_e(
      'Prepared example JSON files shipped with the plugin are located in the plugin folder under /i18n/js/ (or /assets/i18n/js/ depending on edition). You can copy/adapt them into wp-content/uploads/anywarex-clone-translate/i18n/js/.',
      'anywarex-clone-translate'
    ); ?>
  </p>

  <p><?php esc_html_e('Example:', 'anywarex-clone-translate'); ?></p>

<pre><code>/wp-content/uploads/anywarex-clone-translate/i18n/js/it-it.json</code></pre>

  <div style="background:#f8f8f8;border-left:4px solid #999;padding:12px;margin:20px 0;">
    <strong><?php esc_html_e('Prepared example files:', 'anywarex-clone-translate'); ?></strong><br>
    <?php esc_html_e(
      'In the /i18n/js/ folder you will find example files named like xx-xx-example.json (for example de-de-example.json).',
      'anywarex-clone-translate'
    ); ?>
    <?php esc_html_e(
      'To use them in your project, rename the file to xx-xx.json (for example de-de.json).',
      'anywarex-clone-translate'
    ); ?>
    <?php esc_html_e(
      'They are shipped with the -example suffix so that plugin updates do not overwrite your customized JSON files.',
      'anywarex-clone-translate'
    ); ?>
  </div>

  <hr>

  <h2><?php esc_html_e('2. Using translations in templates', 'anywarex-clone-translate'); ?></h2>

  <p>
    <?php esc_html_e(
      'Once the JSON file is loaded, you can translate strings in Angular/JS templates using the awxct filter.',
      'anywarex-clone-translate'
    ); ?>
  </p>

<pre><code>{{ "header.appointment" | awxct }}</code></pre>

  <p>
    <?php esc_html_e(
      'The filter will look up the key in the currently loaded JSON file and return the translated string.',
      'anywarex-clone-translate'
    ); ?>
  </p>

  <p><?php esc_html_e('Result:', 'anywarex-clone-translate'); ?></p>

<pre><code>Book an Appointment</code></pre>

  <hr>

  <h2><?php esc_html_e('3. Notes', 'anywarex-clone-translate'); ?></h2>

  <ul>
    <li><?php esc_html_e('Use dot notation (e.g. header.appointment) to access nested values.', 'anywarex-clone-translate'); ?></li>
    <li><?php esc_html_e('Use lowercase JSON filenames (e.g. de-de.json).', 'anywarex-clone-translate'); ?></li>
    <li><?php esc_html_e('Use locale names like en-us, de-de, it-it.', 'anywarex-clone-translate'); ?></li>
  </ul>

  <hr>

  <h2><?php esc_html_e('4. Directory structure', 'anywarex-clone-translate'); ?></h2>

  <p><?php esc_html_e('The recommended structure for JS translations:', 'anywarex-clone-translate'); ?></p>

<pre><code>/wp-content/uploads/anywarex-clone-translate/i18n/js/
 ├── en-us.json
 ├── de-de.json
 ├── it-it.json
 └── fr-fr.json
</code></pre>

  <hr>

  <h2><?php esc_html_e('5. Fallback logic', 'anywarex-clone-translate'); ?></h2>

  <p><?php esc_html_e('If a translation key is missing:', 'anywarex-clone-translate'); ?></p>

  <ul>
    <li><?php esc_html_e('Return the key path as-is (e.g. header.appointment).', 'anywarex-clone-translate'); ?></li>
    <li><?php esc_html_e('If missing, it falls back to the default locale (usually en-us).', 'anywarex-clone-translate'); ?></li>
  </ul>

  <hr>

  <p style="color:#666;">
    <?php esc_html_e(
      'This page describes how to create and use JS-based JSON translations in AnyWareX Clone Translate.',
      'anywarex-clone-translate'
    ); ?>
  </p>
</div>
