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

{% block title %}
<title>Costing Dashboard</title>
{% endblock title %}
{% block Style %}
<style>
  .search {
    width: 94% !important;
  }

  .data-search {
    justify-content: flex-start;
  }
</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 %}


  {% if style_costing_list %}
  <div class="table-area">
    <div class="table-title">
      <div class="row">
        <div class="col-md-4">
          <div class="style-name">
            <h4>Costing</h4>
          </div>
        </div>
      </div>
    </div>
    <!-- table-title -->
    <div class="table-header">
      <div class="row">
        <div class="col-md-3">
          <div class="data-search">
            <div class="input-group search">
              <input type="search" class="form-control" id="search_costing" placeholder="Search...">
              <span class="input-group-text" id="search-btn"><i class="fa fa-search" aria-hidden="true"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tables table-responsive" id="style_costing_list">
      <table class="table  table-striped table-hover">
        <thead>
          <tr>
            <th class="text-center">SL No</th>
            <th>Style Number</th>
            <th>Fabrics</th>
            <th>Trims</th>
            <th>Thread</th>
            <th>Washing</th>
            <th>Embroidery/Applic</th>
            <th>Print</th>
            <th>CM</th>
            <th>Commereical & Other</th>
            <th>Test Costing</th>
            <th>Team</th>
            <th>Status</th>
            <th>Preview & Finalize</th>
          </tr>
        </thead>
        <tbody>
          {% for costing_style in style_costing_list %}
          <tr>
            <td class="text-center">{{forloop.counter}}</td>
            {% comment %} <td>{{ costing_style.style.branch.name_en }}</td> {% endcomment %}
            <td style="color:#337ab7 !important">{{ costing_style.style.style_number }}</td>
            
            <td>
              {% if costing_style.fabric_status == 'complete' %}
              <a href="{% url 'merchant-fabric-cost' costing_style.style.id %}" class="text-success">Complete</a>
              {% else %}
              <a href="{% url 'merchant-fabric-cost' costing_style.style.id %}" class="text-danger">Incomplete</a>
              {% endif %}
            </td>
            
            <td>
              {% if costing_style.trim_status == 'complete' %}
              <a href="{% url 'merchant-trim-cost' costing_style.style.id %}" class="text-success">Complete</a>
              {% else %}
              <a href="{% url 'merchant-trim-cost' costing_style.style.id %}" class="text-danger">Incomplete</a>
              {% endif %}
            </td>
            
            <td>
              {% if costing_style.thread_status == 'complete' %}
              <a href="{% url 'merchant-thread-cost' costing_style.style.id %}" class="text-success">Complete</a>
              {% else %}
              <a href="{% url 'merchant-thread-cost' costing_style.style.id %}" class="text-danger">Incomplete</a>
              {% endif %}
            </td>
            
            <td>
              {% if costing_style.washing_status == 'complete' %}
              <a href="{% url 'merchant-washing-cost-create' costing_style.style.id %}"
                class="text-success">Complete</a>
              {% else %}
              <a href="{% url 'merchant-washing-cost-create' costing_style.style.id %}"
                class="text-danger">Incomplete</a>
              {% endif %}
            </td>
            
            <td>
              {% if costing_style.embroidery_status == 'complete' %}
                <a href="{% url 'embroidery-costing-create' costing_style.style.id %}" class="text-success">Complete</a>
              {% else %}
                <a href="{% url 'embroidery-costing-create' costing_style.style.id %}" class="text-danger">Inomplete</a>
              {% endif %}
            </td>

            <td>
              {% if costing_style.print_status == 'complete' %}
                <a href="{% url 'print-costing-create' costing_style.style.id %}" class="text-success">Complete</a>
              {% else %}
                <a href="{% url 'print-costing-create' costing_style.style.id %}" class="text-danger">Inomplete</a>
              {% endif %}
            </td>

            <td>
              {% if costing_style.cm_status == 'complete' %}
              <a href="{% url 'merchant-cm-cost-create' costing_style.style.id %}" class="text-success">Complete</a>
              {% else %}
              <a href="{% url 'merchant-cm-cost-create' costing_style.style.id %}" class="text-danger">Incomplete</a>
              {% endif %}
            </td>
            
            <td>
              {% if costing_style.commercial_and_other_status == 'complete' %}
              <a href="{% url 'merchant-commercial-and-other-cost-create' costing_style.style.id %}"
                class="text-success">Complete</a>
              {% else %}
              <a href="{% url 'merchant-commercial-and-other-cost-create' costing_style.style.id %}"
                class="text-danger">Incomplete</a>
              {% endif %}
            </td>

            <td>
              {% if costing_style.material_test_cost_status == 'complete' %}
              <a href="{% url 'merchant-material-test-cost-create' costing_style.style.id %}"
                class="text-success">Complete</a>
              {% else %}
              <a href="{% url 'merchant-material-test-cost-create' costing_style.style.id %}"
                class="text-danger">Incomplete</a>
              {% endif %}
            </td>

            <td>{{ costing_style.style.team.team}}</td>
            {% if costing_style.style.is_cost_submit_status == "Approved" %}
            <td style="background-color:#00ff80 !important; color:black;">{{ costing_style.style.is_cost_submit_status }}</td>
            {% elif costing_style.style.is_cost_submit_status == "Not Submit" %}
            <td style="background-color: #00bfff !important; color:black;">Not Submitted</td>
            {% elif costing_style.style.is_cost_submit_status == "Rejected" %}
            <td style="background-color: #fc2605 !important; color:black;">{{ costing_style.style.is_cost_submit_status }}</td>
            {% else %}
            <td style="background-color: #ff9966 !important; color:black;">{{ costing_style.style.is_cost_submit_status }}</td>
            {% endif %}
            <td>
              <ul class="action">
                <li>
                  <a href="{% url 'merchant-privew-cost-create' costing_style.style.id %}">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                  </a>
                </li>
              </ul>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

      {% if style_costing_list.has_other_pages %}
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
          {% if style_costing_list.has_previous %}
          <li class="page-item">
            <a href="?page={{ style_costing_list.previous_page_number }}" class="page-link" tabindex="-1">Previous</a>
          </li>
          {% else %}
          <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
          </li>
          {% endif %}
          {% for i in style_costing_list.paginator.page_range %}
          {% if style_costing_list.number == i %}
          <li class="page-item active">
            <a class="page-link" href="#">{{i}}</a>
          </li>
          {% else %}
          <li class="page-item">
            <a class="page-link" href="?page={{ i }}">{{ i }}</a>
          </li>
          {% endif %}
          {% endfor %}
          {% if style_costing_list.has_next %}
          <li class="page-item">
            <a href="?page={{ style_costing_list.next_page_number }}" class="page-link">Next</a>
          </li>
          {% else %}
          <li class="disabled page-item">
            <a href="#" class="page-link">Next</a>
          </li>
          {% endif %}
        </ul>
      </nav>
      {% endif %}

    </div>

    {% else %}
    <div class="table-area">
      <div class="table-title">
        <div class="row">
          <div class="">
            <div class="team-name">
              <h4 class="text-center">No Data Found</h4>
            </div>
          </div>
        </div>
      </div>
    </div>

    {% endif %}

    {% endblock MainContent %}
    {% block meassage %}

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

    {% endblock meassage %}

    {% block JS %}

    <script type=text/javascript>
 // var redirect_url = "{% url 'style-index' %}"
  var ajax_search_url = "{% url 'costing-dashboard-search' %}"
</script>
    <script src="{% static 'js/marchant_app/costing/dashboard/index.js' %} "></script>
    <script>
      // Get all info messages
      var info_messages = document.getElementsByClassName('alert');

      setTimeout(function () {
        for (var i = 0; i < info_messages.length; i++) {
          // Set display attribute as !important, neccessary when using bootstrap
          info_messages[i].setAttribute('style', 'display:none !important');
        }
      }, 3000);
    </script>
    {% endblock JS %}