@extends('layouts.bootstrap')

@section('title', 'Agent Performance')

@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>Performance Analytics
          </h1>
          <p class="text-muted mb-0">Detailed performance metrics and trends for {{ Auth::user()->name }}</p>
        </div>
        <div class="d-flex gap-2">
          <button class="btn btn-outline-primary rounded-pill px-4" onclick="exportPerformance()">
            <i class="bi bi-download me-2"></i>Export Report
          </button>
          <a href="{{ route('agent.dashboard') }}" class="btn btn-primary rounded-pill px-4">
            <i class="bi bi-speedometer2 me-2"></i>Back to Dashboard
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Performance Period Cards -->
  <div class="row mb-4">
    <div class="col-md-4">
      <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-calendar-week fs-4"></i>
          </div>
          <h4 class="fw-bold text-primary mb-1">{{ $performanceData['7_days']->total_tickets_resolved ?? 0 }}</h4>
          <p class="text-muted mb-0">Tickets Resolved</p>
          <small class="text-success">Last 7 days</small>
          <div class="mt-2">
            <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill">
              {{ number_format($performanceData['7_days']->avg_performance_score ?? 0, 0) }}% Score
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <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-calendar-month fs-4"></i>
          </div>
          <h4 class="fw-bold text-success mb-1">{{ $performanceData['30_days']->total_tickets_resolved ?? 0 }}</h4>
          <p class="text-muted mb-0">Tickets Resolved</p>
          <small class="text-success">Last 30 days</small>
          <div class="mt-2">
            <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill">
              {{ number_format($performanceData['30_days']->avg_performance_score ?? 0, 0) }}% Score
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-4">
      <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-calendar3 fs-4"></i>
          </div>
          <h4 class="fw-bold text-warning mb-1">{{ $performanceData['90_days']->total_tickets_resolved ?? 0 }}</h4>
          <p class="text-muted mb-0">Tickets Resolved</p>
          <small class="text-success">Last 90 days</small>
          <div class="mt-2">
            <span class="badge bg-warning-subtle text-warning px-3 py-2 rounded-pill">
              {{ number_format($performanceData['90_days']->avg_performance_score ?? 0, 0) }}% Score
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Detailed Metrics Row -->
  <div class="row mb-4">
    <div class="col-md-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-0 py-3">
          <h5 class="mb-0 fw-bold text-dark">
            <i class="bi bi-speedometer2 me-2 text-primary"></i>Efficiency Metrics
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-6 text-center mb-3">
              <h3 class="fw-bold text-primary mb-1">{{ number_format(($performanceData['30_days']->avg_resolution_time ?? 0) / 60, 1) }}h</h3>
              <p class="text-muted mb-0">Avg Resolution Time</p>
            </div>
            <div class="col-6 text-center mb-3">
              <h3 class="fw-bold text-success mb-1">{{ $performanceData['30_days']->total_comments_added ?? 0 }}</h3>
              <p class="text-muted mb-0">Comments Added</p>
            </div>
            <div class="col-6 text-center">
              <h3 class="fw-bold text-warning mb-1">{{ $performanceData['30_days']->total_tickets_assigned ?? 0 }}</h3>
              <p class="text-muted mb-0">Tickets Assigned</p>
            </div>
            <div class="col-6 text-center">
              <h3 class="fw-bold text-info mb-1">{{ number_format($performanceData['30_days']->avg_efficiency_score ?? 0, 0) }}%</h3>
              <p class="text-muted mb-0">Efficiency Score</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-0 py-3">
          <h5 class="mb-0 fw-bold text-dark">
            <i class="bi bi-star me-2 text-primary"></i>Quality Metrics
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-6 text-center mb-3">
              <h3 class="fw-bold text-success mb-1">{{ number_format($performanceData['30_days']->avg_customer_satisfaction ?? 0, 1) }}</h3>
              <p class="text-muted mb-0">Customer Satisfaction</p>
              <small class="text-muted">Out of 5.0</small>
            </div>
            <div class="col-6 text-center mb-3">
              <h3 class="fw-bold text-primary mb-1">{{ number_format($performanceData['30_days']->avg_quality_score ?? 0, 0) }}%</h3>
              <p class="text-muted mb-0">Quality Score</p>
            </div>
            <div class="col-6 text-center">
              <h3 class="fw-bold text-info mb-1">{{ number_format($performanceData['30_days']->avg_performance_score ?? 0, 0) }}%</h3>
              <p class="text-muted mb-0">Overall Performance</p>
            </div>
            <div class="col-6 text-center">
              <h3 class="fw-bold text-warning mb-1">{{ $satisfactionTrends->count() }}</h3>
              <p class="text-muted mb-0">Satisfaction Responses</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Row -->
  <div class="row">
    <!-- Daily Performance Chart -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-0 py-3">
          <h5 class="mb-0 fw-bold text-dark">
            <i class="bi bi-graph-up me-2 text-primary"></i>Daily Performance Trend
          </h5>
        </div>
        <div class="card-body">
          <canvas id="dailyPerformanceChart" width="400" height="200"></canvas>
        </div>
      </div>
    </div>

    <!-- Customer Satisfaction Chart -->
    <div class="col-lg-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-0 py-3">
          <h5 class="mb-0 fw-bold text-dark">
            <i class="bi bi-heart me-2 text-primary"></i>Customer Satisfaction
          </h5>
        </div>
        <div class="card-body">
          <canvas id="satisfactionChart" width="400" height="200"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- Performance Breakdown -->
  <div class="row mt-4">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 py-3">
          <h5 class="mb-0 fw-bold text-dark">
            <i class="bi bi-bar-chart me-2 text-primary"></i>Performance Breakdown
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-4">
              <div class="text-center">
                <h4 class="fw-bold text-primary mb-2">Performance Score</h4>
                <div class="progress mb-3" style="height: 20px;">
                  <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $performanceData['30_days']->avg_performance_score ?? 0 }}%">
                    {{ number_format($performanceData['30_days']->avg_performance_score ?? 0, 0) }}%
                  </div>
                </div>
                <p class="text-muted mb-0">Overall performance rating</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="text-center">
                <h4 class="fw-bold text-success mb-2">Efficiency Score</h4>
                <div class="progress mb-3" style="height: 20px;">
                  <div class="progress-bar bg-success" role="progressbar" style="width: {{ $performanceData['30_days']->avg_efficiency_score ?? 0 }}%">
                    {{ number_format($performanceData['30_days']->avg_efficiency_score ?? 0, 0) }}%
                  </div>
                </div>
                <p class="text-muted mb-0">Speed and productivity</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="text-center">
                <h4 class="fw-bold text-warning mb-2">Quality Score</h4>
                <div class="progress mb-3" style="height: 20px;">
                  <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $performanceData['30_days']->avg_quality_score ?? 0 }}%">
                    {{ number_format($performanceData['30_days']->avg_quality_score ?? 0, 0) }}%
                  </div>
                </div>
                <p class="text-muted mb-0">Customer satisfaction</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Charts Script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Daily Performance Chart
  const dailyCtx = document.getElementById('dailyPerformanceChart').getContext('2d');
  const dailyData = @json($dailyPerformance);
  
  new Chart(dailyCtx, {
    type: 'line',
    data: {
      labels: dailyData.map(item => item.date),
      datasets: [{
        label: 'Performance Score',
        data: dailyData.map(item => item.performance_score),
        borderColor: 'rgb(13, 110, 253)',
        backgroundColor: 'rgba(13, 110, 253, 0.1)',
        tension: 0.4,
        fill: true,
        yAxisID: 'y'
      }, {
        label: 'Tickets Resolved',
        data: dailyData.map(item => item.tickets_resolved),
        borderColor: 'rgb(25, 135, 84)',
        backgroundColor: 'rgba(25, 135, 84, 0.1)',
        tension: 0.4,
        fill: false,
        yAxisID: 'y1'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          type: 'linear',
          display: true,
          position: 'left',
          title: {
            display: true,
            text: 'Performance Score (%)'
          }
        },
        y1: {
          type: 'linear',
          display: true,
          position: 'right',
          title: {
            display: true,
            text: 'Tickets Resolved'
          },
          grid: {
            drawOnChartArea: false,
          },
        }
      },
      plugins: {
        legend: {
          position: 'top',
        }
      }
    }
  });

  // Customer Satisfaction Chart
  const satisfactionCtx = document.getElementById('satisfactionChart').getContext('2d');
  const satisfactionData = @json($satisfactionTrends);
  
  new Chart(satisfactionCtx, {
    type: 'doughnut',
    data: {
      labels: ['5 Stars', '4 Stars', '3 Stars', '2 Stars', '1 Star'],
      datasets: [{
        data: [0, 0, 0, 0, 0], // This would need to be calculated from actual data
        backgroundColor: [
          'rgb(25, 135, 84)',
          'rgb(13, 202, 240)',
          'rgb(255, 193, 7)',
          'rgb(253, 126, 20)',
          'rgb(220, 53, 69)'
        ],
        borderWidth: 2,
        borderColor: '#fff'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'bottom',
        }
      }
    }
  });
});

// Export performance function
function exportPerformance() {
  showConfirm(
    'Are you sure you want to export your performance report?',
    'Confirm Export',
    'Export Report',
    'Cancel',
    'info'
  ).then((confirmed) => {
    if (confirmed) {
      // Create export URL
      const exportUrl = `{{ route('agent.performance.export') }}`;
      window.open(exportUrl, '_blank');
    }
  });
}
</script>

<style>
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress {
  border-radius: 10px;
}

.progress-bar {
  border-radius: 10px;
}
</style>
@endsection