@extends('layouts.admin')

@section('title', 'Tickets')

@section('content')
<div class="admin-page-header d-flex flex-wrap justify-content-between align-items-center gap-2">
    <div>
        <h1 class="admin-page-title mb-1">Tickets</h1>
        <p class="admin-page-subtitle mb-0">Track, triage, and resolve customer support conversations.</p>
    </div>
    <div class="text-muted small">
        Updated {{ now()->format('d M Y, h:i A') }}
    </div>
</div>

<div class="admin-content tickets-list-page">
    <div class="admin-card mb-3">
        <div class="card-body d-flex flex-wrap gap-2">
            @foreach(($statusTabs ?? []) as $tabStatus => $tabLabel)
                <a href="{{ route('admin.tickets.index', array_merge(request()->except('status', 'page'), ['status' => $tabStatus])) }}"
                   class="btn {{ request('status') === $tabStatus ? 'ticket-primary' : 'btn-outline-primary' }}">
                    {{ $tabLabel }}
                    <span class="ms-1">({{ $statusCounts[$tabStatus] ?? 0 }})</span>
                </a>
            @endforeach
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-3">
            @include('admin.tickets.partials.metric-card', ['title' => 'Total Tickets', 'value' => $statusCounts['total'] ?? 0])
        </div>
        <div class="col-md-3">
            @include('admin.tickets.partials.metric-card', ['title' => 'Open Unassigned', 'value' => $statusCounts['open_unassigned'] ?? 0])
        </div>
        <div class="col-md-3">
            @include('admin.tickets.partials.metric-card', ['title' => 'Auto-closed (Today)', 'value' => $autoCloseStats['today'] ?? 0])
        </div>
        <div class="col-md-3">
            @include('admin.tickets.partials.metric-card', ['title' => 'Auto-closed (Last 7 days)', 'value' => $autoCloseStats['last_7_days'] ?? 0])
        </div>
    </div>

    <div class="admin-card mb-3">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.tickets.index') }}" class="row g-2 align-items-end">
                <div class="col-xl-2 col-md-3">
                    <label class="form-label mb-1 small text-muted">Order ID</label>
                    <input type="number" class="form-control" name="order_id" value="{{ request('order_id') }}" placeholder="Search order">
                </div>
                <div class="col-xl-3 col-md-4">
                    <label class="form-label mb-1 small text-muted">Customer</label>
                    <input type="text" class="form-control" name="customer" value="{{ request('customer') }}" placeholder="Name or mobile">
                </div>
                <div class="col-xl-2 col-md-3 col-6">
                    <label class="form-label mb-1 small text-muted">Status</label>
                    <select name="status" class="form-select">
                        <option value="">All Statuses</option>
                        <option value="open_unassigned" {{ request('status') === 'open_unassigned' ? 'selected' : '' }}>Open (Unassigned)</option>
                        <option value="assigned" {{ request('status') === 'assigned' ? 'selected' : '' }}>Assigned</option>
                        <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                        <option value="answered" {{ request('status') === 'answered' ? 'selected' : '' }}>Answered</option>
                        <option value="reopened" {{ request('status') === 'reopened' ? 'selected' : '' }}>Reopened</option>
                        <option value="closed_by_customer" {{ request('status') === 'closed_by_customer' ? 'selected' : '' }}>Closed</option>
                    </select>
                </div>
                <div class="col-xl-2 col-md-3">
                    <label class="form-label mb-1 small text-muted">Priority</label>
                    <select name="priority" class="form-select">
                        <option value="">All Priorities</option>
                        <option value="low" {{ request('priority') === 'low' ? 'selected' : '' }}>Low</option>
                        <option value="medium" {{ request('priority') === 'medium' ? 'selected' : '' }}>Medium</option>
                        <option value="high" {{ request('priority') === 'high' ? 'selected' : '' }}>High</option>
                        <option value="urgent" {{ request('priority') === 'urgent' ? 'selected' : '' }}>Urgent</option>
                    </select>
                </div>
                <div class="col-xl-3 col-md-12 d-flex gap-2 justify-content-xl-end filter-actions">
                    <button class="btn btn-primary w-100" type="submit">
                        <i class="bi bi-funnel me-1"></i> Apply
                    </button>
                    <a href="{{ route('admin.tickets.index') }}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <div class="admin-table-card">
        <div class="table-responsive">
            <table class="table admin-table mb-0 tickets-table">
                <thead>
                    <tr>
                        <th style="min-width: 260px;">Ticket</th>
                        <th>Customer</th>
                        <th>Assignee</th>
                        <th>Status</th>
                        <th>Priority</th>
                        <th>Last Reply</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tickets as $ticket)
                        <tr>
                            <td>
                                <div class="fw-semibold">{{ $ticket->subject }}</div>
                                <div class="small text-muted d-flex flex-wrap gap-2">
                                    <span>#{{ $ticket->id }}</span>
                                    <span>Order #{{ $ticket->order_id }}</span>
                                    <span>{{ ucfirst(str_replace('_', ' ', $ticket->category)) }}</span>
                                </div>
                            </td>
                            <td>
                                <div class="fw-medium">{{ $ticket->customer->name ?? 'N/A' }}</div>
                                <small class="text-muted">{{ $ticket->customer->mobile ?? '-' }}</small>
                            </td>
                            <td>
                                @if($ticket->assignee)
                                    <div class="fw-medium">{{ $ticket->assignee->name }}</div>
                                    <small class="text-muted">{{ ucfirst($ticket->assignee->user_type ?? 'staff') }}</small>
                                @else
                                    <span class="text-muted">Unassigned</span>
                                @endif
                            </td>
                            <td>
                                @include('admin.tickets.partials.status-badge', ['status' => $ticket->status, 'label' => $ticket->statusLabel()])
                            </td>
                            <td>
                                @include('admin.tickets.partials.priority-badge', ['priority' => $ticket->priority])
                            </td>
                            <td>
                                @if($ticket->last_reply_at)
                                    <div>{{ $ticket->last_reply_at->diffForHumans() }}</div>
                                    <small class="text-muted">{{ $ticket->last_reply_at->format('d M Y, h:i A') }}</small>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="d-inline-flex gap-1">
                                    @can('tickets.assign')
                                        @if(Route::has('admin.tickets.pick') && is_null($ticket->assigned_to) && $ticket->status === 'open_unassigned')
                                            <form method="POST" action="{{ route('admin.tickets.pick', $ticket) }}" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-outline-warning">Pick</button>
                                            </form>
                                        @endif
                                    @endcan
                                    <a href="{{ route('admin.tickets.show', $ticket) }}" class="btn open-ticket-btn">
                                        <i class="bi bi-eye me-1"></i> Open
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <div class="text-muted mb-1">No tickets found for the selected filters.</div>
                                <small class="text-muted">Try changing queue, status, or priority filters.</small>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($tickets->hasPages())
        <div class="mt-3">{{ $tickets->links('vendor.pagination.admin-categories') }}</div>
    @endif
</div>
@endsection

@push('styles')
<style>
.tickets-list-page .admin-card .card-body {
    border-radius: .75rem;
}

.tickets-list-page .admin-card .card-body > .btn {
    padding: .55rem .95rem;
}

.tickets-table td {
    vertical-align: middle;
}

.tickets-table .badge-modern {
    font-size: .72rem;
}

@media (min-width: 1200px) {
    .tickets-list-page .filter-actions .btn {
        width: auto !important;
    }
}

.tickets-list-page .open-ticket-btn {
    color: var(--admin-primary);
    border: 1px solid var(--admin-primary);
    background-color: transparent;
}

.tickets-list-page .open-ticket-btn:hover,
.tickets-list-page .open-ticket-btn:focus,
.tickets-list-page .open-ticket-btn:active {
    color: #fff;
    border-color: var(--admin-primary);
    background-color: var(--admin-primary) !important;
}
</style>
@endpush