@extends('layouts.app')
@section('title', 'مواقع وخطوط الإنتاج')
@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">مواقع وخطوط الإنتاج</h1>
                    <p class="text-black">إدارة مواقع وخطوط الإنتاج المختلفة</p>
                </div>
                <a href="{{ route('inventory.production-sites-or-lines.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>إضافة موقع</span>
                </a>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <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 text-sm">#</th>
                        <th class="px-6 py-4 text-right text-sm">الاسم</th>
                        <th class="px-6 py-4 text-right text-sm">النوع</th>
                        <th class="px-6 py-4 text-right text-sm">الموقع</th>
                        <th class="px-6 py-4 text-right text-sm">الحالة</th>
                        <th class="px-6 py-4 text-center text-sm">الإجراءات</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($sites as $site)
                    <tr class="hover:bg-blue-50">
                        <td class="px-6 py-4">{{ $loop->iteration }}</td>
                        <td class="px-6 py-4 font-semibold">{{ $site->name }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-sm">{{ $site->type }}</span>
                        </td>
                        <td class="px-6 py-4">{{ $site->location ?? '-' }}</td>
                        <td class="px-6 py-4">
                            @if($site->is_active)
                            <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">نشط</span>
                            @else
                            <span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm">غير نشط</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center space-x-1">
                            <a href="{{ route('inventory.production-sites-or-lines.show', $site) }}" class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-sm"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('inventory.production-sites-or-lines.edit', $site) }}" class="px-2 py-1 bg-amber-100 text-amber-600 rounded text-sm"><i class="fas fa-edit"></i></a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-black">لا توجد مواقع</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection