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

<div class="page-content">
    <x-chm.layout.page title="Help Desk reports" subtitle="Export and analyse ticket performance" icon="bx bx-bar-chart-alt-2">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('helpdesk.dashboard')">Help Desk</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Reports</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @can('export', App\Models\HelpDesk\Ticket::class)
                <x-chm.button variant="primary" icon="bx bx-export" :href="route('helpdesk.reports.export', request()->query())">Export Excel</x-chm.button>
            @endcan
        </x-slot:actions>

        <x-chm.card class="mb-4">
            <form method="get" class="row g-3 align-items-end">
                <div class="col-lg-3">
                    <label class="form-label">Search</label>
                    <input type="search" name="search" class="form-control" value="{{ request('search') }}" placeholder="Ticket #, title…">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Department</label>
                    <select name="department_id" class="form-select chm-select" 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">From date</label>
                    <input type="date" name="from_date" class="form-control" value="{{ request('from_date') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">To date</label>
                    <input type="date" name="to_date" class="form-control" value="{{ request('to_date') }}">
                </div>
                <div class="col-auto">
                    <button type="submit" class="btn btn-primary">Filter</button>
                </div>
            </form>
        </x-chm.card>

        <div class="card chm-card">
            <x-chm.table-toolbar :datatable="false" :export="false">
                <thead>
                    <tr>
                        <th>Ticket</th>
                        <th>Title</th>
                        <th>Department</th>
                        <th>Requester</th>
                        <th>Assigned</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Resolved</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tickets as $ticket)
                        <tr>
                            <td><a href="{{ route('helpdesk.tickets.show', $ticket) }}">{{ $ticket->ticket_number }}</a></td>
                            <td>{{ Str::limit($ticket->title, 40) }}</td>
                            <td>{{ $ticket->department->name ?? '—' }}</td>
                            <td>{{ $ticket->requester->name ?? '—' }}</td>
                            <td>{{ $ticket->assignee->name ?? '—' }}</td>
                            <td>{{ $ticket->priority->label() }}</td>
                            <td>{{ $ticket->status->label() }}</td>
                            <td>{{ $ticket->created_at?->format('d M Y') }}</td>
                            <td>{{ $ticket->resolved_at?->format('d M Y') ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="9" class="text-muted">No tickets match your filters.</td></tr>
                    @endforelse
                </tbody>
            </x-chm.table-toolbar>
            <div class="card-footer bg-transparent">{{ $tickets->links() }}</div>
        </div>
    </x-chm.layout.page>
</div>

@endsection

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