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

  console.log('app product ready')

  var view = app.views.current

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

  let dt = js.data.by_brand;

  //console.log(dt)

  var strHtml = ``;

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

    strHtml += `<div class="block-title">`+dt[i].brand+`</div>`;

    strHtml += `<div class="list media-list  list-outline-ios list-strong-ios list-dividers-ios">

      <ul>`;

    for(let f=0;f<dt[i].items.length;f++) {

    strHtml +=`

<li>

  <a href="/product_trx/`+dt[i].items[f].id+`" class="item-link item-content">

    <div class="item-media"><img style="border-radius: 8px"

      src="`+dt[i].items[f].img+`" width="50" /> 

    </div>

    <div class="item-inner">

      <div class="item-title-row">

        <div class="item-title">`+dt[i].items[f].name+`</div>

        <div class="item-after">`+dt[i].items[f].qty+`</div>

      </div>

      <div class="item-subtitle">`+dt[i].items[f].item_code+`</div>

      <div class="item-text">

      `+dt[i].items[f].hpp+`      

      </div>

    </div>

  </a>

</li>    `;

    }

    strHtml +=`</ul>

    </div>`;

  }

   strHtml += ``;  

  //console.log(strHtml)

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

})