@extends('web.layouts.app', ['title' => 'Support / FAQ'])
@section('content')
<div class="grid grid-2">
    <section class="card">
        <h2>Create Ticket</h2>
        <form method="post" action="{{ route('web.support.store') }}">
            @csrf
            <label>Subject <input name="subject" required></label><br>
            <label>Message <textarea name="message" required></textarea></label><br>
            <label class="row"><input style="width:auto" type="checkbox" name="connect_live_support" value="1"> Connect to live support</label><br>
            <button class="btn primary">Create</button>
        </form>
    </section>
    <section class="card">
        <h2>FAQ</h2>
        @foreach($faqs as $faq)
            <details><summary>{{ $faq->question }}</summary><p class="muted">{{ $faq->answer }}</p></details>
        @endforeach
    </section>
</div><br>
<section class="grid">
@foreach($tickets as $ticket)
    <div class="card">
        <div class="between"><h3>{{ $ticket->subject }}</h3><span class="pill">{{ $ticket->status }}</span></div>
        <div class="messages">
            @foreach($ticket->messages as $message)
                <div class="message {{ $message->sender_id === auth()->id() ? 'me' : '' }}"><strong>{{ $message->sender?->username }}</strong><p>{{ $message->body }}</p></div>
            @endforeach
        </div>
        <form method="post" action="{{ route('web.support.messages.store', $ticket) }}" class="row">
            @csrf
            <input name="body" required aria-label="Reply">
            <button class="btn primary">Send</button>
        </form>
    </div>
@endforeach
</section>
@endsection