{% extends "sample_base.html" %}

{% load static %}
{% load crispy_forms_tags %}

{% block title %}
<title>Sample Requistion Index</title>
{% endblock title %}
{% block Style %}
<style>
  .search {
    width: 94%!important;
  }
  .data-search {
    justify-content: flex-start;
  }
.responsive-div {
display: ; /* Hide by default */
width: 100%;
height: 70vh;

text-align: center;
line-height: 200px; /* Center text vertically */
font-size: 24px;
transition: height 0.3s ease;
}

/* Show the div for viewport widths between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
.responsive-div {
    display: block; /* Show the div within this viewport range */
}
}


thead {
    position: sticky;
    top: -15px;
    background-color: #eee;
    z-index:10;
  }
  
</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>Sample Program Requistion Sheet</h4>
                    </div>
                </div>
      

         <div class="modal fade" id="sampleDetailsModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="sampleDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="sampleDetailsModalLabel"><i class="fa fa-university" aria-hidden="true"></i> Sample Details </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="sampleDetailsModalBody">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" id="pdf-button" class="cus-btn" ><i class="fa fa-print" style="font-size: 16px; color:#fff"></i>Print</button>
                     <button type="button" class="cus-btn2" id="reset-form-btn" data-bs-dismiss="modal" aria-label="Close" >Close</button>
                   
                </div>

            </form>
            </div>
        </div>
    </div>
    <div class="table-header">
        <div class="row">
           
        </div>
    </div>

        <div class="tables table-responsive responsive-div" id="styleList">
            <table class="table table-hover align-middle" style="font-size: 10px;">
                <thead >
                <tr>
                <td colspan="28" class="fw-bold text-center">Program Sheet</td>
                </tr>
                <tr>
                <td colspan="8" class="fw-bold text-center" style="background-color:#ccc0d9">Basic Info</td>
                <td colspan="5" class="fw-bold text-center" style="background-color:#95b3d7">Merchant Section</td>
                <td colspan="7" class="fw-bold text-center" style="background-color:#d99594">Sample</td>
                <td colspan="8" class="fw-bold text-center" style="background-color:#c2d696">Buyer Feedback</td>
                </tr>
           
                    <tr class="">
                        <th class="text-center" scope="col">SL</th>
                        <th class="text-center" scope="col">Action</th>
                        <th class="text-center" scope="col">Sample status</th>
                        <th class="text-center" scope="col">Merchandiser</th>
                        <th class="text-center" scope="col">Sample Category</th>
                        <th class="text-center" scope="col">Buyer</th>
                        <th class="text-center" scope="col">Style</th>
                        <th class="text-center" scope="col">Item</th>
                        <th class="text-center" scope="col">Required Date</th>
                        <th class="text-center" scope="col">Qty</th>
                        <th class="text-center" scope="col">Sample Details</th>
                        <th class="text-center" scope="col">Requisition Raise Date</th>
                        <th class="text-center" scope="col">Sample Section</th>
                        <th class="text-center" scope="col">Planned Submission Date</th>
                        <th class="text-center" scope="col">Actual Submission Date</th>
                        {% comment %} <th class="text-center" scope="col">Variance</th> {% endcomment %}
                        <th class="text-center" scope="col">Material Receive Status</th>
                        <th class="text-center" scope="col">Submission Details</th>
                        <th class="text-center" scope="col">Sample Received By</th>
                        <th class="text-center" scope="col">Trim Card Rcv</th>
                        <th class="text-center" scope="col">Courrier Date</th>
                        <th class="text-center" scope="col">Courrier Details</th>
                        <th class="text-center" scope="col">Buyer Status</th>

                        <th class="text-center" scope="col">Buyer Comment</th>
                        <th class="text-center" scope="col">Approved Qty</th>
                        <th class="text-center" scope="col">Rejected Qty</th>
                        {% comment %} <th class="text-center" scope="col">DCN Pending</th> {% endcomment %}
                        <th class="text-center" scope="col">Re-Program Reason</th>
                    </tr>
                </thead>
                <tbody>
                {% if requistion %}
                    {% for item in requistion %}
                    <tr>
                        <td class="align-middle">{{forloop.counter}}</td>

                        <td class="align-middle">
                            <ul class="action">
                                <li>
                                    <a href="{% url 'sample_app_sample_details' item.id %}">
                                        <i aria-hidden="true" class="fa fa-eye"></i>
                                    </a>
                                </li>
                            </ul>
                        </td>
                        <td class="align-middle">{{ item.sample_status_sample_end }}</td>
                        <td class="align-middle text-center">{{ item.created_by }}<br>({{ item.merchant_team }})</td>
                        <td class="align-middle">{{ item.sample_category }}</td>
                        <td class="align-middle">{{ item.style.buyer }}</td>
                        <td class="align-middle">{{ item.style }}</td>
                        <td class="align-middle">{{ item.style.style_description }}</td>
                        <td class="align-middle">{{ item.req_submission_date }}</td>
                        <td class="align-middle">{{ item.total_ordered_qty }} pcs</td>

                        <td class="align-middle text-center">
                        <ul class="action">

                            <li>
                                        <a href="#" onclick="SweetModalSampleDetails(event,{{item.id}})" data-bs-toggle="modal" data-bs-target="#sampleDetailsModal">
                                            <i aria-hidden="true" class="fa fa-eye bg-info"></i>
                                        </a>
                            </li>

                      </ul>
                        </td>
                  
                        <td class="align-middle">{{ item.requisition_raise_date }} pcs</td>
                        
                        {% if item.sample_assigned_to %}
                          <td class="align-middle">  {{ item.sample_assigned_to }} </td>
                        {% else %}
                           <td class="align-middle bg-warning"> Not Assigned </td>
                        {% endif %}
                        
                        
                        
                        <td class="align-middle">{{ item.planned_submission_date }}</td>
                        <td class="align-middle">{{ item.sample_submission_date }}</td>
                        {% comment %} <td class="align-middle">{{ item.submission_variance_day }}</td> {% endcomment %}
                        <td class="align-middle text-center">
                        <ul class="action">
                                
                                Yes (Dummy)
                        </ul>
                        </td>
                        <td class="align-middle text-center">
                        <ul class="action">
                                
                                <li>
                                    <a href="">
                                        <i aria-hidden="true" class="fa fa-eye"></i>
                                    </a>
                                </li>
                        </ul>
                        </td>
                        <td class="align-middle">{{ item.product_recieved_by }}</td>
                        <td class="align-middle">{{ item.trim_card_rcv }}</td>
                        <td class="align-middle">{{ item.courier_date }}</td>
                        <td class="align-middle">{{ item.courier_details }}</td>
                        <td class="align-middle">{{ item.buyer_status }}</td>
                        <td class="align-middle">{{ item.buyer_comment }}</td>
                        <td class="align-middle">{{ item.buyer_approved_qty }} pcs</td>
                        <td class="align-middle">{{ item.buyer_rejected_qty }} pcs</td>
                        {% comment %} <td class="align-middle">{{ item.buyer_dcn_pending_qty }} pcs</td> {% endcomment %}
                        <td class="align-middle">{{ item.reprogram_reason }}</td>
                        
                        
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="37" 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 src="{% static 'js/merchant_app/sample/script.js' %}"></script>  



    <script>
        ajax_search_url = "{% url 'sample_app_sample_search'  %}"
    
        $("#searchStyle").keypress(function (e) { 
            if (e.keyCode == 13){
            $("#searchBtn").click();
            }
          });
          
        $("#searchBtn").click(function () {
          console.log($("#searchStyle").val())
          if($("#searchStyle").val())
            $.ajax({                       
            url: ajax_search_url,                   
            data: {
              'search_input': $("#searchStyle").val()     
            },
            success: function (data) {   
              $("#styleList").html(data);
            }
          });
          else
          location.href = ajax_search_url
        });
    
    </script>





















    <script>
         $('#pdf-button').click(function(){
            $('#sample-pdf').print()})
    </script>








    <script>
        sample_details_url = "{% url 'sample_details_load'  %}"

       
        
        function SweetModalSampleDetails(e, sample_id) {
            e.preventDefault();
            $.ajax({
                url: sample_details_url,

                data: {

                sample_id: sample_id,

                },
                success: function (data) {
                
                $("#sampleDetailsModalBody").html(data);
                // $("#id_sister_organization").html(data);
                },
            });
        }
    </script>
{% endblock JS %}