$(function () {
    
    $(":button").click(function () {
        var bval = $(this)[0].innerText;

        if (bval == 'Add to Cart') {
            submit = true;
        }

    });

    $("#search_button").click(function () {
        submit = true;
    });
        
    $('.sDetail').click(function (e) {

        
        var itmId = this.innerText;
        if (itmId.length <= 0) {
            itmId = this.dataset.set;
        }

        if (this.dataset.service && this.dataset.service === 'ItemQuantity') {

            itmId = this.dataset.id;

            async function getInventoryCounts(_key, _id) {
                
                let url = `/api/Product/ItemQuantity/${_key}/${_id}`;                
                let response = await fetch(url);

                let data = await response.json();
                return data;
            }

            if (!this.parentElement.dataset.value || !(this.parentElement.dataset.value.length > 0)) {
                getInventoryCounts(this.dataset.key, this.dataset.id)
                    .then(data => {
                        if (data.ManufQuantity && data.ManufQuantity.length > 0) {
                            let manufQty = data.ManufQuantity[0];

                            let id = manufQty.ItemNumber;
                            try
                            {
                                if (parseInt(id[0])) {
                                    id = "n-" + id;
                                }
                            }
                            catch (e) {
                            }
                             
                            let elem_id = `#${id} > td[data-name='Distribution']`;
                           
                            let elem_tr = document.querySelector(elem_id);
                            elem_tr.setAttribute("data-value", manufQty.Display);
                            elem_tr.setAttribute("data-loadbar", "false");
                            document.getElementById('dc_stock').innerHTML = manufQty.Display;
                           
                        }
                    });

                e.preventDefault();
            }
        }
        if (ItemDisplay(itmId, this.href)) {
            e.preventDefault();
        }
    });
});

function ItemDisplay(itmId, href) {

    var tableRow = $("#ItmSpec td").filter(function () {
        return this.innerText.trim() == itmId.trim();
    }).closest("tr");

    var row = $('#ItmSpec').find("tr:contains('" + itmId + "')").closest("tr");

    var imgsrc = href && href.length > 0 ? href : $(row).find("a")[0];

    var videosrc = $(row).find("a")[0].dataset.video;

    var $textAndPic = $('<div></div>');

    $textAndPic.append(ImgDisplay(imgsrc, videosrc));

    let tdInnerText = document.getElementById("sDetail_" + itmId).innerText;
    var itmName = tdInnerText && tdInnerText.length > 0 ? tdInnerText : $(row).find("td")[1].innerText;

    if (row && row.length > 0) {
        
        let id = row[0].id;        
        let eleContainer = document.getElementById(row[0].id);
        let elements = eleContainer.querySelectorAll("[data-show='true']");
        var loadBarId = 0;
        var ct = 0;
        elements.forEach(el => {
            if (el.dataset.id && el.dataset.id.length > 0) {
                if (el.dataset.loadbar && el.dataset.loadbar === 'true') {
                    let t_data = '<div class="progress"><div id="load-bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div></div>';

                    $textAndPic.append("<h3>" + el.dataset.name + ":" + '&nbsp'.repeat(20 - el.dataset.name.length) + `<span id="${el.dataset.id}">` + t_data + "</span></h3>");

                    loadBarId = setInterval(function () {
                        if (document.getElementById('load-bar')) {
                            let val = +document.getElementById('load-bar').style.width.replace("%", "");

                            if (val >= 100) {
                                val = 99;
                            }
                            else {
                                val = val + 5;
                            }
                            document.getElementById('load-bar').style.width = `${val}%`;
                            ct = ct + 1;
                        }
                        else if(ct > 0) {
                            clearInterval(loadBarId);
                        }
                    }, 50);

                }
                else {
                    $textAndPic.append("<h3>" + el.dataset.name + ":" + '&nbsp'.repeat(20 - el.dataset.name.length) + `<span id="${el.dataset.id}">` + el.dataset.value + "</span></h3>");
                }
            }
            else {
                $textAndPic.append("<h3>" + el.dataset.name + ":" + '&nbsp'.repeat(20 - el.dataset.name.length) + el.dataset.value + "</h3>");
            }
        })
    }
            
    BootstrapDialog.show({
        title: itmName + ' - ' + itmId,
        message: $textAndPic,
        onshow: () => {
            
        }
        
    });
    
    return true;
}

function ImgDisplay(imgsrc, videosrc) {
    let area = '';

    if (imgsrc && imgsrc.length > 0 && videosrc && videosrc.length > 0) {
        area = `
<div>
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#itm-video" class="bg_light_color_1 color_dark tr_delay_hover r_corners d_block" aria-controls="itm-video" role="tab" data-toggle="tab">Video</a></li>
      <li role="presentation"><a href="#itm-image" class="bg_light_color_1 color_dark tr_delay_hover r_corners d_block" aria-controls="itm-image" role="tab" data-toggle="tab">Image</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="itm-video">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="${videosrc}"></iframe>
        </div>
      </div>      
      <div role="tabpanel" class="tab-pane" id="itm-image">
        <a href="${imgsrc}" target="_blank">
            <img src="${imgsrc}" />
        </a>
      </div>
    </div>  
</div>
`
    }
    else if (imgsrc && imgsrc.length > 0) {
        area = `<img src="${imgsrc}" />`;
    }
    else if(videosrc && videosrc.length > 0){
        area = `<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="${videosrc}"></iframe></div>`
    }

    return area;
}