@extends('layouts.app-admin')

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

@section('content')
    <div class="page-wrapper">
        <div class="container-xl">
            <!-- Page header -->
            <div class="page-header d-print-none"> 
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title"> 
                            <i class="ti ti-help-circle me-2"></i>
                            Support Ticket
                        </h2>
                        <div class="text-muted mt-1">Kelola dan pantau semua tiket dukungan Anda</div>
                    </div>
                    <div class="col-auto ms-auto d-print-none">
                        <div class="btn-list">
                            <a href="{{ route('admin.tickets.create') }}" class="btn btn-primary d-none d-sm-inline-block">
                                <i class="ti ti-plus me-2"></i>
                                Buat Ticket Baru
                            </a>
                            <a href="{{ route('admin.tickets.create') }}" class="btn btn-primary d-sm-none btn-icon">
                                <i class="ti ti-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Page body -->
            <div class="page-body">
                <!-- Ticket Statistics -->
                <div class="row row-deck row-cards mb-3">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card card-sm">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-primary text-white avatar">
                                            <i class="ti ti-ticket"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium">
                                            {{ $stats['total'] }} Total Ticket
                                        </div>
                                        <div class="text-muted">
                                            Semua ticket yang pernah dibuat
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card card-sm">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-success text-white avatar">
                                            <i class="ti ti-circle-check"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium">
                                            {{ $stats['open'] }} Terbuka
                                        </div>
                                        <div class="text-muted">
                                            Menunggu respon dari tim
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card card-sm">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-warning text-white avatar">
                                            <i class="ti ti-clock"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium">
                                            {{ $stats['progress'] }} Dalam Proses
                                        </div>
                                        <div class="text-muted">
                                            Sedang ditangani tim
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card card-sm">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-info text-white avatar">
                                            <i class="ti ti-check"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium">
                                            {{ $stats['resolved'] }} Selesai
                                        </div>
                                        <div class="text-muted">
                                            Ticket telah diselesaikan
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filter Section -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h3 class="card-title">Filter Ticket</h3>
                    </div>
                    <div class="card-body">
                        <form method="GET" class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Pencarian</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="search" value="{{ $search }}"
                                        placeholder="Cari berdasarkan subjek, kode, atau deskripsi...">
                                    <button class="btn btn-outline-secondary" type="submit">
                                        <i class="ti ti-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" name="status">
                                    <option value="all" {{ $status === 'all' ? 'selected' : '' }}>Semua Status</option>
                                    <option value="open" {{ $status === 'open' ? 'selected' : '' }}>Terbuka</option>
                                    <option value="progress" {{ $status === 'progress' ? 'selected' : '' }}>Dalam Proses
                                    </option>
                                    <option value="resolved" {{ $status === 'resolved' ? 'selected' : '' }}>Selesai
                                    </option>
                                    <option value="closed" {{ $status === 'closed' ? 'selected' : '' }}>Ditutup</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Kategori</label>
                                <select class="form-select" name="category">
                                    <option value="all" {{ $category === 'all' ? 'selected' : '' }}>Semua Kategori
                                    </option>
                                    @foreach (App\Models\Ticket::getCategories() as $key => $label)
                                        <option value="{{ $key }}" {{ $category === $key ? 'selected' : '' }}>
                                            {{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary">Filter</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Tickets List -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Daftar Ticket</h3>
                </div>
                <div class="card-body p-0">
                    @if ($tickets->count() > 0)
                        @foreach ($tickets as $ticket)
                            <div class="d-flex align-items-center p-3 border-bottom">
                                <div class="flex-fill">
                                    <div class="row">
                                        <div class="col">
                                            <div class="d-flex align-items-center mb-2">
                                                <span
                                                    class="badge badge-outline text-blue me-2">#{{ $ticket->ticket_code }}</span>
                                                <span
                                                    class="badge bg-{{ $ticket->status_color }}">{{ $ticket->status_label }}</span>
                                                <small
                                                    class="text-muted ms-2">{{ $ticket->created_at->diffForHumans() }}</small>
                                            </div>
                                            <h4 class="mb-1">{{ $ticket->subject }}</h4>
                                            <p class="text-muted mb-2">{{ Str::limit($ticket->description, 150) }}</p>
                                            <div class="d-flex align-items-center text-muted">
                                                <i class="ti ti-tag me-1"></i>
                                                <span class="me-3">{{ $ticket->category_label }}</span>
                                                @if ($ticket->replies->count() > 0)
                                                    <i class="ti ti-message-circle me-1"></i>
                                                    <span>{{ $ticket->replies->count() }} balasan</span>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="btn-list">
                                                <a href="{{ route('admin.tickets.show', $ticket->id) }}"
                                                    class="btn btn-outline-primary btn-sm">
                                                    <i class="ti ti-eye me-1"></i>
                                                    Lihat Detail
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="empty">
                            <div class="empty-img"><img src="{{ asset('dist/img/undraw_printing_invoices_5r4r.svg') }}"
                                    height="128" alt="">
                            </div>
                            <p class="empty-title">Belum Ada Ticket</p>
                            <p class="empty-subtitle text-muted">
                                @if ($search || $status !== 'all' || $category !== 'all')
                                    Tidak ada ticket yang sesuai dengan filter yang dipilih.
                                @else
                                    Anda belum membuat ticket dukungan. Buat ticket pertama Anda untuk mendapatkan bantuan.
                                @endif
                            </p>
                            <div class="empty-action">
                                @if (!$search && $status === 'all' && $category === 'all')
                                    <a href="{{ route('admin.tickets.create') }}" class="btn btn-primary">
                                        <i class="ti ti-plus me-2"></i>
                                        Buat Ticket Pertama
                                    </a>
                                @else
                                    <a href="{{ route('admin.tickets.index') }}" class="btn btn-outline-primary">
                                        <i class="ti ti-refresh me-2"></i>
                                        Reset Filter
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
                @if ($tickets->hasPages())
                    <div class="card-footer d-flex align-items-center">
                        <p class="m-0 text-muted">Showing <span>{{ $tickets->firstItem() }}</span> to
                            <span>{{ $tickets->lastItem() }}</span> of <span>{{ $tickets->total() }}</span> entries</p>
                        <ul class="pagination m-0 ms-auto">
                            {{ $tickets->appends(request()->query())->links() }}
                        </ul>
                    </div>
                @endif
            </div>
        </div>
    </div>
    </div>
@endsection

@section('scripts')
    <script>
        // Auto-submit form when select changes
        document.querySelectorAll('select[name="status"], select[name="category"]').forEach(function(select) {
            select.addEventListener('change', function() {
                this.closest('form').submit();
            });
        });

        // Clear search input
        document.querySelector('input[name="search"]').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                this.closest('form').submit();
            }
        });
    </script>
@endsection