@extends('layouts.app')

@section('title', 'حسابي - دكان موتورز')

@php
    $statusLabels = ['pending' => 'قيد المراجعة', 'active' => 'منشور', 'sold' => 'تم البيع', 'rejected' => 'مرفوض'];
    $statusColors = ['pending' => 'bg-amber-400/15 text-amber-400', 'active' => 'bg-green-500/15 text-green-400', 'sold' => 'bg-zinc-500/15 text-muted', 'rejected' => 'bg-red-500/15 text-red-400'];
@endphp

@section('content')
    <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="flex items-center justify-between mb-6 gap-4 flex-wrap">
            <div>
                <h1 class="text-2xl font-extrabold text-fg">مرحباً، {{ auth()->user()->name }}</h1>
                <p class="text-sm text-muted mt-1">إدارة إعلاناتك</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('listings.create') }}" class="rounded-lg bg-brand-400 px-4 py-2 text-sm font-bold text-black hover:bg-brand-300 transition">أضف إعلان</a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="rounded-lg border border-line2 px-4 py-2 text-sm font-semibold text-body hover:bg-surface2 transition">تسجيل الخروج</button>
                </form>
            </div>
        </div>

        @if ($listings->isEmpty())
            <div class="bg-surface rounded-xl border border-line p-12 text-center">
                <p class="text-muted">لم تقم بنشر أي إعلانات بعد.</p>
                <a href="{{ route('listings.create') }}" class="mt-3 inline-block text-accent font-semibold hover:underline">أضف أول إعلان</a>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                @foreach ($listings as $listing)
                    <div class="bg-surface rounded-xl border border-line overflow-hidden">
                        <div class="relative aspect-[4/3] bg-surface2">
                            @if ($listing->thumbnail)
                                <img src="{{ $listing->thumbnail }}" class="w-full h-full object-cover">
                            @else
                                <div class="w-full h-full flex items-center justify-center text-faint">
                                    <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v14l-4-2-4 2-4-2-4 2V5z"/></svg>
                                </div>
                            @endif
                            <span class="absolute top-2 start-2 rounded-md px-2 py-0.5 text-xs font-bold {{ $statusColors[$listing->status] }}">
                                {{ $statusLabels[$listing->status] }}
                            </span>
                        </div>
                        <div class="p-4">
                            <h3 class="font-bold text-fg line-clamp-1">{{ $listing->title }}</h3>
                            <div class="mt-1 text-accent font-extrabold">{{ number_format($listing->price) }} جنيه</div>
                            <div class="mt-2 text-xs text-faint">{{ $listing->views }} مشاهدة · {{ $listing->created_at->diffForHumans() }}</div>
                            @if ($listing->status === 'active')
                                <a href="{{ route('listings.show', $listing) }}" class="mt-3 inline-block text-sm text-accent font-semibold hover:underline">عرض الإعلان</a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
@endsection