<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Support Ticket Created - {{ config('app.name', 'ViZuTrade') }}</title>
        <script>
            if (
                localStorage.theme === 'dark' ||
                (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
            ) {
                document.documentElement.classList.add('dark');
            }
        </script>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="bg-slate-50 font-sans text-slate-950 antialiased transition-colors duration-300 dark:bg-slate-950 dark:text-white">
        <x-public-navbar />

        <main class="relative flex min-h-[calc(100vh-73px)] items-center px-4 py-10 sm:px-6 lg:px-8">
            <section class="mx-auto max-w-2xl rounded-lg border border-blue-100 bg-white p-8 text-center shadow-xl shadow-blue-950/10 dark:border-blue-900/50 dark:bg-slate-900 dark:shadow-black/30">
                <x-application-logo class="mx-auto h-12 w-52" />
                <p class="mt-8 text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Ticket Created</p>
                <h1 class="mt-3 text-3xl font-black text-slate-950 dark:text-white">We received your message.</h1>
                <p class="mt-4 text-slate-600 dark:text-slate-300">Your support ticket number is:</p>
                <p class="mt-4 rounded-lg bg-blue-50 px-4 py-3 text-xl font-black text-blue-700 dark:bg-blue-950/40 dark:text-blue-200">{{ $ticket->ticketNumber() }}</p>
                <div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
                    <a href="{{ route('support.create') }}" class="rounded-lg border border-blue-100 px-5 py-3 text-sm font-bold text-blue-700 transition hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Create Another Ticket</a>
                    @if (auth()->id() && $ticket->user_id === auth()->id())
                        <a href="{{ route('support.tickets.show', $ticket) }}" class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-bold text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">View Ticket</a>
                    @else
                        <a href="{{ url('/') }}" class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-bold text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">Back Home</a>
                    @endif
                </div>
            </section>
        </main>
    </body>
</html>
