$(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('f01_data'));

  let dt = js.data.result.product.data;

  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/`+i+`/`+f+`" 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);

})