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

{% block title %}
<title>Consignment Index</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 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>Import Consignment</h4>
                    </div>
                </div>
                <div class="col-md-5">
                </div>
      
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="add-btn">
                                    <a href="{% url 'consignment_pi_wise_create' %}"> <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                                        <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                        Add New
                                    </button></a>
                            </div>
                        </div>
                       
                        <div class="col-md-8">
                            <div class="add-btn">
                                <a href="{% url 'consignment_sales_contract_wise_create' %}"> <button id="mother-rganization" class="cus-btn"  type="button" name="button">
                                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                                    Add New Sales Contract Wise
                                </button></a>
                              </div>
                        </div>

                    </div>
 
                </div>
            </div>
        </div>
        <div class="modal fade" id="sampleDetailsProductionModal" 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>  Consignment Details </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="sampleDetailsModalProducationBody">
                        
                    </div>
                    <div class="modal-footer">
                        {% comment %} <button type="button" id="pdf-button2" class="cus-btn" ><i class="fa fa-print" style="font-size: 16px; color:#fff"></i>Print</button> {% endcomment %}
                         <button type="button" class="cus-btn2" id="reset-form-btn" style="background:red !important;margin-right: 89px;" data-bs-dismiss="modal" aria-label="Close" >Close</button>
                       
                    </div>
                </div>
            </div>
        </div>
           <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 class="tables table-responsive " id="styleList">
            <table class="table" style="font-size: 10px;">
                <thead >
                <tr>
                    <td colspan="39" class="fw-bold text-center">Import Consignment</td>
                </tr>
               
                
                    <tr>
                        <th class="text-center" scope="col">SL</th>
                        <th class="text-center" scope="col">Action</th>
                        <th class="text-center" scope="col">File No</th>
                        <th class="text-center" scope="col">Buyer</th>
                        <th class="text-center" scope="col">MDR</th>
                        <th class="text-center" scope="col">LC/No</th>
                        <th class="text-center" scope="col">PI</th>
                        <th class="text-center" scope="col">Sales Contract</th>
                        <th class="text-center" scope="col">BTB LC Shipment Date</th>
                        <th class="text-center" scope="col">Supplier</th>
                        <th class="text-center" scope="col">Fabrics(FOC)</th>
                        <th class="text-center" scope="col">Accessories(FOC)</th>
                        <th class="text-center" scope="col">DOC Rcvd Date</th>
                        <th class="text-center" scope="col">Mail Fm</th>
                        <th class="text-center" scope="col">Item Description</th>
                        <th class="text-center" scope="col">BL No</th>
                        <th class="text-center" scope="col" style="">container No</th>
                        <th class="text-center" scope="col" style="">On Board Date</th>
                        <th class="text-center" scope="col" style="">ETA</th>
                        <th class="text-center" scope="col" style="">BERTH Date</th>
                        <th class="text-center" scope="col" style="">Un Staff Date</th>
                        <th class="text-center" scope="col" style="">Container </th>
                        <th class="text-center" scope="col" style="">Weight(Kgs)</th>
                        <th class="text-center" scope="col" style="">CBM Area</th>
                        <th class="text-center" scope="col" style="">No. of Truck(Weight)</th>
                        <th class="text-center" scope="col" style="">No. of Truck (CBM)</th>
                        <th class="text-center" scope="col" style="">Mode of Shipment</th>
                        <th class="text-center" scope="col" style="">Delivery Date</th>
                        
                        <th class="text-center" scope="col">OD/NN/S.G Date</th>
                        <th class="text-center" scope="col">Docs H/O to C&F</th>
                        <th class="text-center" scope="col">EDD</th>
                        <th class="text-center" scope="col">Delivered Date</th>
                        <th class="text-center" scope="col">Req. /Bill No.</th>
                        <th class="text-center" scope="col">Bill Checked Date</th>

                        <th class="text-center" scope="col">Remarks</th>
                       
                    </tr>
                </thead>
                <tbody>
                {% for consignment in consignment_obj %}
                <tr>
                    <td>1</td>
                    <td>
                         <ul class="action">
                                <li>
                                    <a href="{% url 'consignment-details' consignment.id %}">
                                        <i aria-hidden="true" class="fa fa-eye" ></i>
                                    </a>
                                </li>
                               
                                {% comment %} <li>                          
                                    <a >
                                        <i aria-hidden="true" class="fa fa-pencil" style="background:green;"></i>
                                    </a>
                           
                                </li>                          {% endcomment %}
                                <li>
                                    <a onclick="SweetDelete(event,this.href)" href="{% url 'consignment-delete' consignment.id %}">
                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                        </a>
                                </li>
                            </ul>
                    </td>
                    <td><p style="width: 150px;">{{consignment.btb_lc.finance_file  }}</p></td>
                    <td><p style="width: 150px;"></p></td>
                    <td> <p style="width: 150px;"></p> </td>
                    <td><p style="width: 150px;"> {{consignment.btb_lc}}</p></td>
                    <td ><p style="width: 150px;">{% for pi in consignment.consignmentpi %}{{pi}},{% endfor %}</p></td>
                    <td></td>
                    <td><p style="width: 150px;"></p></td>
                    <td>{{consignment.supplier}}</td>
                    <td></td>

                    <td></td>

                    <td>{{consignment.doc_rcv_date}}</td>
                    <td>{{consignment.mail_frm}}</td>
                    <td>
                        <ul class="action">
                            <li>
                                <a href="#" onclick="SweetModalSampleProductaionDetails(event,{{consignment.id}})" data-bs-toggle="modal" data-bs-target="#sampleDetailsProductionModal">
                                    <i aria-hidden="true" class="fa fa-eye bg-info"></i>
                                </a>
                            </li>
                        </ul>
                    </td>
                    <td>{{consignment.bl_no}}</td>
                    <td>{{consignment.container_no}}</td>
                    <td>{{consignment.on_board_date}}</td>
                    <td>{{consignment.eta}}</td>
                    <td>{{consignment.berth_date}}</td>
                    <td>{{consignment.un_stuff_date}}</td>
                    <td>{{consignment.container_type}}</td>
                    <td>{{consignment.weight_in_kgs}}</td>
                    <td>{{consignment.cbm_area}}</td>
                    <td>{{consignment.no_truk}}</td>
                    <td>{{consignment.no_truk_cbm}}</td>
                    <td>{{consignment.mode_of_shipment}}</td>
                    <td>{{consignment.delivery_point}}</td>
                    <td>{{consignment.od_nn_sg_date}}</td>
                    <td>{{consignment.docs_to_c_nd_f}}</td>
                    <td>{{consignment.edd}}</td>
                    <td>{{consignment.delivered_date}}</td>
                    <td>{{consignment.bill_no}}</td>
                    <td>{{consignment.bill_checked_date}}</td>
                    <td>{{consignment.remarks}}</td>
                </tr>
                {% endfor %}
            </tbody>

        </table>




        </div>
    </div>
</div>

{% endblock MainContent %}

{% block meassage %}

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

{% endblock meassage %}

{% block JS %}


<script>
    ajax_search_url = "{% url 'consignment-search'  %}"
    sample_produciton_details_url = "{% url 'ajax_consignment_pi_item_load'  %}"

    $("#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
    });
    // $('select').select2()
    function SweetModalSampleProductaionDetails(e, consignment_id) {
        e.preventDefault();
        $.ajax({
            url: sample_produciton_details_url,

            data: {

                consignment_id: consignment_id,

            },
            success: function (data) {
            
            $("#sampleDetailsModalProducationBody").html(data);
            // $("#id_sister_organization").html(data);
            },
        });
    }

    
</script>


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

       
function SweetDelete(e,href){
    e.preventDefault()
    var self = $(this)
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Deleted!',
          'Your file has been deleted.',
          'success',
          
        )
        location.href = href
    
      }
    })
  }
  
  
</script>















    
{% endblock JS %}