@php($title = 'Support Tickets')
@php($heading = 'Support Tickets')
@php($sidebar = view()->make('dashboard.partials.customer-sidebar')->render())

@extends('layouts.dashboard', compact('title','heading','sidebar'))

@section('content')
    <div class="bg-white rounded-lg shadow p-4">
        @if($errors->any())
            <div class="mb-3 p-2 text-sm rounded bg-red-50 text-red-700">
                <div class="font-semibold mb-1">Please fix the errors below:</div>
                <ul class="list-disc ml-5">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if(session('status'))
            <div class="mb-3 p-2 text-sm rounded bg-green-50 text-green-700">{{ session('status') }}</div>
        @endif

        <form method="POST" action="{{ url('/tickets') }}" class="grid grid-cols-1 gap-2 mb-6">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                <input type="text" name="subject" value="{{ old('subject') }}" placeholder="Subject" class="border rounded px-3 py-2 text-sm" required>
                <div class="grid grid-cols-2 gap-2">
                    <input type="text" name="category" value="{{ old('category') }}" placeholder="Category (optional)" class="border rounded px-3 py-2 text-sm">
                    <select name="urgency" class="border rounded px-3 py-2 text-sm" required>
                        @foreach(['low'=>'Low','medium'=>'Medium','high'=>'High'] as $val=>$label)
                            <option value="{{ $val }}" {{ old('urgency','low')===$val?'selected':'' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div>
                <textarea name="content" rows="6" placeholder="Describe your issue..." class="border rounded px-3 py-2 text-sm w-full" required>{{ old('content') }}</textarea>
                @error('content')
                    <div class="text-red-600 text-xs mt-1">{{ $message }}</div>
                @enderror
            </div>
            <div>
                <button class="px-4 py-2 rounded bg-violet-600 text-white text-sm">Open New Ticket</button>
            </div>
        </form>

        <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-4">
            <input type="text" name="q" value="{{ request('q') }}" placeholder="Search subject or ID" class="border rounded px-3 py-1 text-sm">
            <select name="status" class="border rounded px-3 py-1 text-sm">
                <option value="">All Status</option>
                @foreach(['open','pending','closed'] as $st)
                    <option value="{{ $st }}" {{ request('status')===$st?'selected':'' }}>{{ ucfirst($st) }}</option>
                @endforeach
            </select>
            <button class="px-3 py-1 rounded bg-violet-600 text-white text-sm">Filter</button>
        </form>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="text-left border-b">
                        <th class="py-2 px-2">Ticket</th>
                        <th class="py-2 px-2">Subject</th>
                        <th class="py-2 px-2">Status</th>
                        <th class="py-2 px-2">Updated</th>
                        <th class="py-2 px-2">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse(($tickets ?? []) as $t)
                        <tr class="border-b">
                            <td class="py-2 px-2">
                                <div class="flex items-center gap-2">
                                    <span class="relative inline-flex items-center">
                                        #{{ $t->ticket_code ?? ($t->ticket_id ?? $t->id ?? '—') }}
                                        @if(($t->customer_unread ?? false))
                                            <span class="ml-2 inline-block w-2.5 h-2.5 rounded-full bg-red-600" title="Unread"></span>
                                        @endif
                                    </span>
                                    @if(($t->created_at ?? null) && \Illuminate\Support\Carbon::parse($t->created_at)->gte(now()->subDay()))
                                        <span class="px-1.5 py-0.5 text-[10px] rounded bg-green-100 text-green-700">New</span>
                                    @endif
                                </div>
                            </td>
                            <td class="py-2 px-2">{{ $t->subject ?? '—' }}</td>
                            <td class="py-2 px-2">
                                <div class="flex items-center gap-2">
                                    <span>{{ ucfirst($t->status ?? 'unknown') }}</span>
                                    @if(($t->latestReply ?? null) && ($t->latestReply->is_admin ?? false) && \Illuminate\Support\Carbon::parse($t->latestReply->created_at)->gte(now()->subDay()))
                                        <span class="px-1.5 py-0.5 text-[10px] rounded bg-amber-100 text-amber-700">New reply</span>
                                    @endif
                                </div>
                            </td>
                            <td class="py-2 px-2 text-slate-600">
                                {{ ($t->latestReply ?? null)
                                    ? \Illuminate\Support\Carbon::parse($t->latestReply->created_at)->toDayDateTimeString()
                                    : \Illuminate\Support\Carbon::parse($t->created_at ?? $t->updated_at ?? now())->toDayDateTimeString() }}
                            </td>
                            <td class="py-2 px-2">
                                <a href="{{ route('customer.support_tickets.show', $t) }}" class="inline-block px-2 py-1 text-xs rounded bg-slate-100 hover:bg-slate-200">View</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-3 px-2 text-center text-slate-500">No tickets found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">{{ method_exists(($tickets ?? null), 'links') ? $tickets->links() : '' }}</div>
    </div>
@endsection