{% extends 'admin_pages/base_admin.html' %}
{% block title %}Delivery details for {{invoice.sender}}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  {% block breadcrumbs %}
  <nav aria-label="breadcrumb" class="mb-3">
    <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">
        {% if invoice %}Print delivery slip #{{ invoice.id }}{% else %}{{ title }}{% endif %}
      </li>
    </ol>
  </nav>
  {% endblock %}

  <div class="d-flex gap-2 d-print-none ms-auto">
    <a href="{% url 'invoice_list' %}" class="btn btn-outline-secondary">
      <i class="fas fa-arrow-left me-1"></i> Back
    </a>
    <button class="btn btn-outline-primary" onclick="window.print()">
      <i class="fas fa-print me-1"></i> Print
    </button>
  </div>
</div>

<div class="page">
  <div class="container">
    <div class="watermark">Nana Trading</div>
    <h1 class="title">Delivery Details ({{invoice.id}})</h1>
    <div class="table-container">
      <table class="table">
        <caption style="font-size: x-large;">From: </caption>
        <tr><th>Name</th><td>{{ invoice.sender.name }} - {{ invoice.sender.last_name }}</td></tr>
        <tr><th>Address</th><td>{{ invoice.sender.street }}</td></tr>
        <tr><th>City</th><td>{{ invoice.sender.city }}</td></tr>
        <tr><th>Country</th><td>{{ invoice.sender.country }}</td></tr>
        <tr><th>Postal Code</th><td>{{ invoice.sender.postal_code }}</td></tr>
        <tr><th>Contacts</th><td>{{ invoice.sender.mobile }}</td></tr>
      </table>
      <table class="table">
        <caption style="font-size: x-large;">To: </caption>
        <tr><th>Full Name</th><td>{{ invoice.receiver.name }} - {{ invoice.receiver.last_name }}</td></tr>
        <tr><th>Address</th><td>{{ invoice.receiver.street }}</td></tr>
        <tr><th>City</th><td>{{ invoice.receiver.city }}</td></tr>
        <tr><th>Country</th><td>{{ invoice.receiver.country }}</td></tr>
        <tr><th>Postal Code</th><td>{{ invoice.receiver.postal_code }}</td></tr>
        <tr><th>Contacts</th><td>{{ invoice.receiver.mobile }}</td></tr>
        <tr><th>Email</th><td>{{ invoice.receiver.email }}</td></tr>
      </table>
      <table class="table">
        <caption style="font-size: x-large;">Piece: </caption>
        <tr><td></td></tr>
      </table>
    </div>
    <br>
    <table class="table" style="width: 98%;">
      <tr>
        <th>Item Value</th>
        <td>{{ invoice.item_value }}</td>
        <td rowspan="2" style="text-align: center; vertical-align: middle;">
          {% if invoice.qr_code %}
            <img src="{{ invoice.qr_code.url }}" alt="QR Code" height="100"><br>
          {% endif %}
        </td>
      </tr>
      <tr><th>Description</th><td>{{ invoice.item_description }}</td></tr>
    </table>
    <div class="clearfix"></div>
  </div>
</div>

<style>
  @media print {
    .navbar, .sidebar, .d-print-none, footer, h2, nav {
      display: none !important;
    }
    .watermark {
      opacity: 0.1;
      position: absolute;
      font-size: 80px;
      color: #000;
      top: 40%;
      left: 25%;
      transform: rotate(-30deg);
      z-index: 0;
    }
    p {
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.2;
    }
    body {
      margin: 0;
      background: white;
    }
    .container {
      padding: 20px;
    }
  }
  p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
  }
  .watermark {
    opacity: 0.05;
    position: absolute;
    font-size: 100px;
    color: #000;
    top: 40%;
    left: 25%;
    transform: rotate(-30deg);
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
</style>

<style>
  body {
    font-family: Arial, sans-serif;
    margin: auto;
    padding: auto;
    font-size: large;
  }
  .page {
    width: 297mm;
    height: 210mm;
    margin: auto;
    padding: auto;
    position: relative;
  }
  .container {
    width: 100%;
    padding: 20px;
    position: relative;
    z-index: 1;
  }
  .table-container {
    display: flex;
    justify-content: space-between;
  }
  .table {
    border-collapse: collapse;
    width: 48%;
    margin-right: 2%;
    float: left;
  }
  .table th,
  .table td {
    border: 2px solid #000000;
    padding: 8px;
    text-align: left;
  }
  .table th {
    background-color: #f2f2f2;
  }
  .title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
  }
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
</style>
{% endblock %}