@extends('admin.admin_dashboard')
@section('admin')

@php
    $activeQueue = request('queue', '');
    $queues = [
        '' => ['label' => 'All', 'count' => $stats['open'] ?? 0],
        'open' => ['label' => 'Open', 'count' => $stats['open'] ?? 0],
        'critical' => ['label' => 'Critical', 'count' => $stats['critical'] ?? 0],
        'overdue' => ['label' => 'Overdue', 'count' => $stats['overdue'] ?? 0],
        'mine' => ['label' => 'My tickets', 'count' => $stats['my_assigned'] ?? 0],
    ];
@endphp

<div class="page-content" data-chm-live-url="{{ route('helpdesk.tickets.live') }}">
    <x-chm.layout.page title="Support tickets" subtitle="Track, assign and resolve support requests" icon="bx bx-support">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('helpdesk.dashboard')">Help Desk</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Tickets</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @can('create', App\Models\HelpDesk\Ticket::class)
                <x-chm.button variant="primary" icon="bx bx-plus" :href="route('helpdesk.tickets.create')">New ticket</x-chm.button>
            @endcan
        </x-slot:actions>

        <div class="row row-cols-2 row-cols-md-4 g-3 mb-4">
            <x-chm.stat-card label="Open" :value="number_format($stats['open'] ?? 0)" icon="bx bx-folder-open" color="primary" live-key="open" />
            <x-chm.stat-card label="Critical" :value="number_format($stats['critical'] ?? 0)" icon="bx bx-error" color="danger" live-key="critical" />
            <x-chm.stat-card label="Overdue" :value="number_format($stats['overdue'] ?? 0)" icon="bx bx-time-five" color="warning" live-key="overdue" />
            <x-chm.stat-card label="My assigned" :value="number_format($stats['my_assigned'] ?? 0)" icon="bx bx-user-check" color="info" live-key="my_assigned" />
        </div>

        <div class="chm-queue-tabs d-flex flex-wrap gap-2 mb-3">
            @foreach($queues as $key => $meta)
                @php
                    $params = array_filter(array_merge(request()->except('page', 'queue'), $key !== '' ? ['queue' => $key] : []));
                @endphp
                <a href="{{ route('helpdesk.tickets.index', $params) }}"
                   class="chm-queue-tab {{ $activeQueue === $key ? 'is-active' : '' }}">
                    {{ $meta['label'] }}
                    <span class="chm-queue-tab__count" data-chm-stat="queue.{{ $key === '' ? 'all' : $key }}">{{ number_format($meta['count']) }}</span>
                </a>
            @endforeach
        </div>

        <x-chm.card class="mb-4">
            <form method="get" class="chm-filter-panel border-0 p-0 shadow-none">
                @if($activeQueue)
                    <input type="hidden" name="queue" value="{{ $activeQueue }}">
                @endif
                <div class="row g-3 align-items-end">
                    <div class="col-lg-3">
                        <label class="form-label">Search</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bx bx-search"></i></span>
                            <input type="search" name="search" class="form-control" placeholder="Ticket #, title, requester…" value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select chm-select" data-placeholder="All statuses" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($statuses as $status)
                                <option value="{{ $status->value }}" @selected(request('status') === $status->value)>{{ $status->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Priority</label>
                        <select name="priority" class="form-select chm-select" data-placeholder="All priorities" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($priorities as $priority)
                                <option value="{{ $priority->value }}" @selected(request('priority') === $priority->value)>{{ $priority->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Department</label>
                        <select name="department_id" class="form-select chm-select" data-placeholder="All departments" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" @selected(request('department_id') == $dept->id)>{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Assigned to</label>
                        <select name="assigned_to" class="form-select chm-select" data-placeholder="Anyone" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($assignees as $user)
                                <option value="{{ $user->id }}" @selected(request('assigned_to') == $user->id)>{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto d-flex gap-2">
                        <button type="submit" class="btn btn-primary"><i class="bx bx-filter-alt me-1"></i> Apply</button>
                        <a href="{{ route('helpdesk.tickets.index') }}" class="btn btn-outline-secondary">Clear</a>
                    </div>
                </div>
            </form>
        </x-chm.card>

        <div class="card chm-card">
            <div class="card-header bg-transparent border-bottom">
                <div>
                    <h6 class="mb-0 fw-semibold">Tickets</h6>
                    <small class="text-muted" data-chm-stat="list.meta">{{ number_format($tickets->total()) }} total · showing {{ $tickets->firstItem() ?? 0 }}–{{ $tickets->lastItem() ?? 0 }}</small>
                </div>
            </div>

            @if($tickets->isEmpty())
                <x-chm.table-empty
                    title="No tickets found"
                    description="Try adjusting your filters or create a new support ticket."
                    icon="bx bx-support"
                    :action-label="auth()->user()->can('create', App\Models\HelpDesk\Ticket::class) ? 'Create ticket' : null"
                    :action-href="auth()->user()->can('create', App\Models\HelpDesk\Ticket::class) ? route('helpdesk.tickets.create') : null"
                />
            @else
                <x-chm.table-toolbar :datatable="false" :export="false" :sticky="true" class="border-0 shadow-none rounded-0">
                    <thead>
                        <tr>
                            <th style="width:48px;">#</th>
                            <th>Ticket</th>
                            <th>Subject</th>
                            <th>Department</th>
                            <th>Requester</th>
                            <th>Assigned</th>
                            <th>Priority</th>
                            <th>Status</th>
                            <th>SLA</th>
                            <th class="chm-col-actions text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody data-chm-live-region="table_rows">
                        @foreach($tickets as $index => $ticket)
                            <tr class="{{ $ticket->isOverdue() ? 'table-warning' : '' }}">
                                <td class="text-muted">{{ $tickets->firstItem() + $index }}</td>
                                <td>
                                    <a href="{{ route('helpdesk.tickets.show', $ticket) }}" class="fw-semibold text-decoration-none">{{ $ticket->ticket_number }}</a>
                                    @if($ticket->escalation_level > 0)
                                        <span class="badge bg-danger-subtle text-danger border ms-1">L{{ $ticket->escalation_level }}</span>
                                    @endif
                                </td>
                                <td><span class="d-inline-block text-truncate" style="max-width:200px;" title="{{ $ticket->title }}">{{ $ticket->title }}</span></td>
                                <td>{{ $ticket->department->name ?? '—' }}</td>
                                <td>{{ $ticket->requester->name ?? '—' }}</td>
                                <td>{{ $ticket->assignee->name ?? '—' }}</td>
                                <td><x-chm.status-badge :status="$ticket->priority->badgeVariant()" :label="$ticket->priority->label()" /></td>
                                <td><x-chm.status-badge :status="$ticket->status->badgeVariant()" :label="$ticket->status->label()" /></td>
                                <td class="small">
                                    @if($ticket->sla_resolution_due_at)
                                        <div class="{{ $ticket->isOverdue() ? 'text-danger fw-semibold' : 'text-muted' }}">
                                            {{ $ticket->sla_resolution_due_at->format('d M H:i') }}
                                        </div>
                                        @if($ticket->status->isOpen())
                                            <x-chm.progress :value="$ticket->slaResolutionPercent()" :show-label="false" class="mt-1" style="height:4px;" />
                                        @endif
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <a href="{{ route('helpdesk.tickets.show', $ticket) }}" class="btn btn-sm btn-outline-primary">View</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </x-chm.table-toolbar>

                <div class="card-footer bg-transparent border-top">
                    {{ $tickets->links() }}
                </div>
            @endif
        </div>
    </x-chm.layout.page>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (window.ChmForms) ChmForms.init();
    });
</script>
@endpush