@extends('layouts.app')

@section('title', TranslationHelper::transFromDatabase('Inventory.UnitsManagement', __('إدارة وحدات القياس')))

@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.UnitsManagement', __('إدارة وحدات القياس')) }}</h1>
                    <p class="text-black">{{ TranslationHelper::transFromDatabase('Inventory.UnitsSubtitle', __('إدارة وتحديث معلومات وحدات القياس')) }}</p>
                </div>
                <div class="flex gap-3">
                    @can('inventory.units.view')
                    <div class="relative inline-block text-left">
                        <button type="button" id="export-btn" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                            <i class="fas fa-download ml-2"></i>
                            <span>{{ TranslationHelper::transFromDatabase('General.Export', __('تصدير')) }}</span>
                            <i class="fas fa-chevron-down mr-2"></i>
                        </button>
                        <div id="export-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-10">
                            <a href="{{ route('inventory.units.export.excel') }}" class="flex items-center px-4 py-2 text-black hover:bg-blue-50 transition-colors duration-150">
                                <i class="fas fa-file-excel text-green-600 ml-2"></i>
                                <span>{{ TranslationHelper::transFromDatabase('General.ExportExcel', __('تصدير إلى Excel')) }}</span>
                            </a>
                            <a href="{{ route('inventory.units.export.csv') }}" class="flex items-center px-4 py-2 text-black hover:bg-blue-50 transition-colors duration-150">
                                <i class="fas fa-file-csv text-orange-600 ml-2"></i>
                                <span>{{ TranslationHelper::transFromDatabase('General.ExportCSV', __('تصدير إلى CSV')) }}</span>
                            </a>
                        </div>
                    </div>
                    @endcan

                    @can('inventory.units.create')
                    <a href="{{ route('inventory.units.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.AddNewUnit', __('إضافة وحدة جديدة')) }}</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.units.index') }}" method="GET" class="grid grid-cols-1 md:grid-cols-3 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.UnitNameOrCode', __('اسم الوحدة أو الرمز')) }}" 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="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.units.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>

        <!-- Units 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('General.Code', __('الرمز')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('Inventory.UnitName', __('اسم الوحدة')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ TranslationHelper::transFromDatabase('General.Description', __('الوصف')) }}</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($units as $unit)
                        <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">
                                    {{ $unit->code ?? '-' }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-semibold text-black">{{ $unit->name }}</div>
                            </td>
                            <td class="px-6 py-4 text-black">{{ $unit->description ?? '-' }}</td>
                            <td class="px-6 py-4">
                                @if($unit->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.units.edit')
                                    <a href="{{ route('inventory.units.edit', $unit->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.units.delete')
                                    <form action="{{ route('inventory.units.destroy', $unit->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.DeleteUnitConfirm', __('هل أنت متأكد من حذف هذه الوحدة؟')) }}')">
                                            <i class="fas fa-trash mr-1"></i>
                                            <span>{{ TranslationHelper::transFromDatabase('General.Delete', __('حذف')) }}</span>
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" 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.NoUnitsFound', __('لا توجد وحدات قياس حالياً')) }}</p>
                                    <p class="text-black text-sm mt-1">{{ TranslationHelper::transFromDatabase('Inventory.StartAddingUnit', __('ابدأ بإضافة وحدة جديدة')) }}</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">
                    {{ $units->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const exportBtn = document.getElementById('export-btn');
        const exportMenu = document.getElementById('export-menu');

        if (exportBtn && exportMenu) {
            // عرض/إخفاء القائمة عند النقر على الزر
            exportBtn.addEventListener('click', function() {
                exportMenu.classList.toggle('hidden');
            });

            // إغلاق القائمة عند النقر خارجها
            document.addEventListener('click', function(event) {
                if (!exportBtn.contains(event.target) && !exportMenu.contains(event.target)) {
                    exportMenu.classList.add('hidden');
                }
            });
        }
    });
</script>
@endpush
@endsection