@extends('administrative.layouts.main')
@section('title', 'Cron Log Charts')
@section('content')
  <x-breadcrumb />

  <div class="container mt-5 text-center">
    <div class="mb-4 flex justify-center gap-4">
      <div>
        <label for="datetime-from" class="form-label">Start From</label>
        <x-input type="datetime-local" id="datetime-from" class="form-control" placeholder="Start Date" />
      </div>

      <div>
        <label for="datetime-to" class="form-label">End To</label>
        <x-input type="datetime-local" id="datetime-to" class="form-control" placeholder="End Date" />
      </div>

      <div class="flex items-end">
        <x-button id="filter" variant="blue">Filter</x-button>
      </div>
    </div>

    <p class="validation-message text-center text-red-500 hidden">Both dates are required.</p>

    <div id="charts-container" class="grid gap-4 justify-center lg:grid-cols-2 p-4">
      <div class="loading-spinner lg:col-span-2">
        <i class="fas fa-spinner animate-spin text-5xl text-blue-500"></i>
      </div>

      {{-- <div class="loading-spinner text-center my-4">
        <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; color: #007bff;">
          <span class="sr-only">Loading...</span>
        </div>
      </div> --}}
    </div>
  </div>
@endsection
@section('pageScripts')
  <script src="{{ asset('assets/plugins/chartjs/chart.umd.min.js') }}"></script>
  <script>
    const CronManager = {
      formatDate: function(date) {
        return date.getFullYear() + '-' +
          ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
          ('0' + date.getDate()).slice(-2) + 'T' +
          ('0' + date.getHours()).slice(-2) + ':' +
          ('0' + date.getMinutes()).slice(-2);
      },

      randomRgba: function() {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        return `rgba(${r}, ${g}, ${b}, 0.5)`;
      },

      timeToSeconds: function(timeString) {
        const [hours, minutes, seconds] = timeString.split(':').map(Number);
        return (hours || 0) * 3600 + (minutes || 0) * 60 + (seconds || 0);
      },

      fetchCronLogCharts: function(dateFrom, dateTo) {
        const chartsContainer = document.querySelector("#charts-container");
        chartsContainer.innerHTML = `<div class="loading-spinner lg:col-span-2">
                <i class="fas fa-spinner animate-spin text-5xl text-blue-500"></i>
            </div>`;

        $.ajax({
          url: "{{ route('administrative.all-cron-chart-data') }}",
          method: "GET",
          data: {
            datefrom: dateFrom,
            dateto: dateTo
          },
          success: function(response) {
            chartsContainer.innerHTML = "";

            response.data.forEach((chartData) => {
              const chartColumn = document.createElement("div");
              chartColumn.className = "col-md-6";
              const canvas = document.createElement("canvas");
              canvas.style.marginBottom = "20px";
              chartColumn.appendChild(canvas);
              chartsContainer.appendChild(chartColumn);

              const labels = chartData.data.start_time;
              const executionTimes = chartData.data.execution_time.map(CronManager.timeToSeconds);

              new Chart(canvas, {
                type: "line",
                data: {
                  labels: labels,
                  datasets: [{
                    label: ` ${chartData.cron_name}`,
                    data: executionTimes,
                    backgroundColor: labels.map(() => CronManager.randomRgba()),
                    borderColor: "rgba(54, 162, 235, 1)",
                    borderWidth: 1
                  }]
                },
                options: {
                  responsive: true,
                  plugins: {
                    legend: {
                      display: true,
                      position: "top"
                    }
                  },
                  scales: {
                    x: {
                      title: {
                        display: true,
                        text: "Start Time"
                      }
                    },
                    y: {
                      title: {
                        display: true,
                        text: "Execution Time (seconds)"
                      },
                      beginAtZero: true
                    }
                  }
                }
              });
            });
          },
          error: function(xhr) {
            chartsContainer.innerHTML = `
                        <p style="color: red; text-align: center;">Error fetching cron log data. Please try again later.</p>
                    `;
            console.error("Error fetching cron log data:", xhr.responseText);
          }
        });
      },

      init: function() {
        const $datetimeTo = $("#datetime-to");
        const $datetimeFrom = $("#datetime-from");

        const currentDate = new Date();
        const previousDate = new Date();
        previousDate.setHours(currentDate.getHours() - 6);

        $datetimeTo.val(CronManager.formatDate(currentDate));
        $datetimeFrom.val(CronManager.formatDate(previousDate));

        CronManager.fetchCronLogCharts($datetimeFrom.val(), $datetimeTo.val());

        $('#filter').on('click', function() {
          if ($datetimeFrom.val() === '' || $datetimeTo.val() === '') {
            $(".validation-message").removeClass('d-none');
          } else {
            $(".validation-message").addClass('d-none');
            CronManager.fetchCronLogCharts($datetimeFrom.val(), $datetimeTo.val());
          }
        });

        $datetimeFrom.add($datetimeTo).on('change', function() {
          if ($datetimeFrom.val() && $datetimeTo.val()) {
            if (new Date($datetimeFrom.val()) > new Date($datetimeTo.val())) {
              alert('Start date cannot be later than end date');
              $(this).val('');
            }
          }
        });
      }
    };

    $(document).ready(function() {
      CronManager.init();
    });
  </script>
@endsection