@extends('layouts.bootstrap')

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

@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-speedometer2 me-2 text-primary"></i>Agent Dashboard
          </h1>
          <p class="text-muted mb-0">Welcome back, {{ Auth::user()->name }}! Here's your performance overview.</p>
        </div>
        <div class="d-flex gap-2">
          <button class="btn btn-outline-primary rounded-pill px-4" onclick="refreshDashboard()">
            <i class="bi bi-arrow-clockwise me-2"></i>Refresh
          </button>
          <a href="{{ route('agent.performance') }}" class="btn btn-primary rounded-pill px-4">
            <i class="bi bi-graph-up me-2"></i>View Performance
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Performance Overview Cards -->
  <div class="row mb-4">
    <div class="col-md-3">
      <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-check-circle-fill fs-4"></i>
          </div>
          <h4 class="fw-bold text-primary mb-1">{{ $performanceSummary->total_tickets_resolved ?? 0 }}</h4>
          <p class="text-muted mb-0">Tickets Resolved</p>
          <small class="text-success">Last 30 days</small>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <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-star-fill fs-4"></i>
          </div>
          <h4 class="fw-bold text-success mb-1">{{ number_format($performanceSummary->avg_customer_satisfaction ?? 0, 1) }}</h4>
          <p class="text-muted mb-0">Avg Satisfaction</p>
          <small class="text-success">Out of 5.0</small>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <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-fill fs-4"></i>
          </div>
          <h4 class="fw-bold text-warning mb-1">{{ number_format(($performanceSummary->avg_resolution_time ?? 0) / 60, 1) }}h</h4>
          <p class="text-muted mb-0">Avg Resolution Time</p>
          <small class="text-success">Last 30 days</small>
        </div>
      </div>
    </div>
    
    <div class="col-md-3">
      <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-graph-up fs-4"></i>
          </div>
          <h4 class="fw-bold text-info mb-1">{{ number_format($performanceSummary->avg_performance_score ?? 0, 0) }}%</h4>
          <p class="text-muted mb-0">Performance Score</p>
          <small class="text-success">Overall rating</small>
        </div>
      </div>
    </div>
  </div>

  <!-- Today's Performance -->
  <div class="row mb-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-calendar-day me-2 text-primary"></i>Today's Performance
          </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-3 text-center">
              <h3 class="fw-bold text-primary mb-1">{{ $todayPerformance->total_tickets_resolved ?? 0 }}</h3>
              <p class="text-muted mb-0">Tickets Resolved Today</p>
            </div>
            <div class="col-md-3 text-center">
              <h3 class="fw-bold text-success mb-1">{{ $todayPerformance->total_comments_added ?? 0 }}</h3>
              <p class="text-muted mb-0">Comments Added</p>
            </div>
            <div class="col-md-3 text-center">
              <h3 class="fw-bold text-warning mb-1">{{ $todayPerformance->avg_resolution_time ?? 0 }}m</h3>
              <p class="text-muted mb-0">Avg Resolution Time</p>
            </div>
            <div class="col-md-3 text-center">
              <h3 class="fw-bold text-info mb-1">{{ number_format($todayPerformance->avg_performance_score ?? 0, 0) }}%</h3>
              <p class="text-muted mb-0">Today's Score</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content Row -->
  <div class="row">
    <!-- Assigned Tickets -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-0 py-3">
          <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-dark">
              <i class="bi bi-ticket-perforated me-2 text-primary"></i>Your Assigned Tickets
            </h5>
            <a href="{{ route('tickets.index') }}" class="btn btn-sm btn-outline-primary">
              View All
            </a>
          </div>
        </div>
        <div class="card-body">
          @if($assignedTickets->count() > 0)
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>Ticket ID</th>
                    <th>Title</th>
                    <th>Priority</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($assignedTickets as $ticket)
                  <tr>
                    <td>
                      <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill">
                        #{{ $ticket->id }}
                      </span>
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <div>
                          <h6 class="mb-0 fw-semibold">{{ Str::limit($ticket->title, 40) }}</h6>
                          <small class="text-muted">by {{ $ticket->user->name }}</small>
                        </div>
                      </div>
                    </td>
                    <td>
                      <span class="badge {{ $ticket->priority === 'high' ? 'bg-danger-subtle text-danger' : ($ticket->priority === 'medium' ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success') }} px-3 py-2 rounded-pill">
                        {{ ucfirst($ticket->priority) }}
                      </span>
                    </td>
                    <td>
                      <span class="badge {{ $ticket->status === 'open' ? 'bg-primary-subtle text-primary' : ($ticket->status === 'in_progress' ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success') }} px-3 py-2 rounded-pill">
                        {{ ucfirst($ticket->status) }}
                      </span>
                    </td>
                    <td>
                      <small class="text-muted">{{ $ticket->created_at->diffForHumans() }}</small>
                    </td>
                    <td>
                      <a href="{{ route('tickets.show', $ticket->id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-eye me-1"></i>View
                      </a>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          @else
            <div class="text-center py-5">
              <i class="bi bi-ticket-perforated text-muted" style="font-size: 3rem;"></i>
              <h5 class="text-muted mt-3">No Assigned Tickets</h5>
              <p class="text-muted">You don't have any tickets assigned to you at the moment.</p>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- Recent Activity & Performance Chart -->
    <div class="col-lg-4">
      <!-- Recent Activity -->
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white border-0 py-3">
          <h5 class="mb-0 fw-bold text-dark">
            <i class="bi bi-activity me-2 text-primary"></i>Recent Activity
          </h5>
        </div>
        <div class="card-body">
          @if($recentActivity->count() > 0)
            <div class="timeline">
              @foreach($recentActivity as $activity)
              <div class="timeline-item">
                <div class="timeline-marker bg-primary"></div>
                <div class="timeline-content">
                  <h6 class="mb-1 fw-semibold">{{ $activity->activity_type }}</h6>
                  <p class="text-muted mb-1">{{ $activity->activity_description }}</p>
                  <small class="text-muted">{{ \Carbon\Carbon::parse($activity->activity_time)->diffForHumans() }}</small>
                </div>
              </div>
              @endforeach
            </div>
          @else
            <div class="text-center py-3">
              <i class="bi bi-activity text-muted" style="font-size: 2rem;"></i>
              <p class="text-muted mt-2 mb-0">No recent activity</p>
            </div>
          @endif
        </div>
      </div>

      <!-- Performance Trend -->
      <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-graph-up me-2 text-primary"></i>Performance Trend
          </h5>
        </div>
        <div class="card-body">
          <canvas id="performanceChart" width="400" height="200"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Performance Chart Script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Performance Chart
  const ctx = document.getElementById('performanceChart').getContext('2d');
  const performanceData = @json($performanceTrends);
  
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: performanceData.map(item => item.date),
      datasets: [{
        label: 'Performance Score',
        data: performanceData.map(item => item.performance_score),
        borderColor: 'rgb(13, 110, 253)',
        backgroundColor: 'rgba(13, 110, 253, 0.1)',
        tension: 0.4,
        fill: true
      }, {
        label: 'Tickets Resolved',
        data: performanceData.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',
        }
      }
    }
  });
});

// Refresh dashboard function
function refreshDashboard() {
  window.location.reload();
}
</script>

<style>
.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.timeline-marker {
  position: absolute;
  left: -35px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.timeline-content {
  padding-left: 15px;
}

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