<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="optional_products_modal" name="Optional Products">
        <main class="modal-body">
            <t t-call="sale.product_configurator_configure_optional_products" />
        </main>
    </template>

    <template id="product_configurator_configure" name="Configure">
        <div class="js_product main_product">
            <input type="hidden" class="product_template_id" t-att-value="product.id"/>
            <input type="hidden" class="product_id" t-attf-name="product_id" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'"/>
            <div class="col-lg-12 text-center mt-5">
                <div class="col-lg-5 d-inline-block align-top text-left">
                    <span t-field="product.image" t-options='{"widget": "image", "class": "d-block product_detail_img"}'/>
                </div>
                <div class="col-lg-1 d-inline-block"></div>
                <div class="col-lg-5 d-inline-block text-left">
                    <t t-call="sale.variants" />
                    <h2 class="oe_price product_id mt-3" style="white-space: nowrap;"
                        t-att-data-product-id="product.id"
                        t-esc="product.price if product.price else product.lst_price"
                        t-options='{
                        "widget": "monetary",
                        "display_currency": to_currency
                    }'/>
                    <div class="css_quantity input-group oe_website_spinner">
                        <div class="input-group-prepend">
                            <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                        <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" value="1"/>
                        <div class="input-group-append">
                            <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    <p class="css_not_available_msg bg-danger" style="padding: 15px;">This combination does not exist.</p>
                </div>
            </div>
        </div>
    </template>

    <template id="product_configurator_configure_optional_products">
        <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th class="td-img">Product</th>
                <th></th>
                <th class="text-center td-qty">Quantity</th>
                <th class="text-center td-price">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr class="js_product in_cart main_product">
                <input type="hidden" class="product_template_id" t-att-value="product.product_tmpl_id.id"/>
                <input type="hidden" class="product_id" t-att-value="product.id"/>
                <td class='td-img'>
                <span t-field="product.image_medium" t-options='{"widget": "image" }'/>
                </td>
                <td class='td-product_name'>
                <strong t-field="product.display_name"/>
                <div class="text-muted small">
                    <div t-field="product.description_sale"/>
                    <div class="js_attributes"/>
                </div>
                </td>
                <td class="text-center td-qty">
                <div class="css_quantity input-group oe_website_spinner">
                    <div class="input-group-prepend">
                        <button t-attf-href="#" class="btn btn-primary js_add_cart_json d-none d-md-inline-block" aria-label="Remove one" title="Remove one">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                    <input type="text" class="js_quantity form-control quantity" data-min="1" name="add_qty" value="1"/>
                    <div class="input-group-append">
                        <button t-attf-href="#" class="btn btn-primary float_left js_add_cart_json d-none d-md-inline-block" aria-label="Add one" title="Add one">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                </td>
                <td class="text-center td-price" name="price">
                <ul class="d-none js_add_cart_variants" t-att-data-attribute_exclusions="{'exclusions: []'}"></ul>
                <div class="d-none oe_unchanged_value_ids" t-att-data-unchanged_value_ids="variant_values" ></div>
                <div t-attf-class="text-danger oe_default_price oe_striked_price {{ (compute_currency(product.lst_price) - product.price) &lt; 0.01 and 'd-none' }}"
                    t-field="product.lst_price"
                    t-options='{
                    "widget": "monetary",
                    "from_currency": product.currency_id,
                    "display_currency": to_currency
                }'/>
                <span class="oe_price product_id" style="white-space: nowrap;"
                    t-att-data-product-id="product.id"
                    t-esc="product.price"
                    t-options='{
                    "widget": "monetary",
                    "display_currency": to_currency
                }'/>
                <span class="js_raw_price d-none" t-esc="product.price" />
                </td>
            </tr>
            <tr class="o_total_row">
                <td colspan="2"></td>
                <td class="text-right"><h5>Total:</h5></td>
                <td class="text-center">
                    <span class="js_price_total font-weight-bold" style="white-space: nowrap;"
                        t-att-data-product-id="product.id"
                        t-esc="product.price"
                        t-options='{
                        "widget": "monetary",
                        "display_currency": to_currency
                    }'/>
                </td>
            </tr>
            <tr t-if="product.optional_product_ids" class="o_select_options"><td colspan="4"><h4>Available Options:</h4></td></tr>
            <t t-call="sale.optional_product_items" />
        </tbody>
        </table>
    </template>

    <template id="optional_product_items">
    <t t-foreach="product.optional_product_ids" t-as="product">
        <t t-if="len(product.get_filtered_variants(reference_product)) > 0 or product.has_dynamic_attributes()">
        <tr class="js_product">
        <td class="td-img">
        <input type="hidden" class="product_template_id" t-att-value="product.id"/>
        <input type="hidden" class="product_id" t-attf-name="optional-product-#{product.id}" t-att-value="product.product_variant_id.id if len(product.product_variant_ids) == 1 else '0'"/>
        <input type="hidden" class="product_display_name" t-attf-name="optional-productname-#{product.id}" t-att-value="product.product_variant_id.display_name if len(product.product_variant_ids) == 1 else ''"/>
        <span t-field="product.image_small" t-options='{"widget": "image"}' class="variant_image"/>
        </td>
        <td class='td-product_name' colspan="2">
        <div class="float-left">
            <strong class="product-name" t-field="product.name"/>
            <div class="text-muted small" t-field="product.description_sale"/>
        </div>
        <div class="float-right">
            <t t-call="sale.variants"/>
        </div>
        </td>
        <td class="text-center td-price">
        <span class="text-danger oe_default_price oe_optional"
            t-field="product.lst_price"
            t-options='{
            "widget": "monetary",
            "from_currency": product.currency_id,
            "display_currency": to_currency
          }'/>
        <span class="oe_price" style="white-space: nowrap;"
            t-field="product.price"
            t-options='{
                "widget": "monetary",
                "display_currency": to_currency
          }'/>
        <span class="js_raw_price d-none" t-esc="product.price" />
        <p class="css_not_available_msg bg-danger" style="padding: 5px;">Option not available</p>

        <input type="hidden" class="js_optional_same_quantity" t-attf-name="optional-add-#{product.id}" value="0"/>
        <a role="button" href="#" class="js_add"><i class="fa fa-shopping-cart add-optionnal-item"></i></a>
        <span class="js_remove d-none">
            <span class="optional_product_quantity"><span class="js_item add_qty">1 </span><span class="js_items d-none">5 </span> <span t-field="product.uom_id.sudo().name"/><br/></span>
            <a role="button" href="#" class="js_remove"><i class="fa fa-trash-o remove-optionnal-item"></i></a>
        </span>
        </td>
        </tr>
        </t>
    </t>
    </template>



    <template id="variants">
      <t t-set="attribute_exclusions" t-value="get_attribute_exclusions(product, reference_product)"/>
      <ul t-attf-class="list-unstyled js_add_cart_variants #{ul_class}" t-att-data-attribute_exclusions="json.dumps(attribute_exclusions)">
        <t t-foreach="product.attribute_line_ids.sorted(key=lambda x: x.attribute_id.sequence)" t-as="variant_id">
          <!-- Attributes selection is hidden if there is only one value available and it's not a custom value -->
          <li t-att-data-attribute_id="variant_id.attribute_id.id"
                t-att-data-attribute_name="variant_id.attribute_id.name"
                t-attf-class="variant_attribute #{'d-none' if len(variant_id.product_template_value_ids) == 1 and not variant_id.product_template_value_ids[0].is_custom else ''}">

            <strong t-field="variant_id.attribute_id.name" class="attribute_name" />

            <t t-if="variant_id.attribute_id.type == 'select'">
              <select
                    t-att-data-attribute_id="variant_id.attribute_id.id"
                    t-attf-class="form-control js_variant_change #{variant_id.attribute_id.create_variant}"
                    t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)">
                <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
                  <option t-att-value="value_id.id"
                    t-att-data-value_id="value_id.product_attribute_value_id.id"
                    t-att-data-value_name="value_id.name"
                    t-att-data-attribute_name="value_id.attribute_id.name"
                    t-att-data-is_custom="value_id.is_custom">
                      <span t-field="value_id.name"/>
                      <span t-if="value_id.price_extra">
                        <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
                            "widget": "monetary",
                            "from_currency": product.currency_id,
                            "display_currency": to_currency or website.currency_id
                        }'/>
                      </span>
                  </option>
                </t>
              </select>
            </t>

            <t t-if="variant_id.attribute_id.type == 'radio'">
              <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-unstyled">
                  <t t-set="inc" t-value="0"/>
                  <t t-foreach="variant_id.product_template_value_ids" t-as="value_id">
                      <li class="form-group js_attribute_value" style="margin: 0;">
                          <label class="col-form-label">
                              <div>
                                <input type="radio"
                                    t-attf-class="js_variant_change radio_input #{variant_id.attribute_id.create_variant}"
                                    t-att-checked="'checked' if not inc else None"
                                    t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
                                    t-att-value="value_id.id"
                                    t-att-data-value_id="value_id.product_attribute_value_id.id"
                                    t-att-data-value_name="value_id.name"
                                    t-att-data-attribute_name="value_id.attribute_id.name"
                                    t-att-data-is_custom="value_id.is_custom" />
                                    <div class="radio_input_value">
                                        <span t-field="value_id.name"/>
                                        <span class="badge badge-pill" t-if="value_id.price_extra">
                                            <t t-esc="value_id.price_extra > 0 and '+' or ''"/><span t-field="value_id.price_extra" class="variant_price_extra" style="white-space: nowrap;" t-options='{
                                                "widget": "monetary",
                                                "from_currency": product.currency_id,
                                                "display_currency": to_currency or website.currency_id
                                            }'/>
                                        </span>
                                    </div>
                                </div>
                          </label>
                      </li>
                      <t t-set="inc" t-value="inc+1"/>
                  </t>
              </ul>
            </t>

            <t t-if="variant_id.attribute_id.type == 'color'">
              <ul t-att-data-attribute_id="variant_id.attribute_id.id" class="list-inline">
                  <t t-set="inc" t-value="0"/>
                  <li t-foreach="variant_id.product_template_value_ids" t-as="value_id" class="list-inline-item">
                      <label t-attf-style="background-color:#{value_id.html_color or value_id.name if not value_id.is_custom else ''}"
                          t-attf-class="css_attribute_color #{'active' if not inc else ''} #{'custom_value' if value_id.is_custom else ''}">
                        <input type="radio"
                          t-attf-class="js_variant_change  #{variant_id.attribute_id.create_variant}"
                          t-att-checked="'checked' if not inc else None"
                          t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)"
                          t-att-value="value_id.id"
                          t-att-title="value_id.name"
                          t-att-data-value_id="value_id.product_attribute_value_id.id"
                          t-att-data-value_name="value_id.name"
                          t-att-data-attribute_name="value_id.attribute_id.name"
                          t-att-data-is_custom="value_id.is_custom"/>
                      </label>
                      <t t-set="inc" t-value="inc+1"/>
                  </li>
              </ul>
            </t>

          </li>
        </t>
      </ul>
    </template>
</odoo>
