{# templates/petrol/daily_list.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}Petrol Daily Entries{% endblock %}

{% block stylesheets %}
<style>
.dl-container { max-width:1100px; margin:15px auto; padding:0 15px; }
.dl-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; }
.dl-header h4 { font-weight:700; color:#01478f; margin:0; }
.dl-filters { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dl-filters .form-control { height:34px; font-size:0.82rem; border-radius:4px; }
.dl-filters .btn { height:34px; font-size:0.82rem; padding:0 14px; border-radius:4px; }

.dl-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.dl-table thead th {
  background:#01478f; color:#fff; padding:10px 12px; font-size:0.72rem;
  text-transform:uppercase; letter-spacing:0.5px; font-weight:700;
}
.dl-table tbody td { padding:9px 12px; border-bottom:1px solid #f0f0f0; font-size:0.85rem; vertical-align:middle; }
.dl-table tbody tr:hover { background:#f4f8ff; cursor:pointer; }
.dl-table .amt { text-align:right; font-weight:600; }
.dl-table .amt.pos { color:#01478f; }
.dl-table .amt.neg { color:#dc3545; }
.dl-table .amt.net { color:#28a745; font-weight:700; }

.dl-table tfoot td {
  background:#f5f6f8; padding:10px 12px; font-weight:700; font-size:0.85rem;
  border-top:2px solid #ddd;
}

.dl-actions { display:flex; gap:4px; }
.dl-actions .btn { font-size:0.72rem; padding:3px 8px; border-radius:3px; }

.dl-empty { text-align:center; padding:30px; color:#bbb; }
.dl-empty i { font-size:36px; display:block; margin-bottom:8px; }
</style>
{% endblock %}

{% block content %}
<div class="dl-container">

  <div class="dl-header">
    <h4><i class="fas fa-gas-pump mr-2"></i>Petrol Daily Entries</h4>
    <div class="dl-filters">
      <input type="date" id="dateFrom" class="form-control" value="{{ date_from }}" style="width:150px;">
      <span style="font-size:0.8rem;color:#888;">to</span>
      <input type="date" id="dateTo" class="form-control" value="{{ date_to }}" style="width:150px;">
      <button class="btn btn-primary" id="btnFilter"><i class="fas fa-search mr-1"></i>Filter</button>
      <a href="{% url 'petrol:daily_entry' %}" class="btn btn-success"><i class="fas fa-plus mr-1"></i>New Entry</a>
      <a href="{% url 'petrol:nozzle_list' %}" class="btn btn-outline-secondary"><i class="fas fa-gas-pump mr-1"></i>Nozzles</a>
    </div>
  </div>

  {% if entries %}
  <table class="dl-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>Inv #</th>
        <th style="text-align:right;">Nozzle Sale</th>
        <th style="text-align:right;">Credit</th>
        <th style="text-align:right;">Expenses</th>
        <th style="text-align:right;">Net Cash</th>
        <th>Remarks</th>
        <th style="width:120px;">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for e in entries %}
      <tr onclick="window.location='{% url 'petrol:daily_entry_edit' e.invoice_no %}'">
        <td>{{ forloop.counter }}</td>
        <td>{{ e.entry_date|date:"d-M-Y" }}</td>
        <td><strong>{{ e.invoice_no }}</strong></td>
        <td class="amt pos">{{ e.total_nozzle_amount|floatformat:0 }}</td>
        <td class="amt neg">{{ e.total_customer_amount|floatformat:0 }}</td>
        <td class="amt neg">{{ e.total_expense_amount|floatformat:0 }}</td>
        <td class="amt net">{{ e.net_cash|floatformat:0 }}</td>
        <td style="font-size:0.78rem;color:#888;">{{ e.remarks|truncatechars:30 }}</td>
        <td onclick="event.stopPropagation();">
          <div class="dl-actions">
            <a href="{% url 'petrol:daily_entry_edit' e.invoice_no %}" class="btn btn-sm btn-outline-primary"><i class="fas fa-pen"></i></a>
            <a href="{% url 'petrol:daily_print' e.invoice_no %}" target="_blank" class="btn btn-sm btn-outline-secondary"><i class="fas fa-print"></i></a>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3" style="text-align:right;">TOTALS:</td>
        <td class="amt pos">{{ totals.nozzle|floatformat:0 }}</td>
        <td class="amt neg">{{ totals.customer|floatformat:0 }}</td>
        <td class="amt neg">{{ totals.expense|floatformat:0 }}</td>
        <td class="amt net">{{ totals.net_cash|floatformat:0 }}</td>
        <td colspan="2"></td>
      </tr>
    </tfoot>
  </table>
  {% else %}
  <div class="dl-empty">
    <i class="fas fa-inbox"></i>
    <div>No entries found for the selected dates.</div>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block javascripts %}
<script>
$('#btnFilter').on('click', function(){
  var from = $('#dateFrom').val();
  var to   = $('#dateTo').val();
  var url  = "{% url 'petrol:daily_list' %}";
  var params = [];
  if (from) params.push('date_from='+from);
  if (to)   params.push('date_to='+to);
  if (params.length) url += '?' + params.join('&');
  window.location.href = url;
});

// Enter on date fields → trigger filter
$('#dateFrom, #dateTo').on('keypress', function(e){
  if (e.which === 13) $('#btnFilter').click();
});
</script>
{% endblock %}