<?php

use DaftPlug\Generatify\Helpers\Utils;
if ( !defined( 'ABSPATH' ) ) {
    exit;
}
?>
<form name="settingsForm" spellcheck="false" autocomplete="off" class="max-w-6xl 2xl:max-w-7xl w-full mx-auto flex flex-col bg-white border border-gray-200 shadow-sm rounded-xl">
  <!-- AI Providers -->
  <fieldset id="subsectionAiProviders" class="py-10 px-5 border-t border-gray-200 first:border-t-0 xl:grid xl:grid-cols-3 xl:gap-14 max-xl:space-y-8">
    <div class="xl:col-span-1">
      <div class="flex space-x-2.5 sticky top-14">
        <svg class="text-gray-400 size-7 mt-0.5 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
          <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
          <path d="M20 2v4" />
          <path d="M22 4h-4" />
          <circle cx="4" cy="20" r="2" />
        </svg>
        <div class="grow">
          <h5 class="text-base font-semibold text-gray-800">
            <?php 
esc_html_e( 'AI Providers', 'generatify' );
?>
          </h5>
          <p class="mt-1 text-sm text-gray-500">
            <?php 
esc_html_e( 'Integrate state-of-the-art AI providers like ChatGPT, Claude, Gemini, and others to enable advanced AI features.', 'generatify' );
?>
          </p>
        </div>
      </div>
    </div>
    <div class="xl:col-span-2 ml-11 xl:m-0 space-y-8">
      <!-- AI ChatGPT Connector -->
      <div id="settingAiChatgptConnector" class="relative bg-white border border-gray-200 rounded-xl py-2 px-3 <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '*:pointer-events-none [&_[data-dp-tooltip]]:pointer-events-auto cursor-pointer"data-needs-active-pro="true' : '' );
?>">
        <label for="connectorChatgpt" class="cursor-pointer flex gap-x-3">
          <div class="flex items-center gap-x-1.5 w-full">
            <img class="size-8" src="<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/chatgpt.svg', GENERATIFY_FILE ) );
?>" />
            <div class="grow">
              <h3 class="flex items-center text-sm text-gray-800 font-semibold">
                <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '<span class="mr-1.5 inline-flex items-center gap-1.5 pt-[3px] pb-1 px-1.5 rounded-lg text-[10px] leading-none font-medium bg-blue-600 text-white">Pro</span>' : '' );
?>
                <?php 
esc_html_e( 'ChatGPT', 'generatify' );
?>
                <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                  <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                  </svg>
                  <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                    <?php 
esc_html_e( 'Integrates and enables ChatGPT for content generation, conversation, and other AI applications.', 'generatify' );
?>
                  </span>
                </button>
              </h3>
              <p class="mt-0.5 text-xs text-gray-500">
                <?php 
esc_html_e( 'Integrates and enables ChatGPT by OpenAI for AI features.', 'generatify' );
?>
              </p>
            </div>
            <div class="flex justify-between items-center">
              <div class="relative inline-block">
                <input type="checkbox" id="connectorChatgpt" name="connectorChatgpt" class="relative w-11 h-6 !p-px bg-gray-100 !border-transparent !border text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 before:inline-block before:!size-5 before:bg-white checked:before:bg-white checked:before:m-0 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 text-start" <?php 
?>>
              </div>
            </div>
          </div>
        </label>
        <?php 
?>
      </div>
      <!-- End AI ChatGPT Connector -->
      <!-- AI Claude Connector -->
      <div id="settingAiClaudeConnector" class="relative bg-white border border-gray-200 rounded-xl py-2 px-3 <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '*:pointer-events-none [&_[data-dp-tooltip]]:pointer-events-auto cursor-pointer"data-needs-active-pro="true' : '' );
?>">
        <label for="connectorClaude" class="cursor-pointer flex gap-x-3">
          <div class="flex items-center gap-x-1.5 w-full">
            <img class="size-8" src="<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/claude.svg', GENERATIFY_FILE ) );
?>" />
            <div class="grow">
              <h3 class="flex items-center text-sm text-gray-800 font-semibold">
                <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '<span class="mr-1.5 inline-flex items-center gap-1.5 pt-[3px] pb-1 px-1.5 rounded-lg text-[10px] leading-none font-medium bg-blue-600 text-white">Pro</span>' : '' );
?>
                <?php 
esc_html_e( 'Claude', 'generatify' );
?>
                <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                  <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                  </svg>
                  <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                    <?php 
esc_html_e( 'Integrates and enables Claude for content generation, conversation, and other AI applications.', 'generatify' );
?>
                  </span>
                </button>
              </h3>
              <p class="mt-0.5 text-xs text-gray-500">
                <?php 
esc_html_e( 'Integrates and enables Claude by Anthropic for AI features.', 'generatify' );
?>
              </p>
            </div>
            <div class="flex justify-between items-center">
              <div class="relative inline-block">
                <input type="checkbox" id="connectorClaude" name="connectorClaude" class="relative w-11 h-6 !p-px bg-gray-100 !border-transparent !border text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 before:inline-block before:!size-5 before:bg-white checked:before:bg-white checked:before:m-0 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 text-start" <?php 
?>>
              </div>
            </div>
          </div>
        </label>
        <?php 
?>
      </div>
      <!-- End AI Claude Connector -->
      <!-- AI Gemini Connector -->
      <div id="settingAiGeminiConnector" class="relative bg-white border border-gray-200 rounded-xl py-2 px-3 <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '*:pointer-events-none [&_[data-dp-tooltip]]:pointer-events-auto cursor-pointer"data-needs-active-pro="true' : '' );
?>">
        <label for="connectorGemini" class="cursor-pointer flex gap-x-3">
          <div class="flex items-center gap-x-1.5 w-full">
            <img class="size-8" src="<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/gemini.svg', GENERATIFY_FILE ) );
?>" />
            <div class="grow">
              <h3 class="flex items-center text-sm text-gray-800 font-semibold">
                <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '<span class="mr-1.5 inline-flex items-center gap-1.5 pt-[3px] pb-1 px-1.5 rounded-lg text-[10px] leading-none font-medium bg-blue-600 text-white">Pro</span>' : '' );
?>
                <?php 
esc_html_e( 'Gemini', 'generatify' );
?>
                <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                  <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                  </svg>
                  <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                    <?php 
esc_html_e( 'Integrates and enables Gemini for content generation, conversation, and other AI applications.', 'generatify' );
?>
                  </span>
                </button>
              </h3>
              <p class="mt-0.5 text-xs text-gray-500">
                <?php 
esc_html_e( 'Integrates and enables Gemini by Google for AI features.', 'generatify' );
?>
              </p>
            </div>
            <div class="flex justify-between items-center">
              <div class="relative inline-block">
                <input type="checkbox" id="connectorGemini" name="connectorGemini" class="relative w-11 h-6 !p-px bg-gray-100 !border-transparent !border text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 before:inline-block before:!size-5 before:bg-white checked:before:bg-white checked:before:m-0 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 text-start" <?php 
?>>
              </div>
            </div>
          </div>
        </label>
        <?php 
?>
      </div>
      <!-- End AI Gemini Connector -->
      <!-- AI Kimi Connector -->
      <div id="settingAiKimiConnector" class="relative bg-white border border-gray-200 rounded-xl py-2 px-3 <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '*:pointer-events-none [&_[data-dp-tooltip]]:pointer-events-auto cursor-pointer"data-needs-active-pro="true' : '' );
?>">
        <label for="connectorKimi" class="cursor-pointer flex gap-x-3">
          <div class="flex items-center gap-x-1.5 w-full">
            <img class="size-8" src="<?php 
echo esc_url( plugins_url( 'assets/media/icons/models/kimi.svg', GENERATIFY_FILE ) );
?>" />
            <div class="grow">
              <h3 class="flex items-center text-sm text-gray-800 font-semibold">
                <?php 
echo ( !\DaftPlug\Generatify\generatify_pro()->can_use_premium_code__premium_only() ? '<span class="mr-1.5 inline-flex items-center gap-1.5 pt-[3px] pb-1 px-1.5 rounded-lg text-[10px] leading-none font-medium bg-blue-600 text-white">Pro</span>' : '' );
?>
                <?php 
esc_html_e( 'Kimi', 'generatify' );
?>
                <button type="button" class="group/tooltip relative cursor-help ms-1 flex" tabindex="-1" data-dp-tooltip='{"trigger": "hover", "placement": "top"}'>
                  <svg class="inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
                  </svg>
                  <span class="dp-tooltip-content group-data-[shown=true]/tooltip:opacity-100 group-data-[shown=true]/tooltip:visible opacity-0 transition-opacity inline-block absolute w-max invisible max-w-xs sm:max-w-lg z-[99999999999999] text-center py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded shadow-sm" role="tooltip">
                    <?php 
esc_html_e( 'Integrates and enables Kimi for content generation, conversation, and other AI applications.', 'generatify' );
?>
                  </span>
                </button>
              </h3>
              <p class="mt-0.5 text-xs text-gray-500">
                <?php 
esc_html_e( 'Integrates and enables Kimi by Moonshot for AI features.', 'generatify' );
?>
              </p>
            </div>
            <div class="flex justify-between items-center">
              <div class="relative inline-block">
                <input type="checkbox" id="connectorKimi" name="connectorKimi" class="relative w-11 h-6 !p-px bg-gray-100 !border-transparent !border text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 before:inline-block before:!size-5 before:bg-white checked:before:bg-white checked:before:m-0 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 text-start" <?php 
?>>
              </div>
            </div>
          </div>
        </label>
        <?php 
?>
      </div>
      <!-- End AI Kimi Connector -->
    </div>
  </fieldset>
  <!-- End AI Providers -->
</form>