@extends('storefront.layout')

@section('title', 'Support Tickets - '.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">Support</span>
                    <h1>My support tickets</h1>
                    <p>Report parcel issues and track replies from the admin support team.</p>
                </div>
                <a href="{{ route('pwa.parcel.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

        <div class="fm-parcel-actions" style="margin-bottom:14px;">
            <a href="{{ route('support.create', ['service' => 'parcel']) }}" class="fm-parcel-btn fm-parcel-btn--primary">Report parcel issue</a>
        </div>

        <section class="fm-parcel-card">
            <h2>Tickets</h2>
            <div style="display:grid;gap:10px;">
                @forelse($tickets as $ticket)
                    <a class="fm-parcel-booking-card" href="{{ route('support.show', $ticket->id) }}">
                        <span>
                            <strong>{{ $ticket->ticket_number }}</strong>
                            <small>{{ $ticket->subject }}</small>
                        </span>
                        <b>{{ str_replace('_', ' ', $ticket->status) }}</b>
                    </a>
                @empty
                    <div class="fm-parcel-alert" style="background:#f9fafb;color:var(--fm-text-secondary);">No support tickets yet.</div>
                @endforelse
            </div>
        </section>

        {{ $tickets->links() }}
    </div>
</div>
@endsection