<?php
if (!defined('ABSPATH'))
   exit;
?>
<div class="imh-6310">
   <h1>Plugin Export / Import</h1>

   <button class="imh-6310-btn-primary" id="export-image-map-hotspot-data">Export Plugin Data</button>
   <button class="imh-6310-btn-primary" id="import-image-map-hotspot-data">Import Plugin Data</button>
   <?php

   wp_enqueue_media();
   imh_6310_export_full_map_hotspot_plugin();

   if (!empty($_POST['update'])) {
      $nonce = $_REQUEST['_wpnonce'];
      if (!wp_verify_nonce($nonce, 'imh-6310-nonce-update')) {
         die('You do not have sufficient permissions to access this page.');
      } else {
         if($_POST['file_url'] && substr($_POST['file_url'], -3) == 'txt'){
            imh_6310_import_full_plugin($_POST['file_url']);            
         } else{
            echo "<p style='color: red; font-size: 14px;'>Can't import data. Please upload valid file.</p>";
         }
      }
   }
   ?>
   <form action="" method="post">
      <?php wp_nonce_field("imh-6310-nonce-update") ?>
      <div class="imh-6310-modal-body-form">
         <table width="100%" cellpadding="10" cellspacing="0" class="import-file" style="display: none">
            <tr>
               <td width="70px"><b>File URL</b></td>
               <td>
                  <input type="text" required name="file_url" id="file-url" class="imh-6310-form-input" style="width: 300px;">
                  <input type="button" id="upload-csv-file" value="Upload file" class="imh-6310-btn-default">
               </td>
            </tr>
            <tr>
               <td colspan="3">
                  <input type="submit" name="update" class="imh-6310-btn-primary imh-6310-margin-right-10" value="Import Data"  onclick="return confirm('If you import you will lose all of your previous data of this plugin. Do you want to continue?');" />
               </td>
            </tr>
         </table>
      </div>
      <br class="imh-6310-clear" />
   </form>
   <script>
      jQuery(document).ready(function() {
         /* ######### Media Start ########### */
         jQuery("body").on("click", "#import-image-map-hotspot-data", function(e) {
            jQuery('.import-file').show();
         });

         jQuery('body').on('click', '#export-image-map-hotspot-data', function(){
            var url = jQuery('#export-image-map-hotspot-plugin').attr('href');
            if(url == '#'){
               alert('No data available for export. Please create and configure the shortcode first before attempting to export the data.');
               return;
            }
            else if (!confirm("Do you want to export the Image hotspot - Map image annotation full plugin data?")){
               return false;
            } else{
               window.open(url, '_blank');
            }
         });

         jQuery("body").on("click", "#upload-csv-file", function(e) {
            e.preventDefault();
            var image = wp.media({
                  title: 'Upload File',
                  multiple: false
               }).open()
               .on('select', function(e) {
                  var uploaded_image = image.state().get('selection').first();
                  var image_url = uploaded_image.toJSON().url;
                  jQuery("#file-url").val(image_url);
               });

            jQuery("#imh_6310_add_new_media").css({
               "overflow-x": "hidden",
               "overflow-y": "auto"
            });
         });
      });
   </script>