{% extends "ie_base.html" %}
{% load static %}
{% block title %}<title>Printable QR/Barcode</title>{% endblock %}

{% block MainContent %}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
 <style>
 .right{
    text-align: right !important;
  }
  .rowhight{
    height:5px !important;
  }
</style>

<style>
  /* Container card style */
  .card {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* QR code image fills part of the card */
  .fixed-qr {
    width: 150px;
    height: 150px;

  }

  /* Barcode image fills part of the card */
  .fixed-barcode {
    width: 150px;
    height: 100px;

  }

  /* Print page setup */
  @page {
    size: A4 portrait;
    margin: 10mm 15mm;
  }

  /* Bootstrap row reset for print */
  @media print {
    body {
      margin: 0;
    }
    .row {
      margin: 0;
    }
    /* Force exactly 4 cards per row on print */
    .col-md-3 {
      page-break-inside: avoid;
      break-inside: avoid;
      flex: 0 0 25% !important;
      max-width: 25% !important;
    }
  }
</style>
{% if generated_items %}
<div class="mt-2">
    <div class="right">
    
      <button type="button" id="employee-attendance-general-report-pdf-button" class="cus-btn" style="width:70px; height:30px"><i class="fa fa-print" style="font-size: 16px; color:#fff"></i></button>
    </div>
   <div id="employee-attendance-general-report-table-pdf" id="tbl_absent_export">
  <div class="d-flex flex-wrap gap-3 justify-content-start">
    {% for item in generated_items %}
      <div class="card text-center p-2" style="hmax-width: 30%; min-width:20%; height: 112px; box-sizing: border-box;">
        {% if item.qr %}
          <img src="data:image/png;base64,{{ item.qr.0 }}" alt="QR Code" class="fixed-qr" style="width:150px; height:150px; object-fit: contain;">
          <p>{{item.qr.1}}</p>
        {% elif type_choice == "qrcode" or type_choice == "both" %}
          <p class="text-danger">No QR code available</p>
        {% endif %}

        {% if item.barcode %}
          <img src="data:image/png;base64,{{ item.barcode }}" alt="Barcode" class="fixed-barcode" style="width:250px; height:100px; margin-top: 1rem;">
        {% elif type_choice == "barcode" or type_choice == "both" %}
          <p class="text-danger">No Barcode available</p>
        {% endif %}

        <p class="mt-2">{{ item.machine.name }}</p>
      </div>
    {% endfor %}
  </div>
</div>

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

{% block JS %}
<script src="{% static 'js/report_app/global_dependency_search/global_dependency_search.js' %} "></script>
<script src="{% static 'js/report_app/general_attendance_report/general_attendance_report.js' %} "></script>
<script>
    $("#id_date").attr("type", "date");


    function printDiv(divName) {
        var originalContents = document.body.innerHTML
        var printContents = document.getElementById(divName).innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
      }


      
    function ExportToExcel(type, fn, dl) {
            var elt = document.getElementById('tbl_absent_export');
            var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
            return dl ?
                XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
                XLSX.writeFile(wb, fn || ('Absent_report.' + (type || 'xlsx')));
        }
</script>
{% endblock JS %}