{%- comment -%}
Creative Oasis Personalizer Widget
Place above buy buttons, inside the buy_buttons case.
Only render for products tagged customizable.
{%- endcomment -%}

<link rel="stylesheet" href="{{ 'personalizer-widget.css' | asset_url }}">

<div id="co-personalizer"
     class="co-personalizer"
     data-app-url="https://app.creativeoasis.ca"
     data-product-handle="{{ product.handle }}"
     data-product-title="{{ product.title | escape }}"
     data-variant-id="{{ product.selected_or_first_available_variant.id }}">
  <div class="co-card">
    <h3>Customize this product</h3>

    <div class="co-field">
      <label for="co_custom_text">Custom text</label>
      <input id="co_custom_text" type="text" maxlength="80" placeholder="Enter your text">
    </div>

    <div class="co-field">
      <label for="co_font_choice">Font choice</label>
      <select id="co_font_choice">
        <option value="Script">Script</option>
        <option value="Modern">Modern</option>
        <option value="Serif">Serif</option>
        <option value="Sans">Sans</option>
        <option value="Elegant Serif">Elegant Serif</option>
        <option value="Classic Roman">Classic Roman</option>
        <option value="Minimal Sans">Minimal Sans</option>
        <option value="Bold Block">Bold Block</option>
        <option value="Handwritten">Handwritten</option>
        <option value="Signature">Signature</option>
        <option value="Monogram">Monogram</option>
        <option value="Stencil">Stencil</option>
      </select>
    </div>

    <div class="co-field">
      <label for="co_notes">Design notes</label>
      <textarea id="co_notes" rows="3" placeholder="Optional notes for customization"></textarea>
    </div>

    <div class="co-field">
      <label for="co_customer_image">Upload image</label>
      <input id="co_customer_image" type="file" accept="image/*">
    </div>

    <div class="co-preview-wrap">
      <div class="co-preview-title">Live preview</div>
      <div class="co-preview" id="co_preview">
        <img id="co_preview_image" alt="" style="display:none;">
        <div id="co_preview_text" class="co-preview-text">Your text preview</div>
      </div>
    </div>

    <div class="co-field co-approval">
      <label>
        <input id="co_approval_checked" type="checkbox">
        I approve this design request and understand production starts from the submitted customization.
      </label>
    </div>

    <div class="co-actions">
      <button type="button" id="co_save_customization">Save customization</button>
      <span id="co_status_message" class="co-status"></span>
    </div>

    <input type="hidden" id="co_personalization_id" value="">
    <input type="hidden" id="co_property_text" value="">
    <input type="hidden" id="co_property_font" value="">
    <input type="hidden" id="co_property_upload" value="">
  </div>
</div>

<script src="{{ 'personalizer-widget.js' | asset_url }}" defer></script>