@extends('layouts.account', ['title' => 'الدعم والمحادثات | RaseedNow'])

@section('account_content')
    <section class="rn-support-hub">
        <form method="POST" action="{{ route('account.support.store') }}" class="rn-new-support-chat">
            @csrf
            <header class="rn-chat-topbar">
                <a href="{{ route('account.dashboard') }}" class="rn-chat-back" aria-label="العودة للرئيسية">→</a>
                <span class="rn-chat-support-avatar">R</span>
                <div class="rn-chat-title"><h1>فريق دعم RaseedNow</h1><p><i class="is-open"></i>متاح لمساعدتك الآن</p></div>
                <span class="rn-new-chat-label">محادثة جديدة</span>
            </header>

            <div class="rn-new-chat-welcome">
                <span class="rn-new-chat-welcome-mark">💬</span>
                <strong>أهلاً {{ $user->display_name ?: $user->name }}</strong>
                <p>اكتب رسالتك وسيفتح لك شات مباشر مع فريق الدعم.</p>
                <small>عادةً نرد خلال وقت قصير.</small>
            </div>

            <div class="rn-new-chat-topic">
                <input name="subject" value="{{ old('subject') }}" maxlength="255" required placeholder="عنوان مختصر للمحادثة، مثال: مشكلة في طلب" aria-label="عنوان المحادثة">
                <select name="priority" aria-label="أولوية المحادثة">
                    <option value="normal" @selected(old('priority') === 'normal')>أولوية عادية</option>
                    <option value="high" @selected(old('priority') === 'high')>أولوية عاجلة</option>
                    <option value="low" @selected(old('priority') === 'low')>أولوية منخفضة</option>
                </select>
            </div>

            <div class="rn-chat-composer rn-new-chat-composer">
                <textarea name="message" rows="1" maxlength="2000" required placeholder="اكتب رسالتك لفريق الدعم..." aria-label="رسالتك الجديدة">{{ old('message') }}</textarea>
                <button type="submit" aria-label="بدء المحادثة وإرسال الرسالة"><svg viewBox="0 0 24 24" fill="none"><path d="m21 3-8.8 18-2.2-7.8L3 11 21 3Zm-10.9 10.2L15 8.7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
            </div>
        </form>

        <section class="rn-support-history">
            <div class="rn-support-history-head"><div><h2>محادثاتك السابقة</h2><p>{{ $tickets->total() }} محادثة مع فريق الدعم</p></div><span>{{ $user->supportTickets()->where('status', 'open')->count() }} مفتوحة</span></div>
            <div class="rn-support-history-list">
                @forelse($tickets as $ticket)
                    @php
                        $isFinished = in_array($ticket->status, ['resolved', 'closed'], true);
                        $ticketStatus = match($ticket->status) { 'open' => 'مفتوحة', 'pending_customer' => 'بانتظار ردك', 'resolved', 'closed' => 'تم الحل', default => 'قيد المتابعة' };
                    @endphp
                    <a href="{{ route('account.support.show', $ticket) }}" class="rn-support-history-item">
                        <span class="rn-support-history-avatar">R</span>
                        <div><strong>{{ $ticket->subject }}</strong><p>{{ $ticket->last_message ?: 'ابدأ المحادثة مع فريق الدعم' }}</p></div>
                        <aside><time>{{ $ticket->last_activity_at?->diffForHumans() }}</time><em @class(['is-finished' => $isFinished])>{{ $ticketStatus }}</em></aside>
                    </a>
                @empty
                    <div class="rn-support-history-empty"><span>✨</span><strong>لا توجد محادثات سابقة</strong><p>ابدأ أول محادثة من الصندوق بالأعلى.</p></div>
                @endforelse
            </div>
            @if($tickets->hasPages())<div class="rn-support-pagination">{{ $tickets->links() }}</div>@endif
        </section>
    </section>
@endsection