//DOM elements
const list = document.getElementById("list");

const allSitesURL =
    ADD_SITE_BASE_URL + "getAll_Sites";
    
   let PlaceholderClassObj=new Placeholder();
        PlaceholderClassObj.setRecentSitesPlaceholder();
//     placeholderClassObj.setRecentSitesPlaceholder();
    
getData(allSitesURL).then(responseData => {
    var count=0;
    let allCardsUI='';
    let {siteinfo}=responseData;
    siteinfo.forEach(site => {
        allCardsUI += `<div class="car-holder col-xs-12  col-sm-6 col-lg-4 mx-auto my-1 p-4"> <div class="card "> <div class="card-content">
      <div class="card-body ">
        <table class="siteDetailCardTable">
            <tr><td style='font-weight: 600;'>SiteId</td>
                <td>${site.siteid}</td>
            </tr>
            <tr><td style='font-weight: 600;'>Site Name</td>
                <td>${site.sitename}</td>
            </tr>
            <tr><td style='font-weight: 600;'>Site Lat-Long</td>
                <td><span id='cardNo${count}LatLong'>${site.latitude},${site.longitude}</span><button class="copyText_LatLng_Btn bg-transparent border-0 ml-3" data-index='cardNo${count}LatLong' data-toggle="tooltip" data-placement="top" data-title="Copy Lat Lng"><i class="fas fa-copy"></i></button></td>
            </tr>
            <tr><td style='font-weight: 600;'>Site District</td>
                <td>${site.district}</td>
            </tr>
            <tr><td style='font-weight: 600;'>Site Circle</td>
                <td>${site.circle}</td>
            </tr>
        </table>
      </div>
      <div class="card-footer">
        <a href="html/site.php?siteid=${site.siteid}" class="btn btn-theme-type2 bg-transparent">Check site info</a>
      </div>
    </div>
  </div>
  </div>`;
        // list.innerHTML += card;
        count++;
    });
    list.innerHTML=allCardsUI;
    afterAppendingUI();
});

const siteSearchURL =
    ADD_SITE_BASE_URL + "searchsiteid";

const searchForm = document.getElementById("searchForm");

searchForm.addEventListener("submit", function (event) {
    event.preventDefault();
        PlaceholderClassObj.setRecentSitesPlaceholder();
    document.getElementsByClassName("recent")[0].style.display = "none";
    var spinnerClassIcon = document.getElementById("searchSiteIdSpinner");
    spinnerClassIcon.classList.remove("d-none");
    let siteID=searchForm.searchText.value.trim();
    const formdata = {
        siteid: siteID
    };

    postData(siteSearchURL, formdata).then(data => {
        var count=0;
        let {
            siteinfo
        } = data;

        list.innerHTML = "";

        //console.log(data);

        if (siteinfo[0].siteid == "results not found") {
            let card = `<div class="car-holder col-xs-12  col-sm-6 col-lg-4 mx-auto my-1 p-4"> <div class="card "> <div class="card-content">
  <div class="card-body ">
    <h6 class="card-title info text-center mb-0"">${siteinfo[0].siteid}</h6>
  </div>
</div>
</div>
</div>`;
            list.innerHTML += card;
        } else
            siteinfo.forEach(site => {
                let card = `<div class="car-holder col-xs-12  col-sm-6 col-lg-4 mx-auto my-1 p-4"> <div class="card "> <div class="card-content">
      <div class="card-body ">
           <table class="siteDetailCardTable">
            <tr><td style='font-weight: 600;'>SiteId</td>
                <td>${site.siteid}</td>
            </tr>
            <tr><td style='font-weight: 600;'>Site Name</td>
                <td>${site.sitename}</td>
            </tr>
            <tr><td style='font-weight: 600;'>Site Lat-Long</td>
                <td><span id='cardNo${count}LatLong'>${site.latitude},${site.longitude}</span><button class="copyText_LatLng_Btn bg-transparent border-0 ml-3" data-index='cardNo${count}LatLong' data-toggle="tooltip" data-placement="top" title="Copy Lat Lng"><i class="fas fa-copy"></i></button></td>
            </tr>
            <tr><td style='font-weight: 600;'>Site District</td>
                <td>${site.district}</td>
            </tr>
            <tr><td style='font-weight: 600;'>Site Circle</td>
                <td>${site.circle}</td>
            </tr>
        </table>
      </div>
      <div class="card-footer">
        <a href="html/site.php?siteid=${site.siteid}" class="btn btn-theme-type2 bg-transparent">Check site info <i class="fa fa-arrow-right"></i></a>
      </div>
    </div>
  </div>
  </div>`;
                list.innerHTML += card;
                count++;
            });
           afterAppendingUI();
        spinnerClassIcon.classList.add("d-none");
    });
});

function afterAppendingUI(){// jquery
     $('[data-toggle="tooltip"]').tooltip();
    $(".copyText_LatLng_Btn").click(function(){
       $(".copyText_LatLng_Btn i").css("color","#d4d9ff");
        var thisBtn=$(this);
        var selectedCard_LtLng_ID=thisBtn.attr("data-index");

       var $temp=$("<input>");// temparay input for select content and copy in clipboard
        $("body").append($temp);
        $temp.val($("#"+selectedCard_LtLng_ID).text()).select();
        document.execCommand("copy");
        thisBtn.children("i").css({
            color:"#5664d2"

        });
        $temp.remove();


    });
}



// ;;