{% extends 'admin_pages/base_admin.html' %}
{% block title %}Stock Report | Admin Panel{% endblock %}

{% block content %}
<h2 class="mb-4">Stock Report</h2>

<!-- Breadcrumbs -->
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'inventory:admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Stock Report</li>
  </ol>
</nav>

<!-- Summary Cards -->
<div class="row mb-4">
  <div class="col-md-3">
    <div class="card text-white bg-primary">
      <div class="card-body">
        <h5 class="card-title">Total Items</h5>
        <p class="card-text h4">{{ total_quantity }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-white bg-success">
      <div class="card-body">
        <h5 class="card-title">Total Value</h5>
        <p class="card-text h4">AFN {{ total_amount|floatformat:2 }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-white bg-warning">
      <div class="card-body">
        <h5 class="card-title">Near Expiry</h5>
        <p class="card-text h4">{{ near_expiry_count }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-white bg-danger">
      <div class="card-body">
        <h5 class="card-title">Expired</h5>
        <p class="card-text h4">{{ expired_count }}</p>
      </div>
    </div>
  </div>
</div>

<!-- Stock Table -->
<table id="stock-table" class="table table-bordered table-striped nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Batch No.</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total Value</th>
      <th>Purchased Price</th>
      <th>Expiry Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {% for item in product_batches %}
    <tr class="{% if item.expiry_status == 'Expired' %}table-danger
               {% elif item.expiry_status == 'Near Expiry' %}table-warning{% endif %}">
      <td>{{ forloop.counter }}</td>
      <td>{{ item.product_name }}</td>
      <td>{{ item.batch_number }}</td>
      <td>{{ item.quantity }}</td>
      <td>AFN {{ item.product.unit_price|floatformat:2 }}</td>
      <td>AFN {{ item.total_amount|floatformat:2 }}</td>
      <td>AFN {{ item.purchased_price|floatformat:2 }}</td>
      <td>{{ item.expiry_date|date:"Y-m-d" }}</td>
      <td>
        {% if item.expiry_status == 'Expired' %}
          <span class="badge bg-danger">{{ item.expiry_status }}</span>
        {% elif item.expiry_status == 'Near Expiry' %}
          <span class="badge bg-warning text-dark">{{ item.expiry_status }}</span>
        {% else %}
          <span class="badge bg-success">{{ item.expiry_status }}</span>
        {% endif %}
        ({{ item.days_to_expiry }} days)
      </td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="9" class="text-center">No stock items found.</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<!-- Include the same DataTables JS/CSS as your orders template -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css" />
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<!-- DataTable Initialization with Custom Export -->
<script>
$(document).ready(function() {
  // Custom message function for exports
  function getExportMessage() {
    return 'Summary:\n' +
           `Total Items: ${$('.card.bg-primary .h4').text()}\n` +
           `Total Value: ${$('.card.bg-success .h4').text()}\n` +
           `Near Expiry: ${$('.card.bg-warning .h4').text()}\n` +
           `Expired: ${$('.card.bg-danger .h4').text()}\n\n`;
  }

  $('#stock-table').DataTable({
    pageLength: 10,
    responsive: true,
    dom: "<'row mb-3'<'col-md-3'l><'col-md-6 text-center'B><'col-md-3'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row mt-2'<'col-sm-5'i><'col-sm-7'p>>",
    buttons: [
      { 
        extend: 'copy',
        className: 'btn btn-secondary btn-sm',
        title: 'Stock Report - {{ report_date }}',
        message: getExportMessage(),
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        }
      },
      { 
        extend: 'csv', 
        className: 'btn btn-info btn-sm',
        title: 'Stock_Report_{{ report_date }}',
        message: getExportMessage(),
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        }
      },
      { 
        extend: 'excel', 
        className: 'btn btn-success btn-sm',
        title: 'Stock_Report_{{ report_date }}',
        message: getExportMessage(),
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        },
        customize: function(xlsx) {
          var sheet = xlsx.xl.worksheets['sheet1.xml'];
          // Add summary to the Excel file
          $('row:first c', sheet).attr('s', '2').before(
            '<row>' +
            '<c t="inlineStr" s="2"><is><t>Stock Report Summary - {{ report_date }}</t></is></c>' +
            '</row>' +
            '<row>' +
            `<c t="inlineStr" s="2"><is><t>Total Items: ${$('.card.bg-primary .h4').text()}</t></is></c>` +
            '</row>' +
            '<row>' +
            `<c t="inlineStr" s="2"><is><t>Total Value: ${$('.card.bg-success .h4').text()}</t></is></c>` +
            '</row>' +
            '<row>' +
            `<c t="inlineStr" s="2"><is><t>Near Expiry: ${$('.card.bg-warning .h4').text()}</t></is></c>` +
            '</row>' +
            '<row>' +
            `<c t="inlineStr" s="2"><is><t>Expired: ${$('.card.bg-danger .h4').text()}</t></is></c>` +
            '</row>' +
            '<row></row>'
          );
        }
      },
      { 
        extend: 'pdf', 
        className: 'btn btn-danger btn-sm',
        title: 'Stock Report - {{ report_date }}',
        message: getExportMessage(),
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        },
        customize: function(doc) {
          // Add summary to the PDF
          doc.content.splice(0, 0, {
            text: [
              {text: 'Stock Report Summary\n\n', style: 'header'},
              `Total Items: ${$('.card.bg-primary .h4').text()}\n`,
              `Total Value: ${$('.card.bg-success .h4').text()}\n`,
              `Near Expiry: ${$('.card.bg-warning .h4').text()}\n`,
              `Expired: ${$('.card.bg-danger .h4').text()}\n\n`
            ],
            style: 'summary'
          });
          
          // Style definitions
          doc.styles.header = {
            fontSize: 18,
            bold: true,
            alignment: 'center',
            margin: [0, 0, 0, 10]
          };
          doc.styles.summary = {
            fontSize: 12,
            margin: [0, 0, 0, 10]
          };
        }
      },
      { 
        extend: 'print', 
        className: 'btn btn-primary btn-sm',
        title: 'Stock Report - {{ report_date }}',
        message: getExportMessage(),
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]
        },
        customize: function(win) {
          // Add summary to the print view
          $(win.document.body).prepend(
            '<h2>Stock Report Summary</h2>' +
            '<div style="margin-bottom: 20px;">' +
            `<p><strong>Total Items:</strong> ${$('.card.bg-primary .h4').text()}</p>` +
            `<p><strong>Total Value:</strong> ${$('.card.bg-success .h4').text()}</p>` +
            `<p><strong>Near Expiry:</strong> ${$('.card.bg-warning .h4').text()}</p>` +
            `<p><strong>Expired:</strong> ${$('.card.bg-danger .h4').text()}</p>` +
            '</div><hr>'
          );
        }
      }
    ],
    order: [[7, 'asc']] // Default sort by expiry date
  });
});
</script>
{% endblock %}