@extends('storefront.layout')

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

@section('content')
@include('services.parcel._flow-style')
@php
    $topics = collect($questions ?? [])->map(fn ($question) => [
        'title' => $question['title'] ?? '',
        'body' => $question['answer'] ?? '',
    ])->filter(fn ($question) => filled($question['title']))->values();
@endphp

<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>Parcel Help</h1>
                    <p>Find admin-managed help answers or create a real support ticket.</p>
                </div>
                <a href="{{ route('pwa.parcel.index') }}" class="fm-parcel-back" aria-label="Back">&larr;</a>
            </div>
        </section>

        <section class="fm-parcel-card">
            <div class="fm-parcel-field">
                <label for="helpSearch">Search Help</label>
                <input id="helpSearch" type="search" placeholder="Search booking, tracking, payment, OTP">
            </div>
        </section>

        <section class="fm-parcel-card">
            <h2>Popular Topics</h2>
            <div class="fm-parcel-payment-grid">
                @forelse($topics as $topic)
                    <div class="fm-parcel-payment-option js-help-topic">
                        <span>
                            <strong>{{ $topic['title'] }}</strong>
                            <small>{{ $topic['body'] }}</small>
                        </span>
                    </div>
                @empty
                    <div class="fm-parcel-payment-option">
                        <span>
                            <strong>No help questions configured</strong>
                            <small>Create parcel help questions from the admin support question panel.</small>
                        </span>
                    </div>
                @endforelse
            </div>
        </section>

        <section class="fm-parcel-card">
            <h2>Report a parcel issue</h2>
            <p>Your ticket appears in the admin support panel with your account and parcel context.</p>
            <div class="fm-parcel-actions">
                <a href="{{ Auth::check() ? route('support.index') : route('login') }}" class="fm-parcel-btn fm-parcel-btn--secondary">My Tickets</a>
                <a href="{{ Auth::check() ? route('support.create', ['service' => 'parcel', 'category' => 'order_issue']) : route('login') }}" class="fm-parcel-btn fm-parcel-btn--primary">Create Ticket</a>
            </div>
        </section>

        <nav class="fm-parcel-bottom-nav" aria-label="Parcel navigation">
            <a href="{{ route('pwa.parcel.index') }}"><span>H</span>Home</a>
            <a href="{{ Auth::check() ? route('pwa.parcel.bookings') : route('login') }}"><span>O</span>Orders</a>
            <a href="{{ route('pwa.parcel.rate') }}"><span>R</span>Rate</a>
            <a class="is-active" href="{{ route('pwa.parcel.help') }}"><span>S</span>Support</a>
        </nav>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const search = document.getElementById('helpSearch');
    if (!search) return;
    search.addEventListener('input', function() {
        const query = this.value.toLowerCase().trim();
        document.querySelectorAll('.js-help-topic').forEach((topic) => {
            topic.style.display = !query || topic.textContent.toLowerCase().includes(query) ? 'flex' : 'none';
        });
    });
});
</script>
@endsection