@extends('user.support.layout')

@section('title', 'Open Support Tickets')

@section('content')
<div class="container py-4">

  <!-- Navigation Menu -->
  <div class="mb-4">
    <nav class="nav nav-pills flex-column flex-sm-row text-center bg-white shadow-sm rounded-3 p-2">
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.index') ? 'active' : '' }}" href="{{ route('ticket.index') }}">
        <i class="bi bi-speedometer2"></i> Dashboard
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.open') ? 'active' : '' }}" href="{{ route('ticket.open') }}">
        <i class="bi bi-folder2-open"></i> Open
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.inprogress') ? 'active' : '' }}" href="{{ route('ticket.inprogress') }}">
        <i class="bi bi-hourglass-split"></i> In Progress
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.closed') ? 'active' : '' }}" href="{{ route('ticket.closed') }}">
        <i class="bi bi-folder-x"></i> Closed
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.create') ? 'active' : '' }}" href="{{ route('ticket.create') }}">
        <i class="bi bi-plus-circle"></i> New Ticket
      </a>
    </nav>
  </div>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12 text-center">
      <h4 class="fw-bold mb-0">Open Support Tickets</h4>
      <p class="text-muted">View and track your currently open support requests.</p>
    </div>
  </div>

  <!-- Ticket Table -->
  <div class="card shadow-sm border-0">
    <div class="card-body table-responsive p-0">
      <table id="table_export" class="table table-striped table-hover align-middle mb-0" style="width:100%">
        <thead class="table-light">
          <tr>
            <th>Ticket No</th>
            <th>Subject</th>
            <th>Issue Type</th>
            <th>Assigned To</th>
            <th>Status</th>
            <th>Created At</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($tickets as $ticket)
            <tr>
              <td>{{ $ticket->st_no }}</td>
              <td>{{ $ticket->st_subject }}</td>
              <td>{{ $ticket->issueType->sit_name ?? '—' }}</td>
              <td>{{ $ticket->assignedTo->ul_name ?? 'Unassigned' }}</td>
              <td>
                <span class="badge bg-success">{{ $ticket->st_status }}</span>
              </td>
              <td>{{ $ticket->created_at->format('d M Y h:i A') }}</td>
              <td>
                <a href="{{ route('ticket.reply', $ticket->st_id) }}" class="btn btn-sm btn-outline-primary">
                  <i class="bi bi-eye"></i> View
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="7" class="text-center text-muted py-4">No open tickets found.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>
@endsection