<!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">
                    <div class="toolbar" id="kt_toolbar">
                        <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                            <div class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                                <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">
                                    Painting Category Management
                                    <span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
                                    <small class="text-muted fs-7 fw-bold my-1 ms-1">Categories</small>
                                </h1>
                            </div>
                            <div class="d-flex align-items-center py-1">
                                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#categoryModal" onclick="resetModalForm()">Add Category</button>
                            </div>
                        </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(); ?>
                                <div class="card-header border-0 pt-6">
                                    <div class="card-title">
                                        <form method="GET" action="<?php echo e(route('PaintingCategory.list')); ?>" class="d-flex align-items-center">
                                            <div class="d-flex align-items-center position-relative me-5">
                                                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                                        <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
                                                    </svg>
                                                </span>
                                                <input type="text" name="search" value="<?php echo e(request('search')); ?>" class="form-control form-control-solid w-250px ps-15" placeholder="Search by name..." />
                                            </div>
                                            <button type="submit" class="btn btn-primary me-2">Filter</button>
                                            <a href="<?php echo e(route('PaintingCategory.list')); ?>" class="btn btn-secondary">Reset</a>
                                        </form>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <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 (English)</th>
                                                    <th>Slug</th>
                                                    <th>Home Show</th>
                                                    <th>Status</th>
                                                    <th class="text-end">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody class="fw-bold text-gray-600">
                                                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <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 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-btn" data-id="<?php echo e($cat->id); ?>">
                                                            <i class="fas fa-edit"></i> Edit
                                                        </button>
                                                        <button class="btn btn-sm btn-danger delete-btn" data-id="<?php echo e($cat->id); ?>">
                                                            <i class="fas fa-trash"></i> Delete
                                                        </button>
                                                    </td>
                                                </tr>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </tbody>
                                        </table>
                                    </div>
                                    <?php echo e($categories->links('pagination::bootstrap-4')); ?>

                                </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(); ?>

    <!-- Modal for Add/Edit -->
    <div class="modal fade" id="categoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <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" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="categoryForm" enctype="multipart/form-data">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" name="id" id="catId">
                        <div class="mb-3">
                            <label class="form-label required">Category Name (English)</label>
                            <input type="text" name="name_en" id="name_en" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Slug (auto-generated)</label>
                            <input type="text" id="slug_preview" class="form-control" readonly disabled>
                        </div>
                        <div class="mb-3">
                            <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 class="mb-3">
                            <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="mb-3">
                            <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>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function resetModalForm() {
            $('#categoryForm')[0].reset();
            $('#catId').val('');
            $('#slug_preview').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('');
            }
        });

        $(document).ready(function() {
            // Auto-generate slug preview
            $('#name_en').on('keyup', function() {
                let slug = $(this).val().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
                $('#slug_preview').val(slug);
            });

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

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        if (res.success) {
                            $('#categoryModal').modal('hide');
                            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 button click
            $('.edit-btn').click(function() {
                let id = $(this).data('id');
                $.get("<?php echo e(route('PaintingCategory.edit', '')); ?>/" + id, function(res) {
                    if (res.success) {
                        let c = res.category;
                        $('#catId').val(c.id);
                        $('#name_en').val(c.name_en);
                        $('#status').val(c.status);
                        $('#slug_preview').val(c.slug);
                        $('#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 button click
            $('.delete-btn').click(function() {
                if (confirm('Are you sure you want to delete this category?')) {
                    let id = $(this).data('id');
                    $.ajax({
                        url: "<?php echo e(route('PaintingCategory.delete', '')); ?>/" + id,
                        type: 'DELETE',
                        data: { _token: '<?php echo e(csrf_token()); ?>' },
                        success: function(res) {
                            if (res.success) {
                                $('#cat-row-' + id).remove();
                                if ($('tbody tr').length === 0) location.reload();
                            } else {
                                alert('Delete failed');
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>
<?php /**PATH D:\xampp\htdocs\creativeValley9\resources\views/Admin/PaintingCategory/list.blade.php ENDPATH**/ ?>