$(function(){
  //===================================================
  // 先取得預設值 start 若後端要直接渲染好可以去掉 
  //===================================================
  getSearchData(getSearchParam())
  //===================================================
  // 先取得預設值 end 若後端要直接渲染好可以去掉 
  //===================================================
  
  
  //====================================================
  // 搜尋按鈕 start
  //====================================================
  $(".dataFilter-search-btn").on("click", function(){
    getSearchData(getSearchParam())
  })
  //====================================================
  // 搜尋按鈕 end
  //====================================================
  
  
  //====================================================
  // 分頁按鈕 start
  //====================================================
  $(".pagebox").on("click", ".pagebox-btn", function(){
    getSearchData(getSearchParam($(this).data("page")))
    $("body").stop().animate({
      scrollTop:0
    },800)
  })
  //====================================================
  // 分頁按鈕 end
  //====================================================
})

//包裝要post的參數
function getSearchParam(page = 1){
  let data = {}
  data["page"] = page;
  data["year"] = $('#year').val();
  for (let i = 0; i<$(".dataFilter-ajax-data").length; i++){
    let target = $(".dataFilter-ajax-data").eq(i)
    data[target.data("name")] = target.val()
  }
  return data
}

//ajax取得資料
function getSearchData(param){
  $.ajax({
    url: "/donation/ajax/ajax_get_search.php",
    type: "GET",
    data: param
  }).done((responseData) => {
    setSearchData(responseData)
  })
}

function setSearchData(data){
  let searchHtml = ``
  let jsonData = JSON.parse(data)
  
  $(".search-year").text(jsonData.year)
  $(".search-subtotal-price").text(jsonData.subtotal)
  
  for(let i = 0; i < jsonData.search_data.length; i++){
    searchHtml += `<div class="search-list-item flex">
                    <div class="search-list-number">${jsonData.search_data[i].number}</div>
                    <div class="search-list-date">${jsonData.search_data[i].date}</div>
                    <div class="search-list-name">${jsonData.search_data[i].name}</div>
                    <div class="search-list-price">${jsonData.search_data[i].price}</div>
                  </div>`
  }
  let renderSearchTarget = $(".search-list-wrapper")
  renderSearchTarget.html(searchHtml)
  //更新頁碼
  updatePage(jsonData.page_data)
}