@extends('administrative.layouts.main')
@section('pageStyles')
  <style>
    #chart-container {
      position: relative;
      width: 800px;
      height: 400px;
      overflow: auto;
    }

    .navbar {
      position: absolute;
    }
  </style>
@endsection

@section('content')
  <x-breadcrumb custom="true">
    <li class="inline-flex items-center">
      <a href="{{ route('administrative.dashboard') }}" class="text-sm font-medium text-blue-500 hover:text-blue-600">
        <i class="fas fa-home me-1"></i>
        Dashboard
      </a>
    </li>
    <li class="inline-flex items-center">
      <a href="#" class="text-sm font-medium text-gray-700">
        Cron Logs
      </a>
    </li>
  </x-breadcrumb>

  <div class="flex justify-between items-center mt-5">
    <div>
      <h4 class="text-2xl font-semibold">Historical Cron Logs</h4>
    </div>
  </div>

  <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
    <table id="datatables-historical-cron-logs" class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Date</th>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Execution Time</th>
          <th>Interval</th>
          <th>Panel</th>
          <th>Created At</th>
          <th class="disabled-sorting text-right">Actions</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <div class="flex justify-between items-center mt-10">
    <div>
      <h4 class="text-2xl font-semibold">Live Cron Logs</h4>
    </div>
  </div>
  <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
    <table id="datatables-live-cron-logs" class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Date</th>
          <th>Start Time</th>
          <th>End Time</th>
          <th>Execution Time</th>
          <th>Interval</th>
          <th>Panel</th>
          <th>Created At</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <x-modal id="cron-log-modal" title="Chart" size="lg">
    <div class="grid grid-cols-2 gap-3">
      <div class="form-group">
        <label for="datetime-from">Date From <span class="text-danger">*</span></label>
        <x-input type="datetime-local" id="datetime-from" name="datetime_from" class="datetimepicker" required />
        <div class="hidden validation-message">
          <span class="text-danger">Date from is required</span>
        </div>
      </div>

      <div class="form-group">
        <label for="datetime-to">Date To <span class="text-danger">*</span></label>
        <x-input type="datetime-local" id="datetime-to" name="datetime_to" class="datetimepicker" required />
        <div class="hidden validation-message">
          <span class="text-danger">Date to is required</span>
        </div>
      </div>
    </div>

    <div class="col-md-12">
      <canvas height="130" id="cron-log-chart"></canvas>
    </div>

    <x-slot:footer>
      <div class="flex items-center justify-end p-4 md:p-5 border-t border-gray-200 rounded-b">
        <button type="button" data-modal-hide="cron-log-modal"
          class="py-2.5 px-5 me-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100">Close</button>
        <button type="button" id="search"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Search</button>
      </div>
    </x-slot:footer>
  </x-modal>
@endsection
@section('pageScripts')
  <script src="{{ asset('assets/plugins/chartjs/chart.umd.min.js') }}"></script>
  <script>
    let currentChart;
    let dTable;
    let cronName;
    $.mDatetimeFormat = 'DD-MMM-YYYY hh:mm:ss a';

    $(document).ready(function() {
      DataTable();
      const instanceOptions = {
        id: 'cron-log-modal',
        override: true
      };
      const $modalEl = document.getElementById('cron-log-modal');
      const myModal = new Modal($modalEl, {}, instanceOptions);

      const $datetimeTo = document.querySelector("#datetime-to");
      const $datetimeFrom = document.querySelector("#datetime-from");

      $(document).on('click', '.show-bar-chart', function() {
        const formattedCurrentDate = formatDate(new Date());
        let rowData = dTable.row($(this).closest('tr')).data();
        cronName = rowData.name;

        const cronSettings = getCronSettings(cronName);
        if (cronSettings) {
          const endDate = getDateFromInterval(cronSettings.interval, cronSettings
            .unit);
          const formattedEndDate = formatDate(endDate);
          ShowChart(formattedCurrentDate, formattedEndDate);
        }
      });

      $('#search').on('click', function() {
        const validationMsgEl = document.querySelectorAll('.validation-message');
        const inputs = [$datetimeFrom, $datetimeTo];
        inputs.forEach(inp => {
          if (inp.value === '') {
            inp.nextElementSibling.classList.remove('hidden');
          } else {
            inp.nextElementSibling.classList.add('hidden');

            CronLogChart(cronName);
            myModal.show();
          }
        });
      });

      function getCronSettings(cronName) {
        const cronConfigurations = {
          'Analytics and summary cron': {
            interval: 60,
            unit: 'minutes',
            extraHours: 6
          },
          'SMS Notification cron': {
            interval: 2,
            unit: 'minutes'
          },
          'Daily distance cron': {
            interval: 24,
            unit: 'hours'
          },
          'Legal alerts cron': {
            interval: 24,
            unit: 'hours'
          },
          'Engine park trip cron': {
            interval: 15,
            unit: 'minutes',
            extraHours: 6
          },
          'Engine park trip Left cron': {
            interval: 7,
            unit: 'minutes',
            extraHours: 6
          },
          'Engine alert cron': {
            interval: 1,
            unit: 'minutes',
            extraHours: 6
          },
          'Harsh break and acceleration cron': {
            interval: 5,
            unit: 'minutes',
            extraHours: 6
          },
          'Email Notification process': {
            interval: 5,
            unit: 'minutes',
            extraHours: 6
          },
          'Hourly distance cron': {
            interval: 360,
            unit: 'minutes',
            extraHours: 6
          },
          'Notification cron': {
            interval: 3,
            unit: 'minutes',
            extraHours: 6
          },
          'Overspeed alert cron': {
            interval: 7,
            unit: 'minutes',
            extraHours: 6
          },
          'Daily utility cron': {
            interval: 24,
            unit: 'hours'
          },
          'Trip distance cron': {
            interval: 7,
            unit: 'minutes',
            extraHours: 6
          },
          'Disconnection alert cron': {
            interval: 23,
            unit: 'minutes',
            extraHours: 6
          },
          'Vehicle status update cron': {
            interval: 2,
            unit: 'minutes',
            extraHours: 6
          },
          'Overtime driving alert cron': {
            interval: 24,
            unit: 'hours'
          },
          'Sunset alert cron': {
            interval: 24,
            unit: 'hours'
          },
          'Night travel alert cron': {
            interval: 2,
            unit: 'minutes'
          },
          'Data maintenance cron': {
            interval: 24,
            unit: 'hours'
          },
          'Historical engine report cron': {
            interval: 24,
            unit: 'hours'
          },
          'Historical route cron': {
            interval: 24,
            unit: 'hours'
          },
        };

        return cronConfigurations[cronName] || null;
      }

      function formatDate(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);
      }

      function ShowChart(formattedCurrentDate, formattedEndDate) {
        $("#datetime-to").val(formattedCurrentDate);
        $("#datetime-from").val(formattedEndDate);

        if ($("#datetime-from").val() && $("#datetime-to").val()) {
          $('#cron-name').html(cronName);
          CronLogChart(cronName);
        }
        currentChart?.destroy();
        myModal.show();
      }

      function getDateFromInterval(interval, unit) {
        const now = new Date();
        let futureDate = new Date(now);
        if (unit === 'minutes') {
          futureDate.setMinutes(futureDate.getMinutes() - interval * 20);
        } else if (unit === 'hours') {
          futureDate.setHours(futureDate.getHours() - interval * 25);
        } else {
          console.error("Invalid unit. Please specify 'minutes' or 'hours'.");
        }
        return futureDate;
      }

      function CronLogChart(cronName) {
        $.ajax({
          url: `get_cron_log_chart/${$("#datetime-from").val()}/${$("#datetime-to").val()}/${cronName}`,
          method: 'get',
          headers: {
            'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
          },
          dataType: 'json',
          success: function(response) {
            const ctx = document.getElementById('cron-log-chart').getContext('2d');
            if (currentChart) {
              currentChart.destroy();
            }
            const backgroundColors = response[0].data.map(() => randomRgba());

            currentChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: response[0].label,
                datasets: [{
                  label: 'Bar Chart',
                  data: response[0].data.map(timeToSeconds),
                  backgroundColor: backgroundColors,
                }],
              },
              options: {
                scales: {
                  x: {
                    title: {
                      display: true,
                      text: "Date & Time"
                    }
                  },
                  y: {
                    title: {
                      display: true,
                      text: "Execution Time (seconds)"
                    },
                    beginAtZero: true,
                    ticks: {
                      beginAtZero: true,
                      suggestedMax: Math.max(...response[0].data.map(timeToSeconds)) * 1.1,
                    }
                  },
                }
              }
            });
          },
          error: function(xhr) {
            console.error(xhr.responseText);
          }
        });
      }

      function randomRgba() {
        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)`;
      }

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

      function DataTable() {
        dTable = $('#datatables-historical-cron-logs').DataTable({
          layout: {
            topEnd: {
              search: {
                placeholder: 'Search...'
              }
            }
          },
          lengthMenu: [10, 25, 50, 100, {
            label: 'All',
            value: -1
          }],
          pageLength: 25,
          language: {
            search: ""
          },
          scrollX: true,
          pageLength: 100,
          processing: true,
          serverSide: true,
          ajax: '{{ route('administrative.get.cron.log') }}',
          columns: [{
              data: 'name',
              name: 'name'
            },
            {
              data: 'daily_date',
              name: 'daily_date'
            },
            {
              data: 'start_time',
              name: 'start_time'
            },
            {
              data: 'end_time',
              name: 'end_time'
            },
            {
              data: 'execution_time',
              name: 'execution_time'
            },
            {
              data: 'interval',
              name: 'interval'
            },
            {
              data: 'panel',
              name: 'panel'
            },
            {
              data: 'created_at',
              name: 'created_at'
            },
            {
              data: null,
              name: null,
              width: 50,
              render: function() {
                return '<span class="show-bar-chart badge-green badge-sm badge-rounded cursor-pointer">Chart</span>'
              }
            }
          ]
        });

        $('#datatables-live-cron-logs').DataTable({
          layout: {
            topEnd: {
              search: {
                placeholder: 'Search...'
              }
            }
          },
          lengthMenu: [10, 25, 50, 100, {
            label: 'All',
            value: -1
          }],
          pageLength: 25,
          language: {
            search: ""
          },
          scrollX: true,
          pageLength: 100,
          processing: true,
          serverSide: true,
          ajax: {
            url: '{{ route('administrative.get.all.cron.log') }}',
            data: function(d) {
              d.datetime_from = $('#datetime-from').val();
              d.datetime_to = $('#datetime-to').val();
            }
          },
          columns: [{
              data: 'name',
              name: 'name'
            },
            {
              data: 'daily_date',
              name: 'daily_date'
            },
            {
              data: 'start_time',
              name: 'start_time'
            },
            {
              data: 'end_time',
              name: 'end_time'
            },
            {
              data: 'execution_time',
              name: 'execution_time'
            },
            {
              data: 'interval',
              name: 'interval'
            },
            {
              data: 'panel',
              name: 'panel'
            },
            {
              data: 'created_at',
              name: 'created_at'
            }
          ],
          order: [
            [7, 'desc']
          ]
        });
      }
    });
  </script>
@endsection