{% extends "::baseAjax.html.twig" %}
{% block ajax_body %}

{% set ob_city_dropdown = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['city']['option']['dropdown']['status'] %}
{% set ob_city_textbox = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['city']['option']['textbox']['status'] %}
{% set ob_state_dropdown = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['state']['option']['dropdown']['status'] %}
{% set ob_state_textbox = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['state']['option']['textbox']['status'] %}
{% set ob_country_dropdown = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['country']['option']['dropdown']['status'] %}
{% set ob_country_textbox = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['country']['option']['textbox']['status'] %}

{% set total=0 %}
{% set charge_total=0 %}
{% set shipping_charge=0 %}
{% set grand_total=0 %}
{% set product_split_tax=0 %}
{% set total_charge_for_current_split=0 %}
{% set total_product_tax_shipping_wise=0 %}
{% set tax_shipping_wise_total=0 %}
{% set size_flg = 0 %}
{% if data|length>0 %}
 
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;"  >
            <tbody>
            <tr>
            <td style="padding: 25px;"></td>
            </tr>
            <tr>
            <td bgcolor="#ffffff"   style="border-radius: 8px;">
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="width: 100%;max-width: 680px;padding: 0 40px;">
                <tbody><tr>
                    <td style="padding: 30px 0; text-align: center;">
                        <img src="https://idmepromotions.com/bundles/officebraincustombundletheme/IdmeTheme/images/logo_new.png" aria-hidden="true" height="100px"  alt="I.D. Me Promotions" border="0" style="height: 100px; background: #ffffff; font-family:  Arial, sans-serif; font-size: 15px; line-height: 20px;  ">
                    </td>
                </tr>
                </tbody></table>
                <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;"  >
                  <tbody>
                    <tr>
                        <td>
                        <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tbody>
                            <tr>
                            <td style="text-align: left; font-family:  Arial, sans-serif; line-height: 1.8">
                                <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width: 100%;padding: 0px 50px;">
                                <tbody>
                                <tr>
                                    <td style="padding: 0 0 30px; color: #2f3235;">
                                      <p style="font-size: 16px; color: #8e9193; margin: 0; line-height: 1.8;">
                                        Order #{{order_no}}
                                      </p>
                                    <h2 style="font-size: 22px; font-weight: normal; margin: 0; line-height: 1.8">
                                      Thanks for your purchase!
                                    </h2>
                                    <p style="font-size: 16px; color: #8e9193; margin: 0; line-height: 1.8;">
                                      We're getting your order ready and we'll notify you when it's shipped.
                                    </p>
                                    </td>
                                </tr>
                                </tbody>
                                </table>
                            </td>
                            </tr>
                            <tr>
                              <td>
                                  <table role="presentation" cellpadding="0" cellspacing="0" style=" width: 100%;padding: 0 40px;" align="center" border="0">
                                  <tbody>
                                  <tr>
                                      <td style="text-align: center; vertical-align: top; direction:ltr; font-size: 0px; padding:20px 0px;">
                                      <div  style="vertical-align: top; display: inline-block; direction:ltr; font-size:13px; text-align:left; width:100%;">
                                          <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                                          <tbody>
                                          
                                          {% for index,product in data %}
                                          {% set sub_total=0.000 %}
										  {% set sub_charge_total=0.000 %}
										  {% set sub_shipping_charge= 0.000 %}
										  {% set sub_grand_total=0.000 %}
										  {% if order.orderItemLine[index].orderProduct|length>0 %}
										  
										  {% set productConfiguration= order.orderItemLine[index].productDetailConfiguration %}
										  {% set sub_total=sub_total+order.orderItemLine[index].itemLineAmount %}
	
              <tr>
                  <td style="word-break: break-word;">
                  <table border="0" width="100%">
                      <thead>
                      <tr>
                      	<td colspan="4" style=" line-height:1.5; color: #2f3235; font-family:Arial, sans-serif; font-size:16px; text-align:left;">
                      		<strong> {{ product.basic_information.title}}</strong>
                      	</td>
                      </tr>
                      <tr>
                      <th width="80" style="border-bottom:1px solid #d9dcdf;padding:15px 0; text-align:left; font-family:Arial, sans-serif; font-size:16px; line-height:22px;">
                          <span style="font-weight: normal">Items</span>
                      </th>
                      <th style="border-bottom:1px solid #d9dcdf;">
                          &nbsp;
                      </th>
                      <th style="border-bottom:1px solid #d9dcdf; padding:15px 0; text-align:right; font-family:Arial, sans-serif; font-size:16px; line-height:22px;">
                          <span style="font-weight: normal">Qty</span>
                      </th>
                      <th style="border-bottom:1px solid #d9dcdf; padding:15px 0; text-align:right; font-family:Arial, sans-serif; font-size:16px; line-height:22px;">
                          <span style="font-weight: normal">Price</span>
                      </th>
                      </tr>
                      </thead>
                      <tbody>
                        		
                          <tr>
                              <td width="64" style="vertical-align: top; padding: 30px 10px 30px 0; width: 64px;">
                                  <div style="border: 1px solid #d9dcdf; border-radius: 3px; width: 64px; height: 64px;">
                                  <img width="64" height="64" style="display: block; width: 64px; height: 64px; object-fit: cover;" src="{{ product.basic_information.default_image_url }}">
                                  </div>
                              </td>
                              <td style="padding: 20px  10px  ; line-height:1.5; color: #2f3235; font-family:Arial, sans-serif; font-size:16px; text-align:left;">
                                  
                                  <div style="color: #8e9193">
                                      {% if productData[index].extra_color|length > 0 %}
                                      {% if productData[index].extra_color.mainColor is defined %}
                                        &nbsp;&nbsp; Colors : 
                                          {% for key,value in productData[index].extra_color.mainColor %}
                                              {% if productData[index].extra_color.mainColor|length == (key+1) %}
                                              {{ value }}
                                            {% else %}
                                                   {{ value~', ' }}
                                                {% endif %}  
                                          {% endfor %}
                                          <br/>
                                        {% else %}
                                          {% for key,value in productData[index].extra_color %}
                                            &nbsp;&nbsp; {{ value.color_type }} Color : {{ value.name }} <br/> 
                                          {% endfor %}
                                      {% endif %} 
                                    {% endif %} 
                                  </div>

                              {%  set colorValue= '' %}
															{%  set sizeArrValue= '' %}
														  {% if product.attributes is defined %}
																{% for attr in product.attributes %}
																{% if attr.id=="11" and attr.values is defined %}
																	{%  set sizeArrValue= attr.values %}
																{% endif %}
																{% if attr.id=="10" %}
																	{%  set colorValue= attr.values %}
																{% endif %}
																{% endfor %}
																										
																{% if sizeArrValue!="" %}
																 <div style="color: #666;">
																{% if productConfiguration.color|length>0 %}
																	
																	{% for prodColorSize in productConfiguration.color %}
																		{% for indx, qty in prodColorSize.quantity %}
																			{% if qty!="" %}
																				{% if(prodColorSize.size is defined) %}
																					 <strong>{{sizeArrValue[prodColorSize.size[indx]]}}&nbsp;:&nbsp;</strong>{{qty}},
																				{% endif %}
																			{% endif %}
																		{% endfor %}
																	{% endfor %}
																  {% endif %}
																	</div>
																{% endif %}
																{% endif %}
                              </td>

                              
                              <td style="width:100px;padding: 20px 10px ; line-height: 1.5; color: #2f3235; font-family:Arial, sans-serif; font-size:16px; text-align:right;">
                                  {{ order.orderItemLine[index].itemQtyTotal }}
                              </td>
                              <td style="padding:  20px 10px  ; line-height: 1.5; color: #2f3235; font-family:Arial, sans-serif; font-size:16px; text-align:right;">
                                  {{ order.orderItemLine[index].currencySymbol }}{{ order.orderItemLine[index].unitPrice|currency }}
                              </td>
                          </tr>
                            {% endif %}
                           
                      </tbody>
                     
                      <tr>
                      <td colspan="3" style="border-top:1px solid #d9dcdf;padding: 30px 0 10px 0; text-align:right; font-family:Arial, sans-serif;font-size:16px;line-height:22px;color:#3d4246;">
                          Subtotal
                      </td>
                      <td style="border-top:1px solid #d9dcdf;padding: 30px 0 10px 0;font-family:Arial, sans-serif;font-size:16px;line-height:22px;text-align:right; color:#3d4246;">
                           {% set sub_total=0.000 %}
                           {% for index,product in data %}
                            {% set sub_charge_total=0.000 %}
                            {% set sub_grand_total=0.000 %}
                            {% if order.orderItemLine[index].orderProduct|length>0 %}
                                {% set sub_total=sub_total+order.orderItemLine[index].itemLineAmount %}
                             {% endif %} 
                             {% endfor %} 
                             ${{ sub_total|currency}} 
                      </td>
                      </tr>
                      {% set sub_shipping_charge =0.000  %}
                      {% for index,product in data %}  
                        {% for i,prod in order.orderItemLine[index].orderProduct %}
                          {% set sub_shipping_charge=sub_shipping_charge+prod.orderShippingDetail.shippingCharge %}
                       {% endfor %}
                    {% endfor %}
                      <tr>
                      <td colspan="3" style="padding: 10px 0 10px 0;text-align:right;font-family:Arial, sans-serif;font-size:16px;line-height:22px; color:#3d4246;">
                          Shipping
                      </td>
                      <td style="padding: 10px 0 10px 0;font-family:Arial, sans-serif;font-size:16px;line-height:22px;text-align:right; color:#3d4246;">
                              ${{ sub_shipping_charge|currency}}
                      </td>
                      </tr>
                      <tr>
                      <td colspan="3" style="padding: 10px 0 10px 0;text-align:right;font-family:Arial, sans-serif;font-size:16px;line-height:22px; color:#3d4246;">
                          Tax
                      </td>
                      <td style="padding: 10px 0 10px 0;font-family:Arial, sans-serif;font-size:16px;line-height:22px;text-align:right; color:#3d4246;">
                              ${{ order.taxTotal|currency}}
                      </td>
                      </tr>
                      <tr>
                      <!--<td colspan="3" style="padding: 10px 0 30px 0;text-align:right;font-family:Arial, sans-serif;font-size:16px;line-height:22px; color:#3d4246;">
                          Taxes
                      </td>-->
                      <!--<td style="padding: 10px 0 30px 0;font-family:Arial, sans-serif;font-size:16px;line-height:22px;text-align:right; color:#3d4246;">
                              $10.00
                      </td>-->
                      </tr>
                      <tr>
                      <td colspan="3" style="border-top:1px solid #d9dcdf; padding: 30px 0 10px 0;text-align:right;font-family:Arial, sans-serif;font-size:16px;line-height:22px; color:#3d4246;">
                          <b>Total</b>
                      </td>
                      <td style="border-top:1px solid #d9dcdf; padding: 30px 0 10px 15px; font-family:Arial, sans-serif; font-size:16px; line-height:22px; text-align:right; color:#3d4246;">
                          <b style="font-size: 18px; white-space: nowrap;"> {{(amount)|currency}}</b>
                      </td>
                      </tr>
                      </tfoot>
                  </table>
                  </td>
              </tr>
              {% endfor %}
              </tbody>
              </table>
          </div>
          </td>
      </tr>
                                  <tr>
                    <td align="center" height="100%" valign="top" width="100%" style="padding: 0px 0 0 0;">
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="  width: 100%;  ">
                        <tbody>
                        <tr>
                            <td valign="top" style="font-size:0;">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tbody>
                                <tr>
                                 {% for index,product in data %} 
                                 {% if loop.first %}
                                {% for i,prod in order.orderItemLine[index].orderProduct %}
                                  
                                <td style="font-family:  Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #8e9193; padding: 20px 0 20px 0; vertical-align: top;" >
                                    <div>
                                    <b style="font-weight: 600; color: #2f3235;">
                                        Shipping address
                                    </b>
                                    </div>
                                        <div>{{ prod.orderShippingDetail.name }}</div>
                                        <div>{{ (prod.orderShippingDetail.street1!='')?(prod.orderShippingDetail.street1)|raw:'' }}
                                              {{ (prod.orderShippingDetail.street2!='')?(prod.orderShippingDetail.street2 )|raw:'' }}<br></div>
                                        <div></div>
                                        <div>{{ (prod.orderShippingDetail.cityName!='')?(prod.orderShippingDetail.cityName~',')|raw:'' }} {{ (prod.orderShippingDetail.stateName!='')? (prod.orderShippingDetail.stateName~',')|raw:'' }}  {{ (prod.orderShippingDetail.zipCode!='')?(' - '~prod.orderShippingDetail.zipCode):'' }}</div>
                                        <div>{{ (prod.orderShippingDetail.countryName!='')?(prod.orderShippingDetail.countryName):'' }}</div>
                                        <div>{{ prod.orderShippingDetail.mobile }}</div>
                                </td>
            
                                {% endfor %}
                                 {% endif %}
                                {% endfor %}
                                <td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #8e9193; padding: 20px 0 20px 0; vertical-align: top;"  >
                                    <div>
                                    <b style="font-weight: 600; color: #2f3235;">
                                        Billing address
                                    </b>
                                    </div>
                                        <div>{{order.orderBillingDetail.name}}</div>
                                        <div> {{order.orderBillingDetail.street1~' '~order.orderBillingDetail.street2}} </div>
                                        <div></div>
                                        <div>{% if ob_city_dropdown %}
                                                            {{ order.orderBillingDetail.cityId|city }},
                                                       {% endif %}
                                              
                                                        {% if ob_city_textbox %}
                                                            {{ order.orderBillingDetail.cityName }},
                                                        {% endif %}, 
                                                      {% if ob_state_textbox %}
                                                        {{ order.orderBillingDetail.stateName }},
                                                         {% elseif ob_state_dropdown %}
                                                              {{ order.orderBillingDetail.stateId|state }},
                                                           {% endif %}  {{order.orderBillingDetail.zipCode}}</div>
                                        <div>{% if ob_country_textbox %}
                                                        {{ order.orderBillingDetail.countryName }}
                                                      {% elseif ob_country_dropdown %}
                                                        {{ order.orderBillingDetail.countryId|country }}
                                                            {% endif %} </div>
                                        <!--<div>(123) 456-7890</div> -->
                                </td>
                                </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                    </tr>
                    <tr>
                    <td align="center" height="100%" valign="top" width="100%" style="padding: 0 0 30px 0;">
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="  width: 100%;">
                        <tbody>
                        <tr>
                            <td valign="top" style="font-size:0;">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tbody>
                                <tr>
                                <td style="font-family:  Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #8e9193; padding: 20px 0 20px 0; vertical-align: top;"  >
                                    <div>
                                    <b style="font-weight: 600; color: #2f3235;">
                                        Tax
                                    </b>
                                    </div>
                                    <div>${{order.taxTotal}}</div>
                                </td>
                                <td style="font-family:  Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #8e9193; padding: 20px 0 20px 0; vertical-align: top;"  >
                                    <div>
                                    <b style="font-weight: 600; color: #2f3235;">
                                        Payment method
                                    </b>
                                    </div>
                                    <div>
                                        {{order.paymentMethod}}
                                    </div>
                                </td>
                                </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>
                    </tr>
                    <tr>
                    <!--<td align="center" height="100%" valign="top" width="100%" style="padding: 0 0 30px 0;">
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="  width: 100%;">
                        <tbody>
                        <tr>
                            <td align="left" valign="top" style="font-size:0;">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="40%" style="margin: 0 !important; padding: 0 0 30px 0;">
                                <tbody>
                                <tr>
                                <td style="font-family:  Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #8e9193; padding: 20px 0 20px 0; vertical-align: top;" width="50%" >
                                    <div>
                                    <strong style="font-weight: 600; color: #2f3235;">
                                        Payment instructions
                                    </strong>
                                    </div>
                                    <div style="white-space: pre-wrap"></div>
                                </td>
                                </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </td>-->
                    </tr>
                                  </tbody>
                                  </table>
                              </td>
                              </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                  </tbody>
                </table>
            </td>
            </tr>
            <tr>
              <td>
                <table width="100%"  >
                    <tbody>
                      <tr>
                        <td style="font-family:   Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #8f99ae; text-align: center; padding: 40px;"  >
                        Questions? Reply to this email or contact us at<br> inforequest@idmepromotions.com<br>
                        <br>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            </tbody>
        </table>														
{% endif %}
{% endblock ajax_body %}