templates/fos/parcels/view_parcel.html.twig line 1

Open in your IDE?
  1. {% extends 'fos/base.html.twig' %}
  5. {% block firstnav %}
  6.     {{ render(controller('App\\Parcels\\DefaultController::nav')) }}
  7. {% endblock %}
  8. {% block secondnav %}
  11.     <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
  12.     <link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
  13.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
  15.             integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
  16.             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  17.     <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js" integrity="sha512-/hVAZO5POxCKdZMSLefw30xEVwjm94PAV9ynjskGbIpBvHO9EBplEcdUlBdCKutpZsF+La8Ag4gNrG0gAOn3Ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  21.     {#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>#}
  24.     <!-- Second Nav -->
  25.     <nav class="navbar-second navbar navbar-default navbar-static-top" role="navigation">
  26.         <div class="container-fluid">
  27.             <div class="navbar-header">
  28.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  29.                         data-target="#bs-example-navbar-collapse-1">
  30.                     <span class="sr-only">Toggle navigation</span>
  31.                     <span class="icon-bar"></span>
  32.                     <span class="icon-bar"></span>
  33.                     <span class="icon-bar"></span>
  34.                 </button>
  35.                 <!-- Brand -->
  36.                 {% block current %}
  37.                     <span class="navbar-brand" href="#"><i class="fa fa-gears"></i> PARCEL TO {{ transaction.wayBill.toStation }}</span>
  38.                 {% endblock %}
  39.             </div>
  40.             <div class="collapse navbar-collapse animated fadeIn" id="bs-example-navbar-collapse-1">
  41.                 <ul class="nav navbar-nav animated fadeIn">
  43.                     {% block  secondarylinkblock %}
  44.                         {#<li><a href="{{ path('new-parcel') }}"><i class="fa fa-plus-circle"></i> Register Parcel</a></li>#}
  45.                         {#<li class=""><a href="#"><i class="fa fa-th-list"></i> Parcels</a></li>#}
  46.                         <li class=""><a href="{{ app.request.headers.get('referer') }}"><i class="fa fa-arrow-circle-left"></i> Back</a></li>
  47.                         {#<li class="active"><a href=""><i class="fa fa-plus-circle"></i> View Parcel #{{ transaction.waybill.parcel.id }}</a></li>#}
  48.                     {% endblock %}
  49.                 </ul>
  50.                 <ul class="nav navbar-nav navbar-right">
  51.                     <li class=""><a></a></li>
  52.                     {#<li><p class="navbar-text"></p></li>#}
  53.                 </ul>
  54.             </div><!-- /.navbar-collapse -->
  55.         </div><!-- /.container-fluid -->
  56.     </nav>
  58. {% endblock %}
  60. {% block stylesheets %}
  61.     <style>
  62.         /*@import "../../../../../web/assets/css/print.css";*/
  65.         h6{
  66.             font-weight: bold;
  67.         }
  68.         h3 {
  69.             /*font-size: 20px;*/
  70.         }
  72.         h5,h3,h4,p {
  73.             padding: 0px;
  74.             font-family: "Amaranth", sans-serif;
  75.             background: #ffffff;
  76.          }
  77.         legend {
  78.             border: none;
  79.             padding: 5px;
  80.         }
  82.         .print-area h5, .print-area h3, .print-area h4 {
  83.             padding: 0px;
  84.             font-family: "Nova Flat", sans-serif;
  85.             background: #ffffff;
  86.             border: none;
  87.             margin: 0;
  88.         }
  89.         .print-area p {
  90.             font-size: 12px;
  91.             padding: 4px;
  92.             margin: 0px;
  93.             line-height: 10px;
  94.             border: none;
  95.         }
  97.         hr {
  98.             margin-top: 1px;
  99.             margin-bottom: 1px;
  100.             border-top: 2px dashed rgba(0, 0, 0, 0.99);
  101.         }
  103.         .print-area hr {
  104.             border-top: 1px dashed rgba(0, 0, 0, 0.99);
  105.         }
  107.         .print-area {
  108.             width: 28%;
  109.             background: white;
  110.             /*border: 1px dotted;*/
  111.             padding: 2%;
  112.             display: none;
  113.             /*background-color: firebrick;*/
  114.         }
  115.         .print-area table {
  116.             font-family: 'Fjord One', serif;
  118.         }
  121.         element.style {
  122.         }
  124.         fieldset {
  125.             display: block;
  126.             margin-left: 0px;
  127.             margin-right: 2px;
  128.             border-top: 1px dotted black;
  130.         }
  132.         .kkk fieldset{
  133.             float: right;
  134.             width: 40%;
  135.         }
  137.         .detail{
  138.             padding: 0px;
  139.             font-size: 11px;
  140.             border: none;
  141.         }
  143.         @media print {
  145.             .sf-toolbar, .sf-display-none, .sf-minitoolbar {
  146.                 display: none;
  147.             }
  148.             .print-area {
  149.                 display: block;
  150.             }
  151.             @page {
  152.                 margin: 0 !important;
  153.             }
  154.             html {
  155.                 margin: 0 !important;
  156.             }
  157.             body {margin:0 !important;}
  158.             .print-area {
  159.                 width: 100%;
  160.             }
  161.             .pro {
  162.                 display: none;
  163.             }
  164.             .sf-toolbar, .sf-toolbarreset, .sf-minitoolbar {
  165.                 display: none;
  166.             }
  168.             /*.page-break {display: block; page-break-before: always }*/
  171.             .page-break {
  172.                 page-break-before: avoid;
  173.             }
  174.             .page-break {
  175.                 page-break-after: always;
  176.             }
  177.             pre, blockquote {
  178.                 page-break-inside: avoid;
  179.             }
  182.         }
  184.         .parcel {
  185.             font-family: 'Big Shoulders Text', cursive;
  186.             margin-bottom: 10px;
  187.             margin-left: 10px;
  188.         }
  191.         .parcel h3, .parcel span{
  192.             font-family: 'Merriweather', serif;
  193.             margin-top: 15px;
  194.         }
  196.         .sender_receiver .col-lg-6 + fieldset {
  197.             box-shadow: 5px 3px 20px #888888;
  198.         }
  199.         .sender_receiver fieldset{
  200.             background-color: beige;
  201.             border-top: 1px solid #d3cece;
  203.         }
  205.         .sender_receiver fieldset legend{
  206.             background-color: beige;
  207.             border: 1px solid #d3cece;
  208.         }
  209.         .sender_receiver fieldset h5{
  210.             background: none;
  211.         }
  213.         .destinations {
  214.             float: left;
  215.             width: 50%;
  216.             padding: 10px;
  217.             font-family: 'Open Sans', sans-serif;
  218.             margin-bottom: 15px;
  219.         }
  221.         .destinations h4, .destinations b {
  222.             font-family: 'Merriweather', serif;
  223.         }
  224.         .destinations h3 {
  225.             margin-bottom: 10px;
  226.         }
  228.         .description {
  229.             font-size: 37px;
  230.             margin-left: 10px;
  231.         }
  233.         .all_parcels{
  234.             text-transform: uppercase;
  235.             -ms-transform: rotate(90deg);
  236.             -moz-transform: rotate(90deg);
  237.             -webkit-transform: rotate(90deg);
  238.             -o-transform: rotate(90deg);
  239.             margin-top: 115px;
  240.             width: 430px;
  241.             margin-left: -60px;
  242.         }
  244.         .payment button, .print, .payment a {
  245.             width: 150px;
  246.             border-radius: 30px;
  247.         }
  249.         .payment .cash {
  250.             float: right;
  251.         }
  253.         .payment .cash img {
  254.             height: 20px;
  255.         }
  257.     </style>
  258. {% endblock %}
  261. {% block main %}
  262.     <div class="row pro" style="padding: 10px 0px 20px 20px; /*border-right: 1px solid #888888;*/ background: #FFFFFF; /*box-shadow: 5px 3px 20px #888888;*/">
  263.         <h3 style="font-family:Serif;margin-top: 30px;">WayBill: {{ transaction.wayBill.id }} - {{ transaction.cuInvoiceNumber }}</h3>
  264.         <div class="col-lg-6 pro">
  266.             <div class="row sender_receiver">
  267.                 <div class="col-lg-6">
  268.                     <fieldset style="box-shadow: 5px 5px 0px #888888;">
  269.                         <legend class="top-legend">SENDER</legend>
  271.                         <div class="row">
  272.                             <div class="col-lg-12">
  273.                                 <fieldset>
  274.                                     <legend>Name</legend>
  275.                                     <h5>{{ transaction.waybill.senderName | upper }}</h5>
  276.                                 </fieldset>
  277.                             </div>
  278.                         </div>
  279.                         <div class="row">
  280.                             <div class="col-lg-12">
  281.                                 <fieldset>
  282.                                     <legend>Phone</legend>
  283.                                     <h5>{{ transaction.waybill.senderPhoneNumber }}</h5>
  284.                                 </fieldset>
  285.                             </div>
  286.                         </div>
  287.                         <div class="row">
  288.                             <div class="col-lg-12">
  289.                                 <fieldset>
  290.                                     <legend>From</legend>
  291.                                     <h5>{{ transaction.waybill.fromStation }}</h5>
  292.                                 </fieldset>
  293.                             </div>
  294.                         </div>
  295.                     </fieldset>
  296.                 </div>
  297.                 <div class="col-lg-6">
  298.                     <fieldset style="box-shadow:5px 5px 0px #888888">
  299.                         <legend class="top-legend">RECEIVER</legend>
  301.                         <div class="row">
  302.                             <div class="col-lg-12">
  303.                                 <fieldset>
  304.                                     <legend>Name</legend>
  305.                                     <h5>{{ transaction.wayBill.receiverName | upper }}</h5>
  306.                                 </fieldset>
  307.                             </div>
  308.                         </div>
  309.                         <div class="row">
  310.                             <div class="col-lg-12">
  311.                                 <fieldset>
  312.                                     <legend>Phone</legend>
  313.                                     <h5>{{ transaction.waybill.receiverPhoneNumber }}</h5>
  314.                                 </fieldset>
  315.                             </div>
  316.                         </div>
  317.                         <div class="row">
  318.                             <div class="col-lg-12">
  319.                                 <fieldset>
  320.                                     <legend>To</legend>
  321.                                     <h5>{{ transaction.waybill.toStation }}</h5>
  322.                                 </fieldset>
  323.                             </div>
  324.                         </div>
  326.                     </fieldset>
  327.                 </div>
  328.             </div>
  330.         </div>
  332.         <div class="receipt" >
  333.             <div class="row pro">
  334.                 <div  class="col-lg-4 col-md-6">
  335.                     <fieldset align="center" style="border: 1px dotted black; padding-bottom: 10px;">
  336.                         <legend>Cost</legend>
  338.                         <table width="90%" style="text-align: center; align-content: center;">
  339.                             <tr>
  340.                                 <td align="left"><h5 align="left" style="border: none;">{{ transaction.taxPercentage }}% V.A.T</h5></td>
  341.                                 <td align="right" style="font-family: 'Fjord One', Serif; font-weight: bolder;">{{ (transaction.taxAmount) | number_format(2, '.', ',') }}</td>
  342.                             </tr>
  343.                             <tr style="">
  344.                                 <td align="left"><h5 align="left" style="border: none;">COST</h5></td>
  345.                                 <td align="right" style="font-family: 'Fjord One', Serif;font-weight: bolder;">{{ (transaction.grossAmount - transaction.taxAmount) | number_format(2, '.', ',') }}</td>
  346.                             </tr>
  348.                             {% for expense in transaction.wayBillExpenses %}
  349.                                 {% if expense.expenseType.isAutomatic == false %}
  350.                                     <tr style="border-bottom: 1px solid black;">
  351.                                         <td align="left"><h5 align="left" style="border: none;">{{ expense.expenseType.expenseName | upper }}</h5></td>
  352.                                         <td align="right" style="font-family: 'Fjord One', Serif; font-weight: bolder;border-right: none;">-{{ expense.amount  }}</td>
  353.                                     </tr>
  354.                                     {#{% set expenseAmount = (expenseAmount + expense.amount) %}#}
  355.                                 {% endif %}
  356.                             {% endfor %}
  358.                             <tr style="border-bottom: 2px double black;border-top: 2px double black;">
  359.                                 <td align="right"><h4 align="left" style="border: none;">TOTAL</h4></td>
  360.                                 <td align="right" style="font-family: 'Fjord One', Serif; font-weight: bolder;">KSH {{ (transaction.stationBalance ) | number_format }}</td>
  361.                             </tr>
  363.                         </table>
  365.                     </fieldset>
  366.                     <p style="border:none;">Transaction by: {{ transaction.waybill.createdBy.person.secondName }} {{ transaction.waybill.createdBy.person.sirName }}</p>
  371.                     {% if transaction.isCancelled == false %}
  372.                         {% if transaction.isComplete == false or is_granted('ROLE_BOS_USER') or is_granted('ROLE_STATION_ADMIN') %}
  373.                                 {{ form_start(cancelForm) }}
  374.                                         <button type="submit" class="btn btn-sm btn-warning ">cancel transaction</button>
  375.                                 {{ form_end(cancelForm) }}
  376.                         {% endif %}
  377.                     {% endif %}
  378.                 </div>
  379.             </div>
  380.         </div>
  384.     </div>
  385.     <div class="row">
  386.         <div class="row">
  389.             {% if transaction.isPaid %}
  390.                 {% if transaction.isCancelled != true %}
  391.                     <div class="col-lg">
  392.                         {#{% if transaction.isCancelled == false and isCancellable == true %}#}
  393.                         <div class="row pro kkk" style="padding: 10px 0px 20px 20px; background: #FFFFFF;  margin-left: auto">
  394.                             <div class="col-lg-12">
  395.                                 <fieldset>
  396.                                     <legend>Print</legend>
  397.                                     {% if isCashCanChangeMpesa %}
  398.                                         <a href="{{ path('payment_request_view', {'waybill': transaction.wayBill.id}) }}" class="btn btn-success" style="float: left;">
  399.                                             <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  400.                                             change payment to M-PESA
  401.                                         </a>
  402.                                     {%endif%}
  404.                                     <div align="right">
  405.                                         {#<a href="{{ path('pdf_report', {'id': transaction.waybill.id }) }}" class="btn btn-success" target="_blank"><i class="fa fa-print"></i> Print</a>#}
  406.                                         {#<a href="javascript:window.print()" class="btn btn-success" target="_blank"><i class="fa fa-print"></i> Print</a>#}
  409.                                         {% if tims is not null %}
  410.                                             {% if tims.type == 'TYPEC' and tims.supplierCode == 'PARGAMON' %}
  411. {#                                            {% if tims.type == 'TYPEC' and tims.supplierCode == 'PARGAMON' and is_granted('ROLE_BOS_USER')%}#}
  412.                                                 <a href="{{ path('receipt_action', {'waybill_': transaction.wayBill.id }) }}" download="application/pdf">
  413.                                                     <button type="button" class="btn btn-success print">
  414.                                                         <i class="fa fa-print"></i>
  415.                                                         Print PDF
  416.                                                     </button>
  417.                                                 </a>
  418.                                             {% elseif tims.type == 'TYPEC' and tims.supplierCode == 'TREMOL' %}
  420.                                                 <button type="button" class="btn btn-success print" onclick="print('/fos/receipt/g03/{{ transaction.wayBill.id }}')">
  421.                                                     <i class="fa fa-print"></i>
  422.                                                     Print Receipt
  423.                                                 </button>
  424.                                             {% else %}
  425.                                                 <button type="button" class="btn btn-success print" onclick="print('/fos/receipt/{{ transaction.wayBill.id }}')">
  426.                                                     <i class="fa fa-print"></i>
  427.                                                     Print Receipt
  428.                                                 </button>
  429.                                             {% endif %}
  430.                                         {% else %}
  431.                                                 ----
  432.                                             <button type="button" class="btn btn-success print" onclick="print('/fos/receipt/{{ transaction.wayBill.id }}')">
  433.                                                 <i class="fa fa-print"></i>
  434.                                                 Print Receipt
  435.                                             </button>
  436.                                         {% endif %}
  438. {#                                        <button type="button" class="btn btn-success print" onclick="printReceipt()">#}
  439. {#                                            <i class="fa fa-print"></i>#}
  440. {#                                            Print#}
  441. {#                                        </button>#}
  442. {#                                        <button type="button" class="btn btn-success print" onclick="save()">#}
  443. {#                                            <i class="fa fa-print"></i>#}
  444. {#                                            Print#}
  445. {#                                        </button>#}
  448.                                     </div>
  449.                                 </fieldset>
  450.                             </div>
  451.                         </div>
  452.                         {#{% endif %}#}
  453.                     </div>
  454.                 {% else %}
  455.                     <div class="col-lg">
  456.                         <fieldset>
  457.                             <legend>Print</legend>
  458.                             <div align="right">
  460.                                 <button type="button" class="btn btn-danger print" style="width: auto" disabled>
  461.                                     <i class="fa fa-print"></i>
  462.                                     this transaction is cancelled
  463.                                 </button>
  464.                             </div>
  465.                         </fieldset>
  466.                         <b></b>
  467.                     </div>
  468.                 {% endif %}
  469.             {% else %}
  470.                 {% if transaction.isCancelled != true %}
  471.                     <div class="col-lg"s>
  472.                         <div class="row pro kkk" style="padding: 10px 0px 20px 20px; background: #FFFFFF;  margin-left: auto">
  473.                             <div class="col-lg-12">
  474.                                 <fieldset class="payment">
  475.                                     <legend>Select Payment option</legend>
  476.                                     {% if isMpesaAvailable %}
  477.                                         <a href="{{ path('payment_request_view', {'waybill': transaction.wayBill.id}) }}" class="btn btn-success" style="float: left;">
  478.                                             <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  479.                                             M-PESA
  480.                                         </a>
  481.                                     {%else%}
  482.                                         <button {#href="{{ path('payment_request_view', {'waybill': transaction.wayBill.id}) }}"#} class="btn btn-success" style="float: left;" disabled>
  483.                                             <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  484.                                             M-PESA
  485.                                         </button>
  486.                                     {%endif%}
  488.                                     {{ form_start(cashPaymentOptionForm) }}
  489.                                     <button type="submit" class="btn btn-warning cash">
  490.                                         <i><img src="{{ asset('fos/images/money_icon.png') }}" alt=""></i>
  491.                                         Cash
  492.                                     </button>
  493.                                     {{ form_end(cashPaymentOptionForm) }}
  495.                                 </fieldset>
  496.                             </div>
  497.                         </div>
  498.                     </div>
  499.                 {% endif %}
  500.             {% endif %}
  501.         </div>
  502.     </div>
  503.     {# <div class="row" style="padding: 10px 0px 20px 20px; border-right: 1px solid #888888; background: #FFFFFF; box-shadow: 5px 3px 20px #888888;">
  504.         {{ form_start(form) }}
  505.         <fieldset>
  506.             <legend>WayBill Expense</legend>
  507.             <div class="row">
  508.                 <div class="col-lg-3 col-md-3">
  509.                     <label for="sender_name">Expense Type</label>
  510.                     {{ form_widget(form.expenseType,{'attr':{'class':'form-control' }} ) }}
  511.                     <div class="invalid-feedback">
  512.                         {{ form_errors(form.expenseType) }}
  513.                     </div>
  514.                 </div>
  516.                 <div class="col-lg-2 col-md-4">
  517.                     <label for="sender_name">Amount</label>
  518.                     {{ form_widget(form.amount,{'attr':{'class':'form-control' }} ) }}
  519.                     <div class="invalid-feedback">
  520.                         {{ form_errors(form.amount) }}
  521.                     </div>
  522.                 </div>
  524.             </div>
  525.             <div class="row" style="margin-top: 10px;">
  526.                 <div class="col-lg-1 col-md-1">
  527.                     <button type="submit" class="btn btn-success right-align">Save</button>
  528.                 </div>
  529.             </div>
  530.         </fieldset>
  531.         {{ form_end(form) }}
  532.     </div>#}
  534.     <div class=" row pro">
  536.             {% for parcel in parcels %}
  537.             <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="background: #FFFFFF; /*box-shadow: 5px 3px 20px #888888;*/ margin-top: 10px; padding-top: 10px; margin-right: 20px;">
  538.                 <div class="col-lg-12">
  539.                     <fieldset>
  540.                         <legend>Parcel #{{ parcel.number  }}</legend>
  541.                         <h5>{{ parcel.description }}</h5>
  542.                     </fieldset>
  544.                     <fieldset>
  545.                         <legend><i class="fa fa-arrow-circle-down"></i></legend>
  546.                         <fieldset>
  547.                             <legend>Location</legend>
  548.                             <h5>IN OFFICE :{{ transaction.wayBill.fromStation }}
  549.                                 <p class="detail">From: <i class="fas fa-hand-point-right"></i>{{ transaction.wayBill.createdAt | date("F jS, Y \\a\\t g:ia") }}</p>
  550.                                {# {% if parcel.isEnRoute %}
  551.                                     <p class="detail">To: <i class="fas fa-hand-point-right"></i>{{ parcel.enRouteFrom | date("F jS, Y \\a\\t g:ia") }}</p>
  552.                                 {% endif %}#}
  553.                             </h5>
  554.                         </fieldset>
  556.                         {#{{ render(controller('App\\Parcels\\DefaultController::nav')) }}#}
  558.                         {{ render(controller('App\\Parcels\\ParcelController::getParcelDeliveryData',{'parcel_id':parcel.id})) }}
  560.                         {#{% if parcel.isEnRoute %}
  561.                         <fieldset>
  562.                             <legend>En route</legend>
  564.                             <h5>REG: {{ parcel.vehicle.regNumber }}
  565.                             <p class="detail">Loaded By: {{ transaction.waybill.createdBy.person.secondName }} {{ transaction.waybill.createdBy.person.sirName }}</p>
  566.                             {% if parcel.isEnRoute %}
  567.                                 <p class="detail">From: <i class="fas fa-hand-point-right"></i>{{ parcel.enRouteFrom | date("F jS, Y \\a\\t g:ia") }}</p>
  568.                             {% endif %}
  569.                             {% if parcel.isReceived %}
  570.                                 <p class="detail">To: <i class="fas fa-hand-point-right"></i>{{ parcel.receivedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  571.                             {% endif %}
  572.                             </h5>
  573.                         </fieldset>
  574.                         {% endif %}#}
  576.                         {#{% if parcel.isReceived %}
  577.                             <fieldset>
  578.                                 <legend>Received By</legend>
  579.                                 <h5>USER: {{ parcel.receivedBy.person.firstName | upper }}  {{ parcel.receivedBy.person.secondName | upper }}  {{parcel.receivedBy.person.sirName | upper }}
  580.                                 {% if parcel.isReceived %}
  581.                                     <p class="detail">From: <i class="fas fa-hand-point-right"></i>{{ parcel.receivedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  582.                                 {% endif %}
  583.                                 {% if transaction.wayBill.isCollected %}
  584.                                     <p class="detail">to: <i class="fas fa-hand-point-right"></i>{{ parcel.collectedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  585.                                 {% endif %}
  586.                                 </h5>
  587.                             </fieldset>
  588.                         {% endif %}#}
  591.                         {#{% if parcel.isCollected %}
  592.                             <fieldset>
  593.                                 <legend>Collected By</legend>
  594.                                 <h5>National ID: {{ parcel.collectorNationalId }}</h5>
  595.                                 <h5>USER: {{ parcel.collectedOfficerBy.person.firstName | upper }}  {{ parcel.collectedOfficerBy.person.secondName | upper }}  {{parcel.collectedOfficerBy.person.sirName | upper }}</h5>
  596.                                 <p class="detail">At: <i class="fas fa-hand-point-right"></i>{{ parcel.collectedAt | date("F jS, Y \\a\\t g:ia") }}</p>
  597.                             </fieldset>
  598.                         {% endif %}#}
  599.                     </fieldset>
  600.                     <div style="align-content: center; text-align: center;">
  601.                         <img alt="Coding Sips" src="/barcode?text={{ transaction.wayBill.id }}/{{ parcel.number }}&Codetype=Code128&size=60&print=true" />
  602.                     </div>
  606.                 </div>
  607.             </div>
  608.             {% endfor %}
  610.     </div>
  612.     {% if sms is defined  and sms %}
  613.         <hr>
  614.         <div class="row">
  615.             <table class="table table-bordered">
  616.                 <thead>
  617.                 <tr>
  618.                     <th>#</th>
  619.                     <th>RECEIVER</th>
  620.                     <th>STATUS</th>
  621.                     <th>Sent Via Phone</th>
  622.                     <th>MESSAGE</th>
  623.                 </tr>
  624.                 </thead>
  625.                 <tbody>
  626.                 {% for message in sms %}
  627.                     <tr>
  628.                         <td>{{ loop.index }} </td>
  629.                         <td>{{ message.recepient }}</td>
  630.                         <td>
  632.                             {% if message.status  %}
  633.                                 {% if message.status == 'Success' or message.status == 'Sent' %}
  634.                                     <span class="alert-success">{{ message.status }}</span>
  635.                                 {% else %}
  636.                                     <span class="alert-danger">
  637.                                         {{ message.status }}{#[{{ message.statusCode }}]#} <br>
  638.                                         {% if message.statusCode < 1000 %}
  639.                                             {{ statusChart[message.statusCode] }} [{{ message.statusCode }}]
  640.                                         {% endif %}
  641.                                     </span>
  642.                                 {% endif %}
  643.                             {% else %}
  644.                                 <span>N/A</span>
  645.                             {% endif %}
  647.                         </td>
  648.                         <td>
  649.                             {% if message.status != 'Success' or message.status != 'Sent' %}
  650.                                 {% if message.manuallySent %}
  651.                                     <i class="fas fa-check-circle" style="color: green;"></i>
  652.                                 {% endif %}
  653.                             {% endif %}
  654.                         </td>
  655.                         <td>{{ message.sms }}</td>
  656.                     </tr>
  657.                 {% endfor %}
  658.                 </tbody>
  659.             </table>
  660.         </div>
  662.     {% endif %}
  667.     <div class="print-area" id="print-area">
  668.     </div>
  672.     <script>
  673.         let printReceipt = async () => {
  676.             $(".se-pre-con").fadeIn("slow");
  678.             let completeTransaction = await fetch("{{ path('register_transaction_as_complete', {'id': transaction.wayBill.id }) }}", {
  679.                 method: 'POST'
  680.             }).then(response => {
  681.                 response.json().then(json => {
  682.                     if(response.status === 200){
  683.                         printJS({
  684.                             printable:'print-area',
  685.                             type: 'html',
  686.                             css:'../../../../../assets/css/print.css'});
  687.                     }else{
  688.                         console.log('error occurred');
  689.                     }
  690.                 })
  691.             }).finally(() => {
  692.                 $(".se-pre-con").fadeOut("slow");
  693.             });
  694.         };
  696.         jQuery(document).bind("keyup keydown", function(e){
  697.             if(e.ctrlKey && e.keyCode === 80){
  698.                 console.log("printing ...");
  699.                 printReceipt();
  701.             }
  702.         });
  704.         window.jsPDF = window.jspdf.jsPDF;
  705.         function download() {
  706.             let renderHtml = $('#print-area').html();
  708.             let pdf = new jsPDF('p','mm', [254, 80]);
  710.             pdf.html(renderHtml, {
  711.                 callback: function (pdf) {
  712.                     window.open(pdf.output('bloburl'));
  713.                 }
  714.             });
  715.         }
  716.         // download();
  718.         // $( document ).ready(function() {
  719.         //     window.jsPDF = window.jspdf.jsPDF;
  720.         //
  721.         //     // Default export is a4 paper, portrait, using millimeters for units
  722.         //     var doc = window.jsPDF;
  723.         //     var specialElementHandlers = {
  724.         //         '#editor': function (element, renderer) {
  725.         //             return true;
  726.         //         }
  727.         //     };
  728.         //
  729.         //     doc.html($('.receipt-print').html(), 15, 15, {
  730.         //         'width': 170,
  731.         //         'elementHandlers': specialElementHandlers
  732.         //     });
  733.         //     doc.save('sample-file.pdf');
  734.         // });
  736.         function save() {
  737.             var content = ["your-content-here"];
  738.             var bl = new Blob(content, {type: "application/pdf"});
  739.             var a = document.createElement("a");
  740.             a.href = URL.createObjectURL("http://localhost:8000/fos/receipt/{{ transaction.wayBill.id }}");
  741.             a.download = "{{ transaction.wayBill.id }}.pdf";
  742.             a.hidden = true;
  743.             document.body.appendChild(a);
  744.             a.click();
  745.         }
  747.         function print(url){
  748.             // $(".se-pre-con").fadeIn("slow");
  749.             // printJS(url);
  750.             printJS({
  751.                 printable: url,
  752.                 type:'pdf',
  753.                 showModal:true,
  754.                 modalMessage: 'Downloading receipt please wait!',
  755.                 onError: function (error) {
  756.                     console.log(error);
  757.                     alert('Could not generate receipt please try again  ')
  758.                 }
  759.             });
  760.         }
  763.     </script>
  765. {% endblock %}