@extends('layouts.app', ['title' => 'Support'])

@section('content')
<section class="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
    <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
        <h1 class="font-display text-3xl font-bold text-white">Open a support ticket</h1>
        <form method="POST" action="{{ route('support.store') }}" class="mt-6 space-y-4">
            @csrf
            <input name="subject" placeholder="Subject" title="Summarize the issue in one clear sentence" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
            <select name="priority" title="Choose how urgent this request is for your team" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
                <option value="normal">Normal</option>
                <option value="high">High</option>
                <option value="urgent">Urgent</option>
                <option value="low">Low</option>
            </select>
            <textarea name="message" rows="6" placeholder="Describe your issue" title="Include the error, affected domain, and any steps already tried" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required></textarea>
            <button type="submit" class="w-full rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white">Create ticket</button>
        </form>
    </div>
    <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
        <h2 class="font-display text-2xl font-semibold text-white">Your tickets</h2>
        <div class="mt-6 space-y-3">
            @foreach ($tickets as $ticket)
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div class="font-medium text-white">{{ $ticket->subject }}</div>
                    <div class="mt-1 text-sm text-slate-300">{{ $ticket->message }}</div>
                    <div class="mt-2 text-xs uppercase tracking-[0.2em] text-slate-500">{{ $ticket->status }} • {{ $ticket->priority }}</div>
                </div>
            @endforeach
        </div>
        <div class="mt-6">{{ $tickets->links() }}</div>
    </div>
</section>
@endsection