@extends('layouts.app')
@section('title', 'لوحتي')
@section('sidebar') @include('customer._sidebar') @endsection
@section('content')
<h1 class="text-xl font-bold mb-4">مرحبًا، {{ auth()->user()->name }}</h1>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <p class="text-sm text-gray-500 mb-1">رصيد التذاكر المتبقي</p>
        <p class="text-3xl font-bold text-indigo-600">{{ is_null($balance) ? 'غير محدود ∞' : $balance }}</p>
        @if($activePurchase && $activePurchase->expires_at)
            <p class="text-xs text-gray-400 mt-1">ينتهي في {{ $activePurchase->expires_at->format('Y-m-d') }}</p>
        @endif
        @if(is_null($balance) === false && $balance === 0)
            <a href="{{ route('customer.packages.index') }}" class="text-sm text-indigo-600 hover:underline mt-2 inline-block">اشترِ باقة جديدة →</a>
        @endif
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-5 flex items-center justify-center">
        <a href="{{ route('customer.tickets.create') }}" class="bg-indigo-600 text-white rounded-lg px-6 py-3 font-medium hover:bg-indigo-700">
            + فتح تذكرة دعم فني جديدة
        </a>
    </div>
</div>

<div class="bg-white rounded-xl border border-gray-200">
    <div class="px-4 py-3 border-b border-gray-100 font-medium text-sm">أحدث تذاكري</div>
    <table class="w-full text-sm text-right">
        <tbody class="divide-y divide-gray-100">
            @forelse($tickets as $ticket)
            <tr class="hover:bg-gray-50 cursor-pointer" onclick="location.href='{{ route('customer.tickets.show', $ticket) }}'">
                <td class="px-4 py-3 text-gray-400">{{ $ticket->ticket_number }}</td>
                <td class="px-4 py-3 font-medium">{{ $ticket->subject }}</td>
                <td class="px-4 py-3"><span class="px-2 py-0.5 rounded text-xs status-{{ $ticket->status }}">{{ $ticket->status }}</span></td>
            </tr>
            @empty
            <tr><td class="px-4 py-6 text-center text-gray-400">لا توجد تذاكر بعد.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection