@extends('administrative.layouts.main')
@section('title', 'Dashboard')
@section('content')
  <x-breadcrumb custom="true" class="mb-4">
    <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>
  </x-breadcrumb>

  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
    <div class="grid gap-5">
      <div
        class="p-5 rounded-2xl bg-linear-to-br from-blue-50 to-blue-100 shadow-md hover:shadow-lg flex items-center justify-between transition-all duration-300 group hover:from-blue-100 hover:to-blue-200">
        <div>
          <h5 class="text-sm font-medium text-gray-700">
            Terminal Data Till <span id="yesterdayDate" class="font-semibold text-gray-900"></span>
          </h5>
          <p class="text-3xl font-bold text-blue-600 mt-1 transition-all duration-300 group-hover:text-blue-700"
            id="latestTotalDataCount">
            0
          </p>
        </div>

        <div
          class="h-16 w-16 rounded-2xl bg-blue-500/10 flex items-center justify-center transition-all duration-300 group-hover:bg-blue-500/20">
          <i class="fas fa-microchip text-4xl text-blue-500 group-hover:scale-110 transition-transform duration-300"></i>
        </div>
      </div>

      <div
        class="p-5 rounded-2xl bg-linear-to-br from-green-50 to-green-100 shadow-md hover:shadow-lg flex items-center justify-between transition-all duration-300 group hover:from-green-100 hover:to-green-200">
        <div>
          <h5 class="text-sm font-medium text-gray-700">
            Terminal Data (Last 7 Days)
          </h5>
          <p class="text-3xl font-bold text-green-600 mt-1 transition-all duration-300 group-hover:text-green-700"
            id="sumDailyDataCount">
            0
          </p>
        </div>

        <div
          class="h-16 w-16 rounded-2xl bg-green-500/10 flex items-center justify-center transition-all duration-300 group-hover:bg-green-500/20">
          <i class="fas fa-microchip text-4xl text-green-500 group-hover:scale-110 transition-transform duration-300"></i>
        </div>
      </div>
    </div>

    <div class="p-5 h-95 rounded-2xl bg-white shadow-md hover:shadow-lg transition-all duration-300">
      <canvas id="terminalDataChart"></canvas>
    </div>

    <div class="grid gap-5">
      <div
        class="p-5 rounded-2xl bg-linear-to-br from-yellow-50 to-yellow-100 shadow-md hover:shadow-lg flex items-center justify-between transition-all duration-300 group hover:from-yellow-100 hover:to-yellow-200">
        <div>
          <h5 class="text-sm font-medium text-gray-700">
            Live Web Users <span id="liveWebUsers" class="font-semibold text-gray-900"></span>
          </h5>
          <p class="text-3xl font-bold text-yellow-600 mt-1 transition-all duration-300 group-hover:text-yellow-700"
            id="webUsersCount">
            0
          </p>
        </div>

        <div
          class="h-16 w-16 rounded-2xl bg-yellow-500/10 flex items-center justify-center transition-all duration-300 group-hover:bg-yellow-500/20">
          <i class="fas fa-globe text-4xl text-yellow-500 group-hover:scale-110 transition-transform duration-300"></i>
        </div>
      </div>

      <div
        class="p-5 rounded-2xl bg-linear-to-br from-red-50 to-red-100 shadow-md hover:shadow-lg flex items-center justify-between transition-all duration-300 group hover:from-red-100 hover:to-red-200">
        <div>
          <h5 class="text-sm font-medium text-gray-700">
            Live App Users
          </h5>
          <p class="text-3xl font-bold text-red-600 mt-1 transition-all duration-300 group-hover:text-red-700"
            id="appUsersCount">
            0
          </p>
        </div>

        <div
          class="h-16 w-16 rounded-2xl bg-red-500/10 flex items-center justify-center transition-all duration-300 group-hover:bg-red-500/20">
          <i
            class="fas fa-mobile-screen text-4xl text-red-500 group-hover:scale-110 transition-transform duration-300"></i>
        </div>
      </div>
    </div>

    <div class="p-5 h-95 rounded-2xl bg-white shadow-md hover:shadow-lg transition-all duration-300">
      <canvas id="vehicleStatusPieChart"></canvas>
    </div>

    <div class="p-5 h-95 rounded-2xl bg-white shadow-md hover:shadow-lg transition-all duration-300 md:col-span-2">
      <canvas id="myChart"></canvas>
    </div>

    <div
      class="p-5 rounded-2xl bg-white shadow-md hover:shadow-lg transition-all duration-300 md:col-span-2 xl:col-span-3">
      <h2 class="text-center text-xl font-semibold text-gray-700 mb-6">Disk Usage</h2>

      @foreach ($diskUsage as $disk)
        <div class="mb-6">
          <div class="flex justify-between items-center mb-2">
            <h5 class="text-sm font-medium text-gray-600">
              {{ $disk['Filesystem'] }}
            </h5>
            <span class="text-sm text-gray-500">
              Total: {{ $disk['Size'] }}
            </span>
          </div>

          <div
            class="flex items-center min-h-5 mb-3 relative rounded-full overflow-hidden h-6 border-y-2 border-transparent hover:border-0">
            <div style="width: {{ $disk['used_percent'] }}%;" class="relative h-5">
              <div
                class="used-bar text-xs text-white font-bold flex items-center justify-center bg-linear-to-r from-rose-500 to-red-500 h-5 hover:w-[calc(100%+1rem)] hover:h-6 hover:shadow-lg absolute w-full top-1/2 left-1/2 -translate-1/2 rounded-l-full translate-all duration-200 hover:z-1">
                <span class="">
                  {{ number_format($disk['used_percent'], 2) }}%
                </span>
              </div>
            </div>

            <div style="width: {{ $disk['avail_percent'] }}%;" class="relative h-5">
              <div
                class="free-bar text-xs text-white font-bold flex items-center justify-center bg-linear-to-r from-emerald-400 to-green-500 h-5 hover:w-[calc(100%+1rem)] hover:h-[calc(100%+.25rem)] hover:shadow-lg absolute w-full top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2 rounded-r-full translate-all duration-200 hover:z-1">
                {{ number_format($disk['avail_percent'], 2) }}%
              </div>
            </div>
          </div>

          <div class="flex justify-between text-xs text-gray-500 mt-2">
            <span>Used: {{ $disk['Used'] }} ({{ number_format($disk['used_percent'], 2) }}%)</span>
            <span>Available: {{ $disk['Avail'] }} ({{ number_format($disk['avail_percent'], 2) }}%)</span>
          </div>
        </div>
      @endforeach
    </div>
  </div>

  {{-- <div class ="col-md-4 col-sm-12">
    <div class="card chart-card">
      <canvas class="m-auto" id="activeUserPieChart"></canvas>
    </div>
  </div>
  <div class="col-md-8 col-sm-12">
    <div class="card chart-card">
      <canvas id="vehicleTypePieChart"></canvas>
    </div>
  </div> --}}
@endsection
@section('pageScripts')
  <script src="{{ asset('assets/plugins/chartjs/chart.umd.min.js') }}"></script>
  <script>
    //document.addEventListener('DOMContentLoaded', function() {
    //     // Active Users Pie Chart
    //     const activeUserCtx = document.getElementById('activeUserPieChart').getContext('2d');
    //     const activeUserData = {
    //         labels: {!! json_encode($activeUserCount->pluck('role_name')) !!},
    //         datasets: [{
    //             label: 'Users by Role',
    //             data: {!! json_encode($activeUserCount->pluck('user_count')) !!},
    //             backgroundColor: [
    //                 'rgba(255, 99, 132, 0.2)',
    //                 'rgba(54, 162, 235, 0.2)',
    //                 'rgba(255, 206, 86, 0.2)',
    //                 'rgba(75, 192, 192, 0.2)',
    //                 'rgba(153, 102, 255, 0.2)',
    //                 'rgba(255, 159, 64, 0.2)'
    //             ],
    //             borderColor: [
    //                 'rgba(255, 99, 132, 1)',
    //                 'rgba(54, 162, 235, 1)',
    //                 'rgba(255, 206, 86, 1)',
    //                 'rgba(75, 192, 192, 1)',
    //                 'rgba(153, 102, 255, 1)',
    //                 'rgba(255, 159, 64, 1)'
    //             ],
    //             borderWidth: 1
    //         }]
    //     };
    //     const activeUserOptions = {
    //         responsive: true,
    //         plugins: {
    //             legend: {
    //                 position: 'bottom'
    //             },
    //             title: {
    //                 display: true,
    //                 text: 'Users by Roles'
    //             }
    //         }
    //     };
    //     new Chart(activeUserCtx, {
    //         type: 'doughnut',
    //         data: activeUserData,
    //         options: activeUserOptions
    //     });

    //     // Vehicle Count by Type bar Chart

    //     const vehicleTypeCtx = document.getElementById('vehicleTypePieChart').getContext('2d');
    //     const vehicleTypeData = {
    //         labels: {!! json_encode($vehicleCountByType->pluck('vehicle_type')) !!},
    //         datasets: [{
    //             label: 'Vehicles by Type',
    //             data: {!! json_encode($vehicleCountByType->pluck('count')) !!},
    //             backgroundColor: [
    //                 'rgba(255, 99, 132, 0.2)',
    //                 'rgba(54, 162, 235, 0.2)',
    //                 'rgba(255, 206, 86, 0.2)',
    //                 'rgba(75, 192, 192, 0.2)',
    //                 'rgba(153, 102, 255, 0.2)',
    //                 'rgba(255, 159, 64, 0.2)'
    //             ],
    //             borderColor: [
    //                 'rgba(255, 99, 132, 1)',
    //                 'rgba(54, 162, 235, 1)',
    //                 'rgba(255, 206, 86, 1)',
    //                 'rgba(75, 192, 192, 1)',
    //                 'rgba(153, 102, 255, 1)',
    //                 'rgba(255, 159, 64, 1)'
    //             ],
    //             borderWidth: 1
    //         }]
    //     };

    //     const vehicleTypeOptions = {
    //         responsive: true,
    //         maintainAspectRatio: false,
    //         scales: {
    //             y: {
    //                 beginAtZero: true
    //             }
    //         },
    //         plugins: {
    //             legend: {
    //                 display: false
    //             },
    //             title: {
    //                 display: true,
    //                 text: 'Vehicles by Types'
    //             },
    //             tooltip: {
    //                 enabled: true,
    //                 callbacks: {
    //                     label: function(tooltipItem) {
    //                         const label = tooltipItem.label || '';
    //                         const count = tooltipItem.raw;
    //                         return `${label}: ${count}`;
    //                     }
    //                 }
    //             }
    //         }
    //     };

    //     new Chart(vehicleTypeCtx, {
    //         type: 'bar',
    //         data: vehicleTypeData,
    //         options: vehicleTypeOptions
    //     });

    // });
    // Vehicle Status Pie Chart
    document.addEventListener('DOMContentLoaded', function() {
      const vehicleStatusCtx = document.getElementById('vehicleStatusPieChart').getContext('2d');

      const statusColors = {
        'Online': 'rgba(31, 229, 177, 0.6)',
        'Suspended': 'rgba(255, 117, 117, 0.6)',
        'Offline': 'rgba(221, 229, 239, 0.6)'
      };

      const borderColors = {
        'Online': 'rgba(31, 229, 177)',
        'Suspended': 'rgba(255, 117, 117)',
        'Offline': 'rgba(221, 229, 239, 1)'
      };

      const vehicleStatusLabels = {!! json_encode($vehicleCountByVehicleStatus->pluck('vehicle_status')) !!};
      const vehicleStatusCounts = {!! json_encode($vehicleCountByVehicleStatus->pluck('count')) !!};


      const backgroundColors = vehicleStatusLabels.map(status => statusColors[status] || 'rgba(54, 162, 235, 0.6)');
      const borderColorsArray = vehicleStatusLabels.map(status => borderColors[status] || 'rgba(54, 162, 235, 1)');

      const vehicleStatusData = {
        labels: vehicleStatusLabels,
        datasets: [{
          label: 'Vehicles by Status',
          data: vehicleStatusCounts,
          backgroundColor: backgroundColors,
          borderColor: borderColorsArray,
          borderWidth: 1
        }]
      };

      const vehicleStatusOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom'
          },
          title: {
            display: true,
            text: 'Vehicles by Status'
          }
        }
      };

      new Chart(vehicleStatusCtx, {
        type: 'doughnut',
        data: vehicleStatusData,
        options: vehicleStatusOptions
      });

      const canvas = document.getElementById('myChart');
      canvas.height = 75;

      const labels = [];

      const data = {
        labels: labels,
        datasets: [{
          label: 'CPU Load',
          backgroundColor: 'rgb(253, 209, 14)',
          borderColor: 'rgb(253, 209, 14)',
          data: [],
        }]
      };

      const config = {
        type: 'line',
        data: data,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                callback: function(value) {
                  return value + '%';
                }
              }
            }
          },
          plugins: {
            tooltip: {
              callbacks: {
                label: function(context) {
                  return context.parsed.y + '%';
                }
              }
            }
          }
        }
      };

      const myChart = new Chart(canvas, config);

      function updateData() {
        axios.get('{{ route('administrative.application-traffic.update') }}')
          .then(response => {
            addData(myChart, response.data.time, response.data.cpu);
          })
          .catch(error => {
            console.error(error);
          });
      }

      function addData(chart, label, data) {
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) => {
          dataset.data.push(parseFloat(data));
        });

        if (chart.data.labels.length > 100) {
          removeOldestData(chart);
        }

        chart.update();
      }

      function removeOldestData(chart) {
        chart.data.labels.shift();
        chart.data.datasets.forEach((dataset) => {
          dataset.data.shift();
        });
      }

      fetch("{{ route('administrative.terminal.data.count') }}")
        .then(response => response.json())
        .then(data => {
          if (data.length === 0) {
            console.error("No data found for terminal data count.");
            return;
          }

          const dates = data.map(item => item.daily_date);
          const counts = data.map(item => item.daily_data_count);

          const ctx = document.getElementById('terminalDataChart').getContext('2d');

          new Chart(ctx, {
            type: 'bar',
            data: {
              labels: dates.reverse(),
              datasets: [{
                label: 'Terminal Data Count Daily',
                data: counts.reverse(),
                backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                y: {
                  beginAtZero: true,
                  ticks: {
                    callback: function(value) {
                      return formatDataCount(value);
                    }
                  }
                }
              }
            }
          });
        })
        .catch(error => console.error("Error fetching data:", error));

      fetch("{{ route('administrative.terminal.total.data.count') }}")
        .then(response => response.json())
        .then(data => {
          document.getElementById("latestTotalDataCount").textContent = formatDataCount(data
            .latest_total_data_count);
          document.getElementById("sumDailyDataCount").textContent = formatDataCount(data
            .sum_daily_data_count);
        })
        .catch(error => console.error("Error fetching data:", error));

      updateData();
      updateUserData();

      setInterval(() => {
        updateData();
        updateUserData();
      }, 10000);
    });

    function formatDataCount(number) {
      if (number >= 1e9) {
        return (number / 1e9).toFixed(1) + 'B';
      } else if (number >= 1e6) {
        return (number / 1e6).toFixed(1) + 'M';
      } else if (number >= 1e3) {
        return (number / 1e3).toFixed(1) + 'K';
      }
      return number;
    }
    let yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);

    let formattedDate = yesterday.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });

    document.getElementById("yesterdayDate").innerText = `(${formattedDate})`;

    function updateUserData() {
      axios.get('{{ route('administrative.user-traffic.update') }}').then(response => {
        console.log(response.data.webUsersCount);
        document.querySelector('#webUsersCount').innerText = response.data.webUsersCount;
        document.querySelector('#appUsersCount').innerText = response.data.appUsersCount;
      }).catch(error => {
        console.error(error);
      });
    }
  </script>
@endsection