@extends('layouts.user', ['heading' => 'Support Tickets', 'subheading' => 'Raise and track service requests'])

@section('content')
    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div class="user-card p-4 xl:col-span-1">
            <div class="mb-3 text-sm font-semibold">Create Ticket</div>
            <form method="POST" action="{{ route('user.support.store') }}" class="space-y-2">
                @csrf
                <input name="subject" value="{{ old('subject') }}" placeholder="Subject" class="w-full rounded border border-[var(--user-border)] p-2 text-sm" required>
                <select name="category" class="w-full rounded border border-[var(--user-border)] p-2 text-sm">
                    <option value="">Category (Optional)</option>
                    <option value="wallet">Wallet</option>
                    <option value="withdrawal">Withdrawal</option>
                    <option value="order">Order</option>
                    <option value="kyc">KYC</option>
                    <option value="tree">Tree / Placement</option>
                    <option value="other">Other</option>
                </select>
                <select name="priority" class="w-full rounded border border-[var(--user-border)] p-2 text-sm" required>
                    <option value="medium">Priority: Medium</option>
                    <option value="low">Priority: Low</option>
                    <option value="high">Priority: High</option>
                </select>
                <textarea name="message" rows="5" placeholder="Describe your issue" class="w-full rounded border border-[var(--user-border)] p-2 text-sm" required>{{ old('message') }}</textarea>
                <button class="rounded bg-[var(--user-primary)] px-4 py-2 text-sm font-semibold text-white">Submit Ticket</button>
            </form>
        </div>

        <div class="user-card p-4 xl:col-span-2">
            <div class="mb-3 text-sm font-semibold">Ticket History</div>
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-slate-100 text-left">
                        <tr>
                            <th class="p-2">Ticket</th>
                            <th class="p-2">Subject</th>
                            <th class="p-2">Priority</th>
                            <th class="p-2">Status</th>
                            <th class="p-2">Opened</th>
                            <th class="p-2">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tickets as $ticket)
                            @php
                                $meta = is_array($ticket->meta) ? $ticket->meta : [];
                            @endphp
                            <tr class="border-t">
                                <td class="p-2">{{ $meta['ticket_code'] ?? ('TKT-'.$ticket->id) }}</td>
                                <td class="p-2">
                                    <div class="font-semibold">{{ $meta['subject'] ?? 'Support Request' }}</div>
                                    <div class="text-xs text-[var(--user-muted)]">{{ \Illuminate\Support\Str::limit($meta['message'] ?? $ticket->remarks, 60) }}</div>
                                </td>
                                <td class="p-2">{{ ucfirst((string) ($meta['priority'] ?? 'medium')) }}</td>
                                <td class="p-2">{{ ucfirst($ticket->status) }}</td>
                                <td class="p-2">{{ optional($ticket->created_at)->format('d M Y H:i') }}</td>
                                <td class="p-2">
                                    @if($ticket->status !== 'closed')
                                        <form method="POST" action="{{ route('user.support.close', $ticket->id) }}">
                                            @csrf
                                            <button class="rounded bg-rose-600 px-2 py-1 text-xs text-white">Close</button>
                                        </form>
                                    @else
                                        <span class="text-xs text-[var(--user-muted)]">Closed</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="p-4 text-center text-[var(--user-muted)]">No support tickets yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">{{ $tickets->links() }}</div>
        </div>
    </div>
@endsection