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

{% block content %}
<h2 class="mb-4">Sales 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">Sales Report</li>
  </ol>
</nav>

<!-- Filters -->
<div class="card mb-4 shadow-sm border-0">
  <div class="card-body">
    <form method="get">
      <div class="row g-3">
        <div class="col-12 col-sm-6 col-md-2">
          <label for="start_date" class="form-label">Start Date</label>
          <input type="date" name="start_date" id="start_date" class="form-control" value="{{ start_date }}">
        </div>
        <div class="col-12 col-sm-6 col-md-2">
          <label for="end_date" class="form-label">End Date</label>
          <input type="date" name="end_date" id="end_date" class="form-control" value="{{ end_date }}">
        </div>
        <div class="col-12 col-sm-6 col-md-2">
          <label for="consumer" class="form-label">Consumer</label>
          <select name="consumer" id="consumer" class="form-select">
            <option value="">All Consumers</option>
            {% for c in consumers %}
              <option value="{{ c.id }}" {% if c.id|stringformat:"s" == selected_consumer %}selected{% endif %}>{{ c }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-sm-6 col-md-2">
          <label for="product" class="form-label">Product</label>
          <select name="product" id="product" class="form-select">
            <option value="">All Products</option>
            {% for p in products %}
              <option value="{{ p.id }}" {% if p.id|stringformat:"s" == selected_product %}selected{% endif %}>{{ p.title }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-sm-6 col-md-2">
          <label for="doctor" class="form-label">Doctor</label>
          <select name="doctor" id="doctor" class="form-select">
            <option value="">All Doctors</option>
            {% for d in doctors %}
              <option value="{{ d.id }}" {% if d.id|stringformat:"s" == selected_doctor %}selected{% endif %}>{{ d.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-sm-6 col-md-2">
          <label for="payment_status" class="form-label">Payment Status</label>
          <select name="payment_status" id="payment_status" class="form-select">
            <option value="">All</option>
            <option value="Cash" {% if payment_status == "Cash" %}selected{% endif %}>Cash</option>
            <option value="Credit" {% if payment_status == "Credit" %}selected{% endif %}>Credit</option>
          </select>
        </div>
        <div class="col-12 d-flex justify-content-end gap-2 mt-2">
          <button type="submit" class="btn btn-primary px-4">Filter</button>
          <a href="?" class="btn btn-outline-secondary px-4">Reset</a>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Summary Cards -->
<div class="row mb-4">
  <div class="col-12 col-md-4 mb-3 mb-md-0">
    <div class="card text-white bg-primary h-100">
      <div class="card-body">
        <h6 class="card-title">Total Orders</h6>
        <p class="card-text h4">{{ total_sales }}</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4 mb-3 mb-md-0">
    <div class="card text-white bg-success h-100">
      <div class="card-body">
        <h6 class="card-title">Net Revenue</h6>
        <p class="card-text h4">AFN {{ total_revenue|floatformat:2 }}</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card text-white bg-info h-100">
      <div class="card-body">
        <h6 class="card-title">Items Sold (Net)</h6>
        <p class="card-text h4">{{ total_items|floatformat:0 }}</p>
      </div>
    </div>
  </div>
</div>

<!-- Top Products -->
<div class="card mb-4">
  <div class="card-header">
    <h5 class="card-title mb-0">Top Selling Products (Adjusted for Returns)</h5>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table id="top-products-table" class="table table-sm text-nowrap">
        <thead>
          <tr>
            <th>Product</th>
            <th>Batch No</th>
            <th>Sold</th>
            <th>Returned</th>
            <th>Net Sold</th>
            <th>Net Revenue</th>
          </tr>
        </thead>
        <tbody>
          {% for product in top_products %}
          <tr>
            <td>{{ product.title }}</td>
            <td>{{ product.batch_number }}</td>
            <td>{{ product.sold_qty }}</td>
            <td>{{ product.return_qty }}</td>
            <td>{{ product.net_qty }}</td>
            <td>AFN {{ product.net_revenue|floatformat:2 }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="6" class="text-center">No sales data available</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Sales Table -->
<div class="card">
  <div class="card-header">
    <h5 class="card-title mb-0">Order Details</h5>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table id="sales-table" class="table table-sm table-bordered table-striped nowrap text-nowrap" style="width:100%">
        <thead class="table-light">
          <tr>
            <th>Order #</th>
            <th>Date</th>
            <th>Customer</th>
            <th>Sales Rep</th>
            <th>Payment</th>
            <th>Items</th>
            <th>Sold / Returned / Net</th>
            <th class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for row in sale_data %}
          <tr>
            <td>{{ row.order.id }}</td>
            <td>{{ row.order.created_at|date:"Y-m-d" }}</td>
            <td>{{ row.order.consumer }}</td>
            <td>{{ row.order.visited_by }}</td>
            <td>
              {% if row.order.payment_status == 'Cash' %}
                <span class="badge bg-success">Cash</span>
              {% else %}
                <span class="badge bg-warning text-dark">Credit</span>
              {% endif %}
            </td>
            <td>{{ row.item_count }}</td>
            <td>
              <div><small class="text-muted">Sold:</small> AFN {{ row.sold_total|floatformat:2 }}</div>
              <div><small class="text-muted">Returned:</small> AFN {{ row.return_total|floatformat:2 }}</div>
              <div><strong>Net:</strong> AFN {{ row.net_revenue|floatformat:2 }}</div>
            </td>
            <td class="text-center">
              <a href="{% url 'inventory:print_sale_bill' row.order.id %}" target="_blank" class="btn btn-sm btn-outline-primary" title="View Details">
                <i class="fas fa-eye"></i>
              </a>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="8" class="text-center">No orders found</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Optional: Mobile-specific style tweaks -->
<style>
@media (max-width: 576px) {
  .card-title { font-size: 1rem; }
  .card-text.h4 { font-size: 1.2rem; }
  .form-label, .breadcrumb { font-size: 0.85rem; }
}@media print {
  form,
  .breadcrumb,
  .card-header .btn,
  .dt-buttons {
    display: none !important;
  }
}
</style>
<!-- DataTables Scripts -->
<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>
<script>
$(document).ready(function() {
  $('#sales-table').DataTable({
    dom: "<'row mb-3'<'col-md-12 text-end'B>>" +
         "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    buttons: [
      { extend: 'pdf', className: 'btn btn-danger btn-sm' },
      { extend: 'excel', className: 'btn btn-success btn-sm' },
      { extend: 'csv', className: 'btn btn-secondary btn-sm' },
      { extend: 'print', className: 'btn btn-info btn-sm' }
    ],
    pageLength: 10,
    responsive: true,
    order: [[1, 'desc']]
  });

  $('#top-products-table').DataTable({
    paging: false,
    searching: false,
    info: false,
    ordering: false,
    dom: "<'row mb-3'<'col-md-12 text-end'B>>" +
         "<'row'<'col-sm-12'tr>>",
    buttons: [
      { extend: 'pdf', className: 'btn btn-danger btn-sm' }
    ]
  });
  $('#print-report').click(function() {
    window.print();
  });
});
</script>
{% endblock %}