@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>التصنيفات</h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
            <i class="fas fa-plus"></i> إضافة تصنيف
        </button>
    </div>
    
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-6">
                    <h5 class="card-title">قائمة التصنيفات</h5>
                </div>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="categorySearch" 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="categoriesTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الصورة</th>
                            <th>الاسم</th>
                            <th>الوصف</th>
                            <th>عدد المنتجات</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($categories as $category)
                            <tr>
                                <td>{{ $category->id }}</td>
                                <td>
                                    @if($category->image)
                                        <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->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-folder text-muted"></i>
                                        </div>
                                    @endif
                                </td>
                                <td>{{ $category->name }}</td>
                                <td>{{ Str::limit($category->description, 50) }}</td>
                                <td>{{ $category->products_count }}</td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-info view-category" data-id="{{ $category->id }}">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-primary edit-category" data-id="{{ $category->id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger delete-category" data-id="{{ $category->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <div class="mt-4">
                {{ $categories->links() }}
            </div>
        </div>
    </div>
</div>

<!-- Create Category Modal -->
<div class="modal fade" id="createCategoryModal" tabindex="-1" aria-labelledby="createCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createCategoryModalLabel">إضافة تصنيف جديد</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('categories.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">اسم التصنيف <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">الوصف</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image" class="form-label">الصورة</label>
                        <input type="file" class="form-control" id="image" name="image" accept="image/*">
                        <small class="form-text text-muted">اختياري: يمكنك رفع صورة للتصنيف</small>
                    </div>
                    <div class="mb-3">
                        <input type="hidden" name="is_active" value="0">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="create_is_active" name="is_active" value="1" checked>
                            <label class="form-check-label" for="create_is_active">مُفعل</label>
                        </div>
                        <small class="form-text text-muted">التصنيفات المُفعلة فقط تظهر في نموذج إضافة المنتج</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCategoryModalLabel">تعديل التصنيف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editCategoryForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">اسم التصنيف <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="edit_description" class="form-label">الوصف</label>
                        <textarea class="form-control" id="edit_description" name="description" rows="3"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="edit_image" class="form-label">الصورة</label>
                        <input type="file" class="form-control" id="edit_image" name="image" accept="image/*">
                        <small class="form-text text-muted">اختياري: اترك فارغاً للاحتفاظ بالصورة الحالية</small>
                    </div>
                    
                    <div class="mb-3" id="current_image_container">
                        <label class="form-label">الصورة الحالية:</label>
                        <div id="current_image"></div>
                    </div>
                    <div class="mb-3">
                        <input type="hidden" name="is_active" value="0">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="edit_is_active" name="is_active" value="1">
                            <label class="form-check-label" for="edit_is_active">مُفعل</label>
                        </div>
                        <small class="form-text text-muted">التصنيفات المُفعلة فقط تظهر في نموذج إضافة المنتج</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Category Modal -->
<div class="modal fade" id="viewCategoryModal" tabindex="-1" aria-labelledby="viewCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewCategoryModalLabel">تفاصيل التصنيف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3" id="view_image_container">
                    <img id="view_image" src="" alt="صورة التصنيف" class="img-fluid mb-3" style="max-height: 200px;">
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">الاسم:</label>
                    <p id="view_name"></p>
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">الوصف:</label>
                    <p id="view_description"></p>
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">عدد المنتجات:</label>
                    <p id="view_products_count"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                <button type="button" class="btn btn-primary" id="view_products_btn">عرض المنتجات</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteCategoryModalLabel">تأكيد الحذف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>هل أنت متأكد من حذف هذا التصنيف؟</p>
                <p class="text-danger" id="delete_warning"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <form id="deleteCategoryForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">تأكيد الحذف</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Search functionality
        $("#categorySearch").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#categoriesTable tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
        
        // View category details
        $('.view-category').click(function() {
            const categoryId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/categories') }}/${categoryId}`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#view_name').text(response.name);
                    $('#view_description').text(response.description || 'لا يوجد وصف');
                    $('#view_products_count').text(response.products_count);
                    
                    if (response.image) {
                        $('#view_image').attr('src', `/storage/${response.image}`);
                        $('#view_image_container').show();
                    } else {
                        $('#view_image_container').hide();
                    }
                    
                    $('#view_products_btn').data('id', categoryId);
                    $('#viewCategoryModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching category details:', error);
                    alert('حدث خطأ أثناء جلب بيانات التصنيف');
                }
            });
        });
        
        // View category products
        $('#view_products_btn').click(function() {
            const categoryId = $(this).data('id');
            window.location.href = `{{ url('/products') }}?category_id=${categoryId}`;
        });
        
        // Edit category
        $('.edit-category').click(function() {
            const categoryId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/categories') }}/${categoryId}/edit`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#edit_name').val(response.name);
                    $('#edit_description').val(response.description);
                    $('#edit_is_active').prop('checked', !!response.is_active);
                    
                    if (response.image) {
                        $('#current_image').html(`<img src="/storage/${response.image}" alt="صورة التصنيف" class="img-thumbnail" style="max-height: 100px;">`);
                        $('#current_image_container').show();
                    } else {
                        $('#current_image_container').hide();
                    }
                    
                    $('#editCategoryForm').attr('action', `{{ url('/categories') }}/${categoryId}`);
                    $('#editCategoryModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching category details:', error);
                    alert('حدث خطأ أثناء جلب بيانات التصنيف');
                }
            });
        });
        
        // Delete category
        $('.delete-category').click(function() {
            const categoryId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/categories') }}/${categoryId}`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.products_count > 0) {
                        $('#delete_warning').text(`تحذير: هذا التصنيف يحتوي على ${response.products_count} منتج. حذف التصنيف سيؤثر على هذه المنتجات.`);
                    } else {
                        $('#delete_warning').text('');
                    }
                    
                    $('#deleteCategoryForm').attr('action', `{{ url('/categories') }}/${categoryId}`);
                    $('#deleteCategoryModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching category details:', error);
                    alert('حدث خطأ أثناء جلب بيانات التصنيف');
                }
            });
        });
    });
</script>
@endpush