

<style>
  .pb-md-36, .py-md-36 {
    padding-bottom: 9rem!important;
  }
  .pt-md-36, .py-md-36 {
    padding-top: 9rem!important;
  }
  .pb-md-30, .py-md-30 {
    padding-bottom: 7.5rem!important;
  }
  .pt-md-30, .py-md-30 {
    padding-top: 7.5rem!important;
  }
  .text-dark-50 {
    color: #7e8299!important;
  }
  .mb-10, .my-10 {
    margin-bottom: 2.5rem!important;
  }
  .border-right-md {
    border-right: 1px solid #ebedf3!important;
  }

  .pl-md-5, .px-md-5 {
    padding-left: 1.25rem!important;
  }

  .pb-9, .py-9 {
      padding-bottom: 2.25rem!important;
  }
  .pt-1, .py-1 {
      padding-top: .25rem!important;
  }
  .table.noborr thead th{
    border: none;
  }
  li{list-style: none;}
  .order_title{
    margin: 0;
    padding: 0 0 0 20px;
  }
  .order_title li{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    justify-content: space-between;
  }
  .order_title li p{
    color: #495057;
    font-size: 0.8225rem;
  }
  .title_h4:nth-child(1){
    margin-top: 0px;
  }
  .title_h4{
    font-weight: bold;
    margin-top: 15px;
  }
  .title_h4 span{
    float: right;
  }
</style>
<div class="row">
  <div class="card card-custom position-relative overflow-hidden col-md-9" id="pdfCentent">
      <!--begin::Shape-->
      <div class="position-absolute opacity-30" style="left:0;z-index:1">
        <span class="svg-icon svg-icon-10x svg-logo-white">
          <!--begin::Svg Icon | path:/metronic/theme/html/demo1/dist/assets/media/svg/shapes/abstract-8.svg-->
          <svg xmlns="http://www.w3.org/2000/svg" width="176" height="165" viewBox="0 0 176 165" fill="none">
            <g clip-path="url(#clip0)">
              <path d="M-10.001 135.168C-10.001 151.643 3.87924 165.001 20.9985 165.001C38.1196 165.001 51.998 151.643 51.998 135.168C51.998 118.691 38.1196 105.335 20.9985 105.335C3.87924 105.335 -10.001 118.691 -10.001 135.168Z" fill="#AD84FF"></path>
              <path d="M28.749 64.3117C28.749 78.7296 40.8927 90.4163 55.8745 90.4163C70.8563 90.4163 83 78.7296 83 64.3117C83 49.8954 70.8563 38.207 55.8745 38.207C40.8927 38.207 28.749 49.8954 28.749 64.3117Z" fill="#AD84FF"></path>
              <path d="M82.9996 120.249C82.9996 144.964 103.819 165 129.501 165C155.181 165 176 144.964 176 120.249C176 95.5342 155.181 75.5 129.501 75.5C103.819 75.5 82.9996 95.5342 82.9996 120.249Z" fill="#AD84FF"></path>
              <path d="M98.4976 23.2928C98.4976 43.8887 115.848 60.5856 137.249 60.5856C158.65 60.5856 176 43.8887 176 23.2928C176 2.69692 158.65 -14 137.249 -14C115.848 -14 98.4976 2.69692 98.4976 23.2928Z" fill="#AD84FF"></path>
              <path d="M-10.0011 8.37466C-10.0011 20.7322 0.409554 30.7493 13.2503 30.7493C26.0911 30.7493 36.5 20.7322 36.5 8.37466C36.5 -3.98287 26.0911 -14 13.2503 -14C0.409554 -14 -10.0011 -3.98287 -10.0011 8.37466Z" fill="#AD84FF"></path>
              <path d="M-2.24881 82.9565C-2.24881 87.0757 1.22081 90.4147 5.50108 90.4147C9.78135 90.4147 13.251 87.0757 13.251 82.9565C13.251 78.839 9.78135 75.5 5.50108 75.5C1.22081 75.5 -2.24881 78.839 -2.24881 82.9565Z" fill="#AD84FF"></path>
              <path d="M55.8744 12.1044C55.8744 18.2841 61.0788 23.2926 67.5001 23.2926C73.9196 23.2926 79.124 18.2841 79.124 12.1044C79.124 5.92653 73.9196 0.917969 67.5001 0.917969C61.0788 0.917969 55.8744 5.92653 55.8744 12.1044Z" fill="#AD84FF"></path>
            </g>
          </svg>
          <!--end::Svg Icon-->
        </span>
      </div>
      <!--end::Shape-->
      <!--begin::Invoice header-->
      <div class="row justify-content-center py-8 px-8 py-md-36 px-md-0 bg-primary" style="position: relative;">
        <div class="col-md-9">
          <div class="d-flex justify-content-between align-items-md-center flex-column flex-md-row" >
            <div class="d-flex flex-column px-0 order-2 order-md-1" style="z-index:2">
              <span class="font-size-20 font-weight-bold text-white mb-3">{$ViewBilling.detail.username}</span>

              <span class="d-flex flex-column font-size-16 font-weight-bold text-white">
                <span>{$ViewBilling.detail.companyname}</span>
                <span>{$UserInfo.user.address1}</span>
              </span>
            </div>
            <h3 class="display-4 font-weight-bold text-white order-1 order-md-2">
            {if $Pay.PayStatus=='Paid'}
            {$Lang.paid}
            {else}
            {$Lang.unpaid}
            {/if}
            </h3>
          </div>
        </div>

        <i class="bx bx-cloud-download text-white fs-24 pdfdownload pointer" style="position: absolute;right: 20px;bottom: 20px;"></i>
      </div>
      
      <!-- 下载pdf -->
      <!-- <div class="text-right pt-4" style="min-height: 43px;">
        <span class="pdfdownload pointer">
          <i class="bx bx-cloud-download"></i>
          下载
        </span>
      </div> -->
      
      <!--end::Invoice header-->
      <div class="row justify-content-center py-8 px-8 py-md-30 px-md-0">
        <div class="col-md-9">
          <!--begin::Invoice body-->
          <div class="row pb-26">
            <div class="col-md-12 py-10 pl-md-10">
              <div class="table-responsive" style="padding: 0 20px;">
                {if $CreditDetail.invoices}
                {foreach $CreditDetail.invoices  as $item}
                <h5 class="title_h4">账单#{$item.id} <span>{$item.subtotal}</span></h5>
                  <ul class="order_title">
                    {foreach $item.invoice_items  as $list}
                    <li>
                      <p style="width:70%">{$list.description}</p><p style="text-align: right;width:30%">{$CreditDetail.currency.prefix}{$list.amount}{$CreditDetail.currency.suffix}</p>
                    </li>
                    {/foreach}
                  </ul>
                {/foreach}
                {/if}
              </div>
            </div>
          </div>
          <!--end::Invoice body-->
          

          {if $ViewBilling.accounts}
          <div class="table-responsive mt-3">
              <table class="table table-bordered mb-0">

                  <thead>
                      <tr>
                          <th>{$Lang.transaction_date}</th>
                          <th>{$Lang.payment_method}</th>
                          <th>{$Lang.transaction_serial_number}</th>
                          <th>{$Lang.amount_money}</th>
                      </tr>
                  </thead>
                  <tbody>
                    {foreach $ViewBilling.accounts as $accounts}
                      <tr class="table-light">
                          <td>{$accounts.pay_time|date="Y-m-d H:i:s"}</td>
                          <td>{$accounts.gateway}</td>
                          <td>{if $accounts.trans_id}{$accounts.trans_id}{else}-{/if}</td>
                          <td>{$accounts.amount_in}</td>
                      </tr>
                    {/foreach}
                    
                  </tbody>
              </table>
          </div>
          {/if}
        </div>
      </div>


      
      
    </div>




	<div class="col-sm-3">
		<div class="card">
			<div class="card-body">
      
       <div id="pay-content">
          {include file="includes/pay"}
        </div>
    </div>
		</div>	
	</div>
</div>

<script src="/themes/clientarea/default/assets/libs/html2canvas/html2canvas.min.js?v={$Ver}"></script>
<script src="/themes/clientarea/default/assets/libs/jspdf/jspdf.umd.min.js?v={$Ver}"></script>


<script>
  $(function() {
    $(document).on('click', '.pdfdownload', function () {
      $(this).hide()
      setTimeout(function(){
        $(this).show()
      }, 50);
      toastr.success('{$Lang.please_wait_while_building}...')
      html2canvas(document.getElementById('pdfCentent'), {
        logging: false
      }).then(function (canvas) {
        var pdf = new jsPDF('p', 'mm', 'a4') // A4纸，纵向
        var ctx = canvas.getContext('2d')
        var a4w = 190; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
        var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
        var renderedHeight = 0

        while (renderedHeight < canvas.height) {
          var page = document.createElement('canvas')
          page.width = canvas.width
          page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页

          // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
          pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距

          renderedHeight += imgHeight
          if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页
          // delete page;
        }
        pdf.save('{$Lang.bill}#{$Think.get.id}_' + new Date().getTime())
      })
    });
  })
</script>

