<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تاییدیه - {{ instance.code }}</title>
  {% load static %}

  <!-- Fonts (match project) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

  <!-- Core CSS (same as other prints) -->
  <link rel="stylesheet" href="{% static 'assets/vendor/css/rtl/core.css' %}">
  <link rel="stylesheet" href="{% static 'assets/vendor/css/rtl/theme-default.css' %}">
  <link rel="stylesheet" href="{% static 'assets/css/demo.css' %}">
  <link rel="stylesheet" href="{% static 'assets/css/persian-fonts.css' %}">

  <style>
    @page { size: A4 landscape; margin: 1cm; }
    @media print { body { print-color-adjust: exact; } .no-print { display: none !important; } }
    .header { border-bottom: 0px solid #dee2e6; padding-bottom: 10px; margin-bottom: 10px; }
    .company-name { font-weight: 600; }
    .body-text { white-space: pre-line; line-height: 1.9; }
    .signature-section { margin-top: 40px; border-top: 0px solid #dee2e6; padding-top: 24px; }
  </style>
</head>
<body>
  <div class="container-fluid py-3">
    <!-- Top-left request info -->
    <div class="d-flex">
      <div class="ms-auto text-end">
        <div class="">کد یکتا هولوگرام: {{ cert.hologram_code|default:'-' }}</div>
        <div class="">شماره درخواست: {{ instance.code }}</div>
        <div class="">تاریخ: {{ cert.jissued_at }}</div>
      </div>
    </div>

    <!-- Header with logo and company -->
    <div class="header text-center">
      <h4 class="">{{ cert.rendered_title }}</h4>
      {% if template.company %}
        <div class="text-muted company-name">{{ template.company.name }}</div>
      {% endif %}
    </div>

    <!-- Certificate body -->
    <div class="body-text">
      {{ cert.rendered_body|safe }}
    </div>
    <h6 class="my-2">مشخصات چاه و کنتور هوشمند</h6>
    <div class="row" style="font-size: 14px;">
      <div class="col-4">
        <div>موقعیت مکانی (UTM): {{ latest_report.utm_x|default:'-' }} , {{ latest_report.utm_y|default:'-' }}</div>
        <div>نیرو محرکه چاه: {{ latest_report.driving_force|default:'-' }}</div>
        <div>نوع کنتور: {{ latest_report.get_meter_type_display|default:'-' }}</div>
        <div>قطر لوله آبده (اینچ): {{ latest_report.discharge_pipe_diameter|default:'-' }}</div>
        <div>نوع مصرف: {{ latest_report.get_usage_type_display|default:'-' }}</div>
        <div>شماره سیم‌کارت: {{ latest_report.sim_number|default:'-' }}</div>
      </div>
      <div class="col-4">
        <div>سایز کنتور: {{ latest_report.meter_size|default:'-' }}</div>
        <div>شماره پروانه بهره‌برداری چاه: {{ latest_report.exploitation_license_number|default:'-' }}</div>
        <div>قدرت موتور: {{ latest_report.motor_power|default:'-' }}</div>
        <div>دبی قبل از کالیبراسیون: {{ latest_report.pre_calibration_flow_rate|default:'-' }}</div>
        <div>دبی بعد از کالیبراسیون: {{ latest_report.post_calibration_flow_rate|default:'-' }}</div>
        <div>نام شرکت کنتورساز: {{ latest_report.water_meter_manufacturer.name|default:'-' }}</div>
        <div>شماره سریال کنتور: {{ instance.well.water_meter_serial_number|default:'-' }}</div>
      </div>
      <div class="col-4">
        <!-- Signature -->
        <div class="signature-section d-flex justify-content-end">
          <div class="text-center">
            <div>مهر و امضای تایید کننده</div>
            <div class="text-muted">{{ template.company.name }}</div>
            {% if template.company and template.company.signature %}
              <img src="{{ template.company.signature.url }}" alt="seal" style="max-height:200px">
            {% endif %}
          </div>
        </div>
      </div>

    </div>

    
  </div>

  <script>
    window.onload = function() { window.print(); setTimeout(function(){ window.close(); }, 200); };
  </script>
</body>
</html>
