name = "theme-extension"
type = "theme"

{% liquid
  assign product = block.settings.product
  assign current_variant = product.selected_or_first_available_variant
%}

{% if product.selling_plan_groups.size > 0 %}
  <div class="shopify_subscriptions_app_container" 
       data-section-id='{{ section.id }}' 
       data-product-id='{{ product.id }}'>
    <script src="{{ 'app-block.js' | asset_url }}" defer></script>
    <link href="{{ 'styles.css' | asset_url }}" rel='stylesheet' type="text/css"/>
    
    {% for variant in product.variants %}
      {% if variant.selling_plan_allocations.size > 0 %}
        <section data-variant-id='{{ variant.id }}' 
                 class='shopify_subscriptions_app_block {% if variant.id != current_variant.id %}shopify_subscriptions_app_block--hidden{% endif %}'>
          <fieldset class="shopify_subscriptions_fieldset">
            <div style='border-color:{{ block.settings.dividers_color }}; 
                        background: {{ block.settings.bacgkround_color }}; 
                        border-radius: {{ block.settings.border_radius }}px;'>
              
              {% unless product.requires_selling_plan %}
                <div class='shopify_subscriptions_purchase_option_wrapper'>
                  <label>
                    <input
                      type='radio'
                      name="purchaseOption_{{ section.id }}_{{ variant.id }}"
                      class='shopify_subscriptions_app_block_one_time_purchase_option'
                      id='{{ block.id }}_one_time_purchase'
                      data-radio-type='one_time_purchase'
                      data-variant-id='{{ variant.id }}'
                      checked
                    />
                    {{ 'product.purchase_options.one_time_purchase' | t }}
                  </label>
                  <div class='shopify_subscriptions_in_widget_price'>
                    {{ variant.price | money_with_currency }}
                  </div>
                </div>
              {% endunless %}
              
              {% assign group_ids = variant.selling_plan_allocations | map: 'selling_plan_group_id' | uniq %}
              {% for group_id in group_ids %}
                {% assign group = product.selling_plan_groups | where: 'id', group_id | first %}
                {% assign allocations = variant.selling_plan_allocations | where: 'selling_plan_group_id', group_id %}
                
                <div class='shopify_subscriptions_app_block_label'>
                  <div class='shopify_subscriptions_purchase_option_wrapper'>
                    <label>{{ group.name }}</label>
                    <div class='shopify_subscriptions_in_widget_price allocation_price' 
                         id='{{ block.id }}_{{ group_id }}_{{ variant.id }}_allocation_price'>
                      {{ allocations.first.price | money_with_currency }}
                    </div>
                  </div>
                  
                  <ul class='shopify_subscriptions_app_block_label_children'>
                    {% for allocation in allocations %}
                      <li>
                        <label>
                          <input
                            type='radio'
                            name="purchaseOption_{{ section.id }}_{{ variant.id }}"
                            data-radio-type='selling_plan'
                            data-selling-plan-id='{{ allocation.selling_plan.id }}'
                            data-variant-price='{{ allocation.price | money_with_currency | escape }}'
                          />
                          {{ allocation.selling_plan.name }}
                        </label>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              {% endfor %}
            </div>
          </fieldset>
        </section>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

(function() {
  // Handle variant changes
  function onVariantChange(variantId) {
    // Hide all subscription blocks
    document.querySelectorAll('.shopify_subscriptions_app_block').forEach(block => {
      block.classList.add('shopify_subscriptions_app_block--hidden');
    });
    
    // Show block for selected variant
    const variantBlock = document.querySelector(
      `[data-variant-id="${variantId}"]`
    );
    if (variantBlock) {
      variantBlock.classList.remove('shopify_subscriptions_app_block--hidden');
    }
  }
  
  // Handle selling plan selection
  function onSellingPlanChange(event) {
    const input = event.target;
    const sellingPlanId = input.dataset.sellingPlanId;
    const variantPrice = input.dataset.variantPrice;
    
    // Update form hidden input
    const form = input.closest('form');
    let sellingPlanInput = form.querySelector('input[name="selling_plan"]');
    
    if (!sellingPlanInput) {
      sellingPlanInput = document.createElement('input');
      sellingPlanInput.type = 'hidden';
      sellingPlanInput.name = 'selling_plan';
      form.appendChild(sellingPlanInput);
    }
    
    if (input.dataset.radioType === 'selling_plan') {
      sellingPlanInput.value = sellingPlanId;
      updatePriceDisplay(variantPrice);
    } else {
      sellingPlanInput.value = '';
    }
  }
  
  // Update displayed price
  function updatePriceDisplay(price) {
    const priceElement = document.querySelector('.product-price');
    if (priceElement) {
      priceElement.textContent = price;
    }
  }
  
  // Initialize
  document.addEventListener('DOMContentLoaded', function() {
    // Listen for variant changes
    const variantSelector = document.querySelector('[name="id"]');
    if (variantSelector) {
      variantSelector.addEventListener('change', (e) => {
        onVariantChange(e.target.value);
      });
    }
    
    // Listen for selling plan selection
    document.querySelectorAll('[data-radio-type]').forEach(input => {
      input.addEventListener('change', onSellingPlanChange);
    });
  });
})();

.shopify_subscriptions_app_container {
  margin: 1rem 0;
}

.shopify_subscriptions_fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.shopify_subscriptions_app_block {
  display: block;
}

.shopify_subscriptions_app_block--hidden {
  display: none;
}

.shopify_subscriptions_purchase_option_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.shopify_subscriptions_purchase_option_wrapper label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 500;
}

.shopify_subscriptions_app_block_label {
  border-bottom: 1px solid var(--divider-color);
}

.shopify_subscriptions_app_block_label:last-child {
  border-bottom: none;
}

.shopify_subscriptions_app_block_label_children {
  list-style: none;
  padding: 0 1rem 1rem 2rem;
  margin: 0;
}

.shopify_subscriptions_app_block_label_children li {
  padding: 0.5rem 0;
}

.shopify_subscriptions_app_block_label_children label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.shopify_subscriptions_in_widget_price {
  font-weight: 600;
  color: var(--color-sale);
}

.allocation_price {
  font-size: 0.9em;
}

/* Radio button styling */
input[type="radio"] {
  accent-color: var(--color-primary);
  cursor: pointer;
}

{
  "product": {
    "purchase_options": {
      "one_time_purchase": "One-time purchase",
      "subscription": "Subscription"
    }
  },
  "policy": {
    "description": "Subscriptions can be paused, skipped, or cancelled at any time from your account."
  }
}