
<?php $__env->startSection('title', 'Item Categories (Chart of Accounts)'); ?>
<?php $__env->startPush('plugin-styles'); ?>
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.css')); ?>">
<style>
.select2-container--bootstrap-5 {
    top: 73%;
    left: 22%;
    position: absolute;
}
    </style>
<?php $__env->stopPush(); ?>
<?php $__env->startSection('content'); ?>
<div class="accordion mb-3" id="catFilterAccordion">
	<div class="accordion-item">
		<h2 class="accordion-header" id="catFilterHeading">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#catFilterCollapse" aria-expanded="false" aria-controls="catFilterCollapse">
				Filters
			</button>
		</h2>
		<div id="catFilterCollapse" class="accordion-collapse collapse" aria-labelledby="catFilterHeading" data-bs-parent="#catFilterAccordion">
			<div class="accordion-body">
				<div class="row g-3">
					<div class="col-md-6">
						<label class="form-label">Parent Category</label>
                        <select id="filterParent" class="form-select">
                            <option value="">All Types</option>
                            <option value="52">Raw Material</option>
                            <option value="53">Finished Product</option>
                        </select>

					</div>
					
				</div>
				<div class="mt-3">
                    <button type="button" class="btn btn-primary" id="btnApplyFilters">
                        <i class="fas fa-search me-2"></i>
                        Apply
                    </button>
                    <button type="button" class="btn btn-outline-secondary" id="btnResetFilters">
                        <i class="fas fa-times me-2"></i>
                        Clear
                    </button>
                    </div>
			</div>
		</div>
	</div>
</div>
<div class="card">
	<div class="card-body">
		<div class="d-flex justify-content-between align-items-center mb-3">
			<div>
				<h6 class="card-title mb-0">Item Categories</h6>
				
			</div>
			<a href="<?php echo e(route('item-categories.create')); ?>" class="btn btn-primary">
				<i class="fas fa-plus me-2"></i>
				Add Category
			</a>
		</div>
		<?php if(session('success')): ?>
			<div class="alert alert-success"><?php echo e(session('success')); ?></div>
		<?php endif; ?>
		<?php if($errors->any()): ?>
			<div class="alert alert-danger"><?php echo e($errors->first()); ?></div>
		<?php endif; ?>
		<div class="table-responsive">
			<table id="item-categories-table" class="table table-hover">
				<thead class="table-light">
					<tr>
						<th>ID</th>
						<th>Code</th>
						<th>Name</th>
						<th>Hierarchy Path</th>
						<th>Parent</th>
						<th>Status</th>
						<th>Created</th>
						<th>Actions</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('plugin-scripts'); ?>
<script src="<?php echo e(asset('theme/vendors/jquery/jquery.min.js')); ?>"></script>
<script src="<?php echo e(asset('theme/vendors/datatables.net/dataTables.js')); ?>"></script>
<script src="<?php echo e(asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.js')); ?>"></script>
<script src="<?php echo e(asset('theme/vendors/select2/select2.min.js')); ?>"></script>
<script src="<?php echo e(asset('theme/vendors/flatpickr/flatpickr.min.js')); ?>"></script>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const parentSelect = $('#filterParent');
		// parentSelect.select2({ theme: 'bootstrap-5', placeholder: 'Parent', allowClear: true, ajax: {
		// 	url: '<?php echo e(route('api.categories')); ?>', dataType: 'json', delay: 250,
		// 	data: params => ({ q: params.term || '' }), processResults: data => data, cache: true
		// }});
		// flatpickr('#filterDateRange', { mode: 'range', dateFormat: 'Y-m-d' });

		const table = new DataTable('#item-categories-table', {
			processing: true,
			serverSide: true,
			ajax: {
				url: 'item-categories',
				data: function(d){
					d.parent_id = parentSelect.val() || '';
					// const dr = document.getElementById('filterDateRange').value;
					// if (dr && dr.includes(' to ')) { const parts = dr.split(' to '); d.date_from = parts[0]; d.date_to = parts[1]; }
				}
			},
			order: [[0, 'desc']],
			columns: [
				{ data: 'id', name: 'id' },
				{ data: 'code', name: 'code' },
				{ data: 'name', name: 'name' },
				{ data: 'hierarchy_path', name: 'hierarchy_path', orderable: false, searchable: false },
				{ data: 'parent_name', name: 'parent.name', orderable: false, searchable: false },
				{ data: 'status_badge', name: 'is_active', orderable: false, searchable: false },
				{ data: 'created_at', name: 'created_at' },
				{ data: 'actions', name: 'actions', orderable: false, searchable: false },
			],
		});

		$('#btnApplyFilters').on('click', function(){ table.draw(); });
		// parentSelect.on('change', function(){ table.draw(); });
		$('#btnResetFilters').on('click', function(){
			parentSelect.val(null).trigger('change');
			document.getElementById('filterDateRange').value = '';
			table.draw();
		});
	});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\habibcables-ERP\resources\views\item_categories\index.blade.php ENDPATH**/ ?>