{% extends 'admin_pages/base_admin.html' %}
{% block title %}Invoice #{{ invoice.id }} - {{ invoice.sender.name }}{% endblock %}
{% load utils %}
{% load static %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 d-print-block">
  <div class="d-print-none">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'admin_page' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'invoice_list' %}">Invoices</a></li>
        <li class="breadcrumb-item active" aria-current="page">Invoice #{{ invoice.id }}</li>
      </ol>
    </nav>
  </div>
  <div class="d-flex gap-2 ms-auto">
    <a href="{% url 'invoice_list' %}" class="btn btn-outline-secondary d-print-none">
      <i class="fas fa-arrow-left me-1"></i> Back
    </a>
    <button class="btn btn-outline-primary d-print-none" onclick="window.print()">
      <i class="fas fa-print me-1"></i> Print
    </button>
  </div>
</div>

<div class="card border-0 p-4">
  <div class="row mb-3">
    <div class="col-md-4">
      <h5>Sender</h5>
      <p><strong>{{ invoice.sender.name }} {{ invoice.sender.last_name }}</strong></p>
      <p>{{ invoice.sender.address }}</p>
      <p>{{ invoice.sender.email }}</p>
      <p><i class="fa fa-phone"></i> {{ invoice.sender.mobile }}</p>
    </div>
    <div class="col-md-4">
      <h5>Receiver</h5>
      <p><strong>{{ invoice.receiver.name }} {{ invoice.receiver.last_name }}</strong></p>
      <p>{{ invoice.receiver.address }}</p>
      <p>{{ invoice.receiver.email }}</p>
      <p><i class="fa fa-phone"></i> {{ invoice.receiver.mobile }}</p>
    </div>
    <div class="col-md-4">
      <h5>Invoice Info</h5>
      <p><strong>ID:</strong> INV00{{ invoice.id }}</p>
      <p><strong>Date:</strong> {{ invoice.created_at }}</p>
      <p><strong>Track #:</strong> {{ invoice.track_number }}</p>
    </div>
  </div>

  <table class="table table-bordered">
    <thead class="table-light">
      <tr>
        <th>#</th>
        <th>Description</th>
        <th>Qty</th>
        <th>Unit</th>
        <th>Unit Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ item.item }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{ item.item.measurement_unit }}</td>
        <td>{{ item.unit_price|floatformat:2 }} $</td>
        <td>{{ item.quantity|floatformat:2|floatformat:2|add:item.handling_charges|floatformat:2 }} $</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="row">
    <div class="col-md-6">
      <p><strong>Description:</strong> {{ invoice.item_description }}</p>
      <p><strong>Item Value:</strong> {{ invoice.item_value }}</p>
      <p><strong>Total in Words:</strong> {{ sub_total }} $ Only</p>
    </div>
    <div class="col-md-6">
      <table class="table table-sm">
        <tr><th>Sub Total:</th><td>{{ total_amount|floatformat:2 }} $</td></tr>
        <tr><th>Handling Charges:</th><td>{{ total_handling|floatformat:2 }} $</td></tr>
        <tr><th>Previous Balance:</th><td>{{ invoice.remain_amount|floatformat:2 }} $</td></tr>
        <tr><th>Grand Total:</th><td>{{ grand_total|floatformat:2 }} $</td></tr>
        <tr><th>Amount Paid:</th><td>{{ invoice.amount_paid|floatformat:2 }} $</td></tr>
        <tr><th>Balance:</th><td>{{ invoice.remain_amount|floatformat:2 }} $</td></tr>
      </table>
    </div>
  </div>

  <div class="row mt-4">
    <div class="col-md-6 text-center">
      {% if invoice.qr_code %}
        <img src="{{ invoice.qr_code.url }}" alt="QR Code" height="100">
      {% endif %}
    </div>
    <div class="col-md-6 text-center">
      {% if invoice.barcode_image %}
        <img src="{{ invoice.barcode_image.url }}" alt="Barcode" height="60">
      {% endif %}
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-md-6 text-center">
      <p class="border-top pt-2">Office Signature & Stamp</p>
    </div>
    <div class="col-md-6 text-center">
      <p class="border-top pt-2">Sender's Signature</p>
    </div>
  </div>

  <div class="mt-4">
    <h5 class="text-center">قوانین و مقررات</h5>
    <ul style="direction: rtl; text-align: justify; font-size: 0.75rem; padding-right: 20px;">
      {% for rule in company_rules %}
        <li>{{ rule.rule }}</li>
      {% endfor %}
    </ul>
  </div>
</div>

<style>
  @media print {
    .navbar, .sidebar, footer, nav {
      display: none !important;
    }
    
    .container {
      padding: 20px;
    }
    p, .table td, .table th {
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.3;
    }
  }
</style>
{% endblock %}