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

use Elementor_Pay_Addons\Core\Mailer;
use Elementor_Pay_Addons\Shared\Security_Utils;
use Elementor_Pay_Addons\Stripe\Stripe_Webhook_State;

Mailer::init_emails();
$emails = get_option('epa_email_list');
$email_settings = Mailer::get_email_setting();
$webhook_no_event = Stripe_Webhook_State::is_no_event_received();
$is_pro = Security_Utils::is_pro();
?>

<div id="emails" class="epa-tab-panel p-8">
  <div class="flex justify-between items-center pb-5">
    <div>
      <h4>Email notifications</h4>
    </div>
    <label class="relative inline-flex items-center mr-5 cursor-pointer">
      <strong>Note: </strong>This feature requires a webhook URL to be configured.
    </label>
  </div>
  <div class="py-4">
    <?php if ($webhook_no_event) { ?>
      <div class="flex items-center p-2 mb-4 text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
        <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
        </svg>
        <span class="sr-only">Info</span>
        <div class="ml-3 text-sm font-medium">
          Ensure the webhook URL configure successfully.
        </div>
      </div>
    <?php } ?>

    <table class="wp-list-table widefat striped">
      <thead>
        <tr>
          <th scope="col">Email</th>
          <th scope="col">Content type</th>
          <th scope="col">Recipient(s)</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <?php
        foreach ($emails as $key => $email) { ?>
          <tr data-id="<?php echo esc_attr($email['id']); ?>">
            <td scope="row">
              <div class="flex items-center">
                <?php if ($email['enabled']) { ?>
                  <span class="epa-pill epa-pill-enable">enable</span>
                <?php } else { ?>
                  <span class="epa-pill epa-pill-disable">disabled</span>
                <?php } ?>
                <span class="name"><?php echo esc_html($email['name']); ?></span>
                <?php echo wp_kses_post(epa_help_tip($email['description'])); ?>
              </div>
            </td>
            <td scope="row"><?php echo esc_html($email['type']); ?></td>
            <td scope="row"><span class="recipients"><?php echo esc_html($email['recipients']); ?></span></td>
            <td scope="row"><a data-modal-target="edit-email-modal" data-title="<?php echo esc_attr($email['name']); ?>" data-id="<?php echo esc_attr($email['id']); ?>" class="btn-edit-email button muted-button" href="#">Manage</a></td>
          </tr>
        <?php } ?>
      </tbody>
    </table>

    <div class="my-4 mt-8 text-xl font-bold">Email sender options</div>
    <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
      <div class="w-full">
        <label for="fromName" class="block mb-2 text-sm font-medium text-gray-900">From Name <?php echo wp_kses_post(epa_help_tip('How the sender name appears in outgoing emails.')); ?></label>
        <input type="text" value="<?php echo esc_attr($email_settings['fromName']); ?>" name="fromName" id="fromName" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required>
      </div>
      <div class="w-full">
        <label for="fromEmail" class="block mb-2 text-sm font-medium text-gray-900">From Email <?php echo wp_kses_post(epa_help_tip('How the sender email appears in outgoing emails.')); ?></label>
        <input type="text" value="<?php echo esc_attr($email_settings['fromEmail']); ?>" name="fromEmail" id="fromEmail" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
      </div>
    </div>

    <div class="my-4 mt-8 text-xl font-bold">Customize email template (Pro)</div>
    <?php if ($is_pro) { ?>
    <div class="my-4 grid gap-4 sm:grid-cols-2 sm:gap-6">
      <div class="w-full">
        <label for="baseColor" class="block mb-2 text-sm font-medium text-gray-900">Base color <?php echo wp_kses_post(epa_help_tip('Basic color for all payment notification email templates. Default #4a90e2')); ?></label>
        <?php echo wp_kses_post(epa_color_picker('baseColor', $email_settings['baseColor'])); ?>
      </div>
      <div class="w-full">
        <label for="backgroundColor" class="block mb-2 text-sm font-medium text-gray-900">Background color <?php echo wp_kses_post(epa_help_tip('Background color for all payment notification email templates. Default #f7f7f7')); ?></label>
        <?php echo wp_kses_post(epa_color_picker('backgroundColor', $email_settings['backgroundColor'])); ?>
      </div>
      <div class="w-full">
        <label for="bodyBackgroundColor" class="block mb-2 text-sm font-medium text-gray-900">Body background color <?php echo wp_kses_post(epa_help_tip('Main body background color. Default #ffffff')); ?></label>
        <?php echo wp_kses_post(epa_color_picker('bodyBackgroundColor', $email_settings['bodyBackgroundColor'])); ?>
      </div>
      <div class="w-full">
        <label for="textColor" class="block mb-2 text-sm font-medium text-gray-900">Body text color <?php echo wp_kses_post(epa_help_tip('Main body background color. Default #3c3c3c')); ?></label>
        <?php echo wp_kses_post(epa_color_picker('textColor', $email_settings['textColor'])); ?>
      </div>
    </div>
    <div class="my-4">
      <div class="w-full">
        <label for="enableCustom" class="block mb-2 text-sm font-medium text-gray-900">Enable override (advanced)</label>
        <input id="enableCustom" name="enableCustom" type="checkbox" value="false" <?php echo $email_settings['enableCustom'] == 'true' ? 'checked' : '' ?>  />
        <span>To customize and override these email templates, create your own versions in your theme folder at: <strong>{themefolder}/elementor-pay-addons/emails/default.html</strong> (both colors variables and merge fields are supported)</span>
      </div>
    </div>
    <?php } else { ?>
    <div class="relative p-4 my-4 border border-gray-200 rounded-lg bg-gray-50">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100">
            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
          </div>
          <div>
            <h3 class="text-lg font-medium text-gray-900">Pro Feature</h3>
            <p class="text-sm text-gray-500">Unlock advanced email template customization with Pro plan</p>
          </div>
        </div>
        <a href="<?php echo esc_url(epa_fs()->get_upgrade_url()); ?>" rel="noopener noreferrer" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300">
          Upgrade to Pro
          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
          </svg>
        </a>
      </div>
    </div>
    <?php } ?>
  </div>
  <div class="flex justify-between items-center">
    <a class="epa-button-link" href="https://docs.payaddons.com/features/email-configuration" target="_blank" rel="external noreferrer noopener">How to customize email?</a>
    <button type="button" class="btn-save-email-setting epa-button-primary">Save changes</button>
  </div>
  <div id="alert"></div>
</div>

<div id="edit-email-modal" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
  <div class="relative w-full max-w-2xl max-h-full">
    <!-- Modal content -->
    <div class="relative bg-white rounded-lg shadow">
      <!-- Modal header -->
      <div class="flex items-start justify-between p-4 border-b rounded-t ">
        <h3 class="text-xl font-semibold text-gray-900">Modal</h3>
        <button id="edit-email-modal-close-btn" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center" data-modal-hide="edit-email-modal">
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
          </svg>
          <span class="sr-only">Close modal</span>
        </button>
      </div>
      <!-- Modal body -->
      <div class="p-6 space-y-6">
        <form action="#" id="epa-email-form">
          <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
            <div class="sm:col-span-2">
              <span class="mr-3 text-sm font-medium text-gray-900">Enable/Disable</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input name="enabled" 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>
              </label>
            </div>
            <div class="sm:col-span-2">
              <label for="subject" class="block mb-2 text-sm font-medium text-gray-900">Subject</label>
              <input type="text" name="subject" id="subject" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required>
            </div>
            <div class="w-full">
              <label for="recipients" class="block mb-2 text-sm font-medium text-gray-900">Recipient(s)</label>
              <input type="text" name="recipients" id="recipients" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required>
              <span class="text-sm text-gray-500">Separate multiple emails with commas.</span>
            </div>
            <div class="w-full">
              <label for="headerText" class="block mb-2 text-sm font-medium text-gray-900">Header Text</label>
              <input type="text" name="headerText" id="headerText" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
            </div>
            <div class="sm:col-span-2">
              <label for="htmlContent" class="block mb-2 text-sm font-medium text-gray-900">Template</label>
              <?php wp_editor('', 'htmlContent') ?>
            </div>
          </div>
          <div class="flex justify-end mt-2">
            <button name="btnSaveEmail" class="btn-save-email epa-button-primary" type="submit">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 hidden">modal backdrop</div>