@php
	$key = 'all';
@endphp

@extends('layout.default')
@include('layout.filter')

@section('styles')
<!--begin::Page Vendors Styles(used by this page)-->
<link href="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.css?v=7.0.8" rel="stylesheet" type="text/css" />
<style type="text/css">
	.no_wrap {
		white-space:nowrap;
	}	
</style>
<!--end::Page Vendors Styles-->
@endsection

@section('content')
@yield('filter_view')
<div class="card">
	<div class="card-body">
		@include('layout.notifications')
		<div class="text-right">
            <div class="dropdown dropdown-inline">
		        <a href="#" class="btn btn-primary btn-sm font-weight-bolder dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-file-export"></i> Download</a>
		        <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
		            <ul class="navi navi-hover">
		                <li class="navi-item">
		                    <a href="{{url('report/transaction/topping/export')}}" class="navi-link">
		                        <span class="navi-text">Tampilkan List</span>
		                    </a>
		                </li>
		                <li class="navi-item">
		                    <a href="{{url('report/transaction/topping/export?new=1')}}" class="navi-link">
		                        <span class="navi-text">Buat baru</span>
		                    </a>
		                </li>
		            </ul>
		        </div>
		    </div>
		</div>
        <!--begin: Datatable-->
        {{-- tgl, nama product, total terjual, nominal terjual, totol diskon --}}
		<table class="table table-bordered table-checkable" id="kt_datatable">
			<thead>
				<tr>
					<th>Tanggal</th>
					<th>Nama Topping</th>
					<th>Total Qty</th>
					<th>Total Penjualan</th>
					{{-- <th>Actions</th> --}}
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	<div class="form">
		
	</div>
</div>
@endsection

@section('scripts')
<!--begin::Page Vendors(used by this page)-->
<script src="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.js?v=7.0.8"></script>
<!--end::Page Vendors-->

@yield('filter_script')
{{-- Filter rentang tanggal, product, variant, jumlah terjual, nominal terjual, brand, category --}}
<script>
	rules={
		all_transaction:{
			display:'Semua Transaksi',
			operator:[],
			opsi:[]
		},
		id_product_modifier:{
			display:'Topping',
			operator:[],
			opsi:{!!json_encode(array_map( function ($modifier) {
				return [$modifier['id_product_modifier'],$modifier['text']]; 
			},$modifiers ?? []))!!}
		},
		total_qty:{
			display:'Total Qty',
			operator:[
				['=','='],
				['<','<'],
				['>','>'],
				['<=','<='],
				['>=','>=']
			],
			opsi:[],
			type:'number',
			prepend_text:'Qty'
		},
		total_nominal:{
			display:'Total Penjualan',
			operator:[
				['=','='],
				['<','<'],
				['>','>'],
				['<=','<='],
				['>=','>=']
			],
			opsi:[],
			type:'number',
			prepend_text:'Rp'
		},
	};

	var table;
	$(document).ready(function() {
		// library initialization
		table = $('#kt_datatable').DataTable({
			serverSide: true,
			ajax: {
				url : "{{url('report/transaction/topping')}}",
				type: 'GET',
				data: function (data) {
					const info = $('#kt_datatable').DataTable().page.info();
					data.page = (info.start / info.length) + 1;
				},
				dataSrc: 'data'
			},
            fnDrawCallback: function( oSettings ) {
                $('#list-filter-result-counter').text(oSettings.jqXHR.responseJSON.recordsTotal);
            },
			columns: [
				{
					data: 'trx_date',
					render: function(date) {
						const datex = new Date(date);
						return datex.toLocaleString('id-ID',{ year: 'numeric', month: 'long', day: 'numeric'/*, hour: '2-digit', minute: '2-digit' */});
					}
				},
				{data: 'text'},
				{
					data: 'total_qty',
					render: function(value) {
						return new Intl.NumberFormat().format(value)
					}
				},
				{
					data: 'total_nominal',
					render: function (value) {
						return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(value)
					}
				},
				// {
				// 	data: 'id_report_trx_menu',
				// 	render: function (value) {
				// 		return new Intl.NumberFormat().format(value)
				// 	}
				// },
			],
			createdRow: function( row, data, dataIndex ) {
			    $(row).data('id', data.product_modifier_id);
			},
			searching: false,
			responsive: false,
			scrollY: '50vh',
            scrollX: true,
            scrollCollapse: true,
            processing: true,
            language: {
			    decimal:        "",
			    emptyTable:     "Data Tidak Tersedia",
			    info:           "Menampilkan _START_-_END_ dari _TOTAL_ data",
			    infoEmpty:      "Menampilkan 0-0 dari 0 data",
			    infoFiltered:   "(Menyaring dari _MAX_ data)",
			    infoPostFix:    "",
			    thousands:      ",",
			    lengthMenu:     "Tampilan _MENU_ data",
			    loadingRecords: "Memuat...",
			    search:         "Cari:",
			    zeroRecords:    "Data Tidak Tersedia",
			    aria: {
			        sortAscending:  ": activate to sort column ascending",
			        sortDescending: ": activate to sort column descending"
			    }
			},
		});

		table.on('draw', function() {
			$('[data-switch=true]').bootstrapSwitch();
			// format price form
	        $('.input-price').inputmask('currency',{
	            removeMaskOnSubmit: true,
	            min:0,
	            prefix: "Rp",
	            autoGroup: true,
	            radixPoint: ",",
	            groupSeparator: ".",
	            rightAlign: false,
	            digits: 0
	        });
		})

		$('#transaction_date_loe').attr('type', 'text');
        $('#transaction_date_loe').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd/MM/yyyy',
            endDate: new Date('{{date('Y-m-d', strtotime('-1 day'))}}'),
            orientation: "bottom"
        });
		$('#transaction_date_boe').attr('type', 'text');
        $('#transaction_date_boe').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd/MM/yyyy',
            endDate: new Date('{{date('Y-m-d', strtotime('-1 day'))}}'),
            orientation: "bottom"
        });
	});

</script>

@endsection