

<?php $__env->startSection('title', 'Accounts'); ?>

<?php $__env->startPush('plugin-styles'); ?>
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/flatpickr/flatpickr.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('theme/vendors/sweetalert2/sweetalert2.min.css')); ?>">
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div class="accordion mb-3" id="accountFilterAccordion">
	<div class="accordion-item">
		<h2 class="accordion-header" id="accountFilterHeading">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accountFilterCollapse" aria-expanded="false" aria-controls="accountFilterCollapse">
				Filters
			</button>
		</h2>
		<div id="accountFilterCollapse" class="accordion-collapse collapse" aria-labelledby="accountFilterHeading" data-bs-parent="#accountFilterAccordion">
			<div class="accordion-body">
				<div class="row g-3 align-items-end">
					<div class="col-md-3">
						<label class="form-label">Account Name</label>
						<input type="text" id="filterName" class="form-control" placeholder="Enter account name...">
					</div>
					<div class="col-md-3">
						<label class="form-label">Type</label>
						<select id="filterType" class="form-select">
							<option value="">All Types</option>
							<option value="employee">Employee</option>
							<option value="supplier">Supplier</option>
							<option value="customer">Customer</option>
						</select>
					</div>
					<div class="col-md-3">
						<label class="form-label">Balance Range</label>
						<select id="filterBalanceRange" class="form-select">
							<option value="">All Balances</option>
							<option value="positive">Positive Balance</option>
							<option value="negative">Negative Balance</option>
							<option value="zero">Zero Balance</option>
						</select>
					</div>
					<div class="col-md-3">
						<label class="form-label">Date Range</label>
						<input id="filterDateRange" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD">
					</div>
				</div>
				<div class="mt-3 d-flex gap-2">
                    <button type="button" class="btn btn-primary" id="btnApplyFilters">
                        <i class="fas fa-search me-2"></i>
                        Apply Filters
                    </button>
                    <button type="button" class="btn btn-outline-secondary" id="btnResetFilters">
                        <i class="fas fa-times me-2"></i>
                        Clear Filters
                    </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">
                        <h6 class="card-title mb-0">Accounts</h6>
                        <a href="<?php echo e(route('accounts.create')); ?>" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Add New Account
                        </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 class="table table-hover" id="accountsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Account Name</th>
                                    <th>Type</th>
                                    <th>Total Debits</th>
                                    <th>Total Credits</th>
                                    <th>Balance</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 src="<?php echo e(asset('theme/vendors/sweetalert2/sweetalert2.min.js')); ?>"></script>
<script>
$(document).ready(function() {
    // Initialize date range picker
    flatpickr('#filterDateRange', { mode: 'range', dateFormat: 'Y-m-d' });

    var table = $('#accountsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '<?php echo e(route("accounts.index")); ?>',
            data: function(d) {
                d.name = $('#filterName').val();
                // d.model_type = $('#filterModelType').val();
                d.type = $('#filterType').val();
                d.balance_range = $('#filterBalanceRange').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];
                }
            }
        },
        columns: [
            {
                data: 'name',
                name: 'name',
                render: function(data, type, row) {
                    return `<div>
                        <strong>${data}</strong>
                        ${row.chart_of_account_name ? `<br><span class="badge bg-info">${row.chart_of_account_name }</span>` : ''}
                    </div>`;
                }
            },
            {data: 'model_type', name: 'model_type'},
            {data: 'total_debits', name: 'total_debits'},
            {data: 'total_credits', name: 'total_credits'},
            {data: 'balance', name: 'balance'},
            {data: 'actions', name: 'actions', orderable: false, searchable: false}
        ],
        order: [[0, 'asc']],
        pageLength: 25
    });

    // Filter event handlers
    $('#btnApplyFilters, #filterType, #filterBalanceRange').on('click change', function(){
        table.draw();
    });

    $('#filterName').on('keyup', function(){
        table.draw();
    });

    $('#btnResetFilters').on('click', function(){
        $('#filterName').val('');
        // $('#filterModelType').val('');
        $('#filterType').val('');
        $('#filterBalanceRange').val('');
        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\accounts\index.blade.php ENDPATH**/ ?>