@extends('layouts.app')

@section('title', config('app.name'))

@section('content')
    <section class="screen active" id="support">
        <div class="wrap">
            <div class="screen-hero">
                <span class="eyebrow">Player command center</span>
                <h1>Support, without the <span class="gold">runaround.</span></h1>
                <p>Open a ticket and keep the full conversation in one place.</p>
            </div>

            <div class="support-layout">
                <div class="surface">
                    <span class="eyebrow">Open a new request</span>
                    <h2 style="margin:17px 0 26px">Command center <span class="gold">support.</span></h2>

                    @if ($errors->any())
                        <div class="form-alert">
                            <strong>Please check your ticket.</strong>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form class="form" id="ticketForm" method="POST" action="{{ route('tickets.store') }}">
                        @csrf
                        <label>
                            Ticket subject
                            <input name="subject" value="{{ old('subject') }}" required maxlength="150" placeholder="What do you need help with?">
                        </label>
                        <div class="form-grid">
                            <label>
                                Category
                                <select name="category" required>
                                    @foreach (['Account', 'Payment', 'Technical issue', 'Bug report', 'Player report', 'Other'] as $category)
                                        <option @selected(old('category') === $category)>{{ $category }}</option>
                                    @endforeach
                                </select>
                            </label>
                            <label>
                                Priority
                                <select name="priority" required>
                                    @foreach (['Low', 'Medium', 'High'] as $priority)
                                        <option @selected(old('priority', 'Medium') === $priority)>{{ $priority }}</option>
                                    @endforeach
                                </select>
                            </label>
                        </div>
                        <label>
                            Message
                            <textarea name="message" required maxlength="5000" placeholder="Give us the details...">{{ old('message') }}</textarea>
                        </label>
                        <button class="btn" type="submit">Submit ticket</button>
                    </form>
                </div>

                <aside class="surface ticket-side">
                    <span class="eyebrow">Your recent tickets</span>
                    <h3>Open conversations</h3>

                    @forelse ($recentTickets as $ticket)
                        <a class="ticket-mini ticket-link @if($ticket->player_has_unread_support_reply) unread @endif" href="{{ route('ticket', $ticket) }}">
                            <strong>{{ $ticket->code }} · {{ $ticket->subject }}</strong>
                            <span @class(['badge', 'wait' => $ticket->waiting_on === 'player', 'closed' => $ticket->status === 'closed'])>{{ $ticket->status_label }}</span>
                            <small>Last update · {{ optional($ticket->last_message_at)->format('M d, Y H:i') }}</small>
                        </a>
                    @empty
                        <div class="ticket-mini">
                            <strong>No tickets yet.</strong>
                            <small>Your support history will appear here.</small>
                        </div>
                    @endforelse

                    <div class="ticket-actions">
                        <button class="btn dark small" data-route="account">Account overview</button>
                        <button class="btn red small" data-route="tickets">My tickets</button>
                    </div>
                </aside>
            </div>
        </div>
    </section>
@endsection