{{-- resources/views/client/tickets/index.blade.php --}}
@extends('client.layouts.client')
@section('title','Support Tickets')
@section('page-title','Support Tickets')

@section('client-content')

<div style="display:grid;grid-template-columns:1fr 340px;gap:1.25rem;align-items:start;">

    {{-- Ticket list --}}
    <div>
        @if($tickets->count())
        <div style="display:flex;flex-direction:column;gap:0.65rem;margin-bottom:1.25rem;">
            @foreach($tickets as $t)
            <a href="{{ route('client.tickets.show',$t) }}" class="card" style="text-decoration:none;display:block;padding:1rem 1.25rem;" onmouseover="this.style.boxShadow='0 4px 16px rgba(0,0,0,0.07)'" onmouseout="this.style.boxShadow='none'">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;">
                    <div style="flex:1;min-width:0;">
                        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.3rem;flex-wrap:wrap;">
                            <span style="font-size:0.82rem;font-weight:600;color:var(--ink);">#{{ $t->id }} · {{ $t->subject }}</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
                            <span class="pill pill-{{ $t->status }}">{{ ucfirst($t->status) }}</span>
                            <span style="display:inline-flex;padding:0.18rem 0.55rem;border-radius:999px;font-size:0.62rem;font-weight:600;{{ $t->priority_badge }}">{{ ucfirst($t->priority) }}</span>
                            @if($t->category)<span style="font-size:0.65rem;color:#94a3b8;">{{ ucfirst($t->category) }}</span>@endif
                            <span style="font-size:0.65rem;color:#94a3b8;">{{ $t->replies->count() }} {{ $t->replies->count()==1?'reply':'replies' }}</span>
                        </div>
                    </div>
                    <span style="font-size:0.68rem;color:#94a3b8;white-space:nowrap;flex-shrink:0;">{{ $t->created_at->diffForHumans() }}</span>
                </div>
            </a>
            @endforeach
        </div>
        {{ $tickets->links() }}
        @else
        <div style="text-align:center;padding:3rem;border:1.5px dashed var(--border);border-radius:12px;">
            <p style="font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:0.4rem;">No tickets yet</p>
            <p style="font-size:0.8rem;color:#94a3b8;">Having an issue? Open a support ticket and we'll respond within 24 hours.</p>
        </div>
        @endif
    </div>

    {{-- New ticket form --}}
    <div class="card" style="position:sticky;top:0;">
        <div style="padding:1rem 1.25rem;border-bottom:1px solid var(--border);">
            <h3 style="font-family:'Fraunces',serif;font-size:0.9rem;font-weight:700;">Open New Ticket</h3>
        </div>
        <div style="padding:1.25rem;">
            <form action="{{ route('client.tickets.store') }}" method="POST">
                @csrf
                <div style="display:flex;flex-direction:column;gap:0.75rem;">
                    <div>
                        <label class="form-label">Subject *</label>
                        <input type="text" name="subject" class="form-field" placeholder="Brief description…" required value="{{ old('subject') }}">
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;">
                        <div>
                            <label class="form-label">Category *</label>
                            <select name="category" class="form-field" required>
                                <option value="general" {{ old('category')=='general'?'selected':'' }}>General</option>
                                <option value="bug"     {{ old('category')=='bug'?'selected':'' }}>Bug / Issue</option>
                                <option value="feature" {{ old('category')=='feature'?'selected':'' }}>Feature Request</option>
                                <option value="billing" {{ old('category')=='billing'?'selected':'' }}>Billing</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Priority *</label>
                            <select name="priority" class="form-field" required>
                                <option value="low"    {{ old('priority')=='low'?'selected':'' }}>Low</option>
                                <option value="medium" {{ old('priority','medium')=='medium'?'selected':'' }}>Medium</option>
                                <option value="high"   {{ old('priority')=='high'?'selected':'' }}>High</option>
                                <option value="urgent" {{ old('priority')=='urgent'?'selected':'' }}>Urgent</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Description *</label>
                        <textarea name="body" rows="5" class="form-field" placeholder="Describe your issue in detail…" required>{{ old('body') }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" style="justify-content:center;">Submit Ticket</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection