
<link href="<?= base_url(); ?>assets/libs/select2/select2.min.css" rel="stylesheet" type="text/css" />
<script src="<?= base_url() ?>assets/libs/select2/select2.min.js"></script>



<script type="text/javascript">

    jQuery(document).ready(function($) {
        loadPayment()
    });

  function loadPayment(year = '<?= date("Y") ?>')
  {
    
      $.ajax({
          url: baseUrl+'customer/get-payment-year', 
          method: "POST", 
          data: {
            year,
            id: '<?= $id ?>'
          },
          success: (response) => {

                
                if(response.code==200){
                    if(response.success){
                        if(Object.keys(response.data).length>0){

                            const row  = response.data
                                    
                           let elPay = ''
                           if(row.pays.length>0){
                                row.pays.forEach((item,index)=>{

                                    const total = Number(item.total)
                                    elPay += `<tr>
                                  <td class="ps-4" style="width: 2%; text-align: center;">
                                    ${index+1}
                                  </td>
                                  <td class="py-2">
                                    <strong>${item.monthName}</strong> <br>
                                    <span class="${ item.have ? 'text-success' : 'text-danger' }">Rp. ${total.toLocaleString('id-ID')}</span>
                                  </td>
                                  <td style="width: 10%;">
                                    <div class="form-check d-flex justify-content-center">
                                        ${item.have ? '<i class="bx bx-check text-success" style="font-size: 24px;"></i>' : '<i class="bx bx-x text-danger" style="font-size: 24px;"></i>'}

                                    </div>
                                  </td>
                                </tr>`

                                })
                           }

                            $("#form_edit").find('#detail_payment').html(elPay)


                        }else{
                            $("#form_edit").find('#detail_payment').html(``)
                        }



                    }
                }

          },
          error: (jqXHR, textStatus, errorThrown) => {
              
          }
      });

  }

  $(".btn-apply").on('click',function(e){
      e.preventDefault()

      const year = $('input[name="year"]').val()
        if (!year || isNaN(year) || year.length !== 4 || year < 1900 || year > new Date().getFullYear()) {

              iziToast.show({
                title: 'Gagal',
                message: "Tahun yang anda masukan tidak valid. tolong masukan antara tahun 1900 sampai " + (new Date().getFullYear()),
                color: 'red',
                position: 'topCenter'
              }); 
        } else {

            loadingPaymentLoad()
            loadPayment(year)
        }
 
  })

  function loadingPaymentLoad()
  {
    $("#form_edit").find('#detail_payment').html('')
    for (let i = 0; i < 10; i++) {
        $("#form_edit").find('#detail_payment').append(`<tr>
                <td class="ps-4" style="width: 2%; text-align: center;">
                  <div class="skeleton" style="width: 20px; height: 14px;"></div>
                </td>
                <td class="py-2">
                  <div class="skeleton short"></div>
                  <div class="skeleton money"></div>
                </td>
                <td style="width: 10%;">
                  <div class="d-flex justify-content-center">
                    <div class="skeleton" style="width: 24px; height: 24px; border-radius: 20%;"></div>
                  </div>
                </td>
              </tr>`)
    }
  }



</script>

