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

{% block title %}{{ dept }} Fiscal Dashboard{% endblock %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block heading %}{{ dept }} Fiscal Dashboard{% endblock %}

{% block content %}

<!-- Department Tabs + Mode Badge -->
<div class="row mb-3">
  <div class="col-md-6">
    {% for d in all_depts %}
      <a href="?dept={{ d }}" class="btn btn-sm {% if d == dept %}btn-primary{% else %}btn-outline-secondary{% endif %} mr-1">
        {{ d }}
      </a>
    {% endfor %}
    <span class="badge badge-{% if mode == 'production' %}danger{% else %}warning{% endif %} p-2 ml-2" style="font-size:13px;">
      {{ mode|upper }}
    </span>
    <span class="badge badge-secondary p-2 ml-1" style="font-size:13px;">
      POS ID: {{ pos_id }}
    </span>
  </div>
  <div class="col-md-6 text-right">
    <form method="post" action="{% url 'tax_registrations:send_test_invoice' %}" class="d-inline">
      {% csrf_token %}
      <input type="hidden" name="dept" value="{{ dept }}">
      <button type="submit" class="btn btn-success btn-sm">
        <i class="fas fa-paper-plane"></i> Send Test Invoice
      </button>
    </form>
    <form method="post" action="{% url 'tax_registrations:retry_failed' %}" class="d-inline ml-1">
      {% csrf_token %}
      <input type="hidden" name="dept" value="{{ dept }}">
      <button type="submit" class="btn btn-warning btn-sm">
        <i class="fas fa-redo"></i> Retry Failed ({{ failed_count }})
      </button>
    </form>
    <a href="{% url 'tax_registrations:config_list' %}?dept={{ dept }}" class="btn btn-secondary btn-sm ml-1">
      <i class="fas fa-cog"></i> Config
    </a>
  </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4">
  <div class="col-xl-3 col-md-6 mb-3">
    <div class="card border-left-primary shadow h-100 py-2">
      <div class="card-body">
        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Invoices</div>
        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total }}</div>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-md-6 mb-3">
    <div class="card border-left-success shadow h-100 py-2">
      <div class="card-body">
        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Success</div>
        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ success_count }}</div>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-md-6 mb-3">
    <div class="card border-left-danger shadow h-100 py-2">
      <div class="card-body">
        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Failed</div>
        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ failed_count }}</div>
      </div>
    </div>
  </div>
  <div class="col-xl-3 col-md-6 mb-3">
    <div class="card border-left-warning shadow h-100 py-2">
      <div class="card-body">
        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Pending</div>
        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ pending_count }}</div>
      </div>
    </div>
  </div>
</div>

<!-- Health Check -->
<div id="healthBox" class="alert alert-secondary mb-3" style="display:none;"></div>
<button class="btn btn-outline-info btn-sm mb-3" onclick="checkHealth()">
  <i class="fas fa-heartbeat"></i> Check {{ dept }} Connection
</button>

<!-- Recent Invoices -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Recent {{ dept }} Invoices</h6>
  </div>
  <div class="card-body">
    <table id="invTable" class="table table-bordered table-hover text-nowrap" style="font-size:13px;">
      <thead class="thead-light">
        <tr>
          <th>#</th><th>USIN</th><th>Source</th><th>Amount</th><th>Tax</th>
          <th>Status</th><th>Fiscal#</th><th>Date</th><th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for inv in recent_invoices %}
        <tr>
          <td>{{ inv.t_id }}</td>
          <td><a href="{% url 'tax_registrations:invoice_detail' inv.pk %}">{{ inv.usin }}</a></td>
          <td><small>{{ inv.source_type }}</small></td>
          <td class="text-right">{{ inv.total_bill_amount|floatformat:0 }}</td>
          <td class="text-right">{{ inv.total_tax_charged|floatformat:0 }}</td>
          <td>
            {% if inv.fiscal_status == 'success' %}
              <span class="badge badge-success">Success</span>
            {% elif inv.fiscal_status == 'failed' %}
              <span class="badge badge-danger">Failed</span>
            {% else %}
              <span class="badge badge-warning">Pending</span>
            {% endif %}
          </td>
          <td><small>{{ inv.fiscal_invoice_number|default:"-" }}</small></td>
          <td><small>{{ inv.created_at|date:"d-M-y H:i" }}</small></td>
          <td>
            <a href="{% url 'tax_registrations:invoice_detail' inv.pk %}" class="btn btn-xs btn-outline-primary">View</a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="9" class="text-center text-muted">Koi invoice nahi abhi tak</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
  $(document).ready(function(){
    $('#invTable').DataTable({ pageLength: 20, ordering: true, order: [[0,'desc']] });
  });

  function checkHealth(){
    var box = document.getElementById('healthBox');
    box.style.display = 'block';
    box.className = 'alert alert-info mb-3';
    box.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Checking {{ dept }} connection...';

    fetch("{% url 'tax_registrations:health_check' %}?dept={{ dept }}")
      .then(r => r.json())
      .then(d => {
        if(d.alive){
          box.className = 'alert alert-success mb-3';
          box.innerHTML = 'API reachable! Mode: <b>'+d.mode+'</b>, POS: <b>'+d.pos_id+'</b>';
        } else {
          box.className = 'alert alert-danger mb-3';
          box.innerHTML = 'API not reachable: '+(d.error||'unknown');
        }
      })
      .catch(e => {
        box.className = 'alert alert-danger mb-3';
        box.innerHTML = 'Error: '+e;
      });
  }
</script>
{% endblock %}