@extends('layouts.bootstrap')

@section('title', 'Dashboard')
@section('breadcrumb', 'Dashboard / Home')

@section('content')
<!-- Row: KPIs -->
<div class="row g-3">
  <div class="col-md-6 col-xxl-3">
    <div class="card kpi shadow-sm card-hover">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <div class="fw-bold text-secondary">Total Tickets</div>
            <div class="display-6 fw-bolder">{{ $totalTickets }}</div>
            <div class="mini text-muted">+12% vs last week</div>
          </div>
          <i class="bi bi-journal-check icon-bg"></i>
        </div>
        <div class="mt-3 text-primary">
          <svg class="spark w-100" data-spark="40,42,45,43,47,52,50,55,58,62,61,65"></svg>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xxl-3">
    <div class="card kpi shadow-sm card-hover">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <div class="fw-bold text-secondary">Open</div>
            <div class="display-6 text-primary fw-bolder">{{ $openTickets }}</div>
            <div class="mini text-muted">Avg age: 2.1d</div>
          </div>
          <i class="bi bi-exclamation-circle icon-bg"></i>
        </div>
        <div class="mt-3 text-primary">
          <svg class="spark w-100" data-spark="18,20,22,21,25,24,26,27,29,30,31,32"></svg>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xxl-3">
    <div class="card kpi shadow-sm card-hover">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <div class="fw-bold text-secondary">In Progress</div>
            <div class="display-6 text-warning fw-bolder">{{ $inProgressTickets }}</div>
            <div class="mini text-muted">SLA at risk: 3</div>
          </div>
          <i class="bi bi-hourglass-split icon-bg"></i>
        </div>
        <div class="mt-3 text-warning">
          <svg class="spark w-100" data-spark="5,6,5,7,8,9,10,12,12,13,13,14"></svg>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xxl-3">
    <div class="card kpi shadow-sm card-hover">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div>
            <div class="fw-bold text-secondary">Resolved</div>
            <div class="display-6 text-success fw-bolder">{{ $resolvedTickets }}</div>
            <div class="mini text-muted">First-contact: 61%</div>
          </div>
          <i class="bi bi-check-circle icon-bg"></i>
        </div>
        <div class="mt-3 text-success">
          <svg class="spark w-100" data-spark="20,21,23,25,26,30,35,40,46,55,70,82"></svg>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Row: SLA & Filters -->
<div class="row g-3 mt-1">
  <div class="col-lg-8">
    <div class="card shadow-sm">
      <div class="card-header bg-white d-flex align-items-center justify-content-between">
        <h5 class="mb-0">SLA Overview</h5>
        <div class="d-flex gap-2">
          <select class="form-select form-select-sm">
            <option>Last 7 days</option><option>Last 30 days</option><option>Quarter</option>
          </select>
          <select class="form-select form-select-sm">
            <option>All categories</option><option>Technical</option><option>Billing</option><option>General</option><option>Feature Request</option>
          </select>
        </div>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="mb-1 small text-secondary d-flex justify-content-between"><span>Response under 1h</span><span>78%</span></div>
            <div class="progress" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar" style="width: 78%"></div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="mb-1 small text-secondary d-flex justify-content-between"><span>Resolution under 24h</span><span>64%</span></div>
            <div class="progress"><div class="progress-bar bg-success" style="width: 64%"></div></div>
          </div>
          <div class="col-md-6">
            <div class="mb-1 small text-secondary d-flex justify-content-between"><span>SLA breaches</span><span>6</span></div>
            <div class="progress"><div class="progress-bar bg-danger" style="width: 24%"></div></div>
          </div>
          <div class="col-md-6">
            <div class="mb-1 small text-secondary d-flex justify-content-between"><span>Customer satisfaction</span><span>4.4/5</span></div>
            <div class="progress"><div class="progress-bar bg-info" style="width: 88%"></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card shadow-sm">
      <div class="card-header bg-white d-flex align-items-center justify-content-between">
        <h6 class="mb-0">Quick Filters</h6>
        <a class="small" href="{{ route('tickets.index') }}">View all</a>
      </div>
      <div class="card-body">
        <div class="vstack gap-2">
          <a href="{{ route('tickets.index', ['priority' => 'urgent']) }}" class="btn btn-outline-primary d-flex justify-content-between">
            <span><i class="bi bi-lightning-charge me-2"></i>High Priority</span>
            <span class="badge text-bg-primary">{{ \App\Models\Ticket::where('priority', 'urgent')->count() }}</span>
          </a>
          <a href="{{ route('tickets.index', ['status' => 'open']) }}" class="btn btn-outline-warning d-flex justify-content-between">
            <span><i class="bi bi-clock me-2"></i>Due Today</span>
            <span class="badge text-bg-warning">{{ \App\Models\Ticket::where('status', 'open')->count() }}</span>
          </a>
          <a href="{{ route('tickets.index', ['assigned_to' => auth()->id()]) }}" class="btn btn-outline-secondary d-flex justify-content-between">
            <span><i class="bi bi-person-video3 me-2"></i>Assigned to Me</span>
            <span class="badge text-bg-secondary">{{ $assignedTickets }}</span>
          </a>
          <a href="{{ route('tickets.index', ['status' => 'resolved']) }}" class="btn btn-outline-success d-flex justify-content-between">
            <span><i class="bi bi-check2-all me-2"></i>Awaiting Approval</span>
            <span class="badge text-bg-success">{{ \App\Models\Ticket::where('status', 'resolved')->count() }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Row: Recent Tickets & Activity -->
<div class="row g-3 mt-1">
  <div class="col-xl-8">
    <div class="card shadow-sm">
      <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Recent Tickets</h5>
        <div class="btn-group">
          @if(auth()->user()->hasPermission('create-tickets'))
          <a href="{{ route('tickets.create') }}" class="btn btn-primary"><i class="bi bi-plus-circle me-1"></i>Create Ticket</a>
          @endif
          <a href="#" class="btn btn-outline-success"><i class="bi bi-grid me-1"></i>Categories</a>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>#</th><th>Title</th><th>Category</th><th>Assignee</th><th>Status</th><th>Created</th><th></th>
            </tr>
          </thead>
          <tbody>
            @forelse($recentTickets as $ticket)
            <tr>
              <td>{{ $ticket->id }}</td>
              <td><a href="{{ route('tickets.show', $ticket) }}" class="text-decoration-none">{{ Str::limit($ticket->title, 30) }}</a></td>
              <td>{{ ucfirst(str_replace('_', ' ', $ticket->category)) }}</td>
              <td>
                @if($ticket->assignedTo)
                  <span class="avatar">{{ substr($ticket->assignedTo->name, 0, 1) }}</span> 
                  <span class="ms-1">{{ $ticket->assignedTo->name }}</span>
                @else
                  <span class="text-muted">Unassigned</span>
                @endif
              </td>
              <td>
                @switch($ticket->status)
                  @case('open')
                    <span class="badge rounded-pill status-badge status-open">Open</span>
                    @break
                  @case('in_progress')
                    <span class="badge rounded-pill status-badge status-in-progress">In Progress</span>
                    @break
                  @case('resolved')
                    <span class="badge rounded-pill status-badge status-resolved">Resolved</span>
                    @break
                  @case('closed')
                    <span class="badge rounded-pill status-badge bg-secondary">Closed</span>
                    @break
                @endswitch
              </td>
              <td>{{ $ticket->created_at->format('Y-m-d') }}</td>
              <td class="text-end"><a class="btn btn-sm btn-outline-secondary" href="{{ route('tickets.show', $ticket) }}"><i class="bi bi-eye"></i></a></td>
            </tr>
            @empty
            <tr>
              <td colspan="7" class="text-center py-4">
                <i class="bi bi-ticket-detailed fa-3x text-muted mb-3"></i>
                <p class="text-muted">No tickets found</p>
                @if(auth()->user()->hasPermission('create-tickets'))
                <a href="{{ route('tickets.create') }}" class="btn btn-primary">
                  <i class="bi bi-plus-circle"></i> Create Your First Ticket
                </a>
                @endif
              </td>
            </tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-xl-4">
    <div class="card shadow-sm">
      <div class="card-header bg-white"><h6 class="mb-0">Live Activity</h6></div>
      <div class="list-group list-group-flush">
        @forelse($recentTickets->take(3) as $ticket)
        <div class="list-group-item d-flex align-items-start">
          <div class="avatar me-2">{{ substr($ticket->user->name, 0, 1) }}</div>
          <div class="small">
            <strong>{{ $ticket->user->name }}</strong> created <a href="{{ route('tickets.show', $ticket) }}">#{{ $ticket->id }}</a><br>
            <span class="text-secondary">{{ $ticket->created_at->diffForHumans() }}</span>
          </div>
        </div>
        @empty
        <div class="list-group-item text-center text-muted">
          <i class="bi bi-activity fs-4 mb-2"></i>
          <p class="mb-0">No recent activity</p>
        </div>
        @endforelse
      </div>
      <div class="card-footer bg-white">
        <button class="btn btn-outline-primary btn-sm w-100"><i class="bi bi-arrow-clockwise me-1"></i>Refresh</button>
      </div>
    </div>
  </div>
</div>
@endsection