@extends('storefront.layout')

@section('title', 'Support Ticket - '.config('app.name', 'FreshMart'))
@section('body_class', 'sf-no-bottom-nav')

@section('content')
@include('services.parcel._flow-style')
<div class="fm-parcel-flow">
    <div class="fm-container">
        <section class="fm-parcel-hero-panel">
            <div class="fm-parcel-hero-panel__top">
                <div>
                    <span class="fm-parcel-eyebrow">{{ str_replace('_', ' ', $ticket->status) }}</span>
                    <h1>{{ $ticket->ticket_number }}</h1>
                    <p>{{ $ticket->subject }}</p>
                </div>
                <a href="{{ route('support.index') }}" class="fm-parcel-back" aria-label="Back">&larr;</a>
            </div>
        </section>

        @if(session('success'))
            <div class="fm-parcel-alert" style="background:#ecfdf5;color:#166534;">{{ session('success') }}</div>
        @endif

        <section class="fm-parcel-card">
            <h2>Issue</h2>
            <div class="fm-parcel-review">
                <div class="fm-parcel-review-row"><span>Category</span><strong>{{ str_replace('_', ' ', $ticket->category) }}</strong></div>
                <div class="fm-parcel-review-row"><span>Priority</span><strong>{{ $ticket->priority }}</strong></div>
                <div class="fm-parcel-review-row"><span>Created</span><strong>{{ optional($ticket->created_at)->format('d M, h:i A') }}</strong></div>
            </div>
            <p style="margin-top:12px;white-space:pre-line;">{{ $ticket->description }}</p>
        </section>

        <section class="fm-parcel-card">
            <h2>Replies</h2>
            <div style="display:grid;gap:10px;">
                @forelse($ticket->replies as $reply)
                    <div class="fm-parcel-payment-option" style="align-items:flex-start;">
                        <span>
                            <strong>{{ $reply->is_admin_reply ? 'Support team' : 'You' }}</strong>
                            <small>{{ optional($reply->created_at)->format('d M, h:i A') }}</small>
                            <small style="display:block;margin-top:6px;color:var(--fm-text);white-space:pre-line;">{{ $reply->message }}</small>
                        </span>
                    </div>
                @empty
                    <div class="fm-parcel-alert" style="background:#f9fafb;color:var(--fm-text-secondary);">No replies yet.</div>
                @endforelse
            </div>
        </section>

        <form method="POST" action="{{ route('support.reply', $ticket->id) }}" enctype="multipart/form-data">
            @csrf
            <section class="fm-parcel-card">
                <h2>Add reply</h2>
                <div class="fm-parcel-field">
                    <label>Message</label>
                    <textarea name="message" required></textarea>
                </div>
                <div class="fm-parcel-field">
                    <label>Attachment</label>
                    <input type="file" name="attachment">
                </div>
            </section>
            <button class="fm-parcel-btn fm-parcel-btn--primary" type="submit" style="width:100%;">Send reply</button>
        </form>
    </div>
</div>
@endsection