@extends('layouts.bootstrap')

@section('title', $ticketCategory->name)
@section('breadcrumb', 'Dashboard / Ticket Management / Ticket Categories / ' . $ticketCategory->name)

@section('content')
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
  <div>
    <h1 class="h4 mb-1">{{ $ticketCategory->name }}</h1>
    <div class="text-secondary small">{{ $ticketCategory->slug }} • Created {{ $ticketCategory->created_at->format('M d, Y H:i') }}</div>
  </div>
  <div class="btn-group">
    @if(auth()->user()->hasPermission('manage-categories'))
    <a href="{{ route('ticket-categories.edit', $ticketCategory) }}" class="btn btn-primary">
      <i class="bi bi-pencil me-1"></i>Edit Category
    </a>
    @endif
    <a href="{{ route('ticket-categories.index') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>Back to Categories
    </a>
  </div>
</div>

<div class="row g-3">
  <div class="col-12 col-lg-8">
    <div class="card shadow-sm">
      <div class="card-body pb-0">
        <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
          @if($ticketCategory->icon)
            <i class="{{ $ticketCategory->icon }} fs-4 me-2" style="color: {{ $ticketCategory->color }}"></i>
          @else
            <div class="rounded-circle d-flex align-items-center justify-content-center me-2" 
                 style="width: 40px; height: 40px; background-color: {{ $ticketCategory->color }}20; color: {{ $ticketCategory->color }}">
              <i class="bi bi-tag fs-4"></i>
            </div>
          @endif
          
          @if($ticketCategory->is_active)
            <span class="badge bg-success">Active</span>
          @else
            <span class="badge bg-secondary">Inactive</span>
          @endif
          
          <span class="badge bg-light text-dark">Order: {{ $ticketCategory->sort_order }}</span>
        </div>
        
        @if($ticketCategory->description)
        <p class="mb-0">{{ $ticketCategory->description }}</p>
        @else
        <p class="text-muted mb-0">No description provided</p>
        @endif
      </div>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <div class="row g-3 small">
            <div class="col-md-6"><span class="text-secondary d-block">Category ID</span><strong>{{ $ticketCategory->id }}</strong></div>
            <div class="col-md-6"><span class="text-secondary d-block">Slug</span><strong>{{ $ticketCategory->slug }}</strong></div>
            <div class="col-md-6"><span class="text-secondary d-block">Color</span>
              <div class="d-flex align-items-center gap-2">
                <div class="rounded-circle" style="width: 20px; height: 20px; background-color: {{ $ticketCategory->color }}"></div>
                <strong>{{ $ticketCategory->color }}</strong>
              </div>
            </div>
            <div class="col-md-6"><span class="text-secondary d-block">Icon</span>
              <strong>{{ $ticketCategory->icon ?: 'Default (bi-tag)' }}</strong>
            </div>
            <div class="col-md-6"><span class="text-secondary d-block">Created</span><strong>{{ $ticketCategory->created_at->format('M d, Y H:i') }}</strong></div>
            <div class="col-md-6"><span class="text-secondary d-block">Last Updated</span><strong>{{ $ticketCategory->updated_at->format('M d, Y H:i') }}</strong></div>
          </div>
        </li>
      </ul>
    </div>

    <div class="card shadow-sm mt-3">
      <div class="card-header bg-white">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabAllTickets" type="button">All Tickets ({{ $ticketCategory->ticket_count }})</button></li>
          <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabActiveTickets" type="button">Active Tickets ({{ $ticketCategory->active_ticket_count }})</button></li>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content">
          <div class="tab-pane fade show active" id="tabAllTickets">
            @if($ticketCategory->tickets->count() > 0)
            <div class="table-responsive">
              <table class="table align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th>#</th><th>Title</th><th>Status</th><th>Priority</th><th>Assignee</th><th>Created</th><th></th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($ticketCategory->tickets as $ticket)
                  <tr>
                    <td>{{ $ticket->id }}</td>
                    <td><a href="{{ route('tickets.show', $ticket) }}" class="text-decoration-none">{{ Str::limit($ticket->title, 40) }}</a></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>
                      @switch($ticket->priority)
                        @case('urgent')
                          <span class="badge pri-urgent">High</span>
                          @break
                        @case('high')
                          <span class="badge pri-high">High</span>
                          @break
                        @case('medium')
                          <span class="badge pri-med">Medium</span>
                          @break
                        @case('low')
                          <span class="badge pri-low">Low</span>
                          @break
                      @endswitch
                    </td>
                    <td>
                      @if($ticket->assignedTo)
                        <div class="avatar">{{ substr($ticket->assignedTo->name, 0, 1) }}</div> 
                        <span class="ms-1">{{ $ticket->assignedTo->name }}</span>
                      @else
                        <span class="text-muted">Unassigned</span>
                      @endif
                    </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>
                  @endforeach
                </tbody>
              </table>
            </div>
            @else
            <div class="text-center text-muted py-4">
              <i class="bi bi-ticket-detailed fs-1 mb-3"></i>
              <p>No tickets found in this category</p>
            </div>
            @endif
          </div>
          
          <div class="tab-pane fade" id="tabActiveTickets">
            @php $activeTickets = $ticketCategory->tickets->whereIn('status', ['open', 'in_progress']); @endphp
            @if($activeTickets->count() > 0)
            <div class="table-responsive">
              <table class="table align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th>#</th><th>Title</th><th>Status</th><th>Priority</th><th>Assignee</th><th>Created</th><th></th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($activeTickets as $ticket)
                  <tr>
                    <td>{{ $ticket->id }}</td>
                    <td><a href="{{ route('tickets.show', $ticket) }}" class="text-decoration-none">{{ Str::limit($ticket->title, 40) }}</a></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
                      @endswitch
                    </td>
                    <td>
                      @switch($ticket->priority)
                        @case('urgent')
                          <span class="badge pri-urgent">High</span>
                          @break
                        @case('high')
                          <span class="badge pri-high">High</span>
                          @break
                        @case('medium')
                          <span class="badge pri-med">Medium</span>
                          @break
                        @case('low')
                          <span class="badge pri-low">Low</span>
                          @break
                      @endswitch
                    </td>
                    <td>
                      @if($ticket->assignedTo)
                        <div class="avatar">{{ substr($ticket->assignedTo->name, 0, 1) }}</div> 
                        <span class="ms-1">{{ $ticket->assignedTo->name }}</span>
                      @else
                        <span class="text-muted">Unassigned</span>
                      @endif
                    </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>
                  @endforeach
                </tbody>
              </table>
            </div>
            @else
            <div class="text-center text-muted py-4">
              <i class="bi bi-check-circle fs-1 mb-3"></i>
              <p>No active tickets in this category</p>
            </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 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"><i class="bi bi-gear me-2"></i>Quick Actions</h6>
      </div>
      <div class="card-body">
        <div class="d-grid gap-2">
          @if(auth()->user()->hasPermission('manage-categories'))
          <a href="{{ route('ticket-categories.edit', $ticketCategory) }}" class="btn btn-primary">
            <i class="bi bi-pencil me-1"></i>Edit Category
          </a>
          @if($ticketCategory->canBeDeleted())
          <button class="btn btn-outline-danger" onclick="deleteCategory({{ $ticketCategory->id }}, '{{ $ticketCategory->name }}')">
            <i class="bi bi-trash me-1"></i>Delete Category
          </button>
          @else
          <button class="btn btn-outline-danger" disabled title="Cannot delete category with active tickets">
            <i class="bi bi-trash me-1"></i>Delete Category
          </button>
          @endif
          @endif
          <a href="{{ route('ticket-categories.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Categories
          </a>
        </div>
      </div>
    </div>

    <div class="card shadow-sm mt-3">
      <div class="card-header bg-white">
        <h6 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Category Statistics</h6>
      </div>
      <div class="card-body">
        <div class="row g-3 small">
          <div class="col-6">
            <span class="text-secondary d-block">Total Tickets</span>
            <strong class="fs-5">{{ $ticketCategory->ticket_count }}</strong>
          </div>
          <div class="col-6">
            <span class="text-secondary d-block">Active Tickets</span>
            <strong class="fs-5 {{ $ticketCategory->active_ticket_count > 0 ? 'text-warning' : 'text-success' }}">
              {{ $ticketCategory->active_ticket_count }}
            </strong>
          </div>
          <div class="col-6">
            <span class="text-secondary d-block">Resolved</span>
            <strong class="fs-5 text-success">{{ $ticketCategory->tickets->where('status', 'resolved')->count() }}</strong>
          </div>
          <div class="col-6">
            <span class="text-secondary d-block">Closed</span>
            <strong class="fs-5 text-secondary">{{ $ticketCategory->tickets->where('status', 'closed')->count() }}</strong>
          </div>
        </div>
      </div>
    </div>

    <div class="card shadow-sm mt-3">
      <div class="card-header bg-white">
        <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Category Info</h6>
      </div>
      <div class="card-body">
        <div class="small">
          <div class="mb-2">
            <span class="text-secondary d-block">Category ID</span>
            <strong>{{ $ticketCategory->id }}</strong>
          </div>
          <div class="mb-2">
            <span class="text-secondary d-block">Slug</span>
            <strong>{{ $ticketCategory->slug }}</strong>
          </div>
          <div class="mb-2">
            <span class="text-secondary d-block">Color</span>
            <div class="d-flex align-items-center gap-2">
              <div class="rounded-circle" style="width: 16px; height: 16px; background-color: {{ $ticketCategory->color }}"></div>
              <strong>{{ $ticketCategory->color }}</strong>
            </div>
          </div>
          <div class="mb-2">
            <span class="text-secondary d-block">Icon</span>
            <strong>{{ $ticketCategory->icon ?: 'Default (bi-tag)' }}</strong>
          </div>
          <div class="mb-2">
            <span class="text-secondary d-block">Sort Order</span>
            <strong>{{ $ticketCategory->sort_order }}</strong>
          </div>
          <div class="mb-2">
            <span class="text-secondary d-block">Status</span>
            <strong>{{ $ticketCategory->is_active ? 'Active' : 'Inactive' }}</strong>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" style="display: none;">
  @csrf
  @method('DELETE')
</form>
@endsection

@push('scripts')
<script>
function deleteCategory(categoryId, categoryName) {
  if (confirm(`Are you sure you want to delete "${categoryName}"?`)) {
    const form = document.getElementById('deleteForm');
    form.action = `/ticket-categories/${categoryId}`;
    form.submit();
  }
}
</script>
@endpush