@extends('admin.layouts.app')

@section('title', 'لوحة التحكم')

@section('content')
    <h1 class="text-3xl font-bold text-gray-800 mb-8">لوحة التحكم</h1>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Total Products -->
        <div class="bg-white rounded-lg shadow-md p-6 border-r-4 border-zelight-red">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">إجمالي المنتجات</p>
                    <h3 class="text-3xl font-bold text-gray-800">{{ $stats['total_products'] }}</h3>
                </div>
                <div class="bg-zelight-red bg-opacity-10 p-3 rounded-full">
                    <svg class="w-8 h-8 text-zelight-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Total Categories -->
        <div class="bg-white rounded-lg shadow-md p-6 border-r-4 border-zelight-brown">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">إجمالي الأقسام</p>
                    <h3 class="text-3xl font-bold text-gray-800">{{ $stats['total_categories'] }}</h3>
                </div>
                <div class="bg-zelight-brown bg-opacity-10 p-3 rounded-full">
                    <svg class="w-8 h-8 text-zelight-brown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
                        </path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Available Products -->
        <div class="bg-white rounded-lg shadow-md p-6 border-r-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">منتجات متوفرة</p>
                    <h3 class="text-3xl font-bold text-gray-800">{{ $stats['available_products'] }}</h3>
                </div>
                <div class="bg-green-100 p-3 rounded-full">
                    <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Unavailable Products -->
        <div class="bg-white rounded-lg shadow-md p-6 border-r-4 border-red-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">منتجات منتهية</p>
                    <h3 class="text-3xl font-bold text-gray-800">{{ $stats['unavailable_products'] }}</h3>
                </div>
                <div class="bg-red-100 p-3 rounded-full">
                    <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Products -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-4">أحدث المنتجات</h2>

        @if ($recentProducts->count() > 0)
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-right border-b">
                            <th class="pb-3 text-gray-600">المنتج</th>
                            <th class="pb-3 text-gray-600">القسم</th>
                            <th class="pb-3 text-gray-600">الحالة</th>
                            <th class="pb-3 text-gray-600">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recentProducts as $product)
                            <tr class="border-b hover:bg-gray-50">
                                <td class="py-3">
                                    <div class="flex items-center">
                                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name_ar }}"
                                            class="w-10 h-10 rounded object-cover ml-3">
                                        <span>{{ $product->name_ar }}</span>
                                    </div>
                                </td>
                                <td class="py-3">{{ $product->category->name_ar ?? '-' }}</td>
                                <td class="py-3">
                                    @if ($product->is_available)
                                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">متوفر</span>
                                    @else
                                        <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">منتهي</span>
                                    @endif
                                </td>
                                <td class="py-3">
                                    <a href="{{ route('admin.products.edit', $product->id) }}"
                                        class="text-zelight-red hover:text-zelight-crimson">
                                        تعديل
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-gray-500 text-center py-8">لا توجد منتجات بعد</p>
        @endif
    </div>
@endsection