@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Support Tickets <span class="page-title-count">({{ $tickets->total() ?? 0 }})</span></h1>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Open Tickets" value="{{ $openCount ?? 0 }}" color="orange">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Avg Response Time" value="{{ $avgResponseTime ?? 'N/A' }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="In Progress" value="{{ $inProgressCount ?? 0 }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Resolved Today" value="{{ $resolvedToday ?? 0 }}" color="green">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 12l4 4 8-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>

<div class="tabs-nav" style="margin-top: 1.5rem;">
    <a href="{{ route('admin.support', array_merge(request()->query(), ['tab' => 'all'])) }}" class="tab-btn {{ request('tab', 'all') === 'all' ? 'active' : '' }}">All</a>
    <a href="{{ route('admin.support', array_merge(request()->query(), ['tab' => 'open'])) }}" class="tab-btn {{ request('tab') === 'open' ? 'active' : '' }}">Open</a>
    <a href="{{ route('admin.support', array_merge(request()->query(), ['tab' => 'in_progress'])) }}" class="tab-btn {{ request('tab') === 'in_progress' ? 'active' : '' }}">In Progress</a>
    <a href="{{ route('admin.support', array_merge(request()->query(), ['tab' => 'resolved'])) }}" class="tab-btn {{ request('tab') === 'resolved' ? 'active' : '' }}">Resolved</a>
    <a href="{{ route('admin.support', array_merge(request()->query(), ['tab' => 'closed'])) }}" class="tab-btn {{ request('tab') === 'closed' ? 'active' : '' }}">Closed</a>
</div>

<div class="card" style="margin-top: 1rem;">
    <x-data-table :emptyMessage="'No support tickets found.'" :paginator="$tickets ?? null">
        <x-slot:thead>
            <th>ID</th>
            <th>Customer</th>
            <th>Subject</th>
            <th>Category</th>
            <th>Priority</th>
            <th>Status</th>
            <th>Assigned</th>
            <th>Date</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($tickets ?? [] as $ticket)
            <tr>
                <td><span class="text-mono">#{{ $ticket->id }}</span></td>
                <td class="text-semibold">{{ $ticket->user->name ?? 'N/A' }}</td>
                <td>{{ Str::limit($ticket->subject, 30) }}</td>
                <td><span class="badge badge-blue">{{ ucfirst($ticket->category ?? 'General') }}</span></td>
                <td>
                    @if($ticket->priority === 'high' || $ticket->priority === 'urgent')
                    <span class="badge badge-red">{{ ucfirst($ticket->priority) }}</span>
                    @elseif($ticket->priority === 'medium')
                    <span class="badge badge-orange">{{ ucfirst($ticket->priority) }}</span>
                    @else
                    <span class="badge badge-green">{{ ucfirst($ticket->priority) }}</span>
                    @endif
                </td>
                <td><span class="badge badge-{{ $ticket->status === 'open' ? 'orange' : ($ticket->status === 'resolved' ? 'green' : ($ticket->status === 'closed' ? 'default' : 'blue')) }}">{{ ucfirst(str_replace('_', ' ', $ticket->status)) }}</span></td>
                <td>{{ $ticket->assignedTo->name ?? 'Unassigned' }}</td>
                <td>{{ $ticket->created_at->format('M d, Y') }}</td>
                <td>
                    <div class="table-actions">
                        <a href="{{ route('admin.support.show', $ticket->id) }}" class="btn btn-sm btn-outline">View</a>
                        <form method="POST" action="{{ route('admin.support.assign', $ticket->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <select name="staff_id" class="form-select form-select-sm" onchange="this.form.submit()">
                                <option value="">Assign</option>
                                @foreach($staffList ?? [] as $staff)
                                <option value="{{ $staff->id }}" {{ ($ticket->assigned_to ?? null) == $staff->id ? 'selected' : '' }}>{{ $staff->name }}</option>
                                @endforeach
                            </select>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><circle cx="24" cy="24" r="12" stroke="#94A3B8" stroke-width="1.5"/><path d="M20 20a4 4 0 016 2c0 1.5-2 2-2 4M24 30h.01" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <p>No support tickets found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection