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


</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-striped 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: 15px">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">Costing</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_list %}
                    {% for style in style_list %}
                    <tr>
                        <td class="text-center">{{forloop.counter}}</td>
                        <td class="col-md-3">{{ style.buyer }}</td>
                        <td class="">{{ style.style_number }}</td>
                        <td class="">{{ style.style_description }}</td>
                        
                        {% if style.is_cost_submit_status == "Approved" %}
                        <td class="" style="background-color:#00ff80 !important; color:black;">
                            {{style.is_cost_submit_status }}
                        </td>
                        {% elif style.is_cost_submit_status == "Not Submit" %}
                        <td class="" style="background-color:#00bfff !important; color:black;">Not Submitted
                        </td>
                        {% elif style.is_cost_submit_status == "Rejected"  %}
                        <td class="" style="background-color: #fc2605 !important; color:black;">
                            {{style.is_cost_submit_status }}
                        </td>
                        {% else %}
                        <td class="" style="background-color: #ff9966 !important; color:black;">
                            {{style.is_cost_submit_status }} 
                        </td>
                        {% endif %}
                        {% comment %} <td class="align-middle" style="background-color:#ff9966 !important; color:black;">Pending</td> {% endcomment %}
                        <td class="">{{ style.created_date }}</td>
                        {% if style.team %}
                        <td class="">{{style.team}}</td>
                        {% else %}
                        <td class=""></td>
                        {% endif %}
                        {% if style.is_cost_submit_status == "Not Submit" %}
                        <td class="">
                            <ul class="action">
                                <li>
                                    <a href="{% url 'merchant_materials_preview' 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>
                                
                                
                               
                               
                                <li>
                                
                                 
                                         <a href="{% url 'merchant_costing_preview_before_approval' 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>
                                <li>
                                    <a href="{% url 'merchant_style_update' style.id %}" type="button">
                                        <i aria-hidden="true" class="fa fa-pencil" ></i>
                                    </a>
                                </li>

                                 <li>
                                    <a href="{% url 'merchant_style_copy' 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>
                               



                                <li>
                                    <a href="{% url 'merchant_style_delete' style.id %}" onclick="SweetDelete(event,this.href)">
                                        <i aria-hidden="true" class="fa fa-trash"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="{% url 'merchant_style_costing_report' 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>
                               
                            </ul>
                        </td>
                        {% else %}
                        <td class="align-middle">
                            <ul class="action">
                                <li>
                                    <a href="{% url 'merchant_materials_preview' style.id %}">
                                        <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>
                                <li>
                                    <a href="{% url 'merchant_costing_preview_before_approval' 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>
                                <li>
                                    <a href="{% url 'merchant_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 'merchant_style_copy' 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>


                                <li>
                                    <a href="{% url 'merchant_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>
                                <li>
                                    <a href="{% url 'merchant_style_costing_report' 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>
                            </ul>
                        </td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="9" class="text-center">No Data is Found</td></tr>
                {% endif %}
                </tbody>
            </table>
        </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 %}