<?php
if (!defined('ABSPATH')) {
    exit;
}
?><?php if ($ai_premium_active) : ?>
<section class="iapc-card iapc-card-ai iapc-canva-panel iapc-active" data-panel-content="ai">

  <div class="iapc-options">

    <p class="iapc-panel-intro"><?php esc_html_e('Generate an image from a short description.', 'idesoftbcn-ai-product-customizer'); ?></p>

    <div class="iapc-field iapc-field-full">
      <label for="iapc_ai_prompt"><?php esc_html_e('Describe your design', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="text" id="iapc_ai_prompt"
        placeholder="<?php esc_attr_e('Your idea here', 'idesoftbcn-ai-product-customizer'); ?>">
    </div>

    <button type="button" id="iapc_generate_ai" class="iapc-btn iapc-btn-full">
      <?php esc_html_e('Generate image', 'idesoftbcn-ai-product-customizer'); ?>
    </button>
    <p id="iapc_ai_limit_text" class="iapc-help-text">
      <?php
    $iapc_ai_remaining = WC()->session && WC()->session->get('iapc_ai_remaining') !== null
        ? intval(WC()->session->get('iapc_ai_remaining'))
        : IAPC_AI_MAX_IMAGES;
    echo esc_html(
        sprintf(
            /* translators: 1: max AI images, 2: remaining count */
            __('You can generate up to %1$d AI images. %2$d remaining.', 'idesoftbcn-ai-product-customizer'),
            IAPC_AI_MAX_IMAGES,
            $iapc_ai_remaining
        )
    );
    ?>
    </p>

    <hr class="iapc-panel-divider">

    <button type="button" id="iapc_open_guided_ai" class="iapc-btn iapc-btn-full">
      <?php esc_html_e('Guided AI', 'idesoftbcn-ai-product-customizer'); ?>
    </button>

    <div id="iapc_ai_history" class="iapc-ai-history"></div>



    <div id="iapc_ai_adjust_block" class="iapc-ai-adjust-block iapc-controls-disabled">
    <p class="iapc-panel-subtitle"><?php esc_html_e('Adjust AI image', 'idesoftbcn-ai-product-customizer'); ?></p>

    <div id="iapc_ai_image_options" class="iapc-ai-image-options">
      <div class="iapc-fields-2">
        <div class="iapc-field">
          <label for="iapc_ai_image_size"><?php esc_html_e('Size', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_ai_image_size" min="40" max="600" value="100" disabled>
        </div>

        <div class="iapc-field">
          <label for="iapc_ai_image_rotation"><?php esc_html_e('Rotation', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_ai_image_rotation" min="-180" max="180" value="0" disabled>
        </div>
      </div>

      <div class="iapc-field">
        <label for="iapc_ai_image_layer"><?php esc_html_e('Layer', 'idesoftbcn-ai-product-customizer'); ?></label>
        <select id="iapc_ai_image_layer" disabled>
          <option value="behind"><?php esc_html_e('Behind text', 'idesoftbcn-ai-product-customizer'); ?></option>
          <option value="front"><?php esc_html_e('In front of text', 'idesoftbcn-ai-product-customizer'); ?></option>
        </select>
      </div>

      <div class="iapc-fields-2">
        <div class="iapc-field">
          <label for="iapc_ai_image_x"><?php esc_html_e('Move X', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_ai_image_x" min="0" max="100" value="50" disabled>
        </div>

        <div class="iapc-field">
          <label for="iapc_ai_image_y"><?php esc_html_e('Move Y', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_ai_image_y" min="0" max="100" value="45" disabled>
        </div>
      </div>
    </div>
    </div>

    <button type="button" id="iapc_clear_ai" class="iapc-btn iapc-btn-full iapc-hidden">
      <?php esc_html_e('Remove AI image', 'idesoftbcn-ai-product-customizer'); ?>
    </button>

  </div>
</section>
<?php endif; ?>

<section class="iapc-card iapc-card-text iapc-canva-panel <?php echo $ai_premium_active ? '' : 'iapc-active'; ?>"
  data-panel-content="text">

  <div id="iapc_text_options" class="iapc-options">
    <p class="iapc-panel-intro"><?php esc_html_e('Add and style text on your product.', 'idesoftbcn-ai-product-customizer'); ?></p>

    <div class="iapc-field iapc-field-full">
      <label for="iapc_text"><?php esc_html_e('Text', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="text" id="iapc_text" name="iapc_text"
        placeholder="<?php esc_attr_e('Write your text here', 'idesoftbcn-ai-product-customizer'); ?>" maxlength="80">
    </div>

    <div class="iapc-fields-2">
      <div class="iapc-field">
        <label for="iapc_font"><?php esc_html_e('Font', 'idesoftbcn-ai-product-customizer'); ?></label>
        <select id="iapc_font" name="iapc_font">
          <option value="Arial">Arial</option>
          <option value="Georgia">Georgia</option>
          <option value="Courier New">Courier New</option>
          <option value="Verdana">Verdana</option>
          <option value="Trebuchet MS">Trebuchet MS</option>
          <option value="Tahoma">Tahoma</option>
          <option value="Tahoma">Tahoma</option>
          <option value="Times New Roman">Times New Roman</option>
          <option value="Impact">Impact</option>
          <option value="Comic Sans MS">Comic Sans MS</option>
          <option value="Lucida Sans Unicode">Lucida Sans</option>
          <option value="Palatino Linotype">Palatino</option>
          <option value="Garamond">Garamond</option>
          <option value="Book Antiqua">Book Antiqua</option>
          <option value="Arial Black">Arial Black</option>
          <option value="Century Gothic">Century Gothic</option>
          <option value="Franklin Gothic Medium">Franklin Gothic</option>
          <option value="Candara">Candara</option>
          <option value="Calibri">Calibri</option>
          <option value="Cambria">Cambria</option>
          <option value="Consolas">Consolas</option>
        </select>
      </div>

      <div class="iapc-field">
        <label for="iapc_color"><?php esc_html_e('Color', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="color" id="iapc_color" name="iapc_color" value="#000000">
      </div>
    </div>

    <div class="iapc-field">
      <label for="iapc_font_size"><?php esc_html_e('Text size', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="range" id="iapc_font_size" name="iapc_font_size" min="14" max="90" value="26">
    </div>

    <p class="iapc-panel-subtitle"><?php esc_html_e('Text style', 'idesoftbcn-ai-product-customizer'); ?></p>

    <div class="iapc-inline-checks">
      <label><input type="checkbox" id="iapc_bold" name="iapc_bold" value="yes">
        <?php esc_html_e('Bold', 'idesoftbcn-ai-product-customizer'); ?></label>
      <label><input type="checkbox" id="iapc_italic" name="iapc_italic" value="yes">
        <?php esc_html_e('Italic', 'idesoftbcn-ai-product-customizer'); ?></label>
    </div>

    <div class="iapc-fields-2">
      <div class="iapc-field">
        <label for="iapc_text_align"><?php esc_html_e('Alignment', 'idesoftbcn-ai-product-customizer'); ?></label>
        <select id="iapc_text_align" name="iapc_text_align">
          <option value="center"><?php esc_html_e('Center', 'idesoftbcn-ai-product-customizer'); ?></option>
          <option value="left"><?php esc_html_e('Left', 'idesoftbcn-ai-product-customizer'); ?></option>
          <option value="right"><?php esc_html_e('Right', 'idesoftbcn-ai-product-customizer'); ?></option>
        </select>
      </div>

      <div class="iapc-field">
        <label for="iapc_text_spacing"><?php esc_html_e('Letter spacing', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_text_spacing" name="iapc_text_spacing" min="0" max="20" value="0">
      </div>
    </div>

    <div class="iapc-field">
      <label for="iapc_text_curve"><?php esc_html_e('Curve text', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="range" id="iapc_text_curve" name="iapc_text_curve" min="-100" max="100" value="0">
    </div>

    <div class="iapc-fields-2">
      <div class="iapc-field">
        <label for="iapc_pos_x"><?php esc_html_e('Move X', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_pos_x" name="iapc_pos_x" min="0" max="100" value="50">
      </div>

      <div class="iapc-field">
        <label for="iapc_pos_y"><?php esc_html_e('Move Y', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_pos_y" name="iapc_pos_y" min="0" max="100" value="55">
      </div>
    </div>

    <button type="button" id="iapc_add_text" class="iapc-btn iapc-btn-full">
      <?php esc_html_e('Add text', 'idesoftbcn-ai-product-customizer'); ?>
    </button>
  </div>
</section>

<section class="iapc-card iapc-card-paint iapc-canva-panel" data-panel-content="paint">

  <div class="iapc-options">
    <p class="iapc-panel-intro"><?php esc_html_e('Draw freehand on the design area.', 'idesoftbcn-ai-product-customizer'); ?></p>

    <div class="iapc-field">
      <label for="iapc_brush_color"><?php esc_html_e('Color', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="color" id="iapc_brush_color" value="#000000">
    </div>

    <div class="iapc-field">
      <label for="iapc_brush_size"><?php esc_html_e('Brush size', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="range" id="iapc_brush_size" min="2" max="40" value="8">
    </div>

    <div class="iapc-field">
      <label for="iapc_brush_opacity"><?php esc_html_e('Opacity', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="range" id="iapc_brush_opacity" min="10" max="100" value="100">
    </div>

    <div class="iapc-fields-2 iapc-paint-mode-row">
      <button type="button" id="iapc_enable_paint"><?php esc_html_e('Enable brush', 'idesoftbcn-ai-product-customizer'); ?></button>
      <button type="button" id="iapc_eraser_paint"><?php esc_html_e('Eraser', 'idesoftbcn-ai-product-customizer'); ?></button>
    </div>

    <button type="button" id="iapc_undo_paint"><?php esc_html_e('Undo last stroke', 'idesoftbcn-ai-product-customizer'); ?></button>
    <button type="button" id="iapc_clear_paint"><?php esc_html_e('Clear drawing', 'idesoftbcn-ai-product-customizer'); ?></button>
  </div>
</section>

<section class="iapc-card iapc-card-image iapc-canva-panel" data-panel-content="image">

  <p class="iapc-panel-intro"><?php esc_html_e('Upload your own image and place it.', 'idesoftbcn-ai-product-customizer'); ?></p>

  <div id="iapc_image_options" class="iapc-options">
    <div class="iapc-field iapc-field-full">
      <label for="iapc_image"><?php esc_html_e('Upload image', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="file" id="iapc_image" name="iapc_image" accept="image/png,image/jpeg,image/webp">
      <p id="iapc_image_filename" class="iapc-file-name" hidden></p>
      <p class="iapc-help-text"><?php esc_html_e('JPG, PNG or WEBP. Maximum: 3 MB.', 'idesoftbcn-ai-product-customizer'); ?></p>
    </div>

    <hr class="iapc-panel-divider">

    <p class="iapc-panel-subtitle"><?php esc_html_e('Adjust image', 'idesoftbcn-ai-product-customizer'); ?></p>

    <div id="iapc_image_edit_options" class="iapc-image-edit-options">
      <div class="iapc-fields-2">
        <div class="iapc-field">
          <label for="iapc_image_size"><?php esc_html_e('Size', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_image_size" name="iapc_image_size" min="40" max="600" value="100">
        </div>

        <div class="iapc-field">
          <label for="iapc_image_rotation"><?php esc_html_e('Rotation', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_image_rotation" name="iapc_image_rotation" min="-180" max="180" value="0">
        </div>
      </div>

      <div class="iapc-field">
        <label for="iapc_image_layer"><?php esc_html_e('Layer', 'idesoftbcn-ai-product-customizer'); ?></label>
        <select id="iapc_image_layer" name="iapc_image_layer">
          <option value="behind"><?php esc_html_e('Behind text', 'idesoftbcn-ai-product-customizer'); ?></option>
          <option value="front"><?php esc_html_e('In front of text', 'idesoftbcn-ai-product-customizer'); ?></option>
        </select>
      </div>

      <div class="iapc-fields-2">
        <div class="iapc-field">
          <label for="iapc_image_x"><?php esc_html_e('Move X', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_image_x" name="iapc_image_x" min="0" max="100" value="50">
        </div>

        <div class="iapc-field">
          <label for="iapc_image_y"><?php esc_html_e('Move Y', 'idesoftbcn-ai-product-customizer'); ?></label>
          <input type="range" id="iapc_image_y" name="iapc_image_y" min="0" max="100" value="45">
        </div>
      </div>
    </div>

  </div>
</section>

<section class="iapc-card iapc-card-sticker iapc-canva-panel" data-panel-content="sticker">

  <div id="iapc_sticker_options" class="iapc-options">
    <p class="iapc-panel-intro"><?php esc_html_e('Choose a sticker and position it.', 'idesoftbcn-ai-product-customizer'); ?></p>

    <p class="iapc-help-text iapc-help-text-top">
      <?php esc_html_e('Use only stickers created by you or properly licensed.', 'idesoftbcn-ai-product-customizer'); ?>
    </p>

    <div class="iapc-field">
      <label for="iapc_sticker"><?php esc_html_e('Included sticker', 'idesoftbcn-ai-product-customizer'); ?></label>
      <select id="iapc_sticker" name="iapc_sticker">
        <option value=""><?php esc_html_e('Select a sticker', 'idesoftbcn-ai-product-customizer'); ?></option>
        <?php foreach (iapc_get_custom_stickers() as $iapc_key => $iapc_data) : ?>
        <option value="<?php echo esc_attr($iapc_key); ?>"><?php echo esc_html($iapc_data['label']); ?></option>
        <?php endforeach; ?>
      </select>
    </div>

    <div class="iapc-field">
      <label for="iapc_custom_sticker"><?php esc_html_e('Upload your own sticker', 'idesoftbcn-ai-product-customizer'); ?></label>
      <input type="file" id="iapc_custom_sticker" name="iapc_custom_sticker" accept="image/png,image/jpeg,image/webp">
      <p class="iapc-help-text"><?php esc_html_e('JPG, PNG or WEBP. No SVG. Maximum: 3 MB.', 'idesoftbcn-ai-product-customizer'); ?></p>
    </div>

    <div class="iapc-field">
      <label>
        <input type="checkbox" id="iapc_rights_confirm" name="iapc_rights_confirm" value="yes">
        <?php esc_html_e('I confirm that I own the rights or license.', 'idesoftbcn-ai-product-customizer'); ?>
      </label>
    </div>

    <input type="hidden" id="iapc_has_custom_sticker" name="iapc_has_custom_sticker" value="no">

    <div class="iapc-fields-2">
      <div class="iapc-field">
        <label for="iapc_sticker_size"><?php esc_html_e('Size', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_sticker_size" name="iapc_sticker_size" min="30" max="180" value="80">
      </div>

      <div class="iapc-field">
        <label for="iapc_sticker_rotation"><?php esc_html_e('Rotation', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_sticker_rotation" name="iapc_sticker_rotation" min="-180" max="180" value="0">
      </div>
    </div>

    <div class="iapc-field">
      <label for="iapc_sticker_layer"><?php esc_html_e('Layer', 'idesoftbcn-ai-product-customizer'); ?></label>
      <select id="iapc_sticker_layer" name="iapc_sticker_layer">
        <option value="behind"><?php esc_html_e('Behind text', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="front"><?php esc_html_e('In front of text', 'idesoftbcn-ai-product-customizer'); ?></option>
      </select>
    </div>

    <div class="iapc-fields-2">
      <div class="iapc-field">
        <label for="iapc_sticker_x"><?php esc_html_e('Move X', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_sticker_x" name="iapc_sticker_x" min="0" max="100" value="50">
      </div>

      <div class="iapc-field">
        <label for="iapc_sticker_y"><?php esc_html_e('Move Y', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_sticker_y" name="iapc_sticker_y" min="0" max="100" value="45">
      </div>
    </div>

    <button type="button" id="iapc_add_sticker" class="iapc-btn iapc-btn-full">
      <?php esc_html_e('Add sticker', 'idesoftbcn-ai-product-customizer'); ?>
    </button>
  </div>
</section>

<section class="iapc-card iapc-card-graphic iapc-canva-panel" data-panel-content="graphic">

  <div class="iapc-options">
    <p class="iapc-panel-intro"><?php esc_html_e('Add graphic shapes to your design.', 'idesoftbcn-ai-product-customizer'); ?></p>

    <?php if (!$ai_premium_active) : ?>
    <?php endif; ?>
    <div class="iapc-field">
      <label for="iapc_graphic"><?php esc_html_e('Included element', 'idesoftbcn-ai-product-customizer'); ?></label>
      <select id="iapc_graphic" name="iapc_graphic">
        <option value="Arrow 2"><?php esc_html_e('Arrow Left', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="Arrow"><?php esc_html_e('Arrow Right', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="Circle"><?php esc_html_e('Circle', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="HorizontalLine"><?php esc_html_e('Horizontal Line', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="VerticalLine"><?php esc_html_e('Vertical Line', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="Triangle"><?php esc_html_e('Triangle', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="Square"><?php esc_html_e('Square', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="Rectangle"><?php esc_html_e('Rectangle', 'idesoftbcn-ai-product-customizer'); ?></option>
      </select>
    </div>

    <div class="iapc-fields-2">
      <div class="iapc-field">
        <label for="iapc_graphic_size"><?php esc_html_e('Size', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_graphic_size" name="iapc_graphic_size" min="30" max="250" value="90">
      </div>

      <div class="iapc-field">
        <label for="iapc_graphic_rotation"><?php esc_html_e('Rotation', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_graphic_rotation" name="iapc_graphic_rotation" min="-180" max="180" value="0">
      </div>
    </div>

    <div class="iapc-field">
      <label for="iapc_graphic_layer"><?php esc_html_e('Layer', 'idesoftbcn-ai-product-customizer'); ?></label>
      <select id="iapc_graphic_layer" name="iapc_graphic_layer">
        <option value="behind"><?php esc_html_e('Behind text', 'idesoftbcn-ai-product-customizer'); ?></option>
        <option value="front"><?php esc_html_e('In front of text', 'idesoftbcn-ai-product-customizer'); ?></option>
      </select>
    </div>

    <div class="iapc-fields-2">
      <div class="iapc-field">
        <label for="iapc_graphic_x"><?php esc_html_e('Move X', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_graphic_x" name="iapc_graphic_x" min="0" max="100" value="50">
      </div>

      <div class="iapc-field">
        <label for="iapc_graphic_y"><?php esc_html_e('Move Y', 'idesoftbcn-ai-product-customizer'); ?></label>
        <input type="range" id="iapc_graphic_y" name="iapc_graphic_y" min="0" max="100" value="45">
      </div>
    </div>

    <button type="button" id="iapc_add_graphic" class="iapc-btn iapc-btn-full">
      <?php esc_html_e('Add element', 'idesoftbcn-ai-product-customizer'); ?>
    </button>
  </div>
</section>
