<script src="<?php echo base_url() ?>assets/admin/plugins/jquery/jquery.min.js"></script>
<div class="row">
	<div class="col-md-12">
		<div class="card">
			<div class="card-header">
				<h3 class="card-title">Data Transaksi</h3>
			</div>
			<div class="card-body">
				<!-- Filter Tanggal -->
				<div class="form-group row">
					<label for="tanggal_awal" class="col-sm-1 col-form-label">Periode</label>
					<div class="col-sm-3">
						<input type="date" class="form-control" id="tanggal_awal">
					</div>
					<label for="tanggal_akhir" class="col-sm-1 col-form-label">s/d</label>
					<div class="col-sm-3">
						<input type="date" class="form-control" id="tanggal_akhir">
					</div>
				
					<label for="operator" class="col-sm-1 col-form-label">Petugas</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" id="operator">
					</div>
				</div>
                <div class="form-group row">
                <button id="cetak" class="btn btn-success mr-2">
                    <i class="fas fa-print"></i> Cetak
                </button>

                <button id="resetFilterBtn" class="btn btn-danger">
                    <i class="fas fa-sync-alt"></i> Reset Filter
                </button>

                </div>
				<!-- Tabel Data Transaksi -->
				<table class="table table-bordered table-striped table-sm" id="datatransaksi">
					<thead>
						<tr>
							<th>NO.</th>
							<th>TGL. TRANS</th>
							<th>NO. TRANS</th>
							<th>NO. PENDAFTARAN</th>
							<th>NAMA LENGKAP</th>
							<th>BIAYA</th>
							<th>DISKON</th>
							<th>TOTAL</th>
							<th>CASH</th>
							<th>KEMBALI</th>						
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<script>
    
    $(document).ready(function() {
    // Inisialisasi DataTables

    var table = $('#datatransaksi').DataTable({
    "responsive": true,
				"lengthChange": true,
				"autoWidth": false,
				"paging": true,

				"dom": '<"top row"<"col-md-4" l  ><"col-md-4" B  ><"col-md-4" and f>>rt<"bottom row"<"col-md-6" i> <"col-md-6" p>>',
				"buttons": [ "excel", "print"],
    "ajax": {
        url: "<?php echo base_url() ?>laporanbiayaformulir/getdata",
        type: 'GET',
        data: function (d) {
            d.tanggal_awal = $('#tanggal_awal').val();
            d.tanggal_akhir = $('#tanggal_akhir').val();
            d.operator = $('#operator').val();
        }
    }
});


    // Tangani perubahan pada filter tanggal dan operator
    $('#tanggal_awal, #tanggal_akhir, #operator').change(function () {
        table.ajax.reload(); // Perbarui tabel setelah perubahan nilai filter
    });

  

    $('#resetFilterBtn').click(function () {
        // Reset nilai input tanggal dan operator
        $('#tanggal_awal').val('');
        $('#tanggal_akhir').val('');
        $('#operator').val('');

        // Perbarui tabel setelah mereset filter
        table.ajax.reload();
    });

    $('#cetak').click(function () {
        // Reset nilai input tanggal dan operator
        var awal =  $('#tanggal_awal').val();
        var akhir =$ ('#tanggal_akhir').val();
        var operator =  $('#operator').val();

        var url = '<?php echo base_url('laporanbiayaformulir/print_pdf'); ?>?start_date=' + awal + '&end_date=' + akhir + '&operator=' + operator; // URL untuk cetak PDF
        window.open(url, '_blank'); // Membuka PDF dalam tab baru
    });
    // Tangani perubahan pada filter tanggal dan operator
   
});

</script>