{% extends "marchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
<title>wip index</title>
{% endblock title %}
{% block Style %}

{% endblock Style %}

{% block MainContent %}


{% 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="table-area" style='margin:20px;'>

  <!-- table-title -->
  <div class="table-title">
    <div class="row">
      <div class="col-md-4">
        <div class="depertment-name">
          <h4>WIP Index</h4>
        </div>
      </div>
    </div>
  </div>
    <div class="tables table-responsive" id="team_List">
        <table class="table  table-striped table-hover">
            <thead>
              <tr>
                <th class="text-center" colspan='16'>General Information</th>
                <th class="text-center" colspan='5'>Materials Approvals</th>
                <th class="text-center" colspan='7'>Sampling Status</th>
                <th class="text-center" colspan='7'>Booking & Receiving</th>
                <th class="text-center" colspan='14'>Production Status</th>
                <th class="text-center" colspan='3'>Inspections</th>
                <th class="text-center"></th>
              </tr>

              <tr>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white;'>Account / Team Name</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Buyer Name</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>File</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Style</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Tech Pack</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Product Description</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fabrication</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>PO</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Lot</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Shipment Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Extended Shipment Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Order Qty Pcs</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Unit Price FOB</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Total FOB</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>CM</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Total CM</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>LD Sub W/Clr</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>LD Apv with Clr</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Acc Appv</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fab Qlty Send</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fab Qlty Appvl</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>1st Fit Send</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>2nd Fit Send</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fit Appv</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>1st PP Send</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>2nd PP Send</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>PP Appv</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Top / Shipment Samples</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fab Clr1 Book</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fab Clr2 Book</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fab Clr3 Book</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fab Clr4 Book</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Fab Rcv</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Acc Book</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Acc Rcvd Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Plan PPM Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Plan PP Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Plan Cut Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Cutting Sample Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Sewing Start</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Sewing Complete</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Print / Embo Sent</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Print / Embo Rcvd</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Wash Send</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Wash Rcvd</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Finishing Start Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Poly Start</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Poly Qty</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Carton Qty</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Inspection Date</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Inspection Qty</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Inspection Status</th>
                <th class="text-center align-middle" style='background-color: olivedrab; color:white'>Remarks</th>
              </tr>
            </thead>
            <tbody>
                {% if information_list %}
                    {% for item in information_list %}
                        <tr>
                            <td>{{ item.0.purchase_number.style.team.team }}</td>
                            <td>{{ item.0.purchase_number.style.buyer }}</td>
                            <td>{{ item.7.file.name }}</td>
                            <td>{{ item.0.purchase_number.style.style_number }}</td>
                            <td>
                              {% if item.0.purchase_number.style.techpack %}
                                <a  href="{{item.0.purchase_number.style.techpack.url}}" target="_blank"> Download </a>
                              {% else %}
                                N/A
                              {% endif %}
                            </td>
                            <td>{{ item.0.purchase_number.style.style_description }}</td>
                            <td>-</td>
                            <td>{{ item.0.purchase_number.purchase_order_number }}</td>
                            <td>{{ item.0.lot_number }}</td>
                            <td>{{ item.0.shipment_date }}</td>
                            <td>-</td>
                            <td>{{ item.0.quantity }}</td>
                            <td>{{ item.6 }}</td>
                            <td>{% widthratio item.6 1 item.0.quantity %}</td>
                            <td>{{ item.5.total_cost_per_gmts }}</td>
                            <td>{% widthratio item.5.total_cost_per_gmts 1 item.0.quantity %}</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>{{ item.1.created_date }}</td>
                            <td>{{ item.2.created_date }}</td>
                            <td>-</td>
                            <td>{{ item.3.created_date }}</td>
                            <td>-</td>
                            <td>-</td>
                            <td>{{ item.4.created_date }}</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock MainContent %}
{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}

{% block JS %}

{% endblock JS %}