{% extends "merchant_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;
  }

  .custom-tooltip .tooltip-inner {
      background-color: #ea2615; /* Yellow background */
      color: #ffff; /* Black text */
      border-radius: 8px;
      border: 1px solid #ea2615; /* Matching border color */
    }

    /* Custom arrow for the tooltip */
    .custom-tooltip .tooltip-arrow {
      border-top-color: #ea2615 !important;
    }
    thead tr th, td {
        font-size: 11px !important;
    }


</style>

{% endblock Style %}

{% block MainContent %}

<div class="contents">

    {% if messages %}
        {% for message in messages %}
            <div id="divID" 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 %}

    <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 'merchant_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="searchStyle" placeholder="Search..." type="search">
                            <span class="input-group-text" id="searchBtn"><i aria-hidden="true"
                                                                              class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tables table-responsive" id="styleList">
            <table class="table   table-hover align-middle">
                <thead>
                    <tr>
                        <th class="text-center" scope="col" style="vertical-align: middle; width: 20px;height: 40px;">SL</th>
                        <th class="text-center" scope="col" style="width: 15% !important;">Buyer</th>
                        <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">Budget</th>
                        {% comment %} <th class="text-center" scope="col">Sample</th> {% endcomment %}
                        <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>
                {% if style_lists %}
                    {% for style in style_lists %}
                    <tr>
                        <td class="">{{forloop.counter}}</td>
                        <td class="text-break">{{style.style.buyer_display.buyer}}</td>
                        <td class="text-break">{{style.style.style_number}}</td>
                        <td class="">{{style.style.style_description}}</td>
                        {% if style.editable == True %}
                            <td>Not Approved</td>
                        {% else %}
                            <td class='bg-success text-light' >Approved </td>

                        {% endif %}

                        

                        <td class="">{{ style.style.created_date }}</td>
                        <td class="">{{style.style.team}}</td>

                        <td class="">
                            <ul class="action">
                                {% comment %} <li>
                                    <a href="{% url 'merchant_materials_preview' style.style.id %}">
                                        <!-- <i aria-hidden="true" class="fa fa-eye custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="Material Details"></i> -->
                                        <i style="background-color: #80669d" aria-hidden="true" class="fa fa-file" data-bs-toggle="tooltip" data-bs-placement="top" title="Material Details" data-bs-custom-class="custom-tooltip"></i>
                                        
                                    </a>
                                </li> {% endcomment %}
                               
                                {% comment %} <li>
                                    <a href="{% url 'merchant_costing_preview_before_approval' style.style.id %}">
                                        <i aria-hidden="true" style="background-color:#00bfff" class="fa fa-telegram" data-bs-toggle="tooltip" data-bs-placement="top" title="Q. Costing" data-bs-custom-class="custom-tooltip" ></i>
                                    </a>
                                </li> {% endcomment %}

                                {% if style.editable == True %}
                                <li>
                                    <a href="{% url 'merchant_style_update' style.style.id %}" type="button">
                                        <i aria-hidden="true" class="fa fa-pencil" ></i>
                                    </a>
                                </li>
                                
                                <li>
                                    <a href="{% url 'merchant_style_details' style.style.id %}">
                                        <i aria-hidden="true" class="fa fa-eye" data-bs-toggle="tooltip" data-bs-placement="top" title="Style Details" data-bs-custom-class="custom-tooltip"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'merchant_style_delete' style.style.id %}" onclick="SweetDelete(event,this.href)">
                                        <i aria-hidden="true" class="fa fa-trash"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'merchant_style_copy' style.style.id %}">
                                        <i style="background-color:#5dbea3" aria-hidden="true" class="fa fa-copy" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy Style" data-bs-custom-class="custom-tooltip"></i>
                                    </a>                                  
                                </li>
                                {% else %}
                                {% if request.user.is_superuser == True %}
                                <li>
                                    <a href="{% url 'merchant_style_update' style.style.id %}" type="button">
                                        <i aria-hidden="true" class="fa fa-pencil" ></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'merchant_style_details' style.style.id %}">
                                        <i aria-hidden="true" class="fa fa-eye" data-bs-toggle="tooltip" data-bs-placement="top" title="Style Details" data-bs-custom-class="custom-tooltip"></i>
                                    </a>
                                </li>
                                
                                <li>
                                    <a href="{% url 'merchant_style_delete' style.style.id %}" onclick="SweetDelete(event,this.href)">
                                        <i aria-hidden="true" class="fa fa-trash"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'merchant_style_copy' style.style.id %}">
                                        <i style="background-color:#5dbea3" aria-hidden="true" class="fa fa-copy" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy Style" data-bs-custom-class="custom-tooltip"></i>
                                    </a>                                  
                                </li>
                                {% else %}
                                <li>
                                    <a href="{% url 'merchant_style_update' style.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 'merchant_style_details' style.style.id %}">
                                        <i aria-hidden="true" class="fa fa-eye" data-bs-toggle="tooltip" data-bs-placement="top" title="Style Details" data-bs-custom-class="custom-tooltip"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'merchant_style_delete' style.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>
                                <li>
                                    <a href="{% url 'merchant_style_copy' style.style.id %}">
                                        <i style="background-color:#5dbea3" aria-hidden="true" class="fa fa-copy" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy Style" data-bs-custom-class="custom-tooltip"></i>
                                    </a>                                  
                                </li>
                                {% endif %}
                                {% endif %}
                                


                                {% comment %} <li>
                                    <a href="{% url 'merchant_style_costing_report' style.style.id %}">
                                        <!-- <i aria-hidden="true" class="fa fa-eye custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="Material Details"></i> -->
                                        <i style="background-color: #37a000" aria-hidden="true" class="fa fa-print" data-bs-toggle="tooltip" data-bs-placement="top" title="Material Details" data-bs-custom-class="custom-tooltip"></i>
                                    </a>
                                </li> {% endcomment %}
                               
                            </ul>
                        </td>

                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="9" class="text-center">No Data is Found</td></tr>
                {% endif %}
                </tbody>
            </table>

            {% if style_lists.has_other_pages %}
            <nav aria-label="Page navigation example">
              <ul class="pagination justify-content-end">
                  {% if style_lists.has_previous %}
                    <li class="page-item" >
                          <a href="?page={{ style_lists.previous_page_number }}" class="page-link" tabindex="-1">Previous</a>
                      </li>
                    {% if style_lists.number > 3 %}
                    <li class="page-item">
                      <a class="page-link" href="?page=1">1</a>
                    </li>
                      {% if style_lists.number > 4 %}
            
                      <li class="page-item">
                      <span class="page-link">...</span>
                      </li>
                      {% endif %}
                    {% endif %}
                  {% endif %}
            
                  {% for num in style_lists.paginator.page_range %}
                    {% if style_lists.number == num %}
                    <li class="page-item active">
                      <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                    {% elif num > style_lists.number|add:'-3' and num < style_lists.number|add:'3' %}
                    <li class="page-item">
                      <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                    {% endif %}
                  {% endfor %}
            
                  {% if style_lists.has_next %}
                    {% if style_lists.number < style_lists.paginator.num_pages|add:'-3' %}
                      <li class="page-item">
                      <span class="page-link">...</span>
                      </li>
                      <li class="page-item">
                      <a class="page-link" href="?page={{ style_lists.paginator.num_pages }}">{{ style_lists.paginator.num_pages }}</a>
                      </li>
                    {% elif style_lists.number < style_lists.paginator.num_pages|add:'-2' %}
                    <li class="page-item">
                      <a class="page-link" href="?page={{ style_lists.paginator.num_pages }}">{{ style_lists.paginator.num_pages }}</a>
                    </li>
                    {% endif %}
                    <li class="page-item">
                    <a href="?page={{ style_lists.next_page_number }}" class="page-link">Next</a>
                    </li>
                  {% endif %}
              </ul>  
            </nav> 
            {% endif %}
        </div>
    </div>
</div>
{% endblock MainContent %}

{% block meassage %}

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

{% endblock meassage %}

{% block JS %}
<script>
    var ajax_search_url = "{% url 'merchant_style_search' %}";
    
</script>
<script src="{% static 'js/merchant_app/query/style/script.js' %} "></script>  
<!-- <script>
//     var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
//     var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    
//   return new bootstrap.Tooltip(tooltipTriggerEl)
// })
var tooltipTriggerList = [].slice.call(document.querySelectorAll('.custom-tooltip'));
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
</script> -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // Enable tooltips
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
</script>
{% endblock JS %}