{{-- resources/views/storefront/support.blade.php --}}
@extends('storefront.layout')

@section('title', trans_key('storefront.pageTitles.support').' - '.config('app.name', 'FreshMart'))

@section('content')
<style>
.fm-support {
    padding: 12px 0 80px;
}

.fm-support-header {
    margin-bottom: 16px;
}

.fm-support-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
    margin: 0 0 2px;
}

.fm-support-header p {
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 0;
}

.fm-support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fm-support-card {
    background: var(--fm-card-bg, #ffffff);
    border-radius: var(--fm-radius, 10px);
    padding: 16px;
    box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
}

.fm-support-card h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--fm-text, #1a1a2e);
}

.fm-support-card label {
    display: block;
    margin-bottom: 10px;
}

.fm-support-card label span {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-text-secondary, #6b7280);
    display: block;
    margin-bottom: 3px;
}

.fm-support-card label select,
.fm-support-card label input,
.fm-support-card label textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fm-border, #e5e7eb);
    border-radius: var(--fm-radius-sm, 6px);
    font-size: 13px;
    font-family: inherit;
    color: var(--fm-text, #1a1a2e);
    transition: border-color var(--fm-transition, 0.25s ease);
    background: var(--fm-bg, #f5f7f8);
}

.fm-support-card label select:focus,
.fm-support-card label input:focus,
.fm-support-card label textarea:focus {
    outline: none;
    border-color: var(--fm-primary, #2daa37);
    background: white;
}

.fm-support-card button {
    padding: 10px 24px;
    border: none;
    background: var(--fm-primary, #2daa37);
    color: white;
    border-radius: var(--fm-radius-full, 9999px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--fm-transition, 0.25s ease);
    width: 100%;
}

.fm-support-card button:hover {
    background: var(--fm-primary-dark, #1e8a2a);
}

.fm-support-ticket {
    background: var(--fm-bg, #f5f7f8);
    border-radius: var(--fm-radius-sm, 6px);
    padding: 10px 12px;
    margin-bottom: 6px;
}

.fm-support-ticket strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text, #1a1a2e);
    display: block;
}

.fm-support-ticket span {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 10px;
    border-radius: var(--fm-radius-full, 9999px);
    display: inline-block;
    margin-top: 2px;
}

.fm-support-ticket span.is-open { background: #fef3c7; color: #92400e; }
.fm-support-ticket span.is-resolved { background: #dcfce7; color: #166534; }
.fm-support-ticket span.is-closed { background: #fee2e2; color: #991b1b; }

.fm-support-ticket p {
    font-size: 12px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 2px 0 0;
}

@media (max-width: 480px) {
    .fm-support-grid { grid-template-columns: 1fr; }
}
</style>

<div class="fm-support">
    <div class="fm-support-header">
        <h1>How can we help?</h1>
        <p>Tell us what happened and our team will follow up.</p>
    </div>

    <div class="fm-support-grid">
        <div class="fm-support-card">
            <h2>Create Ticket</h2>
            <form action="{{ route('storefront.support.tickets.store') }}" method="POST">
                @csrf
                <label>
                    <span>Issue type</span>
                    <select name="issue_category" required>
                        <option value="order_issue">Order issue</option>
                        <option value="payment_issue">Payment issue</option>
                        <option value="delivery_issue">Delivery issue</option>
                        <option value="refund_cancellation">Refund / cancellation</option>
                        <option value="coupon_offer">Coupon / offer</option>
                        <option value="technical_problem">Technical problem</option>
                        <option value="other">Other</option>
                    </select>
                </label>
                <label>
                    <span>Priority</span>
                    <select name="priority" required>
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                        <option value="critical">Critical</option>
                    </select>
                </label>
                <label>
                    <span>Message</span>
                    <textarea name="message" rows="4" required>{{ old('message') }}</textarea>
                </label>
                <label style="display:flex;align-items:center;gap:8px;">
                    <input type="checkbox" name="confirmed" value="1" required style="width:auto;">
                    <span style="font-size:12px;color:var(--fm-text-secondary,#6b7280);margin:0;">I confirm these details are correct.</span>
                </label>
                <button type="submit">Submit Ticket</button>
            </form>
        </div>

        <div class="fm-support-card">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
                <h2 style="margin:0;">Previous Tickets</h2>
                <span style="font-size:12px;color:var(--fm-text-secondary,#6b7280);">{{ $tickets->total() }} requests</span>
            </div>
            @if($tickets->count())
                @foreach($tickets as $ticket)
                    @php
                        $statusClass = match($ticket->status) {
                            'open', 'pending' => 'is-open',
                            'resolved' => 'is-resolved',
                            'closed', 'cancelled' => 'is-closed',
                            default => 'is-open'
                        };
                    @endphp
                    <div class="fm-support-ticket">
                        <strong>{{ $ticket->subject }}</strong>
                        <span class="{{ $statusClass }}">{{ \Illuminate\Support\Str::headline($ticket->status) }}</span>
                        <p>{{ $ticket->ticket_number }} · {{ optional($ticket->created_at)->format('d M Y') }}</p>
                    </div>
                @endforeach
                <div style="margin-top:8px;">{{ $tickets->withQueryString()->links('storefront.partials.pagination') }}</div>
            @else
                <div style="text-align:center;padding:30px 0;color:var(--fm-text-secondary,#6b7280);">
                    <p style="margin:0;">No tickets yet. Your support requests will appear here.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection