@extends('storefront.layout')

@section('title', 'Create 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">Support</span>
                    <h1>Report an issue</h1>
                    <p>Share real parcel order details so the admin team can resolve it.</p>
                </div>
                <a href="{{ route('support.index') }}" class="fm-parcel-back" aria-label="Back">&larr;</a>
            </div>
        </section>

        @if($errors->any())
            <div class="fm-parcel-alert">{{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ route('support.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="service" value="{{ old('service', $service ?? 'parcel') }}">
            <section class="fm-parcel-card">
                <h2>Issue details</h2>
                <div class="fm-parcel-field">
                    <label>Order ID / number</label>
                    <input name="order_id" value="{{ old('order_id', $orderId ?? '') }}" placeholder="Optional">
                </div>
                <div class="fm-parcel-field">
                    <label>Subject</label>
                    <input name="subject" value="{{ old('subject') }}" required placeholder="Parcel not picked up, payment issue...">
                </div>
                <div class="fm-parcel-grid-2">
                    <div class="fm-parcel-field">
                        <label>Category</label>
                        <select name="category" required>
                            @foreach(['order_issue' => 'Parcel / order issue', 'payment_issue' => 'Payment issue', 'technical_support' => 'App or PWA issue', 'account_issue' => 'Account issue', 'general_inquiry' => 'General inquiry'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('category', 'order_issue') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="fm-parcel-field">
                        <label>Priority</label>
                        <select name="priority" required>
                            @foreach(['medium' => 'Medium', 'high' => 'High', 'urgent' => 'Urgent', 'low' => 'Low'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('priority', 'medium') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="fm-parcel-field">
                    <label>Description</label>
                    <textarea name="description" required placeholder="Explain the parcel issue, pickup/drop details, driver status, payment reference, etc.">{{ old('description') }}</textarea>
                </div>
                <div class="fm-parcel-field">
                    <label>Attachment</label>
                    <input type="file" name="attachment">
                </div>
            </section>
            <div class="fm-parcel-actions">
                <a href="{{ route('support.index') }}" class="fm-parcel-btn fm-parcel-btn--secondary">Cancel</a>
                <button class="fm-parcel-btn fm-parcel-btn--primary" type="submit">Submit ticket</button>
            </div>
        </form>
    </div>
</div>
@endsection