templates/front/product/pdf.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{{ product.title }}</title>
  6.     <style>
  7.         body {
  8.             font-family: Arial, sans-serif;
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         .container {
  13.             padding: 20px;
  14.         }
  15.         .card {
  16.             border: 1px solid #ddd;
  17.             margin-bottom: 20px;
  18.             border-radius: 4px;
  19.             padding: 10px;
  20.             page-break-inside: avoid; /* Sprečava razbijanje kartice */
  21.         }
  22.         .card-header {
  23.             background-color: #f8f9fa;
  24.             padding: 10px;
  25.             font-size: 16px;
  26.             font-weight: bold;
  27.             page-break-after: avoid; /* Sprečava razbijanje kartice */
  28.         }
  29.         .card-body {
  30.             padding: 10px;
  31.         }
  32.         .row {
  33.             display: flex;
  34.             flex-wrap: wrap;
  35.             margin: -10px;
  36.             page-break-inside: avoid; /* Sprečava razbijanje redova unutar kartice */
  37.         }
  38.         .col-6 {
  39.             flex: 1;
  40.             padding: 10px;
  41.             box-sizing: border-box;
  42.         }
  43.         .bg-light {
  44.             background-color: #f8f9fa;
  45.         }
  46.         table {
  47.             width: 100%;
  48.             border-collapse: collapse;
  49.             margin-top: 10px;
  50.             page-break-inside: auto; /* Omogućava prelaz stranice unutar tabele */
  51.         }
  52.         th, td {
  53.             border: 1px solid #ddd;
  54.             padding: 8px;
  55.             text-align: left;
  56.             page-break-inside: avoid; /* Sprečava razbijanje redova unutar tabele */
  57.             page-break-after: auto;
  58.         }
  59.         th {
  60.             background-color: #f8f9fa;
  61.             color: #F45C2C;
  62.         }
  63.         thead {
  64.             display: table-header-group; /* Prikazuje zaglavlje tabele na svakoj novoj stranici */
  65.         }
  66.         img {
  67.             max-width: 100px; /* Ograničava veličinu slike u tabeli */
  68.         }
  69.         .header-row {
  70.             display: flex;
  71.             justify-content: space-between;
  72.             align-items: center;
  73.             border-bottom: 1px solid #ddd;
  74.             padding: 10px;
  75.             margin-bottom: 20px;
  76.         }
  77.         .header-logo img {
  78.             max-width: none; /* Uklanja ograničenje veličine za logotip */
  79.             max-height: 100px; /* Podesite visinu logotipa na željenu vrednost */
  80.         }
  81.         .company-details {
  82.             text-align: right;
  83.         }
  84.     </style>
  85. </head>
  86. <body>
  87. <div class="header-row">
  88.     <div class="header-logo">
  89.         <img src="{{ absolute_url(asset('assets/images/logo/logo1.png')) }}" alt="Logo">
  90.     </div>
  91.     <div class="company-details">
  92.         <div>SAŠA BOŽOVIĆ PR USLUGE SISTEMA OBEZBEĐENJA PC BOOM BOOM BEDINA VAROŠ</div>
  93.         <div>32250 Ivanjica, 13. Septembar br.30</div>
  94.         <div>Tel: 060/386-09-09</div>
  95.         <div>E-mail: office@pcboomboom.rs</div>
  96.     </div>
  97. </div>
  98. <div class="container">
  99.     <div class="card">
  100.         <div class="card-header">{{ product.title }}</div>
  101.         <div class="card-body">
  102.             <div class="row bg-light">
  103.                 <div class="col-6 fw-semibold">Naziv:</div>
  104.                 <div class="col-6">{{ product.title }}</div>
  105.             </div>
  106.             <div class="row">
  107.                 <div class="col-6 fw-semibold">Slika:</div>
  108.                 <div class="col-6"> <img src="{{ absolute_url(asset(product.mainImage.thumbnail100)) }}" alt="{{ product.title }}"></div>
  109.             </div>
  110.             <div class="row bg-light">
  111.                 <div class="col-6 fw-semibold">Šifra:</div>
  112.                 <div class="col-6">#{{ product.sku }}</div>
  113.             </div>
  114.             <div class="row">
  115.                 <div class="col-6 fw-semibold">Barkod:</div>
  116.                 <div class="col-6">{{ product.barcode }}</div>
  117.             </div>
  118.             <div class="row bg-light">
  119.                 <div class="col-6 fw-semibold">Proizvođač:</div>
  120.                 <div class="col-6">{{ product.factory.title }}</div>
  121.             </div>
  122.         </div>
  123.     </div>
  125.     <div class="card">
  126.         <div class="card-header">Detalji</div>
  127.         <div class="card-body">
  128.             <div class="row bg-light">
  129.                 <div class="col-6 fw-semibold">Kategorija:</div>
  130.                 <div class="col-6">{{ product.category.title }}</div>
  131.             </div>
  132.             <div class="row">
  133.                 <div class="col-6 fw-semibold">Oznake:</div>
  134.                 <div class="col-6">
  135.                     {% if product.new %}
  136.                         <p>NOVO</p>
  137.                     {% endif %}
  138.                     {% if product.discount %}
  139.                         <p style=" color: green;">POPUST</p>
  140.                     {% endif %}
  141.                     {% if product.superProduct %}
  142.                         <p style=" color: green;">SUPER PROIZVOD</p>
  143.                     {% endif %}
  144.                     {% if product.outOfStock %}
  145.                         <p style=" color: red;">NEMA NA STANJU</p>
  146.                     {% endif %}
  147.                     {% if product.isOutlet %}
  148.                         <p style=" color: orange;">OUTLET</p>
  149.                     {% endif %}
  150.                 </div>
  151.             </div>
  152.             <div class="row bg-light">
  153.                 <div class="col-6 fw-semibold">Atributi:</div>
  154.                 <div class="col-6">
  155.                     {% set attributes = product.attribute %}
  156.                     {% if not attributes.empty %}
  157.                         {% for atr in attributes %}
  158.                             {{ atr.title }}: {{ atr.value }}<br>
  159.                         {% endfor %}
  160.                     {% endif %}
  161.                 </div>
  162.             </div>
  163.         </div>
  165.     </div>
  167.     <div class="card">
  168.         <div class="card-header">Cena</div>
  169.         <div class="card-body">
  170.             <div class="row bg-light">
  171.                 <div class="col-6 fw-semibold">Cena sa PDV:</div>
  172.                 <div class="col-6">
  173.                     {% if product.discount %}
  174.                         {{ product.pricePDV | number_format(2, '.', ',') }} RSD
  175.                         <del>{{ (product.price * ((product.vat / 100) + 1)) | round | number_format(2, '.', ',') }} RSD</del>
  176.                     {% else %}
  177.                         {{ product.pricePDV | number_format(2, '.', ',') }} RSD
  178.                     {% endif %}
  179.                 </div>
  180.             </div>
  181.         </div>
  182.     </div>
  184.     <div class="card">
  185.         <div class="card-header">Ostalo</div>
  186.         <div class="card-body">
  187.             <div class="row bg-light">
  188.                 <div class="col-6 fw-semibold">Opis:</div>
  189.                 <div class="col-6">
  190.                     {{ product.description | raw }}
  191.                 </div>
  192.             </div>
  193.             <div class="row">
  194.                 <div class="col-6 fw-semibold">Deklaracija:</div>
  195.                 <div class="col-6">
  196.                     {{ product.options | raw }}
  197.                 </div>
  198.             </div>
  199.         </div>
  200.     </div>
  203. </div>
  204. </body>
  205. </html>