@extends('layouts.admin')

@section('title', 'Superadmin Dashboard')

@section('content')
<!--begin::App Main-->
<div class="container-fluid py-4">
  <div class="card mb-4">
    <div class="card-header bg-primary text-white">
      <h3 class="card-title mb-0">Dashboard</h3>
    </div>
  </div>

  <!-- Info Boxes -->
  <div class="row">
    <div class="col-md-2">
      <div class="info-box bg-info">
        <span class="info-box-icon"><i class="fas fa-users"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">Total Members</span>
          <span class="info-box-number">{{ $totalMembers }}</span>
        </div>
      </div>
    </div>

    <div class="col-md-2">
      <div class="info-box bg-primary">
        <span class="info-box-icon"><i class="fas fa-user-shield"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">Total Admins</span>
          <span class="info-box-number">{{ $totalAdmins }}</span>
        </div>
      </div>
    </div>

    <div class="col-md-2">
      <div class="info-box bg-success">
        <span class="info-box-icon"><i class="fas fa-user-crown"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">Superadmins</span>
          <span class="info-box-number">{{ $totalSuperadmins }}</span>
        </div>
      </div>
    </div>

    <div class="col-md-2">
      <div class="info-box bg-success">
        <span class="info-box-icon"><i class="fas fa-check-circle"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">Active Members</span>
          <span class="info-box-number">{{ $activeMembers }}</span>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="info-box bg-danger">
        <span class="info-box-icon"><i class="fas fa-times-circle"></i></span>
        <div class="info-box-content">
          <span class="info-box-text">Inactive Members</span>
          <span class="info-box-number">{{ $inactiveMembers }}</span>
        </div>
      </div>
    </div>
  </div>
    <!--- Members Expiry chart --------------->
    <div class="row mt-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header bg-warning text-dark">
        <h3 class="card-title">Members Expiring Next Month ({{ \Carbon\Carbon::now()->addMonthNoOverflow()->format('F Y') }})</h3>
      </div>
      <div class="card-body">
        <canvas id="expiryChart" style="min-height: 300px; height: 300px;"></canvas>
      </div>
    </div>
  </div>
</div>

  <!-- Blacklist Trend Chart -->
  <div class="row mt-4">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header bg-danger text-white">
          <h3 class="card-title">Blacklist Worker Trends (Monthly)</h3>
        </div>
        <div class="card-body">
          <canvas id="blacklistTrendChart" style="min-height: 300px; height: 300px;"></canvas>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header bg-info text-white">
        <h3 class="card-title">User Status by Role</h3>
      </div>
      <div class="card-body">
        <canvas id="userStatusChart" style="min-height: 300px; height: 300px;"></canvas>
      </div>
    </div>
  </div>
</div>


</div>
<!--end::App Main-->
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('blacklistTrendChart').getContext('2d');

    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: @json($monthlyLabels ?? []),
        datasets: [{
          label: 'Blacklisted Workers',
          data: @json($monthlyBlacklistCounts ?? []),
          backgroundColor: '#dc3545',
          borderColor: '#dc3545',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: 'Count'
            }
          }
        },
        plugins: {
          legend: {
            display: false
          }
        }
      }
    });
  });


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

  const roles = @json($roles);
  const statuses = @json($statuses);
  const countsByStatus = @json($countsByStatus);

  const colors = {
    'pending': '#ffc107',   // yellow
    'active': '#28a745',    // green
    'inactive': '#dc3545',  // red
  };

  const datasets = statuses.map(status => ({
    label: status.charAt(0).toUpperCase() + status.slice(1),
    data: countsByStatus[status] || [],
    backgroundColor: colors[status] || '#6c757d',
  }));

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: roles,
      datasets: datasets,
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: { stacked: true },
        y: { 
          stacked: true,
          beginAtZero: true,
          title: {
            display: true,
            text: 'User Count'
          }
        },
      },
      plugins: {
        legend: { position: 'top' },
      }
    }
    
  });

  /*==================js for expiry by next month ========================== */
  const expiryCtx = document.getElementById('expiryChart').getContext('2d');

  new Chart(expiryCtx, {
    type: 'bar',
    data: {
      labels: @json($expiryLabels),
      datasets: [{
        label: 'Expiring Members',
        data: @json($expiryCounts),
        backgroundColor: '#ffc107', // Bootstrap warning color
        borderColor: '#ffc107',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: 'Number of Members'
          }
        },
        x: {
          title: {
            display: true,
            text: 'Day of Month'
          }
        }
      },
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return context.parsed.y + ' member(s)';
            }
          }
        }
      }
    }
  });
</script>
@endpush