src/Flexy/FrontBundle/templates/cart/showDevis.html.twig line 1

Open in your IDE?
  1. {% extends "@Flexy/FrontBundle/templates/layout.html.twig"  %}
  3.     {% block stylesheets %}
  4.         {{parent()}}
  6. <style type="text/css" media="print">
  7.         header,.hidden-print
  8.         {
  9.             display:none;
  10.         }
  12.     </style>
  13.     
  14.         <style>
  15.   
  16.         #invoice{
  17.     padding: 30px;
  18. }
  20. .invoice {
  21.     position: relative;
  22.     background-color: #FFF;
  23.     min-height: 680px;
  24.     padding: 15px
  25. }
  27. .invoice header {
  28.     padding: 10px 0;
  29.     margin-bottom: 20px;
  30.     border-bottom: 1px solid #3989c6
  31. }
  33. .invoice .company-details {
  34.     text-align: right
  35. }
  37. .invoice .company-details .name {
  38.     margin-top: 0;
  39.     margin-bottom: 0
  40. }
  42. .invoice .contacts {
  43.     margin-bottom: 20px
  44. }
  46. .invoice .invoice-to {
  47.     text-align: left
  48. }
  50. .invoice .invoice-to .to {
  51.     margin-top: 0;
  52.     margin-bottom: 0
  53. }
  55. .invoice .invoice-details {
  56.     text-align: right
  57. }
  59. .invoice .invoice-details .invoice-id {
  60.     margin-top: 0;
  61.     color: #3989c6
  62. }
  64. .invoice main {
  65.     padding-bottom: 50px
  66. }
  68. .invoice main .thanks {
  69.     margin-top: -100px;
  70.     font-size: 2em;
  71.     margin-bottom: 50px
  72. }
  74. .invoice main .notices {
  75.     padding-left: 6px;
  76.     border-left: 6px solid #3989c6
  77. }
  79. .invoice main .notices .notice {
  80.     font-size: 1.2em
  81. }
  83. .invoice table {
  84.     width: 100%;
  85.     border-collapse: collapse;
  86.     border-spacing: 0;
  87.     margin-bottom: 20px
  88. }
  90. .invoice table td,.invoice table th {
  91.     padding: 15px;
  92.     background: #eee;
  93.     border-bottom: 1px solid #fff
  94. }
  96. .invoice table th {
  97.     white-space: nowrap;
  98.     font-weight: 400;
  99.     font-size: 16px
  100. }
  102. .invoice table td h3 {
  103.     margin: 0;
  104.     font-weight: 400;
  105.     color: #3989c6;
  106.     font-size: 1.2em
  107. }
  109. .invoice table .qty,.invoice table .total,.invoice table .unit {
  110.     text-align: right;
  111.     font-size: 1.2em
  112. }
  114. .invoice table .no {
  115.     color: #fff;
  116.     font-size: 1.6em;
  117.     background: #3989c6
  118. }
  120. .invoice table .unit {
  121.     background: #ddd
  122. }
  124. .invoice table .total {
  125.     background: #3989c6;
  126.     color: #fff
  127. }
  129. .invoice table tbody tr:last-child td {
  130.     border: none
  131. }
  133. .invoice table tfoot td {
  134.     background: 0 0;
  135.     border-bottom: none;
  136.     white-space: nowrap;
  137.     text-align: right;
  138.     padding: 10px 20px;
  139.     font-size: 1.2em;
  140.     border-top: 1px solid #aaa
  141. }
  143. .invoice table tfoot tr:first-child td {
  144.     border-top: none
  145. }
  147. .invoice table tfoot tr:last-child td {
  148.     color: #3989c6;
  149.     font-size: 1.4em;
  150.     border-top: 1px solid #3989c6
  151. }
  153. .invoice table tfoot tr td:first-child {
  154.     border: none
  155. }
  157. .invoice footer {
  158.     width: 100%;
  159.     text-align: center;
  160.     color: #777;
  161.     border-top: 1px solid #aaa;
  162.     padding: 8px 0
  163. }
  165. @media print {
  166.     .invoice {
  167.         font-size: 11px!important;
  168.         overflow: hidden!important
  169.     }
  171.     .invoice footer {
  172.         position: absolute;
  173.         bottom: 10px;
  174.         page-break-after: always
  175.     }
  177.     .invoice>div:last-child {
  178.         page-break-before: always
  179.     }
  180. }
  181.     </style>
  182.     {% endblock %}
  185. {% block body %}
  188.   
  190.         <div class="body-wrapper">
  192.     <div class="container">
  193.     <div class="card p-4">
  194.     
  195.         
  197.                 <div id="invoice">
  199.     <div class="toolbar hidden-print">
  200.         <div class="text-right">
  201.             <button id="printInvoice" class="btn btn-info"><i class="fa fa-print"></i> Imprimer / Exporter en PDF</button>
  202.             
  203.         </div>
  204.         <hr>
  205.     </div>
  206.     <div class="invoice overflow-auto">
  207.         <div style="min-width: 600px">
  208.             <header>
  209.                 <div class="row">
  210.                     <div class="col">
  211.                         <a target="_blank" href="#">
  212.                             <img width="200" src="{{asset('omall/logo-black.png')}}" >
  213.                             </a>
  214.                     </div>
  215.                     <div class="col company-details ">
  216.                     <small>Num de devis </small>
  217.                         <h2 class="name">
  218.                             
  219.                             <a target="_blank" href="#">
  220.                             Devis {{"now"|date("ymdhis")}}
  221.                             </a>
  222.                         </h2>
  223.                        
  224.                     </div>
  225.                 </div>
  226.             </header>
  227.             <main>
  228.                 <div class="row contacts">
  229.                     <div class="col invoice-to">
  230.                         <div class="text-gray-light"></div>
  231.                         <!--<h2 class="to">Najib Benkirane</h2>
  232.                         <div class="address">56 Hay tawfik, Casablanca maroc  </div>-->
  233.                     </div>
  234.                     <div class="col invoice-details">
  235.                         <div class="date">Date de devis: {{"now"|date('d-m-Y')}}</div>
  236.                         <div class="date"></div>
  237.                     </div>
  238.                 </div>
  239.                 
  240.                 <div class="row" >
  241.                     <div class="col-12" >
  242.                         
  243.                     </div>
  244.                 </div>
  246.                 <table border="0" cellspacing="0" cellpadding="0">
  247.                     <thead>
  248.                         <tr>
  249.                             <th>Produit</th>
  250.                             <th class="text-left">Description</th>
  251.                             <th class="text-right">Prix</th>
  252.                             <th class="text-right">Quantity</th>
  253.                             <th class="text-right">TOTAL</th>
  254.                         </tr>
  255.                     </thead>
  256.                     <tbody class="cart-devis">
  258.                     
  259.                         
  260.                         <tr>
  261.                             <td class="no"></td>
  262.                             <td class="text-left">
  263.                             <p>
  264.                                
  265.                             </p>
  266.                             </td>
  267.                             <td class="unit"> MAD</td>
  268.                             <td class="qty"> </td>
  269.                             <td class="total"> MAD</td>
  270.                         </tr>
  271.                        
  273.                    
  274.                     </tbody>
  275.                     <tfoot>
  276.                         <tr>
  277.                             <td colspan="2"></td>
  278.                             <td colspan="2">Frais de livraison</td>
  279.                             <td  > 8,50 MAD</td>
  280.                         </tr>
  281.                         <tr>
  282.                             <td colspan="2"></td>
  283.                             <td colspan="2"></td>
  284.                             <td  > </td>
  285.                         </tr>
  286.                         <tr>
  287.                             <td colspan="2"></td>
  288.                             <td colspan="2">Montant รก payer</td>
  289.                             <td class="total-devis"  > MAD</td>
  290.                         </tr>
  291.                     </tfoot>
  292.                 </table>
  293.                 <div class="thanks"></div>
  294.                 <div class="notices d-none">
  295.                     <div>NOTICE:</div>
  296.                     <div class="notice">Valable pendant 15 jours </div>
  297.                 </div>
  298.             </main>
  299.             <footer>
  300.                 
  301.             </footer>
  303.                 
  305.         </div>
  306.         <!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom-->
  307.         <div></div>
  308.     </div>
  309. </div>
  311.             
  312.         
  313.     </div>
  314.     </div>
  315.         </div>
  316.         <!-- Body Wrapper End Here -->
  320. {% endblock %}
  324.         {% block javascripts %}
  325.             {{parent()}}
  326.                     <script>
  327.          $('#printInvoice').click(function(){
  328.              $(".footer").hide();
  329.               $(this).hide();
  330.             Popup($('.invoice')[0].outerHTML);
  331.             function Popup(data) 
  332.             {
  333.                 window.print();
  334.                 return true;
  335.         
  336.                $(this).show();
  337.             }
  338.                  $(".footer").show();
  339.         });
  340.         </script>
  341.         {% endblock %}