@extends('layouts.jobseeker')

@section('title', 'Help Desk & Support Tickets | Candidate Portal')

@section('content')
<div class="jobseeker-tickets-desk">
  <!-- Header Banner -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin-bottom: 0.25rem;">Candidate Support Desk</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Submit grievances, technical assistance requests, or verification queries directly to officers.</p>
    </div>
    <a href="{{ route('jobseeker.tickets.create') }}" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem;">
      <i class="fas fa-plus"></i> Open New Ticket
    </a>
  </div>

  @if(session('success'))
    <div class="alert alert-success" style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
      <i class="fas fa-check-circle" style="margin-right: 0.5rem;"></i> {{ session('success') }}
    </div>
  @endif

  <!-- Metrics Grid -->
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; align-items: center; gap: 1rem;">
      <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(56, 189, 248, 0.1); color: #38bdf8; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
        <i class="fas fa-ticket-alt"></i>
      </div>
      <div>
        <span style="font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;">Total Logged</span>
        <h3 style="font-size: 1.5rem; margin: 0; font-family: var(--font-heading);">{{ $stats['total'] }}</h3>
      </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; align-items: center; gap: 1rem;">
      <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(245, 158, 11, 0.1); color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
        <i class="fas fa-hourglass-half"></i>
      </div>
      <div>
        <span style="font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;">Active / In Progress</span>
        <h3 style="font-size: 1.5rem; margin: 0; font-family: var(--font-heading); color: #f59e0b;">{{ $stats['open'] }}</h3>
      </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; align-items: center; gap: 1rem;">
      <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(16, 185, 129, 0.1); color: #10b981; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
        <i class="fas fa-check-double"></i>
      </div>
      <div>
        <span style="font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;">Resolved Issues</span>
        <h3 style="font-size: 1.5rem; margin: 0; font-family: var(--font-heading); color: #10b981;">{{ $stats['resolved'] }}</h3>
      </div>
    </div>
  </div>

  <!-- Filter Bar -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 1.5rem;">
    <form method="GET" action="{{ route('jobseeker.tickets.index') }}" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
      <div style="flex: 1; min-width: 180px;">
        <select name="status" class="form-control" onchange="this.form.submit()" style="font-size: 0.9rem;">
          <option value="">All Statuses</option>
          <option value="open" {{ request('status') === 'open' ? 'selected' : '' }}>Open</option>
          <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>In Progress</option>
          <option value="awaiting_user" {{ request('status') === 'awaiting_user' ? 'selected' : '' }}>Awaiting Response</option>
          <option value="resolved" {{ request('status') === 'resolved' ? 'selected' : '' }}>Resolved</option>
          <option value="closed" {{ request('status') === 'closed' ? 'selected' : '' }}>Closed</option>
        </select>
      </div>

      <div style="flex: 1; min-width: 180px;">
        <select name="category" class="form-control" onchange="this.form.submit()" style="font-size: 0.9rem;">
          <option value="">All Categories</option>
          @foreach(\App\Models\Ticket::CATEGORIES as $key => $label)
            <option value="{{ $key }}" {{ request('category') === $key ? 'selected' : '' }}>{{ $label }}</option>
          @endforeach
        </select>
      </div>

      @if(request()->anyFilled(['status', 'category']))
        <a href="{{ route('jobseeker.tickets.index') }}" class="btn btn-outline btn-sm" style="font-size: 0.85rem;">Reset Filters</a>
      @endif
    </form>
  </div>

  <!-- Tickets Table -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden;">
    @if($tickets->isEmpty())
      <div style="padding: 4rem 2rem; text-align: center;">
        <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--bg-surface); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1rem;">
          <i class="fas fa-headset"></i>
        </div>
        <h4 style="font-size: 1.15rem; margin-bottom: 0.5rem;">No support tickets logged yet</h4>
        <p style="color: var(--text-muted); font-size: 0.9rem; max-width: 460px; margin: 0 auto 1.5rem;">If you need assistance with your MahaSwayam registration, Aadhaar OTP, or job applications, open a new ticket.</p>
        <a href="{{ route('jobseeker.tickets.create') }}" class="btn btn-primary btn-sm">
          <i class="fas fa-plus"></i> Open First Ticket
        </a>
      </div>
    @else
      <div class="table-responsive">
        <table class="admin-table" style="width: 100%; border-collapse: collapse;">
          <thead>
            <tr style="border-bottom: 1px solid var(--border-light); background: var(--bg-surface);">
              <th style="padding: 1rem;">Ticket Ref</th>
              <th style="padding: 1rem;">Subject & Category</th>
              <th style="padding: 1rem;">Priority</th>
              <th style="padding: 1rem;">Status</th>
              <th style="padding: 1rem;">Logged Date</th>
              <th style="padding: 1rem; text-align: right;">Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($tickets as $ticket)
              <tr style="border-bottom: 1px solid var(--border-light);">
                <td style="padding: 1rem; font-family: var(--font-mono, monospace); font-weight: 700; color: #38bdf8;">
                  #{{ $ticket->ticket_number }}
                </td>
                <td style="padding: 1rem;">
                  <a href="{{ route('jobseeker.tickets.show', $ticket->id) }}" style="font-weight: 600; color: var(--text-primary); text-decoration: none; display: block; margin-bottom: 0.25rem;">
                    {{ $ticket->subject }}
                  </a>
                  <span style="font-size: 0.8rem; color: var(--text-muted);">
                    <i class="fas fa-folder" style="font-size: 0.75rem; margin-right: 0.25rem;"></i> {{ $ticket->categoryLabel() }}
                  </span>
                </td>
                <td style="padding: 1rem;">
                  {!! $ticket->priorityBadgeHtml() !!}
                </td>
                <td style="padding: 1rem;">
                  {!! $ticket->statusBadgeHtml() !!}
                </td>
                <td style="padding: 1rem; font-size: 0.88rem; color: var(--text-muted);">
                  {{ $ticket->created_at->format('d M Y, h:i A') }}
                </td>
                <td style="padding: 1rem; text-align: right;">
                  <a href="{{ route('jobseeker.tickets.show', $ticket->id) }}" class="btn btn-outline btn-sm" style="padding: 0.35rem 0.75rem; font-size: 0.82rem;">
                    View Conversation <i class="fas fa-arrow-right" style="margin-left: 0.25rem;"></i>
                  </a>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div style="padding: 1rem 1.25rem; border-top: 1px solid var(--border-light);">
        {{ $tickets->links('vendor.pagination.custom-simple') }}
      </div>
    @endif
  </div>
</div>
@endsection