{# @var product \craft\commerce\elements\Product #}

{% extends "commerce/_layouts/cp" %}

{% set selectedSubnavItem = "products" %}
{% set bodyClass = (bodyClass is defined ? bodyClass~' ' : '') ~ "commerceproducts commerceproductsedit" %}

{% set crumbs = [
    { label: "Products"|t('commerce'), url: url('commerce/products') },
    { label: productType.name|t('commerce'), url: url('commerce/products/'~productType.handle) }
] %}

{% set fullPageForm = true %}
{% set saveShortcutRedirect = continueEditingUrl %}
{% do view.setIsDeltaRegistrationActive(true) %}

{% set formActions = [
  {
    label: 'Save and continue editing'|t('commerce'),
    redirect: continueEditingUrl|hash,
    shortcut: true,
    retainScroll: true,
  }
] %}
{% if product.id %}
  {% set formActions = formActions|push({
    label: 'Save as a new {type}'|t('app', { type: product.lowerDisplayName() }),
    redirect: '{cpEditUrl}'|hash,
    action: 'commerce/products/duplicate-product'
  }) %}
  {% set formActions = formActions|push({
    action: 'commerce/products/delete-product',
    confirm: 'Are you sure you want to delete this product?'|t('commerce'),
    redirect: 'commerce/products'|hash,
    label: 'Delete'|t('commerce'),
    destructive: true,
  }) %}
{% endif %}

{% import "_includes/forms" as forms %}
{% import "commerce/products/_fields" as productFields %}

{% block header %}
  <div class="flex flex-nowrap">
    {{ block('pageTitle') }}
    {{ block('contextMenu') }}
  </div>
  <div class="flex">
    {% if showPreviewBtn or shareUrl is defined %}
      <div class="btngroup">
        {% if showPreviewBtn %}
          <div id="preview-btn" class="btn livepreviewbtn">{{ 'Preview'|t('app') }}</div>
        {% endif %}
        {% if shareUrl is defined %}
          <a id="share-btn" href="{{ shareUrl }}" class="btn sharebtn" target="_blank">{{ 'View'|t('app') }}</a>
        {% endif %}
      </div>
    {% endif %}

    {{ block('actionButton') }}
  </div>
{% endblock %}


{% block contextMenu %}
    {% if craft.app.getIsMultiSite() %}
        <div class="btn menubtn sitemenubtn" data-icon="world">{{ product.site.name|t('site') }}</div>
        <div class="menu">
            <ul class="padded">
                {% for siteId in siteIds %}
                    {% set site = craft.app.sites.getSiteById(siteId) %}
                    {% set status = siteId in enabledSiteIds ? 'enabled' : 'disabled' %}
                    <li>
                        {% if siteId == product.siteId %}
                            <a class="sel" data-site-id="{{ siteId }}">
                                <div class="status {{ status }}"></div>{{ site.name|t('site') }}
                            </a>
                        {% else %}
                            {% set url = url("commerce/products/#{productTypeHandle}/#{craft.app.request.getSegment(4)}/#{site.handle}") %}
                            <a href="{{ url }}" data-site-id="{{ siteId }}">
                                <div class="status {{ status }}"></div>{{ site.name|t('site') }}
                            </a>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endblock %}


{% block actionButton %}
    <div id="save-btn-container" class="btngroup submit">
      <button type="submit" class="btn submit">{{ 'Save'|t('commerce') }}</button>
      {% if formActions|length %}
        <button type="button" class="btn submit menubtn" aria-lable="{{ 'Actions'|t('commerce') }}"></button>
        {% include '_layouts/components/form-action-menu' %}
      {% endif %}
    </div>
{% endblock %}


{% block content %}
    <input type="hidden" name="action" value="commerce/products/save-product">
    <input type="hidden" name="typeId" value="{{ productType.id }}">
    {% if product.id %}<input type="hidden" name="productId"
                              value="{{ product.id }}">{% endif %}
    {% if craft.app.getIsMultiSite() %}
        <input type="hidden" name="siteId" value="{{ product.siteId }}">
    {% endif %}
    {{ redirectInput('commerce/products') }}
    {{ csrfInput() }}

    <div id="fields">
        {{ fieldsHtml|raw }}
    </div>

    {% hook "cp.commerce.product.edit.content" %}
{% endblock %}


{% block details %}
<div class="meta">
    {{ productFields.generalMetaFields(product) }}

    {{ forms.lightswitchField({
        label: "Enabled"|t('commerce'),
        id: 'enabled',
        name: 'enabled',
        on: product.enabled
    }) }}

    {% if craft.app.getIsMultiSite() %}
        {{ forms.lightswitchField({
            label: "Enabled for site"|t('commerce'),
            id: 'enabledForSite',
            name: 'enabledForSite',
            on: product.enabledForSite
        }) }}
    {% endif %}
</div>

<div class="meta">
    {{ productFields.behavioralMetaFields(product) }}
</div>

{% if not productType.hasVariants %}
    {% namespace 'variants['~(product.defaultVariant.id ?: 'new1')~']' %}
        <input class="default-input" type="hidden"
             name="isDefault"
             value="1">
        <div class="meta">
            {{ productFields.generalVariantFields(product.defaultVariant, product) }}
        </div>
        {% if productType.hasDimensions %}
            <div class="meta">
                {{ productFields.dimensionVariantFields(product.defaultVariant) }}
            </div>
        {% endif %}
    {% endnamespace %}
{% endif %}

{% if product.id %}
  <div class="meta">
    {# Related Sales #}
    {# TODO allow viewing of sales when a view promotions permission is introduced #}
    {% if currentUser.can('commerce-managePromotions') and not craft.app.request.isAjax %}
      {{ productFields.relatedSales(product.defaultVariant.id, productType.hasVariants) }}
      {{ productFields.relatedDiscounts(product.defaultVariant.id, product.defaultVariant) }}
    {% endif %}
    <div class="data">
      <h5 class="heading">{{ "Date Created"|t('commerce') }}</h5>
      <div class="value">{{ product.dateCreated|date('short') }} {{ product.dateCreated|time('short') }}</div>
    </div>
    <div class="data">
      <h5 class="heading">{{ "Date Updated"|t('commerce') }}</h5>
      <div class="value">{{ product.dateUpdated|date('short') }} {{ product.dateUpdated|time('short') }}</div>
    </div>
  </div>
  {% hook "cp.commerce.product.edit.details" %}
{% endif %}
{% endblock %}

{% if not product.slug %}
  {% js %}
      window.slugGenerator = new Craft.SlugGenerator('#title', '#slug');
  {% endjs %}
{% elseif product.id %}
  {% js %}
      new Craft.Commerce.ProductEdit({
        id: {{ product.id|raw }},
        hasVariants: {{ productType.hasVariants ? 'true' : 'false' }},
        purchasables: {{ product.getVariants()|map(v => {id: v.id, title: v.title, sku: v.sku})|json_encode|raw }}
      });
  {% endjs %}
{% endif %}