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

{% block title %}
<title>Export Upcoming</title>
{% endblock title %}

{% block Style %}
<style>
  .disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }
  .search { width: 94%!important; }
  .cus-btn { background: #FC6736; }
  a.cus-btn.excel:hover { color: white; }

  thead tr, th, td,
  tbody tr, th, td {
    font-size: 13px !important;
  }

  div#upcoming-exports-table_length,
  div#upcoming-exports-table_filter {
      margin-bottom: 37px;
  }

  .table-container{
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
    height: 100vh;
  }
  thead tr:first-child th {
    position: sticky;
    top: -16px;
    background-color: #fff;
    z-index: 3; 
  }
  .fixed thead tr:nth-child(2){
    position: sticky;
    top: 17px;
    z-index: 4;
  }

  thead tr:nth-child(2) th:nth-child(-n+6) {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1;
  }
  .table > :not(caption) > * > * {
    padding: 7px 10px;
    border: 1px solid dimgray;
    font-size: 13px;
    line-height: 1.5;
  }
  tbody td:nth-child(-n+6) {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 1;
  }
</style>
{% endblock Style %}

{% block MainContent %}
<meta name="csrf-token" content="{{ csrf_token }}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />

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

<div class="contents">
  <div class="table-area">

    <div class="accordion shadow rounded" id="orderAccordion">
      
      <!-- ✅ New Order -->
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingNew">
          <button class="accordion-button" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseNew" aria-expanded="true" aria-controls="collapseNew">
            🆕 New Order  &nbsp;&nbsp;&nbsp;&nbsp;{{new_order_obj|length}}
          </button>
        </h2>
        <div id="collapseNew" class="accordion-collapse collapse show"
             aria-labelledby="headingNew" data-bs-parent="#orderAccordion">
          <div class="accordion-body">

            <div class="tables table-responsive">
              <table id="upcoming-exports-table" class="table table-hover mt-4">
                <thead>
                  <tr style="background-color: rgba(232, 156, 232, 0.53) !important;">
                    <th class="text-center">SL No</th>
                    <th>File</th>
                    <th>Budget</th>
                    <th>Buyer</th>
                    <th>Agent</th>
                    <th>Order Qty</th>
                    <th>Value</th>
                    <th>SHIP DATE START</th>
                    <th>SHIP DATE LAST</th>
                    <th>Team</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {% for export in new_order_obj %}
                    <tr>
                      <td class="text-center">{{forloop.counter}}</td>
                      <td>{{ export.file }} ({{export.order_no}})</td>
                      <td>{{ export.budget_name }}</td>
                      <td>{{ export.buyer_display.buyer }}</td>
                      <td>{{ export.buyer_display.agent }}</td>
                      <td>{{ export.budget.total_qty_value.total_gmt_qty }} pcs</td>
                      <td>${{ export.total_value|floatformat:3 }}</td>
                      <td>{{export.order_shipment_date.ship_start_date}}</td>
                      <td>{{export.order_shipment_date.ship_end_date}}</td>
                      <td>{{export.com_employee|default:"N/A"}}</td>
                      <td>
                        <ul class="action">
                          <li>
                            <a href="{% url 'employee_align' export.id %}"> 
                              <i aria-hidden="true" class="fa fa-eye"></i>
                            </a>
                          </li>
                        </ul>
                      </td>
                    </tr>
                  {% empty %}
                    <tr>
                      <td colspan="11" class="text-center">No data found.</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

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

      <!-- ✅ Archive -->
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingArchive">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapseArchive" aria-expanded="false" aria-controls="collapseArchive">
            📂 Archive &nbsp;&nbsp;&nbsp;&nbsp;{{archive_order_obj|length}}
          </button>
        </h2>
        <div id="collapseArchive" class="accordion-collapse collapse"
             aria-labelledby="headingArchive" data-bs-parent="#orderAccordion">
          <div class="accordion-body">

            <div class="tables table-responsive">
              <table  class="table table-hover mt-4">
                <thead>
                  <tr style="background-color: rgba(156, 232, 232, 0.53) !important;">
                    <th class="text-center">SL No</th>
                    <th>File</th>
                    <th>Budget</th>
                    <th>Buyer</th>
                    <th>Agent</th>
                    <th>Order Qty</th>
                    <th>Value</th>
                    <th>SHIP DATE START</th>
                    <th>SHIP DATE LAST</th>
                    <th>Team</th>
                     <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {% for export in archive_order_obj %}
                    <tr>
                      <td class="text-center">{{forloop.counter}}</td>
                      <td>{{ export.file }} ({{export.order_no}})</td>
                      <td>{{ export.budget_name }}</td>
                      <td>{{ export.buyer_display.buyer }}</td>
                      <td>{{ export.buyer_display.agent }}</td>
                      <td>{{ export.budget.total_qty_value.total_gmt_qty }} pcs</td>
                      <td>${{ export.total_value|floatformat:3 }}</td>
                      <td>{{export.order_shipment_date.ship_start_date}}</td>
                      <td>{{export.order_shipment_date.ship_end_date}}</td>
                      <td>{{export.com_employee|default:"N/A"}}</td>
                      <td>
                        <ul class="action">
                          <li>
                            <a href="{% url 'employee_align' export.id %}"> 
                              <i aria-hidden="true" class="fa fa-eye"></i>
                            </a>
                          </li>
                        </ul>
                      </td>
                    </tr>
                  {% empty %}
                    <tr>
                      <td colspan="10" class="text-center">No archive data found.</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

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

    </div>

  </div>
</div>
{% endblock MainContent %}

{% block meassage %}
{% include 'notifications/notifications.html' %}
{% endblock meassage %}

{% block JS %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
  $(document).ready(function() {
    $('#upcoming-exports-table').DataTable({
      paging: false,
      searching: true,
      ordering: true,
      info: false
    });

  });
</script>
{% endblock JS %}