@extends('layouts.dashboard')

@section('title', 'Ticket #' . $ticket->id)

@section('content')
    <a href="{{ route('user.tickets') }}" class="btn btn-outline-light mb-2">Back to support</a>
    <section class="user-page-card">
        <div class="d-flex flex-wrap justify-content-between gap-1 mb-2">
            <div><h1 class="loot-section-title mb-25">{{ $ticket->subject }}</h1><p class="loot-muted mb-0">{{ ucfirst($ticket->category) }} / {{ ucfirst($ticket->priority) }}</p></div>
            <span class="loot-status {{ $ticket->status === 'closed' ? '' : 'success' }}">{{ ucfirst($ticket->status) }}</span>
        </div>
        <div class="ticket-thread" aria-label="Ticket conversation">
            @foreach($ticket->messages as $message)
                <div class="ticket-message {{ $message->is_admin ? 'admin' : '' }}">
                    <strong>{{ $message->is_admin ? 'Support' : 'You' }}</strong>
                    <p>{{ $message->message }}</p>
                    <small>{{ $message->created_at->diffForHumans() }}</small>
                </div>
            @endforeach
        </div>
        @if($ticket->status !== 'closed')
            <form method="POST" action="{{ route('user.tickets.reply', $ticket) }}" class="mt-2">
                @csrf
                <label class="form-label" for="ticketReply">Reply</label>
                <textarea id="ticketReply" name="message" @class(['form-control', 'mb-1', 'is-invalid' => $errors->has('message')]) rows="3" required maxlength="3000">{{ old('message') }}</textarea>
                @error('message')<div class="invalid-feedback d-block mb-1" role="alert">{{ $message }}</div>@enderror
                <button class="btn btn-loot" type="submit">Send reply</button>
            </form>
        @endif
    </section>
@endsection
