<?php

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

$elements = Elementor_Pay_Addons\Core\Config::$elements;
$is_pro = Elementor_Pay_Addons\Shared\Security_Utils::is_pro();
?>

<div id="elements" class="epa-tab-panel p-8">
  <div class="flex justify-between items-center pb-5 border-b border-gray-300">
    <div>
      <h4>Widgets</h4>
      <span class="text-gray-400">Use the Toggle Button to Activate or Deactivate all the Elements at once.</span>
    </div>
    <label class="relative inline-flex items-center mr-5 cursor-pointer">
      <input id="chkEnableAll" type="checkbox" value="" class="sr-only peer" checked>
      <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
      <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Enable All</span>
    </label>
  </div>
  <div class="py-4">
    <div class="grid gap-4 grid-cols-3 grid-rows-2">
      <?php
      foreach ($elements as $key => $val) { ?>
        <div class="epa-element-card">
            <?php if ($val['plan'] === 'pro') { ?>
            <span class="epa-badge-pro">PRO</span>
            <?php } ?>
            <?php if (isset($val['new']) && $val['new']) { ?>
            <span class="epa-badge-new">NEW</span>
            <?php } ?>
          <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"><?php echo esc_html($val['name']) ?></h5>
          <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
            <?php echo esc_html($val['desc']) ?>
          </p>
          <div class="absolute bottom-2 right-2">
            <?php if ($val['category'] == 'widget') { ?>
              <label class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" name="<?php echo esc_html($key) ?>" value="<?php echo esc_html($key) ?>" class="sr-only peer" checked>
                <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
              </label>
            <?php } ?>
            <?php if (isset($val['warning'])) { ?>
              <div class="flex text-sm <?php echo $is_pro ? ' epa-badge-indicator-green' : ' epa-badge-indicator-red'; ?>" role="alert">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                <span><?php echo $is_pro ? 'Ready to use' : esc_html($val['warning']); ?></span>
              </div>
            <?php } ?>
          </div>
        </div>
      <?php  } ?>
    </div>
  </div>
  <div class="flex justify-end">
    <button type="button" class="btn-save-element epa-button-primary">Save changes</button>
  </div>
  <div id="alert"></div>
</div>