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

  console.log('app item_detail ready')

  var cat = e.detail.route.params.cat;

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

  console.log(id + ', ' + cat);  

  let dt2=get_localstorage('item_pria');

  let dt=dt2.data.byid.data[id];

  console.log(dt)

  //item_detail_load(dt)

  let category =`<span class="item-category">${dt.brand}</span>`;

  category +=`<span class="item-category">${dt.kategory1}</span>`;

  category +=`<span class="item-category">${dt.kategory2}</span>`;

  category +=`<span class="item-category">${dt.kategory3}</span>`;

  let btn_popup =`

  <p class="grid grid-cols-2 grid-gap grid-buttons-demo">`;

  if(dt.img_chart!=''){

  btn_popup +=`<a href="#" data-lang="size_chart" data-popup=".chart-${dt.id}" class="button button-xs button-fill popup-open">Chart Size</a>`;

  } 

  btn_popup +=`<a href="#" data-lang="all_images" data-popup=".images-${dt.id}" class="button button-xs button-fill popup-open">All Images</a>

  </p>`;

  

  

  let k=0;

  console.log('k:'+k)

  let top_img=`

<div class="card-image">

  <img src="${dt.color_img[k].url[0]}" id="item_img_${dt.id}" alt="">

</div>`;

  let content=``;

  let t_cols=`<div data-lang="colors" class="light-gray-title">Colors</div>`;

  let btn_color =`<div id="item_m_col_${dt.id}" class="item-color-btn">`;

  dt.color_img.forEach((v,i)=>{

  if(i==k) {

    btn_color +=`

  <a href="#" onclick="item_color_change(${dt.id},'${v.url[0]}',${i})" class="link ml-6 fs-sm">

    <span class="fw-800">${v.color}</span>

      <div class="ml-3" style="width:28px;height:28px;background-image: url(${v.icon_img});border-radius:14px;"><i class="hidden"></i></div>

  </a>

    `;

    } else {

    btn_color +=`

  <a href="#" onclick="item_color_change(${dt.id},'${v.url[0]}',${i})" class="link ml-6 fs-sm">

    <span class="fw-200">${v.color}</span>

      <div class="ml-3" style="width:28px;height:28px;background-image: url(${v.icon_img});border-radius:14px;"><i class="hidden"></i></div>

  </a>

    `;

    }

  });

  btn_color +=`</div>`;



  let size_content =`<h3 data-lang="size">Size</h3>`;

  size_content +=`<div id="item_size_${dt.id}" class="grid grid-cols-2 grid-gap">`;

  dt.color_img[k].stock.forEach((v,i)=>{

    size_content +=`

    <a href="#" onclick="item_size_change(${dt.id},'Rp.${v.rp}',${k},${i})">

    <div id="s_${v.variant_id}" class="radio-wrapper">

      <label class="pt-2" for="${v.variant_id}">${v.size}, ${v.stock} pcs, ${v.weight}gr</label>

    </div></a>`;

  });

  size_content +=`</div>`;

  

  let stepper=`

  <ul>

    <li class="item-content">

      <div class="item-inner">

        <div class="item-title" id="price_${dt.id}"></div>

        <div class="item-after">

          <div class="stepper stepper-init stepper-fill">

            <div onclick="stepper_min(${dt.id})" class="stepper-button-minus"></div>

            <div class="stepper-input-wrap">

              <input id="qty_${dt.id}" type="text" data-size="" data-color="" data-sku="" data-price="" data-weight="" value="0" min="0" max="100" step="1" readonly="" class="input-with-value">

            </div>

            <div onclick="stepper_plus(${dt.id})" class="stepper-button-plus"></div>

          </div>

        </div>

      </div>

    </li>    

    <li class="item-content">

      <div class="item-inner">

        <div class="item-title" id="tot_price_${dt.id}"></div>

      </div>

    </li>    

  </ul>    

  `;

  content +=`<h2>${dt.name}</h2>`;

  content +=category;

  content +=top_img;

  content +=btn_color;

  content +=size_content;

  content +=`<div class="list list-outline list-dividers full-width" id="stepper_${dt.id}" style="display: none;">`;

  content +=stepper;

  content +=`</div>`;

  content +=``;

  //content +=`<a class="link my_photo_detail">Standalone</a>`;

  //content +=t_head;

  //content +=t_content;

  content +=btn_popup;

  content +=`${dt.description}`;

  content +=`

<div class="popup chart-${dt.id}" style="display: none;">

  <div class="page">

      <div class="navbar">

        <div class="navbar-bg"></div>

        <div class="navbar-inner">

          <div class="title" style="left: 118px;"></div>

          <div class="right">

            <!-- Link to close popup -->

            <a href="#" class="icon-only popup-close">

            <i class="icon f7-icons">multiply_square</i></a>            

          </div>

        </div>

      </div>

      <div class="page-content popup-chart">

      <div class="popup-content">

        <img src="${dt.n_img_chart}" alt="">

      </div>

    </div>

  </div>

</div>`;



  content +=`

<div class="popup images-${dt.id}" style="display: none;">

  <div class="view">

    <div class="page">

      <div class="navbar">

        <div class="navbar-bg"></div>

        <div class="navbar-inner">

          <div class="title" style="left: 118px;"></div>

          <div class="right">

            <!-- Link to close popup -->

            <a href="#" class="icon-only popup-close">

            <i class="icon f7-icons">multiply_square</i></a>            

          </div>

        </div>

      </div>

      <div class="page-content">

<swiper-container pagination navigation="true" zoom-max-ratio="3" zoom-min-ratio="1" class="demo-swiper-multiple" space-between="50" id="swiper_item_detail_${dt.id}">`;

      

  dt.ximg.forEach((v,i)=>{

 content +=`<swiper-slide>

 <div class="swiper-zoom-container">

 <img src="${v}" alt="" style="aspect-ratio:15/26;object-fit: cover;">

 </div>

 </swiper-slide>`;  

  });

content +=`      

<div class="swiper-button-next"></div>

  <div class="swiper-button-prev"></div>

    </swiper-container>        

      </div>

    </div>

  </div>

</div>  

  `;

//swiper_byzoom('swiper_item_detail_'+dt.id);

  $("#item_detail_content").html(content);

  $("#pg_title").html(dt.pid);

  $("#pg_title_large").html(dt.pid);  

});