/**
 * Leave Balance Display Chart
 */

'use strict';

(function () {
  // Check if ApexCharts is available and we have data
  if (typeof ApexCharts !== 'undefined' && window.leaveBalanceData) {
    const chartEl = document.querySelector('#leaveBalanceChart');
    
    if (chartEl) {
      const chartLabels = window.leaveBalanceData.chartLabels || {
        entitled: 'Entitled',
        used: 'Used',
        available: 'Available',
        days: 'Days',
        daysFormat: ':value days'
      };

      const chartOptions = {
        series: [
          {
            name: chartLabels.entitled,
            data: window.leaveBalanceData.entitlement
          },
          {
            name: chartLabels.used,
            data: window.leaveBalanceData.used
          },
          {
            name: chartLabels.available,
            data: window.leaveBalanceData.available
          }
        ],
        chart: {
          type: 'bar',
          height: 300,
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: window.leaveBalanceData.labels
        },
        yaxis: {
          title: {
            text: chartLabels.days
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return chartLabels.daysFormat.replace(':value', val);
            }
          }
        },
        colors: ['#696cff', '#ff6b6b', '#51d28c'],
        legend: {
          position: 'top',
          horizontalAlign: 'center'
        }
      };
      
      const chart = new ApexCharts(chartEl, chartOptions);
      chart.render();
    }
  }
})();