'use strict';

export const userChart = (data) => {
  if (document.querySelector('#visited_customer_chart')) {
    var chartDom = document.getElementById('visited_customer_chart');
    var myChart = echarts.init(chartDom);
    var option = {
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        textStyle: {
          color: '#6f767e',
        },
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: false, type: ['line', 'bar', 'circle'] },
          restore: { show: false },
          saveAsImage: { show: true },
        },
        top: 0,
        right: 0,
        itemSize: 14,
        itemGap: 20,
        iconStyle: {
          borderColor: '#6f767e',
        },
        animation: true,
      },
      series: [
        {
          type: 'pie',
          radius: '100%',
          center: ['40%', '50%'],
          color: ['#5669FF', '#00F7BF', '#FFB64D', '#FF5370'],
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 20,
              shadowOffsetX: 20,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold',
            },
          },
          bottom: 100,
        },
      ],
    };

    option && myChart.setOption(option);
    $(window).on('resize', function () {
      setTimeout(function () {
        myChart.resize();
      }, 500);
    });
  }
};

export const appointmentSummary = (data, id) => {
  var content = '';
  if (data.length > 0) {
    data?.forEach((e) => {
      content += '<tr>';
      content += '<td>' + e?.title + '</td>';
      content += '<td>' + e?.with + '</td>';
      content += '<td>' + e?.location + '</td>';
      content += '<td>' + e?.date_time + '</td>';
      content += '</tr>';
    });
  } else {
    content += `<tr class="bg-transparent">
                  <td valign="top" colspan="4" class="dataTables_empty">
                      <div class="no-data-found-wrapper text-center ">
                          <img src="${$('meta[name="base-url"]').attr(
                            'content'
                          )}/assets/images/empty.png" alt="" class="mb-primary empty_table" width="200">
                      </div>
                  </td>
              </tr>`;
  }

  $('#' + id).append(content);
};

export const todayAbsentEmployee = (data, id) => {
  var content = '';
  if (data.length > 0) {
    data?.forEach((item, index) => {
      content += `
        <tr>
          <td>${++index}</td>
          <td>${item?.avatar}</td>
          <td>${item?.name}</td>
          <td>${item?.employee_id || ''}</td>
          <td>${item?.role || ''}</td>
          <td>${item?.phone || ''}</td>
          <td>${item?.shift || ''}</td>
          <td>${item?.department || ''}</td>
          <td>${item?.designation || ''}</td>
        </tr>
      `;
    });
  } else {
    content += 
    `<tr class="bg-transparent">
        <td valign="top" colspan="4" class="dataTables_empty">
            <div class="no-data-found-wrapper text-center ">
                <img src="${$('meta[name="base-url"]').attr(
                  'content'
                )}/assets/images/empty.png" alt="" class="mb-primary empty_table" width="200">
            </div>
        </td>
    </tr>`;
  }

  $('#' + id).append(content);
};

export const todayLateEmployee = (data, id) => {
  var content = '';
  if (data.length > 0) {
    data?.forEach((item) => {
      content += `
        <tr>
          <td>${item?.avatar}</td>
          <td>${item?.name}</td>
          <td>${item?.department || ''}</td>
          <td>${item?.schedule_start || ''}</td>
          <td>${item?.check_in || ''}</td>
          <td>${item?.late_reason || ''}</td>
        </tr>
      `;
    });
  } else {
    content += 
    `<tr class="bg-transparent">
        <td valign="top" colspan="6" class="dataTables_empty">
            <div class="no-data-found-wrapper text-center ">
                <img src="${$('meta[name="base-url"]').attr(
                  'content'
                )}/assets/images/empty.png" alt="" class="mb-primary empty_table" width="200">
            </div>
        </td>
    </tr>`;
  }

  $('#' + id).append(content);
};

export const todayEarlyLeaveEmployee = (data, id) => {
  var content = '';
  if (data.length > 0) {
    data?.forEach((item) => {
      content += `
        <tr>
          <td>${item?.avatar}</td>
          <td>${item?.name}</td>
          <td>${item?.schedule_end || ''}</td>
          <td>${item?.check_in || ''}</td>
          <td>${item?.check_out || ''}</td>
          <td>${item?.stay_hours || ''}</td>
        </tr>
      `;
    });
  } else {
    content += 
    `<tr class="bg-transparent">
        <td valign="top" colspan="6" class="dataTables_empty">
            <div class="no-data-found-wrapper text-center ">
                <img src="${$('meta[name="base-url"]').attr(
                  'content'
                )}/assets/images/empty.png" alt="" class="mb-primary empty_table" width="200">
            </div>
        </td>
    </tr>`;
  }

  $('#' + id).append(content);
};


