@extends('layouts.bootstrap')

@section('title', 'Reports & Analytics')

@section('content')
<div class="container-fluid py-4">
  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h1 class="h3 mb-0 fw-bold text-dark">
            <i class="bi bi-graph-up-arrow me-2 text-primary"></i>Reports & Analytics
          </h1>
          <p class="text-muted mb-0">Comprehensive ticket analytics and performance insights</p>
        </div>
        <div class="d-flex gap-2">
          <button class="btn btn-outline-primary rounded-pill px-4" onclick="exportReport()">
            <i class="bi bi-download me-2"></i>Export Report
          </button>
          <button class="btn btn-primary rounded-pill px-4" onclick="refreshData()">
            <i class="bi bi-arrow-clockwise me-2"></i>Refresh
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Date Range Filter -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-body">
          <form id="dateRangeForm" class="row g-3 align-items-end">
            <div class="col-md-3">
              <label for="start_date" class="form-label fw-semibold">Start Date</label>
              <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}">
            </div>
            <div class="col-md-3">
              <label for="end_date" class="form-label fw-semibold">End Date</label>
              <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}">
            </div>
            <div class="col-md-3">
              <button type="submit" class="btn btn-primary rounded-pill px-4">
                <i class="bi bi-funnel me-2"></i>Apply Filter
              </button>
            </div>
            <div class="col-md-3">
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setDateRange('today')">Today</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setDateRange('week')">This Week</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setDateRange('month')">This Month</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="setDateRange('quarter')">This Quarter</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Key Metrics Cards -->
  <div class="row g-4 mb-4">
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body text-center">
          <div class="avatar bg-primary-subtle text-primary rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
            <i class="bi bi-ticket-detailed fs-4"></i>
          </div>
          <h3 class="fw-bold text-dark mb-1">{{ number_format($ticketStats['total_tickets']) }}</h3>
          <p class="text-muted mb-0">Total Tickets</p>
          <small class="text-success">
            <i class="bi bi-arrow-up me-1"></i>+12% from last period
          </small>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body text-center">
          <div class="avatar bg-success-subtle text-success rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
            <i class="bi bi-check-circle fs-4"></i>
          </div>
          <h3 class="fw-bold text-dark mb-1">{{ number_format($ticketStats['resolved_tickets']) }}</h3>
          <p class="text-muted mb-0">Resolved Tickets</p>
          <small class="text-success">
            <i class="bi bi-arrow-up me-1"></i>+8% from last period
          </small>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body text-center">
          <div class="avatar bg-warning-subtle text-warning rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
            <i class="bi bi-clock fs-4"></i>
          </div>
          <h3 class="fw-bold text-dark mb-1">{{ $ticketStats['avg_resolution_time'] }}h</h3>
          <p class="text-muted mb-0">Avg Resolution Time</p>
          <small class="text-danger">
            <i class="bi bi-arrow-down me-1"></i>-5% from last period
          </small>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body text-center">
          <div class="avatar bg-info-subtle text-info rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
            <i class="bi bi-percent fs-4"></i>
          </div>
          <h3 class="fw-bold text-dark mb-1">
            {{ $ticketStats['total_tickets'] > 0 ? round(($ticketStats['resolved_tickets'] / $ticketStats['total_tickets']) * 100, 1) : 0 }}%
          </h3>
          <p class="text-muted mb-0">Resolution Rate</p>
          <small class="text-success">
            <i class="bi bi-arrow-up me-1"></i>+3% from last period
          </small>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Row -->
  <div class="row g-4 mb-4">
    <!-- Status Distribution Chart -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-transparent border-0 py-3">
          <h6 class="mb-0 fw-semibold text-dark">
            <i class="bi bi-pie-chart me-2 text-primary"></i>Ticket Status Distribution
          </h6>
        </div>
        <div class="card-body">
          <canvas id="statusChart" height="300"></canvas>
        </div>
      </div>
    </div>

    <!-- Priority Distribution Chart -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-transparent border-0 py-3">
          <h6 class="mb-0 fw-semibold text-dark">
            <i class="bi bi-bar-chart me-2 text-primary"></i>Priority Distribution
          </h6>
        </div>
        <div class="card-body">
          <canvas id="priorityChart" height="300"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- Monthly Trends Chart -->
  <div class="row g-4 mb-4">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-0 py-3">
          <h6 class="mb-0 fw-semibold text-dark">
            <i class="bi bi-graph-up me-2 text-primary"></i>Monthly Trends
          </h6>
        </div>
        <div class="card-body">
          <canvas id="trendsChart" height="100"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- Performance Tables -->
  <div class="row g-4 mb-4">
    <!-- Department Performance -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-transparent border-0 py-3">
          <h6 class="mb-0 fw-semibold text-dark">
            <i class="bi bi-building me-2 text-primary"></i>Department Performance
          </h6>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th class="fw-semibold ps-4">Department</th>
                  <th class="text-center fw-semibold">Total</th>
                  <th class="text-center fw-semibold">Resolved</th>
                  <th class="text-center fw-semibold">Avg Time</th>
                  <th class="text-center fw-semibold pe-4">Rate</th>
                </tr>
              </thead>
              <tbody>
                @foreach($departmentPerformance as $dept)
                <tr>
                  <td class="ps-4">
                    <div class="d-flex align-items-center">
                      <div class="avatar bg-primary-subtle text-primary rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                        <i class="bi bi-building"></i>
                      </div>
                      <div class="fw-semibold text-dark">{{ $dept->department_name }}</div>
                    </div>
                  </td>
                  <td class="text-center">
                    <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill">
                      {{ $dept->total_tickets }}
                    </span>
                  </td>
                  <td class="text-center">
                    <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill">
                      {{ $dept->resolved_tickets }}
                    </span>
                  </td>
                  <td class="text-center text-muted">
                    {{ $dept->avg_resolution_hours ? round($dept->avg_resolution_hours, 1) . 'h' : 'N/A' }}
                  </td>
                  <td class="text-center pe-4">
                    @php
                      $rate = $dept->total_tickets > 0 ? round(($dept->resolved_tickets / $dept->total_tickets) * 100, 1) : 0;
                    @endphp
                    <span class="badge {{ $rate >= 80 ? 'bg-success-subtle text-success' : ($rate >= 60 ? 'bg-warning-subtle text-warning' : 'bg-danger-subtle text-danger') }} px-3 py-2 rounded-pill">
                      {{ $rate }}%
                    </span>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Agent Performance -->
    <div class="col-lg-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-transparent border-0 py-3">
          <h6 class="mb-0 fw-semibold text-dark">
            <i class="bi bi-people me-2 text-primary"></i>Top Agents
          </h6>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th class="fw-semibold ps-4">Agent</th>
                  <th class="text-center fw-semibold">Total</th>
                  <th class="text-center fw-semibold">Resolved</th>
                  <th class="text-center fw-semibold">Avg Time</th>
                  <th class="text-center fw-semibold pe-4">Rate</th>
                </tr>
              </thead>
              <tbody>
                @foreach($agentPerformance as $agent)
                <tr>
                  <td class="ps-4">
                    <div class="d-flex align-items-center">
                      <div class="avatar bg-info-subtle text-info rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                        <i class="bi bi-person"></i>
                      </div>
                      <div class="fw-semibold text-dark">{{ $agent->agent_name }}</div>
                    </div>
                  </td>
                  <td class="text-center">
                    <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill">
                      {{ $agent->total_tickets }}
                    </span>
                  </td>
                  <td class="text-center">
                    <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill">
                      {{ $agent->resolved_tickets }}
                    </span>
                  </td>
                  <td class="text-center text-muted">
                    {{ $agent->avg_resolution_hours ? round($agent->avg_resolution_hours, 1) . 'h' : 'N/A' }}
                  </td>
                  <td class="text-center pe-4">
                    @php
                      $rate = $agent->total_tickets > 0 ? round(($agent->resolved_tickets / $agent->total_tickets) * 100, 1) : 0;
                    @endphp
                    <span class="badge {{ $rate >= 80 ? 'bg-success-subtle text-success' : ($rate >= 60 ? 'bg-warning-subtle text-warning' : 'bg-danger-subtle text-danger') }} px-3 py-2 rounded-pill">
                      {{ $rate }}%
                    </span>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Resolution Time Analytics -->
  <div class="row g-4 mb-4">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-0 py-3">
          <h6 class="mb-0 fw-semibold text-dark">
            <i class="bi bi-stopwatch me-2 text-primary"></i>Resolution Time Analytics
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-4">
            <div class="col-lg-3 col-md-6">
              <div class="text-center">
                <div class="avatar bg-success-subtle text-success rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                  <i class="bi bi-lightning fs-4"></i>
                </div>
                <h4 class="fw-bold text-success mb-1">{{ $resolutionTimeAnalytics['under_1_hour'] }}</h4>
                <p class="text-muted mb-0">Under 1 Hour</p>
                <small class="text-success">Fast Resolution</small>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="text-center">
                <div class="avatar bg-info-subtle text-info rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                  <i class="bi bi-clock fs-4"></i>
                </div>
                <h4 class="fw-bold text-info mb-1">{{ $resolutionTimeAnalytics['1_to_24_hours'] }}</h4>
                <p class="text-muted mb-0">1-24 Hours</p>
                <small class="text-info">Good Response</small>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="text-center">
                <div class="avatar bg-warning-subtle text-warning rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                  <i class="bi bi-hourglass-split fs-4"></i>
                </div>
                <h4 class="fw-bold text-warning mb-1">{{ $resolutionTimeAnalytics['1_to_3_days'] }}</h4>
                <p class="text-muted mb-0">1-3 Days</p>
                <small class="text-warning">Needs Attention</small>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="text-center">
                <div class="avatar bg-danger-subtle text-danger rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                  <i class="bi bi-exclamation-triangle fs-4"></i>
                </div>
                <h4 class="fw-bold text-danger mb-1">{{ $resolutionTimeAnalytics['over_3_days'] }}</h4>
                <p class="text-muted mb-0">Over 3 Days</p>
                <small class="text-danger">Critical Delay</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Activity -->
  <div class="row g-4">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-0 py-3">
          <h6 class="mb-0 fw-semibold text-dark">
            <i class="bi bi-activity me-2 text-primary"></i>Recent Ticket Activity
          </h6>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th class="fw-semibold ps-4">Ticket</th>
                  <th class="fw-semibold">Status</th>
                  <th class="fw-semibold">Priority</th>
                  <th class="fw-semibold">Created By</th>
                  <th class="fw-semibold pe-4">Created At</th>
                </tr>
              </thead>
              <tbody>
                @foreach($recentActivity as $activity)
                <tr>
                  <td class="ps-4">
                    <div class="fw-semibold text-dark">#{{ $activity->id }}</div>
                    <div class="text-muted small">{{ Str::limit($activity->title, 50) }}</div>
                  </td>
                  <td>
                    <span class="badge {{ $activity->status === 'open' ? 'bg-primary-subtle text-primary' : ($activity->status === 'in_progress' ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success') }} px-3 py-2 rounded-pill">
                      {{ ucfirst($activity->status) }}
                    </span>
                  </td>
                  <td>
                    <span class="badge {{ $activity->priority === 'high' ? 'bg-danger-subtle text-danger' : ($activity->priority === 'medium' ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success') }} px-3 py-2 rounded-pill">
                      {{ ucfirst($activity->priority) }}
                    </span>
                  </td>
                  <td class="text-muted">{{ $activity->created_by_name }}</td>
                  <td class="text-muted pe-4">{{ \Carbon\Carbon::parse($activity->created_at)->diffForHumans() }}</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js configuration
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.color = '#6c757d';

// Status Distribution Chart
const statusCtx = document.getElementById('statusChart').getContext('2d');
const statusChart = new Chart(statusCtx, {
  type: 'doughnut',
  data: {
    labels: [
      @foreach($statusDistribution as $status => $count)
        '{{ ucfirst($status) }}',
      @endforeach
    ],
    datasets: [{
      data: [
        @foreach($statusDistribution as $status => $count)
          {{ $count }},
        @endforeach
      ],
      backgroundColor: [
        '#0d6efd', '#ffc107', '#198754', '#dc3545', '#6f42c1'
      ],
      borderWidth: 0
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          padding: 20,
          usePointStyle: true
        }
      }
    }
  }
});

// Priority Distribution Chart
const priorityCtx = document.getElementById('priorityChart').getContext('2d');
const priorityChart = new Chart(priorityCtx, {
  type: 'bar',
  data: {
    labels: [
      @foreach($priorityDistribution as $priority => $count)
        '{{ ucfirst($priority) }}',
      @endforeach
    ],
    datasets: [{
      label: 'Tickets',
      data: [
        @foreach($priorityDistribution as $priority => $count)
          {{ $count }},
        @endforeach
      ],
      backgroundColor: [
        '#dc3545', '#ffc107', '#198754', '#0d6efd'
      ],
      borderRadius: 8,
      borderSkipped: false
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          color: '#f8f9fa'
        }
      },
      x: {
        grid: {
          display: false
        }
      }
    }
  }
});

// Monthly Trends Chart
const trendsCtx = document.getElementById('trendsChart').getContext('2d');
const trendsChart = new Chart(trendsCtx, {
  type: 'line',
  data: {
    labels: [
      @foreach($monthlyTrends as $trend)
        '{{ $trend->month }}',
      @endforeach
    ],
    datasets: [{
      label: 'Total Tickets',
      data: [
        @foreach($monthlyTrends as $trend)
          {{ $trend->total_tickets }},
        @endforeach
      ],
      borderColor: '#0d6efd',
      backgroundColor: 'rgba(13, 110, 253, 0.1)',
      tension: 0.4,
      fill: true
    }, {
      label: 'Resolved Tickets',
      data: [
        @foreach($monthlyTrends as $trend)
          {{ $trend->resolved_tickets }},
        @endforeach
      ],
      borderColor: '#198754',
      backgroundColor: 'rgba(25, 135, 84, 0.1)',
      tension: 0.4,
      fill: true
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'top',
        labels: {
          usePointStyle: true,
          padding: 20
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          color: '#f8f9fa'
        }
      },
      x: {
        grid: {
          display: false
        }
      }
    }
  }
});

// Date range form submission
document.getElementById('dateRangeForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const params = new URLSearchParams(formData);
  window.location.href = `{{ route('reports.index') }}?${params.toString()}`;
});

// Quick date range functions
function setDateRange(range) {
  const today = new Date();
  let startDate, endDate;
  
  switch(range) {
    case 'today':
      startDate = endDate = today.toISOString().split('T')[0];
      break;
    case 'week':
      startDate = new Date(today.setDate(today.getDate() - 7)).toISOString().split('T')[0];
      endDate = new Date().toISOString().split('T')[0];
      break;
    case 'month':
      startDate = new Date(today.setMonth(today.getMonth() - 1)).toISOString().split('T')[0];
      endDate = new Date().toISOString().split('T')[0];
      break;
    case 'quarter':
      startDate = new Date(today.setMonth(today.getMonth() - 3)).toISOString().split('T')[0];
      endDate = new Date().toISOString().split('T')[0];
      break;
  }
  
  document.getElementById('start_date').value = startDate;
  document.getElementById('end_date').value = endDate;
  document.getElementById('dateRangeForm').submit();
}

// Export report function
function exportReport() {
  const startDate = document.getElementById('start_date').value;
  const endDate = document.getElementById('end_date').value;
  
  // Show confirmation modal first
  showConfirm(
    `Are you sure you want to export the ticket report for the period ${startDate} to ${endDate}?`,
    'Confirm Export',
    'Export Report',
    'Cancel',
    'info'
  ).then((confirmed) => {
    if (confirmed) {
      // User confirmed, proceed with export
      performExport(startDate, endDate);
    }
    // If not confirmed, do nothing
  });
}

// Separate function to handle the actual export
function performExport(startDate, endDate) {
  // Show loading state
  const exportBtn = document.querySelector('button[onclick="exportReport()"]');
  const originalText = exportBtn.innerHTML;
  exportBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Exporting...';
  exportBtn.disabled = true;
  
  // Create export URL
  const exportUrl = `{{ route('reports.export') }}?start_date=${startDate}&end_date=${endDate}&format=csv`;
  
  // Try to open the export URL
  try {
    const newWindow = window.open(exportUrl, '_blank');
    
    // Check if popup was blocked
    if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined') {
      // Popup was blocked, show custom modal
      showAlert('Popup blocked! Please allow popups for this site to download the report, or try right-clicking the Export button and selecting "Save link as..."', 'warning', 'Export Blocked');
    } else {
      // Export started successfully
      showAlert('Report export started! The download should begin shortly.', 'success', 'Export Started');
    }
  } catch (error) {
    // Handle any errors
    showAlert('An error occurred while starting the export. Please try again.', 'error', 'Export Error');
  }
  
  // Reset button state after a delay
  setTimeout(() => {
    exportBtn.innerHTML = originalText;
    exportBtn.disabled = false;
  }, 2000);
}

// Refresh data function
function refreshData() {
  // Show loading state
  const refreshBtn = document.querySelector('button[onclick="refreshData()"]');
  const originalText = refreshBtn.innerHTML;
  refreshBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Refreshing...';
  refreshBtn.disabled = true;
  
  // Reload page
  window.location.reload();
}
</script>
@endpush