@extends('layouts.app')
@section('title', 'Tickets')

@section('content')
    <div class="page-head">
        <div><h1>Support tickets</h1><p>{{ $tickets->total() }} ticket(s) in this view.</p></div>
        <div class="page-actions">
            <a href="{{ route('tickets.board') }}" class="btn secondary">Kanban board</a>
            <a href="{{ route('tickets.create') }}" class="btn">+ Raise ticket</a>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Open', 'value' => $counts['open'], 'variant' => 'warn',
            'href' => route('tickets.index', ['status' => 'open'])])
        @include('components.kpi', ['label' => 'Pending', 'value' => $counts['pending'], 'variant' => 'info',
            'href' => route('tickets.index', ['status' => 'pending'])])
        @include('components.kpi', ['label' => 'SLA breached', 'value' => $counts['breached'], 'variant' => 'bad',
            'href' => route('tickets.index', ['breached' => 1])])
        @include('components.kpi', ['label' => 'Resolved today', 'value' => $counts['resolved_today'], 'variant' => 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Avg first response', 'value' => $counts['avg_first_response'], 'href' => '#'])
        @include('components.kpi', ['label' => 'Avg resolution', 'value' => $counts['avg_resolution'], 'href' => '#'])
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Ticket no., subject, customer…">
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status" data-auto-submit>
                <option value="">All</option>
                @foreach (['open','pending','on_hold','resolved','closed'] as $s)
                    <option value="{{ $s }}" @selected(($filters['status'] ?? '') === $s)>{{ title_case_words($s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Priority</label>
            <select name="priority" data-auto-submit>
                <option value="">All</option>
                @foreach (['low','normal','high','urgent'] as $p)
                    <option value="{{ $p }}" @selected(($filters['priority'] ?? '') === $p)>{{ title_case_words($p) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Assignee</label>
            <select name="assignee" data-auto-submit>
                <option value="">Everyone</option>
                <option value="unassigned" @selected(($filters['assignee'] ?? '') === 'unassigned')>Unassigned</option>
                @foreach ($assignees as $assignee)
                    <option value="{{ $assignee->id }}" @selected(($filters['assignee'] ?? '') == $assignee->id)>{{ $assignee->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="field"><label>&nbsp;</label>
            <label class="check"><input type="checkbox" name="breached" value="1" @checked(request()->boolean('breached'))> SLA breached only</label></div>
        <div class="field" style="flex:0 0 auto;"><label>&nbsp;</label><button type="submit" class="btn secondary">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Ticket</th><th>Customer</th><th>Category</th><th>Priority</th>
                        <th>Assignee</th><th>SLA</th><th>Status</th><th>Opened</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($tickets as $ticket)
                        <tr>
                            <td>
                                <a href="{{ route('tickets.show', $ticket) }}" class="mono strong">{{ $ticket->ticket_number }}</a>
                                <div class="tiny muted truncate" style="max-width:240px;">{{ $ticket->subject }}</div>
                            </td>
                            <td class="small">
                                <a href="{{ route('customers.show', $ticket->customer) }}">{{ $ticket->customer->display_name }}</a>
                                <div class="tiny muted">{{ $ticket->customer->phone }}</div>
                            </td>
                            <td class="small">{{ $ticket->category?->name ?? 'General' }}</td>
                            <td>
                                <span class="badge {{ match ($ticket->priority) {
                                    'urgent' => 'danger', 'high' => 'warning', default => 'muted' } }}">
                                    {{ $ticket->priority }}
                                </span>
                            </td>
                            <td class="small">{{ $ticket->assignee?->name ?: 'Unassigned' }}</td>
                            <td>
                                @if ($ticket->is_breached)
                                    <span class="badge danger">breached</span>
                                @elseif ($ticket->first_response_due_at && $ticket->first_response_due_at->isFuture() && ! $ticket->first_responded_at)
                                    <span class="badge warning">{{ $ticket->first_response_due_at->diffForHumans(null, true) }}</span>
                                @elseif ($ticket->resolution_due_at && $ticket->resolution_due_at->isFuture() && ! $ticket->resolved_at)
                                    <span class="badge muted">{{ $ticket->resolution_due_at->diffForHumans(null, true) }}</span>
                                @else
                                    <span class="badge success">on time</span>
                                @endif
                            </td>
                            <td><span class="badge {{ status_color($ticket->status) }}"><span class="dot"></span>{{ title_case_words($ticket->status) }}</span></td>
                            <td class="small muted" data-time-ago="{{ $ticket->created_at->toIso8601String() }}"></td>
                            <td class="right"><a href="{{ route('tickets.show', $ticket) }}" class="btn xs secondary">Open</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="9">
                            @include('components.empty-state', ['icon' => '&#9993;', 'title' => 'No tickets found',
                                'message' => 'Raise a ticket to begin tracking a customer issue.',
                                'action' => '<a href="'.route('tickets.create').'" class="btn sm">+ Raise ticket</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($tickets->hasPages())<div class="card-foot">{{ $tickets->links('partials.pagination') }}</div>@endif
    </div>
@endsection