@extends('layouts.admin')

@section('content')
    <div class="d-flex align-items-center justify-content-between mb-3">
      <div>
        <h2 class="mb-2 text-primary">NORTHERN NIGERIA FLOUR MILLS Plc.</h2>
        <div class="text-info">System overview and activity</div>
      </div>
    </div>

    <div class="row g-3 mb-4">
      <div class="col-sm-6 col-lg-3">
        <div class="card shadow-sm h-100">
          <div class="card-body d-flex align-items-center gap-3">
            <div class="metric-icon rounded-circle d-flex align-items-center justify-content-center bg-primary-subtle text-primary">
              <i class="bi bi-people-fill"></i>
            </div>
            <div>
              <div class="fw-bold text-muted">Users</div>
              <div class="fs-4 fw-bold">{{ $totalUsers }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card shadow-sm h-100">
          <div class="card-body d-flex align-items-center gap-3">
            <div class="metric-icon rounded-circle d-flex align-items-center justify-content-center bg-info-subtle text-info">
              <i class="bi bi-clock-history"></i>
            </div>
            <div>
              <div class="fw-bold text-muted">Reports Today</div>
              <div class="fs-4 fw-bold">{{ $reportsToday }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card shadow-sm h-100">
          <div class="card-body d-flex align-items-center gap-3">
            <div class="metric-icon rounded-circle d-flex align-items-center justify-content-center bg-success-subtle text-success">
              <i class="bi bi-check-circle-fill"></i>
            </div>
            <div>
              <div class="fw-bold text-muted">System Status</div>
              <div class="fs-6 {{ $systemStatusClass }}">{{ $systemStatus }}</div>
              <div class="text-muted fw-bold">Active Machines: {{ $activeMachines }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="card shadow-sm h-100">
          <div class="card-body d-flex align-items-center gap-3">
            <div class="metric-icon rounded-circle d-flex align-items-center justify-content-center bg-warning-subtle text-warning">
              <i class="bi bi-exclamation-triangle-fill"></i>
            </div>
            <div>
              <div class="fw-bold text-muted">Notifications</div>
              <div class="fs-4 fw-bold">{{ $notificationsCount }}</div>
              <div class="text-muted small">Inactive or missing email entries</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Downtime Analysis</h5>
        <p class="text-muted">Which machines are the worst offenders?</p>
        <form id="rangeForm" class="row g-3 align-items-end">
          <div class="col-md-3">
            <label class="form-label small fw-bold">From</label>
            <input type="date" id="fromDate" class="form-control form-control-sm">
          </div>
          <div class="col-md-3">
            <label class="form-label small fw-bold">To</label>
            <input type="date" id="toDate" class="form-control form-control-sm">
          </div>
          <div class="col-md-2">
            <button class="btn btn-primary btn-sm w-100" type="submit">Apply</button>
          </div>
          <div class="col-md-4 text-end">
            <button id="downloadCsvBtn" class="btn btn-outline-success btn-sm" type="button">
                <i class="bi bi-download"></i> Download CSV
            </button>
          </div>
        </form>
        <div class="mt-4" style="position: relative; height:300px;">
          <canvas id="downtimeChart"></canvas>
        </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    let downtimeChart;
    const ctx = document.getElementById('downtimeChart').getContext('2d');

    function initChart(labels, values) {
        if (downtimeChart) {
            downtimeChart.destroy();
        }
        
        downtimeChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Total Downtime (minutes)',
                    data: values,
                    backgroundColor: 'rgba(13, 110, 253, 0.8)',
                    borderColor: 'rgba(13, 110, 253, 1)',
                    borderWidth: 1,
                    borderRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(255, 255, 255, 0.1)' },
                        ticks: { color: '#adb5bd' }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { color: '#adb5bd' }
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                        labels: { color: '#adb5bd', boxWidth: 15, padding: 20 }
                    }
                }
            }
        });
    }

    function fetchChartData() {
        const fromDate = document.getElementById('fromDate').value;
        const toDate = document.getElementById('toDate').value;
        
        const params = new URLSearchParams();
        if (fromDate) params.append('from_date', fromDate);
        if (toDate) params.append('to_date', toDate);

        fetch(`{{ route('admin.dashboard.chart-data') }}?${params.toString()}`)
            .then(res => res.json())
            .then(data => {
                initChart(data.labels, data.values);
            })
            .catch(err => console.error('Error fetching chart data:', err));
    }

    document.getElementById('rangeForm').addEventListener('submit', (e) => {
        e.preventDefault();
        fetchChartData();
    });

    document.getElementById('downloadCsvBtn').addEventListener('click', () => {
        const fromDate = document.getElementById('fromDate').value;
        const toDate = document.getElementById('toDate').value;
        
        const params = new URLSearchParams();
        if (fromDate) params.append('from_date', fromDate);
        if (toDate) params.append('to_date', toDate);

        window.location.href = `{{ route('admin.dashboard.export-csv') }}?${params.toString()}`;
    });

    // Default dates (last 7 days)
    const today = new Date();
    const lastWeek = new Date(new Date().setDate(today.getDate() - 7));
    
    document.getElementById('toDate').value = today.toISOString().split('T')[0];
    document.getElementById('fromDate').value = lastWeek.toISOString().split('T')[0];

    // Initial load
    fetchChartData();
  </script>
@endsection