@extends('layouts.app')

@section('title', TranslationHelper::transFromDatabase('Inventory.ItemsManagement', __('إدارة الأصناف')))

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="mb-8">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h1 class="text-3xl font-bold text-black mb-2">{{ TranslationHelper::transFromDatabase('Inventory.ItemsManagement', __('إدارة الأصناف')) }}</h1>
                        <p class="text-black">{{ TranslationHelper::transFromDatabase('Inventory.ItemsSubtitle', __('إدارة وتحديث معلومات الأصناف والمنتجات')) }}</p>
                    </div>

                    <div class="flex items-center gap-3">
                        @can('inventory.items.create')
                            <a href="{{ route('inventory.items.import') }}"
                                class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white font-semibold rounded-lg hover:from-purple-700 hover:to-purple-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
                                title="{{ TranslationHelper::transFromDatabase('Inventory.ImportItemsExcel', __('استيراد أصناف من ملف Excel')) }}">
                                <i class="fas fa-upload ml-2"></i>
                                <span>{{ TranslationHelper::transFromDatabase('General.ImportExcel', __('استيراد من Excel')) }}</span>
                            </a>
                        @endcan

                        @can('inventory.items.export')
                            <button type="button" onclick="exportItems()"
                                class="inline-flex items-center px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 border-2 border-orange-700"
                                title="{{ TranslationHelper::transFromDatabase('Inventory.ExportItemsExcel', __('تصدير الأصناف إلى Excel')) }}">
                                <i class="fas fa-download ml-2"></i>
                                <span>{{ TranslationHelper::transFromDatabase('General.Export', __('تصدير')) }}</span>
                            </button>
                        @endcan

                        @can('inventory.items.create')
                            <a href="{{ route('inventory.items.create') }}"
                                class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105">
                                <i class="fas fa-plus ml-2"></i>
                                <span>{{ TranslationHelper::transFromDatabase('Inventory.AddNewItem', __('إضافة صنف جديد')) }}</span>
                            </a>
                        @endcan
                    </div>
                </div>

                @if (session('success'))
                    <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-check-circle text-green-500 text-xl"></i>
                            </div>
                            <div class="mr-3">
                                <p class="text-green-700 font-medium">{{ session('success') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                @if (session('error'))
                    <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                            </div>
                            <div class="mr-3">
                                <p class="text-red-700 font-medium">{{ session('error') }}</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Filters -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 p-6 mb-6">
                <form action="{{ route('inventory.items.index') }}" method="GET"
                    class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label for="search" class="block text-sm font-medium text-black mb-2">{{ TranslationHelper::transFromDatabase('General.Search', __('بحث')) }}</label>
                        <input type="text" id="search" name="search" value="{{ request('search') }}"
                            placeholder="{{ TranslationHelper::transFromDatabase('Inventory.ItemNameOrCode', __('اسم الصنف أو الكود')) }}"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>

                    <div>
                        <label for="category_id" class="block text-sm font-medium text-black mb-2">{{ TranslationHelper::transFromDatabase('Inventory.Category', __('التصنيف')) }}</label>
                        <select id="category_id" name="category_id"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">{{ TranslationHelper::transFromDatabase('Inventory.AllCategories', __('جميع التصنيفات')) }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ request('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="status" class="block text-sm font-medium text-black mb-2">{{ TranslationHelper::transFromDatabase('General.Status', __('الحالة')) }}</label>
                        <select id="status" name="status"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">{{ TranslationHelper::transFromDatabase('General.AllStatuses', __('جميع الحالات')) }}</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>{{ TranslationHelper::transFromDatabase('Status.Active', __('نشط')) }}</option>
                            <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>{{ TranslationHelper::transFromDatabase('Status.Inactive', __('غير نشط')) }}
                            </option>
                        </select>
                    </div>

                    <div class="flex items-end gap-2">
                        <button type="submit"
                            class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-150 font-medium">
                            <i class="fas fa-filter ml-2"></i>
                            {{ TranslationHelper::transFromDatabase('General.Apply', __('تطبيق')) }}
                        </button>
                        <a href="{{ route('inventory.items.index') }}"
                            class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-gray-200 text-black rounded-lg hover:bg-gray-300 transition-colors duration-150 font-medium">
                            <i class="fas fa-redo ml-2"></i>
                            {{ TranslationHelper::transFromDatabase('General.Reset', __('إعادة ضبط')) }}
                        </a>
                    </div>
                </form>
            </div>

            <!-- Items List -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                            <tr>
                                <th class="px-6 py-4 text-right font-semibold text-sm">#</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('Inventory.ItemCode', __('كود الصنف')) }}</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('Inventory.ItemName', __('اسم الصنف')) }}</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('Pharmacy.ScientificName', __('الاسم العلمي')) }}</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('Inventory.Category', __('التصنيف')) }}</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('Inventory.UnitOfMeasure', __('وحدة القياس')) }}</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('General.Status', __('الحالة')) }}</th>
                                <th class="px-6 py-4 text-center font-semibold text-sm">{{ TranslationHelper::transFromDatabase('General.Actions', __('الإجراءات')) }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($items as $item)
                                <tr class="hover:bg-blue-50 transition-colors duration-150 border-b border-gray-100">
                                    <td class="px-6 py-4 text-black font-medium">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-4 text-black">
                                        <span
                                            class="inline-block px-3 py-1 bg-gray-100 text-black rounded-md text-sm font-medium">
                                            {{ $item->code ?? '-' }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="font-semibold text-black">{{ $item->name }}</div>
                                    </td>
                                    <td class="px-6 py-4 text-black italic">
                                        {{ $item->scientific_name ?? '-' }}
                                    </td>
                                    <td class="px-6 py-4 text-black">{{ $item->category->name ?? TranslationHelper::transFromDatabase('Inventory.Uncategorized', __('غير مصنف')) }}</td>
                                    <td class="px-6 py-4 text-black">{{ $item->primaryUnit->name ?? TranslationHelper::transFromDatabase('General.NotSpecified', __('غير محدد')) }}</td>
                                    <td class="px-6 py-4">
                                        @if ($item->is_active)
                                            <span
                                                class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700">
                                                <span class="w-2 h-2 bg-green-500 rounded-full ml-2"></span>
                                                {{ TranslationHelper::transFromDatabase('Status.Active', __('نشط')) }}
                                            </span>
                                        @else
                                            <span
                                                class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-700">
                                                <span class="w-2 h-2 bg-red-500 rounded-full ml-2"></span>
                                                {{ TranslationHelper::transFromDatabase('Status.Inactive', __('غير نشط')) }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center justify-center gap-1">
                                            @can('inventory.items.view')
                                                <a href="{{ route('inventory.items.show', $item->id) }}"
                                                    class="inline-flex items-center px-3 py-2 rounded-lg bg-blue-100 text-blue-600 hover:bg-blue-200 transition-all duration-150 text-sm font-medium whitespace-nowrap"
                                                    title="{{ TranslationHelper::transFromDatabase('General.ViewDetails', __('عرض التفاصيل')) }}">
                                                    <i class="fas fa-eye mr-1"></i>
                                                    <span>{{ TranslationHelper::transFromDatabase('General.View', __('عرض')) }}</span>
                                                </a>
                                            @endcan

                                            @can('inventory.items.edit')
                                                <a href="{{ route('inventory.items.edit', $item->id) }}"
                                                    class="inline-flex items-center px-3 py-2 rounded-lg bg-amber-100 text-amber-600 hover:bg-amber-200 transition-all duration-150 text-sm font-medium whitespace-nowrap"
                                                    title="{{ TranslationHelper::transFromDatabase('General.Edit', __('تعديل')) }}">
                                                    <i class="fas fa-edit mr-1"></i>
                                                    <span>{{ TranslationHelper::transFromDatabase('General.Edit', __('تعديل')) }}</span>
                                                </a>
                                            @endcan

                                            @can('inventory.items.delete')
                                                <form action="{{ route('inventory.items.delete', $item->id) }}" method="POST"
                                                    class="inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit"
                                                        class="inline-flex items-center px-3 py-2 rounded-lg bg-red-100 text-red-600 hover:bg-red-200 transition-all duration-150 text-sm font-medium whitespace-nowrap"
                                                        title="{{ TranslationHelper::transFromDatabase('General.Delete', __('حذف')) }}"
                                                        onclick="return confirm('{{ TranslationHelper::transFromDatabase('Inventory.DeleteItemConfirm', __('هل أنت متأكد من حذف هذا الصنف؟')) }}')">
                                                        <i class="fas fa-trash mr-1"></i>
                                                        <span>{{ TranslationHelper::transFromDatabase('General.Delete', __('حذف')) }}</span>
                                                    </button>
                                                </form>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="px-6 py-12 text-center">
                                        <div class="flex flex-col items-center justify-center">
                                            <i class="fas fa-inbox text-black text-4xl mb-3"></i>
                                            <p class="text-black font-medium">{{ TranslationHelper::transFromDatabase('Inventory.NoItemsFound', __('لا توجد أصناف حالياً')) }}</p>
                                            <p class="text-black text-sm mt-1">{{ TranslationHelper::transFromDatabase('Inventory.StartAddingItem', __('ابدأ بإضافة صنف جديد')) }}</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                    <div class="flex justify-center">
                        {{ $items->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    @can('inventory.items.export')
        @push('scripts')
            <script>
                function exportItems() {
                    // إظهار تنبيه تحميل
                    const originalText = event.target.closest('button').innerHTML;
                    const button = event.target.closest('button');
                    button.innerHTML = '<i class="fas fa-spinner fa-spin ml-2"></i><span>{{ TranslationHelper::transFromDatabase('General.Exporting', __('جاري التصدير...')) }}</span>';
                    button.disabled = true;

                    // الحصول على معاملات البحث والتصفية
                    const searchParams = new URLSearchParams(window.location.search);
                    const params = new URLSearchParams({
                        export: 'true',
                        search: searchParams.get('search') || '',
                        category_id: searchParams.get('category_id') || '',
                        status: searchParams.get('status') || ''
                    });

                    // تنزيل الملف
                    window.location.href = `{{ route('inventory.items.export') }}?${params.toString()}`;

                    // إعادة تعيين الزر بعد 2 ثانية
                    setTimeout(() => {
                        button.innerHTML = originalText;
                        button.disabled = false;
                    }, 2000);
                }
            </script>
        @endpush
    @endcan
@endsection