
<h2>Database Sync Menu</h2>

<p>Please follow these steps to copy your collection information into your website's MySQL database.</p>

<p>
    First, sync the <strong>Data</strong> (which should take a few minutes). </br>
    Then, sync the  <strong>Images</strong>. Please note that the images can take up to a few hours to sync.

</p>
<p>
    When installing for the first time, you must manually sync the data.
</p>


<section id="section-data">
  <h2>1. Data</h2>

  <div class="section-inner">
    <h3>Select data types to sync</h3>
    <div class="custom-checkbox-wrapper">
        <div class="custom-checkbox">
            <input type="checkbox" id="checkbox-objects" name="checkbox-objects" checked disabled>
            <label for="checkbox-objects">Objects</label>
        </div>

        <div class="custom-checkbox">
            <input type="checkbox" id="checkbox-groups" name="checkbox-groups" {% if checkboxes_data.checkbox_groups %} checked {% endif %} >
            <label for="checkbox-groups">Groups</label>
        </div>

        <div class="custom-checkbox">
            <input type="checkbox" id="checkbox-collections" name="checkbox-collections" {% if checkboxes_data.checkbox_collections %} checked {% endif %}>
            <label for="checkbox-collections">Collections</label>
        </div>

        <div class="custom-checkbox">
            <input type="checkbox" id="checkbox-exhibitions" name="checkbox-exhibitions" {% if checkboxes_data.checkbox_exhibitions %} checked {% endif %}>
            <label for="checkbox-exhibitions">Exhibitions</label>
        </div>

        <div class="custom-checkbox">
            <input type="checkbox" id="checkbox-artists" name="checkbox-artists" {% if checkboxes_data.checkbox_artists %} checked {% endif %} >
            <label for="checkbox-artists">Artists</label>
        </div>
    </div>


    {# <br> #}

    <h3>Sync data</h3>
    <p>Use <strong>"Reset and Create Dataset"</strong> when you add/remove new fields. This will delete your current dataset and re-create it with the new data.</p>

    <p> Use <strong>"Update Dataset"</strong> when you have added/updated Objects, Artists, Collections, Exhibitions, or Groups. This will update the existing database without rewriting it.</p>
    
    <div class="wrapper">'

     <div class="custom-object-data">
            <label><h5> Objects </h5></label>

          <div class="count-wrapper">
            <div class="lds-dual-ring spinner"></div>
            <div class="count-data">
              <p id="resp-data">DB Count: </p>
              <p id="resp-data1">API Count: </p>
            </div>
          </div>

        </div>

      <div class="custom-group-data">
          <label><h5>Groups </h5></label>
            <div class="count-wrapper">
              <div class="lds-dual-ring spinner"></div>
              <div class="count-data">
                <p id="response-data">DB Count: </b></p>
                <p id="response-data1">API Count: </b></p>
              </div>
            </div>

      </div>

        <div class="custom-collection-data">
            <label><h5> Collections </h5></label>

              <div class="count-wrapper">
                <div class="lds-dual-ring spinner"></div>
                <div class="count-data">
                  <p id="resp-data2">DB Count: </p>
                  <p id="resp-data3">API Count: </p>
                </div>
              </div>
        </div>

        <div class="custom-exhibition-data">
            <label><h5>Exhibitions </h5></label>

              <div class="count-wrapper">
                <div class="lds-dual-ring spinner"></div>
                <div class="count-data">
                  <p id="resp-data4">DB Count: </p>
                  <p id="resp-data5">API Count: </p>
                </div>
              </div>
        </div>

        <div class="custom-artist-data">
            <label><h5>Artists </h5></label>

              <div class="count-wrapper">
                <div class="lds-dual-ring spinner"></div>
                <div class="count-data">
                  <p id="resp-data6">DB Count: </p>
                  <p id="resp-data7">API Count: </p>
                </div>
              </div>
        </div>
    </div>
    <div class="loading-class">
      <div class="loading-indicator"></div>
    </div>
    <div class="custom-button-container">
      <button id="btn-reset-and-create-dataset" class="dataset-btn btn btn-dark">Reset and Create Dataset</button>
      <div >Or</div>
      <button id="btn-update-dataset" class="dataset-btn btn btn-dark">Update Dataset</button>
    </div>

    {% if sync_tracked_info.info_manual_sync_data and sync_tracked_info.info_manual_sync_data.SyncCompleted %}
      <p class="last-synced-wrapper">Last Manual Sync completed on {{sync_tracked_info.info_manual_sync_data.SyncCompleted}} ({{sync_tracked_info.info_manual_sync_data.SyncCompletionTime}}) performed by {{sync_tracked_info.info_manual_sync_data.LastSyncedBy}}.</p>
    {% endif %}

  </div>
</section>
<section id="section-images">

  <h2>2. Images</h2>
  <div class="section-inner">
    <p>Set the way you would like the Images to be saved. There are two options:</p>

    <p><strong>Option 1 (Directory):</strong> Save images in a directory (Folder/File System). This will store image files like regular files on your server inside the public uploads directory under the folder named <code>collector_systems/images</code>, with each image file directly consuming disk space in that directory.</p>

    <p><strong>Option 2 (Database):</strong> Save images in the database (Embedded in the "Document" as File Blobs). This will directly store image data (binary code) as a blob within your MySQL database itself and will increase your database storage based on image size.</p>

    <div id="images-count-wrapper">
      <div class="image-group">
          <label class="">
              <h5>Object Images </h5>
          </label>
          <div class="count-wrapper-images">
              <div class="lds-dual-ring spinner-count"></div>
              <div class="count-data">
                  <p>DB Count: <span id="object-images-db-count"></span></p>
                  <p>API Count: <span id="object-images-api-count"></span</p>
              </div>
          </div>

      </div>

      <div class="image-group">
          <label class="">
              <h5>Other Images </h5>
          </label>
          <div class="count-wrapper-images">
              <div class="lds-dual-ring spinner-count"></div>
              <div class="count-data">
                  <p>DB Count: <span id="other-images-db-count"></span></p>
                  <p>API Count: <span id="other-images-api-count"></span></p>
              </div>
          </div>
      </div>
      

      
    </div>

    {# <label for="save_images_on_sync_to">Save Images to:</label>
    <select name="save_images_on_sync_to" id="select-save-images-on-sync-to">
        <option value="directory">Directory</option>
        <option value="database">Database</option>
    </select>
    <button class="btn btn btn-dark" id="btn-sync-images">Sync Images</button> #}


      {{ form_sync_images }}

    {% if sync_tracked_info.info_manual_sync_images and sync_tracked_info.info_manual_sync_images.SyncCompleted %}
      <p id="status-message-sync-images">Image Sync last started {{sync_tracked_info.info_manual_sync_images.SyncStarted}}, completed {{sync_tracked_info.info_manual_sync_images.SyncCompleted}} ({{sync_tracked_info.info_manual_sync_images.SyncCompletionTime}}) performed by {{sync_tracked_info.info_manual_sync_images.LastSyncedBy}}.</p>
    
    {% elseif sync_tracked_info.info_manual_sync_images.SyncStarted and not sync_tracked_info.info_manual_sync_images.SyncCompleted %}
     <p id="status-message-sync-images">Image Sync last started {{sync_tracked_info.info_manual_sync_images.SyncStarted}}, actively running performed by {{sync_tracked_info.info_manual_sync_images.LastSyncedBy}}.</p>
    {% endif %}

    <!---save other images -->
    {# <div class="section-save-other-images">
      <div class="loading-class">
        <div class="loading-indicator-image"></div>
      </div>
      <div class="main-heading">
          <h5>Save Other Images</h5>
      </div>
      <div class="button-styling" id="image-saved">

          <div class="custom-image-save">
              <button class="btn btn btn-dark" id="custom-directory-save">Directory</button>
          </div>



          <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;margin: 10px;">
            <p>Or</p>
          </div>


          <div class="db-save">
              <button class="btn btn btn-dark" id="custom-database-save">Database</button>
          </div>
      </div>
    </div> #}


    <!---save object images -->
    {# <div class="loading-class">
        <div class="loading-indicator-image-object"></div>
    </div>

    <div class="main-heading">
        <h5>Save Object Images</h5>
    </div>
    <div class="button-styling" id="image-saved-object">

        <div class="custom-image-save">
            <button class="btn btn btn-dark" id="custom-object-directory-save">Directory</button>
        </div>


        <div style="display:flex;flex-direction: column;justify-content: center;align-items: center;margin: 10px;">
            <p>Or</p>
        </div>

        <div class="db-save">
            <button class="btn btn btn-dark" id="custom-object-database-save">Database</button>
        </div>
    </div> #}


  </div>
</section>

<hr class="page-break">

 <section id="section-automatic-sync" class="section-automatic-sync">
    <div class="section-automatic-sync">
      <div class="main-heading">
        <h2>Automatic Sync</h2>
      </div>

       <p>Once your data has been manually synced, you can set up the <strong>Automatic Sync</strong> to update your dataset and images in their preferred location that you have set.</p>

      {{ scheduled_date_and_time_information|raw }}

      <div class="wrapper-automatic-sync">
        {{ automatic_sync_settings_form }}
      </div>

      {% if sync_tracked_info.info_automatic_sync and sync_tracked_info.info_automatic_sync.SyncCompleted %}
      <p id="status-message-automatic-images">Automatic Sync last started {{sync_tracked_info.info_automatic_sync.SyncStarted}}, completed {{sync_tracked_info.info_automatic_sync.SyncCompleted}} ({{sync_tracked_info.info_automatic_sync.SyncCompletionTime}}).</p>
    
      {% elseif sync_tracked_info.info_automatic_sync.SyncStarted and not sync_tracked_info.info_automatic_sync.SyncCompleted %}
      <p id="status-message-automatic-images">Automatic Sync last started {{sync_tracked_info.info_automatic_sync.SyncStarted}}, actively running.</p>
      {% endif %}


      <h5 class="help-text strong">For automatic sync to work properly in the background:</h5>
      <li>The Drupal cron must be triggered frequently. Recommended atleast every 3 min or 5 min. <br>
      You can trigger the cron in every 3 min interval using third party service like <a target="_blank" href="https://www.easycron.com/">Easy Cron</a> or your server <a target="_blank" href="https://www.geeksforgeeks.org/crontab-in-linux-with-examples/">Crontab </a>.</li>
      <li>Also please ensure the php "max_execution_time" is set to atleast 180 seconds in your server so that it can process enough items in a single cron run.</li>
      <li> Every time the Drupal cron runs, the queued items are processed in the background.</li>
    </div>

</div>








