<!DOCTYPE html>
<html lang="en">
<?php echo $__env->make('includes.head', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<body id="kt_body" class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled toolbar-fixed aside-enabled aside-fixed">
    <div class="d-flex flex-column flex-root">
        <div class="page d-flex flex-row flex-column-fluid">
            <?php echo $__env->make('includes.side-nav', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            <div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
                <?php echo $__env->make('includes.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                    <!-- Toolbar -->
                    <div class="toolbar" id="kt_toolbar">
                        <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                            <div class="page-title">
                                <h1 class="text-dark fw-bolder fs-3">Illustration Category Management</h1>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#categoryModal" onclick="resetCategoryForm()">Add Category</button>
                        </div>
                    </div>

                    <div class="post d-flex flex-column-fluid" id="kt_post">
                        <div id="kt_content_container" class="container-xxl">
                            <div class="card">
                                <?php echo $__env->make('includes.messages', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

                                <!-- Filter Form -->
                                <div class="card-body pb-0">
                                    <form method="GET" action="<?php echo e(route('illustrationCategory.list')); ?>" class="row g-3 align-items-end">
                                        <div class="col-md-6">
                                            <label class="form-label">Search by Name</label>
                                            <input type="text" name="search" class="form-control form-control-solid" placeholder="Category name..." value="<?php echo e(request('search')); ?>">
                                        </div>
                                        <div class="col-md-3">
                                            <button type="submit" class="btn btn-primary w-100">Filter</button>
                                        </div>
                                        <div class="col-md-3">
                                            <a href="<?php echo e(route('illustrationCategory.list')); ?>" class="btn btn-secondary w-100">Reset</a>
                                        </div>
                                    </form>
                                </div>

                                <!-- Table -->
                                <div class="card-body pt-6">
                                    <div class="table-responsive">
                                        <table class="table align-middle table-row-dashed fs-6 gy-5">
                                            <thead>
                                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase">
                                                    <th>ID</th>
                                                    <th>Image</th>
                                                    <th>Name</th>
                                                    <th>Slug</th>
                                                    <th>Description</th>
                                                    <th>Home Show</th>
                                                    <th>Status</th>
                                                    <th class="text-end">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody class="fw-bold text-gray-600">
                                                <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                                <tr id="cat-row-<?php echo e($cat->id); ?>">
                                                    <td><?php echo e($cat->id); ?></td>
                                                    <td>
                                                        <?php if($cat->image): ?>
                                                            <img src="<?php echo e($baseImgPath); ?><?php echo e($cat->image); ?>" style="width: 50px; height: 50px; object-fit: cover;" class="rounded">
                                                        <?php else: ?>
                                                            <span class="badge badge-light">No Image</span>
                                                        <?php endif; ?>
                                                    </td>
                                                    <td><?php echo e($cat->name_en); ?></td>
                                                    <td><?php echo e($cat->slug); ?></td>
                                                    <td><?php echo e(Str::limit($cat->description, 50)); ?></td>
                                                    <td>
                                                        <?php if($cat->is_show_in_home): ?>
                                                            <span class="badge badge-success">Yes</span>
                                                        <?php else: ?>
                                                            <span class="badge badge-secondary">No</span>
                                                        <?php endif; ?>
                                                    </td>
                                                    <td>
                                                        <span class="badge <?php echo e($cat->status ? 'badge-success' : 'badge-danger'); ?>">
                                                            <?php echo e($cat->status ? 'Active' : 'Inactive'); ?>

                                                        </span>
                                                    </td>
                                                    <td class="text-end">
                                                        <button class="btn btn-sm btn-primary edit-cat" data-id="<?php echo e($cat->id); ?>">
                                                            <i class="fas fa-edit"></i> Edit
                                                        </button>
                                                        <button class="btn btn-sm btn-danger delete-cat" data-id="<?php echo e($cat->id); ?>">
                                                            <i class="fas fa-trash"></i> Delete
                                                        </button>
                                                    </td>
                                                </tr>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                                <tr>
                                                    <td colspan="8" class="text-center text-muted">No categories found.</td>
                                                </tr>
                                                <?php endif; ?>
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Pagination -->
                                    <div class="mt-3">
                                        <?php if($categories->hasPages()): ?>
                                            <?php echo e($categories->appends(request()->query())->links('pagination::bootstrap-4')); ?>

                                        <?php else: ?>
                                            <div class="text-muted text-center py-2">
                                                Showing all <?php echo e($categories->total()); ?> records
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php echo $__env->make('includes.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </div>
        </div>
    </div>
    <?php echo $__env->make('includes.scripts', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    <!-- Add/Edit Modal -->
    <div class="modal fade" id="categoryModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="categoryForm">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" name="id" id="catId">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label required">Category Name (English)</label>
                                <input type="text" name="name_en" id="name_en" class="form-control" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Description</label>
                                <textarea name="description" id="description" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Category Image</label>
                                <input type="file" name="image" id="image" class="form-control" accept="image/jpeg,image/png,image/jpg,image/gif,image/webp">
                                <div id="imagePreview" class="mt-2"></div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch form-check-custom form-check-solid">
                                    <input type="checkbox" name="is_show_in_home" id="is_show_in_home" class="form-check-input" value="1">
                                    <label class="form-check-label" for="is_show_in_home">
                                        Show on Home Page
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <select name="status" id="status" class="form-select">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function resetCategoryForm() {
            $('#categoryForm')[0].reset();
            $('#catId').val('');
            $('#imagePreview').html('');
            $('#is_show_in_home').prop('checked', false);
            $('#modalTitle').text('Add Category');
        }

        // Preview image
        $('#image').on('change', function() {
            let file = this.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').html('<img src="'+e.target.result+'" style="max-width:100px;" class="img-thumbnail">');
                };
                reader.readAsDataURL(file);
            } else {
                $('#imagePreview').html('');
            }
        });

        // Save Category
        $('#saveBtn').click(function() {
            let formData = new FormData($('#categoryForm')[0]);
            let id = $('#catId').val();
            let url = id ? "<?php echo e(route('illustrationCategory.update', '')); ?>/" + id : "<?php echo e(route('illustrationCategory.store')); ?>";
            if (id) formData.append('_method', 'PUT');

            // Ensure checkbox value is sent correctly
            if (!$('#is_show_in_home').is(':checked')) {
                formData.set('is_show_in_home', 0);
            }

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    if (res.success) location.reload();
                    else alert('Error saving category');
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    if (errors) alert(Object.values(errors).flat().join('\n'));
                    else alert('Something went wrong');
                }
            });
        });

        // Edit Category
        $('.edit-cat').click(function() {
            let id = $(this).data('id');
            $.get("<?php echo e(route('illustrationCategory.edit', '')); ?>/" + id, function(res) {
                if (res.success) {
                    let c = res.category;
                    $('#catId').val(c.id);
                    $('#name_en').val(c.name_en);
                    $('#description').val(c.description);
                    $('#status').val(c.status);
                    $('#is_show_in_home').prop('checked', c.is_show_in_home == 1);
                    if (c.image_url) $('#imagePreview').html('<img src="'+c.image_url+'" style="max-width:100px;" class="img-thumbnail">');
                    else $('#imagePreview').html('');
                    $('#modalTitle').text('Edit Category');
                    $('#categoryModal').modal('show');
                } else {
                    alert('Category not found');
                }
            });
        });

        // Delete Category
        $('.delete-cat').click(function() {
            if (confirm('Delete this category?')) {
                let id = $(this).data('id');
                $.ajax({
                    url: "<?php echo e(route('illustrationCategory.delete', '')); ?>/" + id,
                    type: 'DELETE',
                    data: { _token: '<?php echo e(csrf_token()); ?>' },
                    success: function(res) {
                        if (res.success) $('#cat-row-'+id).remove();
                        else alert('Delete failed');
                    }
                });
            }
        });
    </script>
</body>
</html>
<?php /**PATH D:\xampp\htdocs\creativeValley9\resources\views/Admin/IllustrationCategory/list.blade.php ENDPATH**/ ?>