{% extends "merchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block title %}
<title>Development Preview And Finalize</title>
{% endblock title %}

{% block Style %}
 <style>
 .right{
    text-align: right !important;
  }
  .rowhight{
    height:5px !important;
  }
</style>
{% endblock Style %}

{% block MainContent %}


<div class="contents">
  

    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    {% endif %}

<div class="contents">
  <form method="post" id="personForm" data-cities-url="" novalidate>
    {% csrf_token %}
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-3 fw-bold" style="float: left;">
          {{comment_form.costing_rejection_comment|as_crispy_field}}
        </div> 
          <div class="col-md-3 fw-bold" style="float: right;">
            {{form_status.approval_is_cost_submit_status|as_crispy_field}}
              <button type="submit" class="cus-btn">Submit</button>
          </div> 
    
      </div>
    </div>
  </form>

  <form action="" method="POST" enctype="multipart/form-data" data-cities-url="" id="personForm" autocomplete="off"> {% csrf_token %}
    <div class="table-area mt-2">
      <div class="table-title">
          <div class="card mt-2">
          <div class="row">
            <div class="card-header col-md-6 col-sm-12 fw-bold">
            Style Number - {{style.style_number}}
            </div>
            <div class="col-md-6 card-header right">
            <a href="{% url 'merchant_materials_preview' style.id %}">
                  <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                      <i class="fa fa-plus-circle" aria-hidden="true"></i>
                      GO To Materials
                  </button>
              </a>
            </div>
          </div>
              <div class="card-body">
              <div class="row">
                  <div class="col-md-6 ">
                  <table class="table table-bordered">
                      <tbody>
                      <tr>
                          <th scope="row" class="fw-bold">Fabrics</th>
                          <td>$ {{fabric_description.total_fabric_cost|floatformat:3}}</td> 
                      </tr>
                      
                      <tr>
                          <th scope="row" class="fw-bold">Accessories</th>
                          <td class="text-capitalize">$ {{fabric_description.grand_total_accessory_cost|floatformat:3}}</td>
                      </tr>
                      <tr>
                          <th scope="row" class="fw-bold">Washing</th>
                          <td>$ {{fabric_description.total_washing_cost|floatformat:3}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Embroidery Cost</th>
                        <td>$ {{embroidery_cost_list.embroidery_cost|floatformat:3}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Print Cost</th>
                        <td>$ {{print_cost_list.print_cost|floatformat:3}}</td>
                      </tr>
                      <tr>
                          <th scope="row" class="fw-bold">CM</th>
                          <td>$ {{fabric_description.total_cm_cost|floatformat:3}}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Commercial Cost</th>
                        <td>$ {{fabric_description.commercial_cost|floatformat:3}}</td>
                      </tr>

                      <tr>
                        <th scope="row" class="fw-bold">Courier Cost</th>
                        <td>$ {{fabric_description.courier_cost|floatformat:3}}</td>
                        </tr>
                      <tr>
                          <th scope="row" class="fw-bold">Profit Margin</th>
                          <td>$ {{fabric_description.profit_margin|floatformat:3}}</td>
                      </tr>

          
                      
                      </tbody>
                  </table>
                  </div>
                  <div class="col-md-6 ">
                  <table class="table table-bordered">
                    <tbody>
                      <tr>
                          <th scope="row" class="fw-bold">Others</th>
                          <td>$ {{fabric_description.others|floatformat:3}}</td>
                      </tr>
                      <tr>
                          <th scope="row" class="fw-bold">Test</th>
                          <td>$ {{fabric_description.test_cost|floatformat:3}}</td>
                      </tr>
                     
                        <tr>
                          <th scope="row" class="fw-bold">Agent Commission 1</th>
                          <td>$ {{fabric_description.agent_commision1|floatformat:3}}</td>
                      </tr>
                      <tr>
                      <th scope="row" class="fw-bold">Agent Commission 2</th>
                      <td>$ {{fabric_description.agent_commision2|floatformat:3}}</td>
                      </tr>
                      
                      <tr>
                          <th scope="row" class="fw-bold">FOB</th>
                          <td>$ {{fabric_description.fob|floatformat:3}}</td>
                      </tr>
                      <tr>
                          <th scope="row" class="fw-bold">CIF</th>
                          <td>$ {{fabric_description.cif|floatformat:3}}</td>
                      </tr>
                      <tr>
                          <th scope="row" class="fw-bold">CNF</th>
                          <td>$ {{fabric_description.cnf|floatformat:3}}</td>
                      </tr>
                      <tr>
                          <th scope="row" class="fw-bold">Landed Cost</th>
                          <td>$ {{fabric_description.landed_cost|floatformat:3}}</td>
                      </tr>
                      <tr>
                      <th scope="row" class="fw-bold">Team</th>
                        <td>
                          {% if team %}
                            {{team}}
                          {% else %}
                            N/A
                          {% endif %}
                        </td>
                      </tr>
                  </tbody>
                  </table>
                  </div>
              </div>
              </div>
          </div>
      </div>
    </div>
      
    <div class="table-area mt-2">
          <div class="table-title">
              <div class="card mt-2">
                  <div class="card-header bg-light fw-bold">
                  Style Description
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-6 ">
                        <table class="table table-bordered">
                          <tbody>
                           <tr>
                              <th scope="row" class="fw-bold">Style Number</th>
                              <td>{{style.style_number}}</td>
                          </tr>
                          <tr>
                              <th scope="row" class="fw-bold">Inquiry Recevie Date</th>
                              <td>{{style.inquiry_recevie_date}}</td>
                          </tr>
                          <tr>
                              <th scope="row" class="fw-bold">Buyer</th>
                              <td>{{style.buyer}}</td>
                             </tr>
                          <tr>
                              <th scope="row" class="fw-bold">Brand</th>
                              <td>
                                {% if style.brand %}
                                    {{style.brand}}
                                {% else %}
                                    N/A
                                {% endif %}
                              </td>
                          </tr>
                          <tr>
                              <th scope="row" class="fw-bold">Style Description</th>
                              <td>{{style.style_description}}</td>
                          </tr>
                          <tr>
                              <th scope="row" class="fw-bold">Approximate Quantity</th>
                              <td>{{style.approx_quantity}}</td>
                          </tr>
                          <tr>
                              <th scope="row" class="fw-bold">Buyer target price</th>
                              <td>{{style.buyer_target_price}}</td>
                          </tr>
                          <tr>
                            <th scope="row" class="fw-bold">Agent</th>
                            <td>
                              {% if style.agent %}
                                  {{style.agent}}
                              {% else %}
                                  N/A
                              {% endif %}
                            </td>
                          </tr>
                          <tr>
                            <th scope="row" class="fw-bold">Season</th>
                            <td>{{style.season}}</td>
                          </tr>
                  
                  
                          <tr>
                              <th scope="row" class="fw-bold">Ex Factory</th>
                              <td>
                                  {% if style.ex_factory %}
                                      {{style.ex_factory}}
                                  {% else %}
                                      N/A
                                  {% endif %}
                              </td>
                          </tr>
                          <tr>
                            <th scope="row" class="fw-bold"> Original Sample Recevied Status</th>
                            <td>
                                {% if style.original_sample_recevied_status %}
                                    {{style.original_sample_recevied_status}}
                                {% else %}
                                    N/A
                                {% endif %}
                            </td>
                        </tr>
                         
                          </tbody>
                        </table>
                      </div>
                  
                      <div class="col-md-6 ">
                        <table class="table table-bordered">
                          <tbody>
                  
                              <tr>
                                  <th scope="row" class="fw-bold">Beneficiary Factory</th>
                                  <td>
                                      {% if style.factory %}
                                          {{style.factory}}
                                      {% else %}
                                          N/A
                                      {% endif %}
                                  </td>
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">MOQ</th>
                                  <td>{{style.moq}}</td>
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">Production Factory</th>
                                  <td>{{style.production_factory}}</td>
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">Folding Method</th>
                                  <td>
                                      {% if style.folding_method %}
                                          {{style.folding_method}}
                                      {% else %}
                                          N/A
                                      {% endif %}
                                  </td>
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">Remarks</th>
                                  <td>
                                      {% if style.remarks %}
                                      {{style.remarks}}
                                  {% else %}
                                      N/A
                                  {% endif %}
                                  </td>
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">Team</th>
                                  <td>
                                    {% if style.team %}
                                        {{style.team}}
                                    {% else %}
                                        N/A
                                    {% endif %}
                                  </td>
                                </tr>
                  
                              <tr>
                                  <th scope="row" class="fw-bold">Minimarker</th>
                                  {% if style.minimarker %}
                                  <td><a  href="{{style.minimarker.url}}" target="_blank"> Download </a></td>
                                  {% else %}
                                  <td>N/A</td>
                                  {% endif %}
                                  
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">Techpack</th>
                                  {% if style.techpack %}
                                  <td><a  href="{{style.techpack.url}}"> Download </a></td>
                                  {% else %}
                                  <td>N/A</td>
                                  {% endif %}
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">Consumption</th>
                                  {% if style.consumption %}
                                  <td><a  href="{{style.consumption.url}}" target="_blank"> Download </a></td>
                                  {% else %}
                                  <td>N/A</td>
                                  {% endif %}
                                  
                              </tr>
                              <tr>
                                  <th scope="row" class="fw-bold">Spec Sheet</th>
                                  {% if style.spec_sheet %}
                                  <td><a  href="{{style.spec_sheet.url}}"> Download </a></td>
                                  {% else %}
                                  <td>N/A</td>
                                  {% endif %}
                              </tr>
                          </tbody>
                        </table>
                      </div>
                  
                    </div>
                  </div>
              </div>
          </div>
    </div>


    {% if fabric_cost_list %}
    <div class="table-area mt-2">
        <div class="table-title">
            <div class="card mt-2">
                <div class="card-header bg-light fw-bold">
                Fabrics Costing
                </div>
                <div class="card-body">
                <div class="row">
                    <div class="col-md-12 table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th class="text-center">SL No</th>
                            <th>Type</th>
                            <th>Name</th>
                            <th>Usages</th>
                            <th>Unit</th>
                            <th>Cost Per Unit</th>
                            <th>Cost per gmt</th>
                            <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for fabric_cost in fabric_cost_list %}
                        <tr>
                            <th scope="row">{{ forloop.counter }}</th>
                            <td>{{fabric_cost.fabric.fabric_application}}</td>
                            <td>{{fabric_cost.fabric.fabric.fabric_name}}</td>
                            <td>{{fabric_cost.fabric.total_uses|floatformat:3}}</td>
                            <td>{{fabric_cost.fabric.unit}}</td>
                            <td>{{fabric_cost.cost_per_unit|floatformat:3}}</td>
                            <td>{{fabric_cost.total_cost|floatformat:3}}</td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    
    {% if accessory_cost_list %}
    <div class="table-area mt-2">
      <div class="table-title">
          <div class="card mt-2">
              <div class="card-header bg-light fw-bold">
              Accessory Costing
              </div>
              <div class="card-body">
              <div class="row">
                  <div class="col-md-12 table-responsive">
                  <table class="table table-bordered">
                      <thead>
                      <tr>
                          <th class="text-center">SL No</th>
                          <th>Name</th>
                          <th>Description</th>
                          <th>Usage</th>
                          <th>Unit</th>
                          <th>Cost Per Unit</th>
                          <th>Cost per gmt</th>
                      </tr>
                      </thead>
                      <tbody>
                      {% for item in accessory_cost_list %}
                      <tr>
                          <th scope="row">{{ forloop.counter }}</th>
                          <td>{{item.accessory.accesory.name}}</td>
                          <td>{{item.accessory.material_description}}</td>
                          <td>{{item.accessory.total_uses|floatformat:3}}</td>
                          <td>{{item.accessory.unit}}</td>
                          <td>{{item.cost_per_unit|floatformat:3}}</td>
                          <td>{{item.total_cost|floatformat:3}}</td>
                      </tr>
                      {% endfor %}
                      </tbody>
                  </table>
                  </div>
              </div>
              </div>
          </div>
          </div>
    </div>
    {% endif %}
    
    {% if washing %}
    <div class="table-area mt-2">
      <div class="table-title">
        <div class="card mt-2">
          <div class="card-header bg-light fw-bold">
            <div class="row">
              <div class="col-md-10">
                Washing costing
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6 ">
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th scope="row" class="fw-bold">Process Cost</th>
                      <td>{{washing.process_cost|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">3D Crinkle</th>
                      <td class="text-capitalize">{{washing.d_crinkle|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Whisker</th>
                      <td>{{washing.whisker|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Destroy</th>
                      <td>{{washing.destroy|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Sand Blasting</th>
                      <td>{{washing.sand_blasting|floatformat:3}}</td>
                    </tr>
                    
                  </tbody>
                </table>
              </div>
              <div class="col-md-6 ">
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th scope="row" class="fw-bold">PP Spray</th>
                      <td>{{washing.pp_spray|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Tagging</th>
                      <td>{{washing.tagging|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Other</th>
                      <td>{{washing.other|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Over Dye</th>
                      <td>{{washing.over_dye|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Cost per gmt</th>
                      <td>{{washing.total_cost|floatformat:3}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    
    {% if embroidery_cost_list %}
    <div class="table-area mt-2">
      <div class="table-title">
        <div class="card mt-2">
          <div class="card-header bg-light fw-bold">
            <div class="row">
              <div class="col-md-10">
                Embroidery costing
              </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12 ">
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th scope="row" class="fw-bold">Embroidery Cost</th>
                      <td>{{embroidery_cost_list.embroidery_cost|floatformat:3}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    
    {% if print_cost_list %}
    <div class="table-area mt-2">
      <div class="table-title">
        <div class="card mt-2">
          <div class="card-header bg-light fw-bold">
            <div class="row">
              <div class="col-md-10">
                Print costing
              </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12 ">
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th scope="row" class="fw-bold">Print Cost</th>
                      <td>{{print_cost_list.print_cost|floatformat:3}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    
    {% if material_test_cost_list %}
    <div class="table-area mt-2">
      <div class="table-title">
        <div class="card mt-2">
          <div class="card-header bg-light fw-bold">
            <div class="row">
              <div class="col-md-10">
                Material Test costing
              </div>
              {% if style.is_cost_submit_status == 'Not Submit' %}
              <div class="col-md-1">
                <a href="{% url 'merchant_costing_preview_material_test_cost_update' material_test_cost_list.id %}">
                  UPDATE
                </a>
              </div>
              <div class="col-md-1">
                <a href="{% url 'merchant_costing_preview_material_test_cost_delete' material_test_cost_list.id %}">
                  DELETE
                </a>
              </div>
              {% endif %}
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6 ">
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th scope="row" class="fw-bold">Fabric Test</th>
                      <td>{{material_test_cost_list.fabric_test_description}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Fabric Test Cost</th>
                      <td class="text-capitalize">{{material_test_cost_list.fabric_test_cost|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Trim Test</th>
                      <td>{{material_test_cost_list.trim_test_description}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Trim Test Cost</th>
                      <td>{{material_test_cost_list.trim_test_cost|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Thread Test</th>
                      <td>{{material_test_cost_list.thread_test_description}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Thread Test Cost</th>
                      <td>{{material_test_cost_list.thread_test_cost|floatformat:3}}</td>
                    </tr>
                    
                  </tbody>
                </table>
              </div>
              <div class="col-md-6 ">
                <table class="table table-bordered">
                  <tbody>
                    <tr>
                      <th scope="row" class="fw-bold">Wash Test</th>
                      <td>{{material_test_cost_list.wash_test_description}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Wash Test Cost</th>
                      <td class="text-capitalize">{{material_test_cost_list.wash_test_cost|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Embroidery Test</th>
                      <td>{{material_test_cost_list.embroidery_test_description}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Embroidery Test Cost</th>
                      <td>{{material_test_cost_list.embroidery_test_cost|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Print Test</th>
                      <td>{{material_test_cost_list.print_test_description}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Print Test Cost</th>
                      <td>{{material_test_cost_list.print_test_cost|floatformat:3}}</td>
                    </tr>
                    <tr>
                      <th scope="row" class="fw-bold">Total Cost Per Gmt ($)</th>
                      <td>{{material_test_cost_list.total_cost_per_gmts|floatformat:3}}</td>
                    </tr>
                    
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    {% if cm_cost %}
    <div class="table-area mt-2">    
    <div class="table-title">
      <div class="card mt-2">
        <div class="card-header bg-light fw-bold">
          <div class="row">
            <div class="col-md-10">
              CM costing
            </div>
            </div>
        </div>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6 ">
              <table class="table table-bordered">
                <tbody>
                  <tr>
                    <th scope="row" class="fw-bold">SMV</th>
                    <td>{{cm_cost.smv|floatformat:3}}</td>
                  </tr>
                  <tr>
                    <th scope="row" class="fw-bold">Efficiency</th>
                    <td class="text-capitalize">{{cm_cost.efficiency|floatformat:3}}</td>
                  </tr>
                  <tr>
                    <th scope="row" class="fw-bold">Number Of Machine</th>
                    <td>{{cm_cost.number_of_machine|floatformat:3}}</td>
                  </tr>
                  <tr>
                    <th scope="row" class="fw-bold">Man Power</th>
                    <td>{{cm_cost.man_power|floatformat:3}}</td>
                  </tr>
                  
                </tbody>
              </table>
            </div>
            <div class="col-md-6 ">
              <table class="table table-bordered">
                <tbody>
                
                  <tr>
                    <th scope="row" class="fw-bold">Target Production Per Minute</th>
                    <td>{{cm_cost.target_production_per_minute|floatformat:3}}</td>
                  </tr>
                  <tr>
                    <th scope="row" class="fw-bold">Machine Cost Per Minute</th>
                    <td>{{cm_cost.machine_cost_per_minute|floatformat:3}}</td>
                  </tr>
                  <tr>
                    <th scope="row" class="fw-bold">Others Cost</th>
                    <td>{{cm_cost.others|floatformat:3}}</td>
                  </tr>
                  <tr>
                    <th scope="row" class="fw-bold">Cost per gmt Per GMTS</th>
                    <td>{{cm_cost.total_cost_per_gmts|floatformat:3}}</td>
                  </tr>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    {% endif %}
    

    {% if fabric_description.commercial_and_other_cost %}
    <div class="table-area mt-2">
        <div class="table-title">
          <div class="card mt-2">
            <div class="card-header bg-light fw-bold">
              <div class="row">
                <div class="col-md-10">
                  Commercial and Other Costing
                </div>
                {% if style.is_cost_submit_status == 'Not Submit' %}
                <div class="col-md-1">
                  <a href="{% url 'merchant_costing_preview_commercial_cost_update' fabric_description.commercial_and_other_cost.id %}">
                    UPDATE
                  </a>
                  </div>
                  <div class="col-md-1">
                    <a href="{% url 'merchant_costing_preview_commercial_cost_delete' fabric_description.commercial_and_other_cost.id %}">
                      DELETE
                    </a>
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6 ">
                  <table class="table table-bordered">
                    <tbody>
                      <tr>
                        <th scope="row" class="fw-bold">Agent Commision 1</th>
                        <td>
                          $ {{ fabric_description.agent_commision1|floatformat:3 }}
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Agent Commision 2</th>
                        <td>
                          $ {{ fabric_description.agent_commision2|floatformat:3 }}
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Commercial cost</th>
                        <td>
                          $ {{ fabric_description.commercial_cost|floatformat:3 }}
                        </td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Profit margin</th>
                        <td>$ {{ fabric_description.profit_margin|floatformat:3 }}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Freight</th>
                        <td>$ {{ fabric_description.commercial_and_other_cost.freight|floatformat:3 }}</td>
                      </tr>
                      
                    </tbody>
                  </table>
                </div>
                <div class="col-md-6 ">
                  <table class="table table-bordered">
                    <tbody>
                      <tr>
                        <th scope="row" class="fw-bold">Insurance</th>
                        <td>$ {{ fabric_description.commercial_and_other_cost.insurance|floatformat:3 }}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Duty</th>
                        <td>$ {{ fabric_description.commercial_and_other_cost.duty|floatformat:3 }}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Courier Cost</th>
                        <td>$ {{ fabric_description.commercial_and_other_cost.courier_cost }}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Others</th>
                        <td>$ {{ fabric_description.commercial_and_other_cost.others|floatformat:3 }}</td>
                      </tr>
                      <tr>
                        <th scope="row" class="fw-bold">Remarks</th>
                        <td>
                          {% if fabric_description.commercial_and_other_cost.remarks %}
                            {{ fabric_description.commercial_and_other_cost.remarks }}
                          {% else %}
                            N/A
                          {% endif %}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
    {% endif %}


    <div class="row" style="margin-top: 30px;">
      <div class="col-md-12 text-center">
      </div>
    </div>
  </form>

</div>
{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}   
{% endblock meassage %}


{% block JS %}

<script src="{% static 'js/merchant_app/query/costing/before_approval/preview/script.js' %}"></script>

{% endblock JS %}