$(document).on('page:init', '.page[data-name="product_trx"]', async function (e) {

  console.log('app product detail (trx) ready')

  var i = e.detail.route.params.id;

  //console.log(i)

  //console.log(pid)

  var view = app.views.current

  let js = JSON.parse(localStorage.getItem('f04_product'));

  let dt = js.data.by_id[i];

  console.log(dt)

  var strHtml = `

<div class="blog-details">

  <div class="container">

    <div class="blog-details-header">

      <div class="content"> 

      <div class="blog-image">

        <img src="`+dt.img+`" alt="`+dt.name+`">

      </div>

      <h6>`+dt.name+`</h6>        

      </div>

    </div>

  </div>

</div>`;



  strHtml +=`

<div class="item-details">

  <div class="container">

    <ul>  

    <li>Brand <span>`+dt.brand+`</span></li>

   <li>Code<span>`+dt.item_code+`</span></li>

    <li>Qty Last <span>`+dt.qty+`</span></li>

   <li>Buy Price<span>`+dt.hpp+`</span></li>

   <li>Amount<span>`+dt.amount+`</span></li>

 </ul>

  </div>

</div>`;

strHtml+=`

  <div class="container">

    <a href="/product_sell/`+dt.id+`/4" class="btn btn-xs btn-primary mt-2">Jual Tunai</a>

    <a href="/product_sell/`+dt.id+`/7" class="btn btn-xs btn-primary mt-2">Jual Kredit</a>

    <a href="/product_retur/`+dt.id+`/8" class="btn btn-xs btn-secondary mt-2">Retur Ke</a>

    <a href="/product_retur/`+dt.id+`/9" class="btn btn-xs btn-secondary mt-2">Retur Dari</a>

    <a href="/product_buy/`+dt.id+`" class="btn btn-xs btn-info mt-2">Beli</a>

    <a href="/product_edit/`+dt.id+`" class="btn btn-xs btn-info mt-2">Edit</a>

    <a href="/product_image/`+dt.id+`" class="btn btn-xs btn-danger mt-2">Image</a>

  </div>

`;

  strHtml +=`<div class="block-title">Transaction</div>

    <div class="data-table">

      <table>

        <thead>

          <tr>

            <th class="label-cell">Date</th>

            <th class="numeric-cell">In</th>

            <th class="numeric-cell">Out</th>

            <th class="numeric-cell">Balance</th>

          </tr>

        </thead>

        <tbody>`;

  for(let i=0;i<dt.trx.length;i++) {

    strHtml +=`<tr>

            <td class="label-cell">`+dt.trx[i].tgl+`</td>

            <td class="numeric-cell">`+dt.trx[i].item_in+`</td>

            <td class="numeric-cell">`+dt.trx[i].item_out+`</td>

            <td class="numeric-cell">`+dt.trx[i].balance+`</td>

          </tr>`;

  }

    strHtml +=`</tbody>

      </table>

    </div>`;

  //console.log(strHtml)

  $$("#product_trx_content").html(strHtml);

})