<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Support - {{ config('app.name', 'ViZuTrade') }}</title>
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap" rel="stylesheet" />
        <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="min-h-screen px-4 py-8 sm:px-6 lg:px-8">
            <div class="mx-auto max-w-4xl">
                <header class="mt-6">
                    <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Support</p>
                    <h1 class="mt-3 text-4xl font-black text-slate-950 dark:text-white">How can we help?</h1>
                    <p class="mt-4 max-w-2xl text-slate-600 dark:text-slate-300">Submit a support ticket for account, payment, technical, trading tools, or general questions.</p>
                </header>

                <form method="POST" action="{{ route('support.store') }}" class="mt-8 rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    @csrf

                    @php
                        $input = 'mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100';
                    @endphp

                    <div class="grid gap-4 md:grid-cols-2">
                        <div>
                            <label for="name" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Name</label>
                            <input id="name" name="name" value="{{ old('name', $user?->name) }}" class="{{ $input }}" required>
                            @error('name') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="email" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Email</label>
                            <input id="email" type="email" name="email" value="{{ old('email', $user?->email) }}" class="{{ $input }}" required>
                            @error('email') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                        </div>

                        <div class="md:col-span-2">
                            <label for="subject" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Subject</label>
                            <input id="subject" name="subject" value="{{ old('subject') }}" class="{{ $input }}" required>
                            @error('subject') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="category" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Category</label>
                            <select id="category" name="category" class="{{ $input }}" required>
                                @foreach ($categories as $value => $label)
                                    <option value="{{ $value }}" @selected(old('category') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('category') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label for="priority" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Priority</label>
                            <select id="priority" name="priority" class="{{ $input }}" required>
                                @foreach ($priorities as $value => $label)
                                    <option value="{{ $value }}" @selected(old('priority', 'medium') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('priority') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                        </div>

                        <div class="md:col-span-2">
                            <label for="message" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Message</label>
                            <textarea id="message" name="message" rows="7" class="{{ $input }}" required>{{ old('message') }}</textarea>
                            @error('message') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="mt-6 flex flex-wrap gap-3">
                        <button type="submit" class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-bold text-white transition hover:-translate-y-0.5 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">Submit Ticket</button>
                        @auth
                            <a href="{{ route('support.my-tickets') }}" 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">My Tickets</a>
                        @endauth
                    </div>
                </form>
            </div>
        </main>
    </body>
</html>
