<%- include('partials/header') %>

<!-- Sidebar -->
<%- include('partials/sidebar') %>

<!-- navbar -->
<%- include('partials/navbar') %>

<div class="p-4 sm:ml-64 flex flex-col gap-3">

  <!-- Grid of Cards -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Created</h2>
      <p id="total_count" class="text-3xl font-bold user_created">0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 12% from last month</p> -->
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Active</h2>
      <p id="active_count" class="text-3xl font-bold user_active">0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 8% from last month</p> -->
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Inactive</h2>
      <p id="inactive_count" class="text-3xl font-bold user_inactive">0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↓ 2 from last month</p> -->
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300">
      <h2 class="text-xl font-semibold text-gray-700 mb-2">Deleted</h2>
      <p id="deleted_count" class="text-3xl font-bold user_deleted">0</p>
      <!-- <p class="text-sm text-gray-500 mt-2">↑ 18% from last month</p> -->
    </div>
  </div>
  <div id="total"></div>

  <div id="userMainTab" class="grid md:grid-cols-1 lg:grid-cols-2 gap-3">
    <div id="daily"></div>
    <div id="weekly"></div>
    <div id="monthly"></div>
    <div id="weekwise"></div>
  </div>


  <!-- Main modal -->
  <div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full">
    <div class="relative p-2 w-full h-full">
      <!-- Modal content -->
      <div class="relative bg-white rounded-lg shadow-sm h-full">
        <!-- Modal header -->
        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
          <h3 class="text-xl font-semibold text-gray-900">
            Graph
          </h3>
          <button id="closeModalButton" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center " data-modal-hide="default-modal">
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
            </svg>
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        <!-- Modal body -->
        <div id="modalChart" class="p-4 md:p-5 space-y-4">
        </div>
      </div>
    </div>
  </div>

</div>

</body>
<script>
  const userTotal = <%- JSON.stringify(userTotal) %>;
  const userDaily = <%- JSON.stringify(userDaily) %>;
  const userMonthly = <%- JSON.stringify(userMonthly) %>;
  const userWeekly = <%- JSON.stringify(userWeekly) %>;
  const userWeekWise = <%- JSON.stringify(userWeekWise) %>;
  const monthValue = <%- JSON.stringify(monthValue) %>;
  let modelChart = null;

  let modal = document.getElementById('default-modal');

  let closeModalButton = document.getElementById('closeModalButton');
  closeModalButton.addEventListener('click', () => {
    modal.classList.add('hidden')
    document.getElementById("modalChart").innerHTML = "";
  })



  const handleColor = (type) => {

    const rootColor = document.querySelector(':root');
    const rs = getComputedStyle(rootColor);
    return rs.getPropertyValue(type)
  }


  document.addEventListener('DOMContentLoaded', () => {
    let openModalButton = document.getElementById('openModal');
    let modal = document.getElementById('default-modal');
    let closeModalButton = document.getElementById('closeModalButton'); // Updated ID

    // Open modal
    openModalButton.addEventListener('click', function() {
      modal.classList.remove('hidden');
    });

    // Close modal when close button is clicked
    closeModalButton.addEventListener('click', function() {
      // console.log(`Check Main Case`);
      modal.classList.add('hidden');
      document.getElementById("modalChart").innerHTML = "";
    });

    // Close modal if user clicks outside of modal content
    window.addEventListener('click', function(event) {
      if (event.target === modal) {
        modal.classList.add('hidden');
        document.getElementById("modalChart").innerHTML = "";
      }
    });

    // Handle modal close function
    const handleCloseModal = () => {
      // console.log(`Check Graph Close`);
      modal.classList.add('hidden');
      document.getElementById("modalChart").innerHTML = "";
    }

    // Attach handleCloseModal to the button via the event listener
    closeModalButton.addEventListener('click', handleCloseModal);
  });

  const handleDailyChart = (options) => {
    if (modelChart) {
      modelChart.destroy();
      modelChart = null;
    }
    if (options?.chart?.events) {
      delete options.chart.events;
    }
    if (options?.chart?.height) {
      options.chart.height = 420;
    }
    document.querySelector("#modalChart").innerHTML = "";
    modal.classList.remove('hidden');
    modelChart = new ApexCharts(document.querySelector("#modalChart"), options);
    modelChart.render();
  }

  if (Array.isArray(userTotal) && userTotal.length > 0) {
    // var totalOptions = {
    //   series: [parseInt(userTotal[0]?.active_users), parseInt(userTotal[0]?.inactive_users), parseInt(userTotal[0]?.deleted_users)],
    //   chart: {
    //     height: 350,
    //     type: 'pie',
    //   },
    //   title: {
    //     text: 'Total',
    //     align: 'left'
    //   },
    //   labels: ['Active', 'Inactive', 'Deleted'],
    //   colors: [handleColor('--color-user-active'), handleColor('--color-user-inactive'), handleColor('--color-user-deleted')],
    // };

    var totalOptions = {
      series: [
        parseInt(userTotal[0]?.active_users),
        parseInt(userTotal[0]?.inactive_users),
        parseInt(userTotal[0]?.deleted_users)
      ],
      chart: {
        height: 400,
        type: 'pie',
      },
      title: {
        text: 'User Status Overview',
        align: 'center',
        style: {
          fontSize: '20px',
          fontWeight: 'bold',
          color: '#333'
        }
      },
      subtitle: {
        text: 'Breakdown of all user account statuses.',
        align: 'center',
        offsetY: 30,
        style: {
          fontSize: '14px',
          color: '#666'
        }
      },
      labels: ['Active', 'Inactive', 'Deleted'],
      colors: [
        handleColor('--color-user-active'),
        handleColor('--color-user-inactive'),
        handleColor('--color-user-deleted')
      ],
      dataLabels: {
        enabled: true,
        style: {
          fontSize: '14px',
          fontWeight: 'bold',
          colors: ['#fff']
        },
        dropShadow: {
          enabled: true,
          top: 1,
          left: 1,
          blur: 1,
          opacity: 0.5
        }
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'center'
      },
      plotOptions: {
        pie: {
          dataLabels: {
            offset: -5
          },
          expandOnClick: true
        }
      },
      tooltip: {
        y: {
          formatter: function(val) {
            return val + " users";
          }
        }
      }
    };



    var totalChart = new ApexCharts(document.querySelector("#total"), totalOptions);
    totalChart.render();
    document.getElementById('total_count').innerHTML = parseInt(userTotal[0]?.total_users)
    document.getElementById('active_count').innerHTML = parseInt(userTotal[0]?.active_users)
    document.getElementById('inactive_count').innerHTML = parseInt(userTotal[0]?.inactive_users)
    document.getElementById('deleted_count').innerHTML = parseInt(userTotal[0]?.deleted_users)
  }

  if (Array.isArray(userDaily) && userDaily.length > 0) {

    const allData = [
      ...userDaily.map(v => v.user_count),
      ...userDaily.map(v => v.deleted_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var dailyOptions = {
      series: [{
        name: 'Created',
        data: userDaily.map((value) => value.user_count),
        color: handleColor('--color-user-created'),
      }, {
        name: 'Deleted',
        data: userDaily.map((value) => value.deleted_count),
        color: handleColor('--color-user-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'daily_user_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'daily_user_counts_chart'
            },
            png: {
              filename: 'daily_user_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;

            // Check if the clicked element is a dataPoint or graph area (e.g., not axes or labels)
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              // When the chart's plot area is clicked, trigger the modal and show the chart

              handleDailyChart(dailyOptions) // Pass the same options to render inside the modal
            }
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: userDaily.map((value) => moment(value.date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Number of Users',
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📅 Daily User Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking daily additions and removals of users',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };
    // var dailyOptions = {
    //   series: [{
    //     name: "Count",
    //     data: userDaily.map((value) => value.user_count)
    //   }],
    //   chart: {
    //     height: 350,
    //     type: 'line',
    //     zoom: {
    //       enabled: false
    //     }
    //   },
    //   dataLabels: {
    //     enabled: false
    //   },
    //   stroke: {
    //     curve: 'straight'
    //   },
    //   title: {
    //     text: 'Daily(Created)',
    //     align: 'left'
    //   },
    //   grid: {
    //     row: {
    //       colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    //       opacity: 0.5
    //     },
    //   },
    //   xaxis: {
    //     categories: userDaily.map((value) => value.date),
    //   }
    // };

    // var dailyOptions = {
    //     series: [{
    //       name: 'Created',
    //       data: userDaily.map((value) => value.user_count)
    //     }],
    //     chart: {
    //       type: 'bar',
    //       height: 350
    //     },
    //     plotOptions: {
    //       bar: {
    //         horizontal: false,
    //         columnWidth: '55%',
    //         borderRadius: 5,
    //         borderRadiusApplication: 'end'
    //       },
    //     },
    //     dataLabels: {
    //       enabled: false
    //     },
    //     stroke: {
    //       show: true,
    //       width: 2,
    //       colors: ['transparent']
    //     },
    //     xaxis: {
    //       categories: userDaily.map((value) => value.date),
    //     },
    //     yaxis: {
    //       title: {
    //         text: 'Number of Users'
    //       }
    //     },
    //     fill: {
    //       opacity: 1
    //     },
    //     title: {
    //       text: 'Daily(Created)',
    //       align: 'left'
    //     },
    //   };

    var dailyChart = new ApexCharts(document.querySelector("#daily"), dailyOptions);
    dailyChart.render();
  }


  if (Array.isArray(userMonthly) && userMonthly.length > 0) {


    const allData = [
      ...userMonthly.map(v => v.user_count),
      ...userMonthly.map(v => v.deleted_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var monthlyOptions = {
      series: [{
        name: 'Created',
        data: userMonthly.map((value) => value.user_count),
        color: handleColor('--color-user-created'),
      }, {
        name: 'Deleted',
        data: userMonthly.map((value) => value.deleted_count),
        color: handleColor('--color-user-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'monthly_user_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'monthly_user_counts_chart'
            },
            png: {
              filename: 'monthly_user_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              handleDailyChart(monthlyOptions);
            }
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: userMonthly.map((value) => monthValue[value.month]),
      },
      yaxis: {
        title: {
          text: 'Number of Users'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📆 Monthly User Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking monthly additions and removals of users',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };


    var monthlyChart = new ApexCharts(document.querySelector("#monthly"), monthlyOptions);
    monthlyChart.render();
  }

  if (Array.isArray(userWeekly) && userWeekly.length > 0) {



    const allData = [
      ...userWeekly.map(v => v.user_count),
      ...userWeekly.map(v => v.deleted_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var weeklyOptions = {
      series: [{
        name: 'Created',
        data: userWeekly.map((value) => value.user_count),
        color: handleColor('--color-user-created'),
      }, {
        name: 'Deleted',
        data: userWeekly.map((value) => value.deleted_count),
        color: handleColor('--color-user-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'current_week_user_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'current_week_user_counts_chart'
            },
            png: {
              filename: 'current_week_user_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;

            // Check if the clicked element is a dataPoint or graph area (e.g., not axes or labels)
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              // When the chart's plot area is clicked, trigger the modal and show the chart

              handleDailyChart(weeklyOptions) // Pass the same options to render inside the modal
            }
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: userWeekly.map((value) => moment(value.date).format('DD MMM')),
      },
      yaxis: {
        title: {
          text: 'Number of Users'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📅 Current Week User Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking current week additions and removals of users',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };
    // var weeklyOptions = {
    //   series: [{
    //     name: "Count",
    //     data: userWeekly.map((value) => value.user_count)
    //   }],
    //   chart: {
    //     height: 350,
    //     type: 'line',
    //     zoom: {
    //       enabled: false
    //     }
    //   },
    //   dataLabels: {
    //     enabled: false
    //   },
    //   stroke: {
    //     curve: 'straight'
    //   },
    //   title: {
    //     text: 'Current Week(Created)',
    //     align: 'left'
    //   },
    //   grid: {
    //     row: {
    //       colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    //       opacity: 0.5
    //     },
    //   },
    //   xaxis: {
    //     categories: userWeekly.map((value) => value.date),
    //   }
    // };

    var Weeklychart = new ApexCharts(document.querySelector("#weekly"), weeklyOptions);
    Weeklychart.render();
  }

  if (Array.isArray(userWeekWise) && userWeekWise.length > 0) {


    const allData = [
      ...userWeekWise.map(v => v.user_count),
      ...userWeekWise.map(v => v.deleted_count),
    ];
    const maxY = Math.max(...allData, 0); // Ensures at least 0
    const roundedMax = Math.ceil(maxY / 10) * 10 || 10;

    var weekWiseOptions = {
      series: [{
        name: 'Created',
        data: userWeekWise.map((value) => value.user_count),
        color: handleColor('--color-user-created'),
      }, {
        name: 'Deleted',
        data: userWeekWise.map((value) => value.deleted_count),
        color: handleColor('--color-user-deleted'),
      }],
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: true,
          tools: {
            download: true
          },
          export: {
            csv: {
              filename: 'weekly_user_counts',
              headerCategory: 'Category',
            },
            svg: {
              filename: 'weekly_user_counts_chart'
            },
            png: {
              filename: 'weekly_user_counts_chart'
            }
          }
        },
        events: {
          click: function(event, chartContext, config) {
            const clickedElement = event.target;

            // Check if the clicked element is a dataPoint or graph area (e.g., not axes or labels)
            if (!clickedElement.matches('.apexcharts-subtitle-text') && !clickedElement.matches('.apexcharts-title-text') && !clickedElement.matches(".apexcharts-legend") && !clickedElement.matches('.apexcharts-menu-icon') && !clickedElement.matches('.apexcharts-menu-item') && !clickedElement.matches('.apexcharts-legend-text')) {
              // When the chart's plot area is clicked, trigger the modal and show the chart

              handleDailyChart(weekWiseOptions) // Pass the same options to render inside the modal
            }
          }
        }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          borderRadius: 5,
          borderRadiusApplication: 'end'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: userWeekWise.map(({
          week,
          year
        }) => {
          const getDateRangeOfWeek = (week, year) => {
            const simple = new Date(year, 0, 1 + (week - 1) * 7);
            const dow = simple.getDay();
            const ISOweekStart = new Date(simple);
            if (dow <= 4)
              ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
            else
              ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
            const ISOweekEnd = new Date(ISOweekStart);
            ISOweekEnd.setDate(ISOweekStart.getDate() + 6);

            const formatDate = (date) =>
              date.toLocaleDateString('en-GB', {
                day: '2-digit',
                month: 'short'
              });

            return `${formatDate(ISOweekStart)} - ${formatDate(ISOweekEnd)}`;
          };

          return getDateRangeOfWeek(week, year);
        }),
      },
      yaxis: {
        title: {
          text: 'Number of Users'
        },
        min: 0,
        max: roundedMax,
        forceNiceScale: true,
        labels: {
          formatter: function(val) {
            return Math.floor(val); // Ensure no decimals
          }
        },
      },
      fill: {
        opacity: 1
      },
      title: {
        text: '📊 Weekly User Activity: New and Deleted',
        align: 'left',
        style: {
          fontSize: '18px',
          fontWeight: 'bold',
          fontFamily: 'Arial, sans-serif',
          color: '#263238'
        }
      },
      subtitle: {
        text: 'Tracking Weekly additions and removals of users',
        align: 'left',
        style: {
          fontSize: '14px',
          fontWeight: 'normal',
          fontFamily: 'Arial, sans-serif',
          color: '#546E7A'
        }
      }
    };
    // var weekWiseOptions = {
    //   series: [{
    //     name: "Count",
    //     data: userWeekWise.map((value) => value.user_count)
    //   }],
    //   chart: {
    //     height: 350,
    //     type: 'line',
    //     zoom: {
    //       enabled: false
    //     }
    //   },
    //   dataLabels: {
    //     enabled: false
    //   },
    //   stroke: {
    //     curve: 'straight'
    //   },
    //   title: {
    //     text: 'Weekly(Created)',
    //     align: 'left'
    //   },
    //   grid: {
    //     row: {
    //       colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
    //       opacity: 0.5
    //     },
    //   },
    //   xaxis: {
    //     categories: userWeekWise.map((value) => `Week ${value.week}`),
    //   }
    // };

    var weekWiseChart = new ApexCharts(document.querySelector("#weekwise"), weekWiseOptions);
    weekWiseChart.render();
  }

  // Show the loader when the page is loading
  const showLoader = () => {
    document.getElementById("loaderContainer").style.display = "flex"; // Show loader
  };

  // Hide the loader after 3 seconds (simulating data loading)
  const hideLoader = () => {
    document.getElementById("loaderContainer").style.display = "none"; // Hide loader
  };

  // Customize toastr options (optional)
  toastr.options = {
    positionClass: "toast-top-right",
    timeOut: "5000", // Toast will disappear after 5 seconds
    closeButton: true,
  };
</script>
<!-- footer -->
<%- include('partials/footer') %>

</html>