@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>المنتجات</h1>
        <a href="{{ route('products.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> إضافة منتج
        </a>
    </div>
    
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-4">
                    <h5 class="card-title">قائمة المنتجات</h5>
                </div>
                <div class="col-md-4">
                    <select class="form-select" id="categoryFilter">
                        <option value="">جميع التصنيفات</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" id="productSearch" placeholder="بحث...">
                        <button class="btn btn-outline-secondary" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="productsTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الصورة</th>
                            <th>الاسم</th>
                            <th>التصنيف</th>
                            <th>السعر</th>
                            <th>المخزون</th>
                            <th>الطابعة</th>
                            <th>الحالة</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                            <tr>
                                <td>{{ $product->id }}</td>
                                <td>
                                    @if($product->image)
                                        <img src="{{ Storage::disk('public')->url($product->image) }}" alt="{{ $product->name }}" class="img-thumbnail" width="50">
                                    @else
                                        <div class="bg-light d-flex justify-content-center align-items-center" style="width: 50px; height: 50px;">
                                            <i class="fas fa-coffee text-muted"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->category->name }}</td>
                                <td>{{ number_format($product->price, 2) }}</td>
                                <td>
                                    @if($product->is_stock_tracked)
                                        <span class="badge bg-{{ $product->isLowStock() ? 'warning text-dark' : 'secondary' }}">
                                            {{ $product->stock_quantity }}
                                        </span>
                                        @if($product->isLowStock())
                                            <small class="text-danger d-block">منخفض (حد إعادة الطلب: {{ $product->reorder_level ?? 0 }})</small>
                                        @endif
                                    @else
                                        <span class="text-muted">غير متتبع</span>
                                    @endif
                                </td>
                                <td>{{ $product->printer ? $product->printer->name : 'غير محدد' }}</td>
                                <td>
                                    @if($product->is_active)
                                        <span class="badge bg-success">متاح</span>
                                    @else
                                        <span class="badge bg-danger">غير متاح</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <a href="{{ route('products.show', $product) }}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('products.edit', $product) }}{{ request()->getQueryString() ? '?' . request()->getQueryString() : '' }}" class="btn btn-sm btn-primary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger delete-product" data-id="{{ $product->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                    <form id="delete-form-{{ $product->id }}" action="{{ route('products.destroy', $product) }}" method="POST" class="d-none">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <div class="mt-4">
                {{ $products->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Search functionality
        $("#productSearch").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#productsTable tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
        
        // Category filter
        $("#categoryFilter").change(function() {
            const categoryId = $(this).val();
            if (categoryId) {
                window.location.href = `{{ url('/products') }}?category_id=${categoryId}`;
            } else {
                window.location.href = '{{ url('/products') }}';
            }
        });
        
        // Delete confirmation
        $('.delete-product').click(function() {
            const productId = $(this).data('id');
            
            if (confirm('هل أنت متأكد من حذف هذا المنتج؟')) {
                $(`#delete-form-${productId}`).submit();
            }
        });
    });
</script>
@endpush