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

{% block title %}
<title>Style</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 aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
    </div>
    {% endfor %}
    {% endif %}

    {% comment %} {% if request.user.is_superuser == True %}
    {% include 'marchant_app/style/index/super_admin_index.html' %}
    {% endif %} {% endcomment %}

    {% comment %} {% if request.user.user_type == 'Mother_Organization_admin' %}
    {% include 'merchandising/style/index/mother_admin_index.html' %}
    {% endif %} {% endcomment %}

    {% comment %} {% if request.user.user_type == 'Sister_Organization_admin' %}
    {% include 'merchandising/style/index/sister_admin_index.html' %}
    {% endif %} {% endcomment %}
    {% comment %}
    {% if request.user and request.user.user_type != 'Sister_Organization_admin' and request.user.user_type !=
    'Mother_Organization_admin' and request.user.is_superuser != True %}
    {% include 'merchandising/style/index/merchant_admin.html' %}
    {% endif %} {% endcomment %}

    {% if style_list %}

    <div class="table-area">
        <div class="table-title">
            <div class="row">
                <div class="col-md-4">
                    <div class="style-name">
                        <h4>Styles</h4>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="add-btn">
                        <a href="{% url 'style-create' %}">
                            <button class="cus-btn" id="mother-rganization" name="button" type="button">
                                <i aria-hidden="true" class="fa fa-plus-circle"></i>
                                Style
                            </button>
                        </a>
                    </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 class="form-control" id="search_style" placeholder="Search..." type="search">
                            <span class="input-group-text" id="search-btn"><i aria-hidden="true"
                                                                              class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tables table-responsive" id="style_list">
            <table class="table  table-striped table-hover align-middle">
                <thead>
                <tr>
                    <th class="text-center" scope="col" style="vertical-align: middle; width: 20px;height: 40px;">SL
                    </th>
                    {% comment %}
                    <th>Mother Organization</th>
                    <th>Sister Organization</th>
                    {% endcomment %}

                    <th class="text-center table_header" scope="col">Style Number</th>
                    <th class="text-center" scope="col">Style Description</th>
                    <th class="text-center" scope="col" style="width: 15px">Buyer</th>
                    <th class="text-center" scope="col">Costing</th>
                    <th class="text-center" scope="col">Sample</th>
                    <th class="text-center" scope="col">Date</th>
                    <th class="text-center" scope="col">Team</th>
                    <th class="text-center" scope="col">Action</th>
                </tr>
                </thead>
                <tbody>
                {% for style in style_list %}
                <tr>
                    <td class="text-center align-middle">{{forloop.counter}}</td>
                    {% comment %}
                    <td>{{ style.mother_organization }}</td>
                    <td>{{ style.sister_organization }}</td>
                    {% endcomment %}

                    <td class="align-middle">{{ style.style_number }}</td>
                    <td class="align-middle">{{ style.style_description }}</td>
                    <td class="align-middle" style="width: 15px align-middle">{{ style.buyer }}</td>
                    {% if style.is_cost_submit_status == "Approved" %}
                    <td class="align-middle" style="background-color:#00ff80 !important; color:black;">
                        {{style.is_cost_submit_status }}
                    </td>
                    {% elif style.is_cost_submit_status == "Not Submit" %}
                    <td class="align-middle" style="background-color:#00bfff !important; color:black;">Not Submitted
                    </td>
                    {% elif style.is_cost_submit_status == "Rejected"  %}
                    <td class="align-middle" style="background-color: #fc2605 !important; color:black;">
                        {{style.is_cost_submit_status }}
                    </td>
                    {% else %}
                    <td class="align-middle" style="background-color: #ff9966 !important; color:black;">
                        {{style.is_cost_submit_status }}
                    </td>
                    {% endif %}
                    <td class="align-middle" style="background-color:#ff9966 !important; color:black;">Pending</td>
                    <td class="align-middle">{{ style.created_date }}</td>
                    {% if style.team %}
                    <td class="align-middle">{{style.team}}</td>
                    {% else %}
                    <td class="align-middle"></td>
                    {% endif %}
                    {% if style.is_cost_submit_status == "Not Submit" %}
                    <td class="align-middle">
                        <ul class="action">
                            <li>
                                <a href="{% url 'materials_preview' style.id %}">
                                    <i aria-hidden="true" class="fa fa-eye"></i>
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'style-update' style.id %}" type="button">
                                    <i aria-hidden="true" class="fa fa-pencil"></i>
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'style-delete' style.id %}" onclick="SweetDelete(event,this.href)">
                                    <i aria-hidden="true" class="fa fa-trash"></i>
                                </a>
                            </li>
                        </ul>
                    </td>
                    {% else %}
                    <td class="align-middle">
                        <ul class="action">
                            <li>
                                <a href="{% url 'materials_preview' style.id %}">
                                    <i aria-hidden="true" class="fa fa-eye"></i>
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'style-update' style.id %}" style="pointer-events: none; color: black"
                                   type="button">
                                    <i aria-hidden="true" class="fa fa-pencil" style="background: #dddddd"></i>
                                </a>
                            </li>

                            <li>
                                <a href="{% url 'style-delete' style.id %}" onclick="SweetDelete(event,this.href)"
                                   style="pointer-events: none; color: black">
                                    <i aria-hidden="true" class="fa fa-trash" style="background: #dddddd"></i>
                                </a>
                            </li>
                        </ul>
                    </td>
                    {% endif %}
                </tr>
                {% endfor %}
                </tbody>
            </table>

            {% if style_list.has_other_pages %}
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end">
                    {% if style_list.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ style_list.previous_page_number }}"
                           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_list.paginator.page_range %}
                    {% if style_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_list.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ style_list.next_page_number }}">Next</a>
                    </li>
                    {% else %}
                    <li class="disabled page-item">
                        <a class="page-link" href="#">Next</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}

        </div>

        {% else %}
        <div class="table-area">
            <div class="table-title">
                <div class="row">
                    <div class="col-md-4">
                        <div class="style-name">
                            <h4>Styles</h4>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="add-btn">
                            <a href="{% url 'style-create' %}">
                                <button class="cus-btn" id="mother-rganization" name="button" type="button">
                                    <i aria-hidden="true" class="fa fa-plus-circle"></i>
                                    Style
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-area">
                <div class="tables table-responsive">
                    <table class="table  table-striped table-hover">
                        <thead>
                        <tr>
                            <th class="text-center">SL No</th>
                            {% comment %}
                            <th>Mother Organization</th>
                            <th>Sister Organization</th>
                            {% endcomment %}
                            <th>Branch</th>
                            <th>Style Number</th>
                            <th>Style Description</th>
                            <th>Buyer</th>
                            <th>Costing</th>
                            <th>Sample</th>
                            <th>Date</th>
                            <th>Team</th>
                            <th>Action</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td colspan="15" style="text-align: center;">No Data Found</td>
                        </tr>
                        </tbody>
                    </table>
                </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 load_sister_organization_url = "{% url 'sister-organization-load' %}"
  var load_branch_organization_url = "{% url 'load-branch-organization' %}"
  var ajax_search_url = "{% url 'style-search' %}"

            </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');
        }
    }, 5000);

            </script>
            <script src="{% static 'js/marchant_app/style/index.js' %} "></script>
            {% endblock JS %}