

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

<?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="transactionFilterAccordion">
	<div class="accordion-item">
		<h2 class="accordion-header" id="transactionFilterHeading">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transactionFilterCollapse" aria-expanded="false" aria-controls="transactionFilterCollapse">
				Filters
			</button>
		</h2>
		<div id="transactionFilterCollapse" class="accordion-collapse collapse" aria-labelledby="transactionFilterHeading" data-bs-parent="#transactionFilterAccordion">
			<div class="accordion-body">
				<div class="row g-3 align-items-end">
					<div class="col-md-3">
                        <div class="form-group m-0 p-0">
						<label class="form-label">Account</label>
                        </div>
						<select id="filterAccount" class="form-select" style="width: 100%;"></select>
					</div>
					<div class="col-md-3">
						<label class="form-label">Transaction Type</label>
						<select id="filterTransactionType" class="form-select">
							<option value="">All Types</option>
							<option value="debit">Debit</option>
							<option value="credit">Credit</option>
						</select>
					</div>
                    <div class="col-md-3">
						<label class="form-label">Account 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">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">Account Transactions</h6>
                        

                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover" id="accountTransactionsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Account</th>
                                    <th>Account Type</th>
                                    <th>Chart of Account</th>
                                    <th>Amount</th>
                                    <th>Type</th>
                                    <th>Reference</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 Select2 for account filter
    const accountSelect = $('#filterAccount');
    accountSelect.select2({
        theme: 'bootstrap-5',
        placeholder: 'Select Account',
        allowClear: true,
        ajax: {
            url: '<?php echo e(route('accounts.index')); ?>',
            dataType: 'json',
            delay: 250,
            data: params => ({
                q: params.term || '',
                search_accounts: true
            }),
            processResults: data => data,
            cache: true
        }
    });

    // Initialize Select2 for chart of account filter
    // const chartSelect = $('#filterChartOfAccount');
    // chartSelect.select2({
    //     theme: 'bootstrap-5',
    //     placeholder: 'Select Chart of Account',
    //     allowClear: true,
    //     ajax: {
    //         url: '<?php echo e(route('chart-of-accounts.index')); ?>',
    //         dataType: 'json',
    //         delay: 250,
    //         data: params => ({
    //             q: params.term || '',
    //             search_charts: true
    //         }),
    //         processResults: data => data,
    //         cache: true
    //     }
    // });

    // Initialize date range picker
    flatpickr('#filterDateRange', { mode: 'range', dateFormat: 'Y-m-d' });

    var table = $('#accountTransactionsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '<?php echo e(route("account-transactions.index")); ?>',
            data: function(d) {
                d.account_id = accountSelect.val();
                d.transaction_type = $('#filterTransactionType').val();
                // d.chart_of_account_id = chartSelect.val();
                d.type = $('#filterType').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: 'transaction_number',     name: 'transaction_number' },
            { data: 'created_at',             name: 'created_at' },
            { data: 'account_name',           name: 'account_name' },
            { data: 'model_name',             name: 'model_name' },
            { data: 'chart_of_account_name',  name: 'chart_of_account_name',  searchable: false },
            { data: 'amount',                 name: 'amount',                 searchable: false },
            { data: 'transaction_type',       name: 'transaction_type',       searchable: false, orderable: false },
            { data: 'reference_name',         name: 'reference_name',         searchable: false, orderable: false },
        ],
        order: [[0, 'desc']],
        pageLength: 25
    });

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

    accountSelect.on('change', function(){
        table.draw();
    });

    // chartSelect.on('change', function(){
    //     table.draw();
    // });

    $('#btnResetFilters').on('click', function(){
        accountSelect.val(null).trigger('change');
        // chartSelect.val(null).trigger('change');
        $('#filterTransactionType').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\account_transactions\index.blade.php ENDPATH**/ ?>