{% extends "pos/base.html" %}
{% load static %}

{% block title %}Booking Charges Report{% endblock %}

{% block content %}
<style>
  .gt-page {
    padding: 12px;
  }

  .gt-card {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    overflow: hidden;
  }

  .gt-header {
    padding: 12px 14px;
    border-bottom: 1px solid #dbe3ef;
    background: linear-gradient(90deg, #eef6ff 0%, #ffffff 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .gt-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
  }

  .gt-filter {
  display: grid;
  grid-template-columns: 160px 160px 1fr 110px 90px 90px;
  gap: 8px;
  align-items: end;
  width: 100%;
  max-width: 1080px;
}

  .gt-field label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    color: #64748b;
    font-weight: 800;
  }

  .gt-control {
    width: 100%;
    height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 13px;
    font-weight: 700;
    box-sizing: border-box;
  }

  .gt-btn {
    height: 36px;
    border: 0;
    border-radius: 7px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .gt-btn-primary {
    background: #01478f;
    color: #ffffff !important;
  }

  .gt-btn-green {
    background: #15803d;
    color: #ffffff !important;
  }

  .gt-summary {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    border-bottom: 1px solid #dbe3ef;
    background: #fbfdff;
  }

  .gt-stat {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px 10px;
  }

  .gt-stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 800;
  }

  .gt-stat-value {
    margin-top: 3px;
    font-size: 18px;
    color: #0f172a;
    font-weight: 900;
  }

  .gt-table-wrap {
    overflow-x: auto;
  }

  .gt-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1050px;
  }

  .gt-table th,
  .gt-table td {
    border: 1px solid #e5e7eb;
    padding: 7px 8px;
    font-size: 13px;
    vertical-align: middle;
  }

  .gt-table th {
    background: #eef2f7;
    color: #334155;
    font-weight: 900;
    white-space: nowrap;
  }

  .gt-table tfoot th,
  .gt-table tfoot td {
    background: #f8fafc;
    font-weight: 900;
    border-top: 2px solid #cbd5e1;
  }

  .gt-right {
    text-align: right;
  }

  .gt-muted {
    color: #64748b;
  }

  .gt-loading {
    padding: 14px;
    color: #64748b;
    font-weight: 800;
    display: none;
  }

  .gt-total-cell {
    color: #01478f;
  }

  .gt-grand {
    color: #dc2626;
  }

  .gt-invoice-total {
  color: #dc2626;
  font-weight: 900;
  background: #fff1f2;
}

  @media print {
    .navbar,
    .sidebar,
    .gt-filter,
    .gt-btn {
      display: none !important;
    }

    .gt-page {
      padding: 0;
    }

    .gt-card {
      border: 0;
      box-shadow: none;
    }

    .gt-header {
      background: #ffffff;
      padding: 6px 0;
    }

    .gt-summary {
      padding: 6px 0;
      grid-template-columns: repeat(4, 1fr);
    }

    .gt-table {
      min-width: 0;
    }

    .gt-table th,
    .gt-table td {
      font-size: 10px;
      padding: 4px;
    }
  }

  @media (max-width: 1100px) {
    .gt-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .gt-filter {
      grid-template-columns: 1fr 1fr;
      max-width: none;
    }

    .gt-summary {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

<div class="container-fluid gt-page">
  <div class="gt-card">

    <div class="gt-header">
      <div>
        <h4 class="gt-title">Booking Charges Report</h4>
        <small class="gt-muted">Date wise all booking invoice charges</small>
      </div>

      <form method="get" id="chargeFilterForm" class="gt-filter">
        <div class="gt-field">
          <label>From Date</label>
          <input
            type="date"
            name="date_from"
            value="{{ date_from|date:'Y-m-d' }}"
            class="gt-control"
          >
        </div>

        <div class="gt-field">
          <label>To Date</label>
          <input
            type="date"
            name="date_to"
            value="{{ date_to|date:'Y-m-d' }}"
            class="gt-control"
          >
        </div>

        <div class="gt-field">
          <label>Search</label>
          <input
            type="text"
            name="q"
            value="{{ q }}"
            class="gt-control"
            placeholder="Invoice, builty, customer, city"
          >
        </div>

        <div class="gt-field">
          <label>&nbsp;</label>
          <button type="submit" class="gt-btn gt-btn-primary" style="width:100%;">
            Filter
          </button>
        </div>

        <div class="gt-field">
          <label>&nbsp;</label>
          <div class="gt-field">
            <label>&nbsp;</label>
            <a
              href="{% url 'good_transport:reports:booking_charges_pdf' %}?date_from={{ date_from|date:'Y-m-d' }}&date_to={{ date_to|date:'Y-m-d' }}&q={{ q|urlencode }}"
              target="_blank"
              class="gt-btn gt-btn-primary"
              style="width:100%;"
            >
              PDF
            </a>
          </div>
        </div>
      </form>
    </div>

    <div class="gt-summary">
      <div class="gt-stat">
        <div class="gt-stat-label">Invoices</div>
        <div class="gt-stat-value" id="sumCount">{{ summary.count }}</div>
      </div>

      <div class="gt-stat">
        <div class="gt-stat-label">Rent</div>
        <div class="gt-stat-value" id="sumRent">{{ summary.rent|floatformat:2 }}</div>
      </div>

      <div class="gt-stat">
        <div class="gt-stat-label">Loading + Unloading</div>
        <div class="gt-stat-value" id="sumLoadUnload">
          {{ summary.loading|add:summary.unloading|floatformat:2 }}
        </div>
      </div>

      <div class="gt-stat">
        <div class="gt-stat-label">Total Charges</div>
        <div class="gt-stat-value gt-grand" id="sumGrand">{{ summary.grand_total|floatformat:2 }}</div>
      </div>
    </div>

    <div class="gt-loading" id="reportLoading">
      Loading report...
    </div>

    <div class="gt-table-wrap">
      <table class="gt-table">
        <thead>
          <tr>
            <th style="width:70px;">Inv No</th>
            <th style="width:90px;">Builty</th>
            <th style="width:105px;">Date</th>
            <th>Customer Name</th>
            <th class="gt-right" style="width:105px;">Rent</th>
            <th class="gt-right" style="width:105px;">Loading</th>
            <th class="gt-right" style="width:105px;">Unload</th>
            <th class="gt-right" style="width:105px;">Builty</th>
            <th class="gt-right" style="width:120px;">Cash Expense</th>
            <th class="gt-right" style="width:120px;">Other Charges</th>
            <th class="gt-right gt-invoice-total" style="width:120px;">Total</th>
          </tr>
        </thead>

        <tbody id="reportRows">
          {% for row in rows %}
            <tr>
              <td><strong>#{{ row.invoice.invoice_no }}</strong></td>
              <td>{{ row.invoice.builty_no|default:"-" }}</td>
              <td>{{ row.invoice.invoice_date|date:"d-m-Y" }}</td>
              <td>{{ row.invoice.customer_name|default:"-" }}</td>
              <td class="gt-right">{{ row.rent|floatformat:2 }}</td>
              <td class="gt-right">{{ row.loading|floatformat:2 }}</td>
              <td class="gt-right">{{ row.unloading|floatformat:2 }}</td>
              <td class="gt-right">{{ row.builty|floatformat:2 }}</td>
              <td class="gt-right">{{ row.cash_expense|floatformat:2 }}</td>
              <td class="gt-right">{{ row.other_charges|floatformat:2 }}</td>
              <td class="gt-right gt-invoice-total">{{ row.invoice_total|floatformat:2 }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="11" class="text-center gt-muted py-4">
                Koi record nahi mila.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="4" class="gt-right">Total</th>
            <th class="gt-right gt-total-cell" id="footRent">{{ summary.rent|floatformat:2 }}</th>
            <th class="gt-right gt-total-cell" id="footLoading">{{ summary.loading|floatformat:2 }}</th>
            <th class="gt-right gt-total-cell" id="footUnloading">{{ summary.unloading|floatformat:2 }}</th>
            <th class="gt-right gt-total-cell" id="footBuilty">{{ summary.builty|floatformat:2 }}</th>
            <th class="gt-right gt-total-cell" id="footCashExpense">{{ summary.cash_expense|floatformat:2 }}</th>
            <th class="gt-right gt-total-cell" id="footOtherCharges">{{ summary.other_charges|floatformat:2 }}</th>
            <th class="gt-right gt-invoice-total" id="footInvoiceTotal">{{ summary.invoice_total|floatformat:2 }}</th>
          </tr>
        </tfoot>
      </table>
    </div>

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

{% block javascripts %}
{{ block.super }}
<script>
(function () {
  function escapeHtml(value) {
    return String(value || "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function toNumber(value) {
    var n = parseFloat(String(value || "0").replace(/,/g, ""));
    return isNaN(n) ? 0 : n;
  }

  function money(value) {
    return toNumber(value).toFixed(2);
  }

  function renderRows(rows) {
    var html = "";

    if (!rows.length) {
      html = ""
        + "<tr>"
        + "<td colspan='11' class='text-center gt-muted py-4'>Koi record nahi mila.</td>"
        + "</tr>";
    } else {
      rows.forEach(function (row) {
        html += ""
          + "<tr>"
          + "<td><strong>#" + escapeHtml(row.invoice_no) + "</strong></td>"
          + "<td>" + escapeHtml(row.builty_no || "-") + "</td>"
          + "<td>" + escapeHtml(row.invoice_date) + "</td>"
          + "<td>" + escapeHtml(row.customer_name || "-") + "</td>"
          + "<td class='gt-right'>" + money(row.rent) + "</td>"
          + "<td class='gt-right'>" + money(row.loading) + "</td>"
          + "<td class='gt-right'>" + money(row.unloading) + "</td>"
          + "<td class='gt-right'>" + money(row.builty) + "</td>"
          + "<td class='gt-right'>" + money(row.cash_expense) + "</td>"
          + "<td class='gt-right'>" + money(row.other_charges) + "</td>"
          + "<td class='gt-right gt-invoice-total'>" + money(row.invoice_total) + "</td>"
          + "</tr>";
      });
    }

    $("#reportRows").html(html);
  }

  function renderSummary(summary) {
    $("#sumCount").text(summary.count || 0);
    $("#sumRent").text(money(summary.rent));
    $("#sumLoadUnload").text(money(toNumber(summary.loading) + toNumber(summary.unloading)));
    $("#sumGrand").text(money(summary.grand_total));
    // $("#sumGrand").text(money(summary.invoice_total));


    $("#footRent").text(money(summary.rent));
    $("#footLoading").text(money(summary.loading));
    $("#footUnloading").text(money(summary.unloading));
    $("#footBuilty").text(money(summary.builty));
    $("#footCashExpense").text(money(summary.cash_expense));
    $("#footOtherCharges").text(money(summary.other_charges));
    $("#footInvoiceTotal").text(money(summary.invoice_total));
  }

  $("#chargeFilterForm").on("submit", function (e) {
    e.preventDefault();

    var $form = $(this);
    var params = $form.serialize();

    if (params) {
      params += "&ajax=1";
    } else {
      params = "ajax=1";
    }

    var url = window.location.pathname + "?" + params;

    $("#reportLoading").show();

    $.ajax({
      url: url,
      type: "GET",
      dataType: "json",
      success: function (res) {
        if (!res || !res.ok) {
          alert("Report load nahi hui.");
          return;
        }

        renderRows(res.rows || []);
        renderSummary(res.summary || {});

        var cleanUrl = window.location.pathname + "?" + $form.serialize();
        window.history.pushState({}, "", cleanUrl);
      },
      error: function () {
        alert("Report load karte waqt error aya.");
      },
      complete: function () {
        $("#reportLoading").hide();
      }
    });
  });
})();
</script>
{% endblock %}