@extends(\Auth::user()->role != 40 ? 'layout' : 'layoutfrontdesk')

@section('title', 'POS Transactions')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</style>
@endsection

@section('content')

	<!-- Page header -->
        <div class="page-header {{in_array(\Auth::user()->role, [1,2]) ? 'page-header-light' : ''}}">
            <div class="page-header-content header-elements-md-inline">
                <div class="page-title d-flex">
                    <h4>  <span class="font-weight-semibold">Transactions Data Shop</span></h4>
                    <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
                </div>
            </div>
        </div>
	<!-- /page header -->

	<!-- Content area -->
        <div class="content">

            <!-- Hover rows -->
            <div class="card">

                <div class="card-header">

                    <div class="form-group row">
                        <label class="col-form-label col-sm-1">Resto</label>
                        <div class="col-sm-3">
                            <select id="shop_select" name="shop_select" class="form-control form-control-select2 border-1 border-teal" >
                                <option value="">-- Select Resto/Shop --</option>
                                @foreach( $shops as $key => $val)
                                    <option value="{{$val->id}}" data-in_pos="{{$val->in_pos ?? 'tidak ada'}}" data-in_table="{{$val->in_table ?? 'tidak ada'}}" {{\Request::get('s') ? (\Request::get('s') == $val->id ? 'selected' : '') : ''}}>{{$val->nama}}</option>
                                @endforeach
                            </select>
                        </div>

                        <span><h6><input type="checkbox" name="closed_bill" id="closed_bill" value="1">&nbsp;<b>Closed Bill</b></h6></span>
                    </div>

                    <div class="form-group row" id="container_tanggal">
                        <label class="col-form-label col-sm-1">Date</label>

                        <div class="col-sm-2">
                            <input type="text" name="tanggal"
                            class="form-control"
                            id="filter_tanggal"
                            value="{{\Request::get('t') ? \Request::get('t') : getSystemDate() }}"
                            >
                        </div>
                    </div>

                </div>

                <table class="table datatable-basic table-hover">
                    <thead>
                        <tr>
                            <th class="d-none">transaction date</th>
                            <th class="d-none">created at</th>
                            <th style="width: 90px">#</th>
                            <th style="width: 150px">Date</th>
                            <th style="width: 100px">Bill Number</th>
                            <th style="width: 120px">Table Number</th>
                            <th>Customer Name</th>
                            <th>Resto/Shop</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
            <!-- /hover rows -->

        </div>
	<!-- /content area -->

    <!-- Danger modal -->
        <div id="modal_theme_danger" class="modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger" align="center">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <form action="" method="post" id="updateStatusPosform">
                        @csrf
                        @method('PATCH')

                        <input type="hidden" name="shop_id" id="shop_id">
                        <input type="hidden" name="tanggal" id="tanggal">
                        <input type="hidden" name="status" id="status_pos">

                        <div class="modal-body">
                            {{-- <h2> Hapus Data? </h2> --}}

                            <h3 class="text-center">Insert username and password from supervisor!</h3>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2">Username</label>
                                <div class="col-lg-10">
                                    <input type="text" name="username" class="form-control" placeholder="Username" required autocomplete="off" value="">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2">Password</label>
                                <div class="col-lg-10">
                                    <input type="password" name="password" class="form-control" placeholder="Password" required autocomplete="off" value="">
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn bg-danger">Void</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
	<!-- /default modal -->

    <!--MODAL-->
        <div id="detail" class="container_modal modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-info" align="center">
                        <h6 class="modal-title"><i class="fas fa-user mr-1"></i>Detail</h6>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <div class="modal-body">
                        <div class="container mb-1 mt-1 border-bottom p-1" style="font-weight:bold;">
                            <div class="row">
                                <div class="col-sm-4 " style="text-align: center;">
                                    Item
                                </div>
                                <div class="col-sm-4" style="text-align: center;">
                                    Qty
                                </div>
                                <div class="col-sm-4" style="text-align: center;">
                                    Price
                                </div>
                            </div>
                        </div>

                        <fieldset id="fieldset_cart" style="height: 250px; overflow:auto;">
                            <div class="col-md-12">
                                <div class="alert alert-danger text-center my-2" role="alert">
                                    No Order!
                                </div>
                            </div>
                        </fieldset>

                        <div id="total_discount" style="display: none !important;"  class="list-group-item list-group-item-action d-flex bd-highlight">
                            <span class="flex-fill col-sm-6">Total Discount :</span>
                            <span class="html_total_disc flex-fill col-sm-6" style="text-align:right;">Rp. 0</span>
                        </div>

                        <div id="table_adds_price" class="ml-1 py-2 border-top border-bottom">
                            <div class="container">
                                <div class="row mt-1" id="total_harga">
                                    <div class="col-lg-12 text-center font-weight-bold" style="font-size: 20px">
                                        Total
                                    </div>
                                </div>

                                <div class="row mt-1" id="complimentary_show" style="display: none">
                                    <div class="col-lg-12 text-center font-weight-bold">
                                        -------------------- Complimentary --------------------
                                    </div>
                                </div>

                                {{-- <div class="row mt-1">
                                    <div class="col-lg-2">
                                        Disc.
                                    </div>
                                    <div class="col-lg-1">
                                            :
                                    </div>
                                    <div class="html_total_disc col-lg-9" style="text-align: right" >
                                        Rp. 0
                                    </div>
                                </div> --}}

                                <div class="row mt-1">
                                    <div class="col-lg-2">
                                        Sub Total
                                    </div>
                                    <div class="col-lg-1">
                                            :
                                    </div>
                                    <div class="html_sub_total col-lg-9" style="text-align: right" >
                                        Rp. 0
                                    </div>
                                </div>

                                <div class="row mt-1">
                                    <div class="col-lg-2">
                                        Service
                                    </div>
                                    <div class="col-lg-1">
                                            :
                                    </div>
                                    <div class="html_service col-lg-9" style="text-align: right" >
                                        Rp. 0
                                    </div>
                                </div>

                                <div class="row mt-1">
                                    <div class="col-lg-2">
                                        Tax
                                    </div>
                                    <div class="col-lg-1">
                                            :
                                    </div>
                                    <div class="html_ppn col-lg-9" style="text-align: right" >
                                        Rp. 0
                                    </div>
                                </div>

                                <div class="row mt-1 font-weight-bold">
                                    <div class="col-lg-2">
                                        Grand Total
                                    </div>
                                    <div class="col-lg-1">
                                            :
                                    </div>
                                    <div class="html_grand_total col-lg-9" style="text-align: right" >
                                        Rp. 0
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="table_jenis_pembayaran" class="ml-1 pt-2">
                            <div class="container">
                                <div class="row mt-1" id="title_jenis_pembayaran">
                                    <div class="col-lg-12 text-center font-weight-bold" style="font-size: 20px">
                                        Payment Method:
                                    </div>
                                </div>

                                <div id="jenis_pembayaran">

                                </div>

                                <div id="kembalian" class="mt-3">

                                </div>

                                {{-- <div id="card" class="d-none">
                                    <div class="col-lg-12 pl-0 mt-1 text-center">
                                        (<span class="html_bank"></span>) - No. <span class="html_card_number"></span>
                                    </div>
                                </div>

                                <div id="cash">
                                    <div class="row mt-1">
                                        <div class="col-lg-2">
                                           Cash
                                        </div>
                                        <div class="col-lg-1">
                                                :
                                        </div>
                                        <div class="html_cash col-lg-9" style="text-align: right" >
                                            Rp. 0
                                        </div>
                                    </div>

                                    <div class="row mt-1">
                                        <div class="col-lg-2">
                                            Kembalian
                                        </div>
                                        <div class="col-lg-1">
                                                :
                                        </div>
                                        <div class="html_kembalian col-lg-9" style="text-align: right" >
                                            Rp. 0
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!--/MODAL-->

    <!-- Modal print login -->
        <div id="print_login" class="modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary" align="center">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <form action="" method="post" id="printLoginPosForm" target="_blank">
                        @csrf
                        @method('PATCH')

                        <div class="modal-body">

                            <h3 class="text-center">Insert username and password from supervisor!</h3>

                            <input type="hidden" name="shop_id" id="print_shop_id">
                            <input type="hidden" name="filter_shop_id" id="print_filter_shop_id">
                            <input type="hidden" name="filter_tanggal" id="print_filter_tanggal">

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2">Username</label>
                                <div class="col-lg-10">
                                    <input type="text" name="username" class="form-control" id="print_username" placeholder="Username" required autocomplete="off" value="">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2">Password</label>
                                <div class="col-lg-10">
                                    <input type="password" name="password" class="form-control" id="print_password" placeholder="Password" required autocomplete="off" value="">
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn bg-primary">Print</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <!-- End modal print login -->

@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

	<!-- JS Date Picker -->
	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.min.js"></script>
	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>
	<script>

        let get_shop_id = {!! json_encode(\Request::get('s')) !!};
        let get_tanggal = {!! json_encode(\Request::get('t')) !!};
        let tanggal_sistem = {!! json_encode(getSystemDate()) !!};
        let status_pos = {!! json_encode(config('custom.status_cart_pos')) !!};

        $( document ).ready(function() {
            var queryString = window.location.search;
            var urlParams = new URLSearchParams(queryString);
            var s = urlParams.get('s');
            var t = urlParams.get('t');

            if (s) {

                $("#shop_select").val(s).trigger('change');

                if (t) {
                    $("#tanggal").val(t).trigger('change');
                }

            }
        })

        let shop_select_id = get_shop_id ? get_shop_id : '';
        let tanggal = get_tanggal ? get_tanggal : $('#filter_tanggal').val();

        let condition_closed_bill = 0;

		//modal delete
		$(document).on("click", ".update_status_pos", function () {
            var url = $(this).data('url');
            var tanggal_dari_filter = $(this).data('tanggal');
            var shop_id_dari_filter = $(this).data('shop_id');

            $('#tanggal').val(tanggal_dari_filter)
            $('#shop_id').val(shop_id_dari_filter)
            $('#status_pos').val(99);

            $("#updateStatusPosform").attr("action", url);
		});

		//modal print
		$(document).on("click", ".print_login", function () {
            var url = $(this).data('url');
            var tanggal_dari_filter = $(this).data('filter_tanggal');
            var shop_id_dari_filter = $(this).data('filter_shop_id');
            var shop_id = $(this).data('shop_id');

            $('#print_filter_tanggal').val(tanggal_dari_filter)
            $('#print_filter_shop_id').val(shop_id_dari_filter)
            $('#print_shop_id').val(shop_id)
            $('#print_username').val('')
            $('#print_password').val('')

            $("#printLoginPosForm").attr("action", url);
		});

        // Inisialisasi datepicker
        $('#filter_tanggal').daterangepicker({
            maxDate:  "{{ date('d-m-Y', strtotime(getSystemDate()))  }}",
			startDate: "{{ date('d-m-Y', strtotime(getSystemDate()))  }}",
			endDate: "{{ date('d-m-Y', strtotime(getSystemDate()))  }}",
            applyClass: 'btn-primary',
	        cancelClass: 'btn-light',
            locale: {
            format: 'DD-MM-YYYY'
            }
        });

        // Ketika datatable null
        var DatatableBasicNull = function() {

            // Basic Datatable examples
            var _componentDatatableBasic = function() {
                if (!$().DataTable) {
                    console.warn('Warning - datatables.min.js is not loaded.');
                    return;
                }

                // Setting datatable defaults
                $.extend( $.fn.dataTable.defaults, {
                    autoWidth: false,
                    columnDefs: [{
                        orderable: false,
                        autoWidth: false,
                        targets: [ 7 ]
                    }],
                    scrollX:true,
                    dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                    language: {
                        search: '<span>Filter:</span> _INPUT_',
                        searchPlaceholder: 'Type to filter...',
                        lengthMenu: '<span>Show:</span> _MENU_',
                        paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
                    }
                });

                // Basic datatable
                 $('.datatable-basic').DataTable(
                    {
            			processing: true,
            			serverSide: true,
            			ajax: {
                                url: "{{route('posTransactionsDatatableNull')}}",
                                type: "POST",
                                data:{
                                    _token: '{{csrf_token()}}',
                                    shop_id: shop_select_id,
                                    tanggal: tanggal
                                },
                            },
                        "order": [[ 0, "DESC" ]],

                            columns:[
                            {data:null, name:'transaction_date_sort', 'visible': false, 'targets': [0], render: function ( data, type, sort, row ){
                                return moment(data.transaction_date).format('DD-MM-YYYY') ?? '-'
                            }},

                            {data:null, name:'created_at_sort', 'visible': false, 'targets': [1], render: function ( data, type, sort, row ){
                                return data.created_at ?? '-'
                            }},

            				{data:'DT_RowIndex', name:'no'},

                            {data:null, render: function ( data, type, row ){
                                return moment(data.transaction_date).format('DD-MM-YYYY') ?? '-'
                            }},

                            { data: null, render: function ( data, type, row ) {
                                return data.shop.nama ?? '-'
                            }},

            				{ data: null, render: function ( data, type ) {
                                return data.table?.nomor_meja ?? '-'
                            }},

            				// {data:null, render:function(data,type,row){
                            //     return status_bayar_pos[data.status_bayar]
                            // }},

                            {data:null, render:function(data, type, row){
                                return data.nama_pelanggan ?? '-'
                            }},

                            {data:null, render:function(data, type, row){
                                return data.order_flag ?? '-'
                            }},

                            {data:null, render:function(data, type, row){
                                if (data.grand_total_pos) {
                                    // return 'Rp. ' + data.grand_total_pos.toLocaleString('ID')
                                    return 'Rp. ' + formatRibuanComma(data.grand_total_pos)
                                }else{
                                    return '-'
                                }
                            }},

                            {data:null, render:function(data, type, row){
                                return status_pos[data.status] ?? (data.custom_status ?? '-')
                            }},

                            // {data:'total_pendapatan', name:'total_pendapatan'},

            				{data:null, render:function(data, type){
                                let html_void = '';
                                let html_print = '';

                                // if (data.transaction_date == tanggal_sistem && data.status != 99) {
                                //     html_void = `<a class="update_status_pos"
                                //                     data-toggle="modal"
                                //                     data-target="#modal_theme_danger"
                                //                     data-url="{{ url('updateStatusToVoid/${data.id}')}}"
                                //                     data-tanggal="${tanggal}"
                                //                     data-shop_id="${shop_select_id}"
                                //                     >
                                //                         <button type="button" class="btn btn-danger btn-icon">
                                //                             <i class="icon-x" title="Void"></i>
                                //                         </button>
                                //                     </a>`
                                // }

                                if (data.status != 99 && data.transaction_date == tanggal_sistem && data.status != 2) {
                                    html_print = `<a href="{{url('quick-print-invoice-pos')}}/${data.id}/${data.shop_id}" target="_blank">
                                                        <button type="button" class="btn btn-primary btn-icon btn-tooltip">
                                                            <i class="fas fa-print" title="Cetak"></i>
                                                        </button>
                                                    </a>`
                                }else if(data.status != 2){
                                    html_print = `<a class="print_login"
                                                    data-toggle="modal"
                                                    data-target="#print_login"
                                                    data-url="{{ url('printLoginPosTransaction/${data.id}')}}"
                                                    data-shop_id="${data.shop_id}"
                                                    data-filter_shop_id="${shop_select_id}"
                                                    data-filter_tanggal="${tanggal}"
                                                    >
                                                        <button type="button" class="btn btn-primary btn-icon">
                                                            <i class="fas fa-print" title="Cetak"></i>
                                                        </button>
                                                    </a>`
                                }

            					let html = `<div style="width: 100%; text-align:center">
                                                <a class="detail"
                                                    data-toggle="modal"
                                                    data-target="#detail"
                                                    data-cartresto_id="${data.id}"
                                                    data-table_id="${data.table_id}"
                                                    >
                                                        <button type="button" class="btn btn-info btn-icon">
                                                            <i class="icon-pencil5" title="Detail"></i>
                                                        </button>
                                                </a>

            									${html_print}

                                                ${html_void}
            								</div>`
            					return html;
            				}},
            			]
            		}
                 );

                // Alternative pagination
                $('.datatable-pagination').DataTable({
                    pagingType: "simple",
                    language: {
                        paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
                    }
                });

                // Datatable with saving state
                $('.datatable-save-state').DataTable({
                    stateSave: true
                });

                // Scrollable datatable
                var table = $('.datatable-scroll-y').DataTable({
                    autoWidth: true,
                    scrollY: 300
                });

                // Resize scrollable table when sidebar width changes
                $('.sidebar-control').on('click', function() {
                    table.columns.adjust().draw();
                });
            };

            // Select2 for length menu styling
            var _componentSelect2 = function() {
                if (!$().select2) {
                    console.warn('Warning - select2.min.js is not loaded.');
                    return;
                }

                // Initialize
                $('.dataTables_length select').select2({
                    minimumResultsForSearch: Infinity,
                    dropdownAutoWidth: true,
                    width: 'auto'
                });
            };


            //
            // Return objects assigned to module
            //

            return {
                init: function() {
                    _componentDatatableBasic();
                    _componentSelect2();
                }
            }


        }();

        // Ketika datatable tidak null
		var DatatableBasicPos = function() {

                // Basic Datatable examples
                var _componentDatatableBasic = function() {
                    if (!$().DataTable) {
                        console.warn('Warning - datatables.min.js is not loaded.');
                        return;
                    }

                    // Setting datatable defaults
                    $.extend( $.fn.dataTable.defaults, {
                        autoWidth: false,
                        columnDefs: [{
                            orderable: true,
                            width: 150,
                            targets: [ 7 ]
                        }],
                        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        language: {
                            search: '<span>Filter:</span> _INPUT_',
                            searchPlaceholder: 'Type to filter...',
                            lengthMenu: '<span>Show:</span> _MENU_',
                            paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
                        }
                    });

                    // Basic datatable
                    $('.datatable-basic').DataTable(
                        {
            			processing: true,
            			serverSide: true,
            			ajax: {
                                url: "{{route('posTransactionsDatatable')}}",
                                type: "POST",
                                data:{
                                    _token: '{{csrf_token()}}',
                                    shop_id: shop_select_id,
                                    tanggal: tanggal,
                                    closed_bill : condition_closed_bill,
                                },
                            },
                        "order": [[ 0, "DESC" ]],
            			columns:[
                            {data:null, name:'transaction_date_sort', 'visible': false, 'targets': [0], className:'p-3', render: function ( data, type, sort, row ){
                                return moment(data.transaction_date).format('DD-MM-YYYY') ?? '-'
                            }},

                            {data:null, name:'created_at_sort', 'visible': false, 'targets': [1], className:'p-3', render: function ( data, type, sort, row ){
                                return data.created_at ?? '-'
                            }},

            				{data:'DT_RowIndex', name:'no'},

                            {data:null, render: function ( data, type, row ){
                                return moment(data.transaction_date).format('DD-MM-YYYY') ?? '-'
                            }},

                            {data:null, name:'order_flag', 'visible': true, 'targets': [2], className:'p-0', render:function(data, type, sort, row){
                                return data.order_flag ? (data.order_flag != '' ? data.order_flag : '-') : '-'
                            }},

            				{ data: null, name:'nomor_meja', 'visible':true, 'targets': [3], className:'text-center', render: function ( data, type, sort, row ) {
                                return data.table?.nomor_meja ?? '-'
                            }},

            				// {data:null, render:function(data,type,row){
                            //     return status_bayar_pos[data.status_bayar]
                            // }},

                            {data:null, name:'nama_pelanggan', 'visible':true, 'targets': [4], className:'p-3', render:function(data, type, sort, row){
                                return data.nama_pelanggan ?? '-'
                            }},

                            { data: null, name:'nama_shop', 'visible':true, 'targets': [5], className:'p-3', render:function(data, type, sort, row ) {
                                return data.shop.nama ?? '-'
                            }},

                            {data:null, name:'total_tagihan', 'visible':true, 'targets': [6], className:'text-right',  render:function(data, type, sort, row){
                                if (data.status == 2) {

                                    let total_tagihan_temporary = 0;
                                    let tagihan_temporary = 0;

                                    $.each(data.menu, function(index, value){
                                        // sum for temporary
                                        total_tagihan_temporary    += value.total_biaya;

                                        // Total Tagihan Temporary untuk tagihan masih di meja atau belum settlement; status = 2 untuk belum settlement
                                        let services_temporary      = Number(total_tagihan_temporary * shop_services / 100);
                                        let ppn_temporary           = Number((total_tagihan_temporary + services_temporary) * shop_ppn /100);
                                        tagihan_temporary           = Number(total_tagihan_temporary + services_temporary + ppn_temporary);
                                    });

                                    // return 'Rp. ' + tagihan_temporary.toLocaleString('ID')
                                    return 'Rp. ' + formatRibuanComma(tagihan_temporary)
                                }else if(data.grand_total_pos){
                                    // return 'Rp. ' + data.grand_total_pos.toLocaleString('ID')
                                    return 'Rp. ' + formatRibuanComma(data.grand_total_pos)
                                }else{
                                    return '-'
                                }
                            }},

                            {data:null, name:'status_pos', 'visible':true, 'targets': [7], className:'text-center',  render:function(data, type, sort, row){
                                return status_pos[data.status] ?? (data.custom_status ?? '-')
                            }},

                            // {data:'total_pendapatan', name:'total_pendapatan'},

            				{data:null, className:'text-center', render:function(data, type){
                                let html_void = '';
                                let html_print = '';

                                // if (data.transaction_date == tanggal_sistem && data.status != 99) {
                                //     html_void = `<a class="update_status_pos"
                                //                     data-toggle="modal"
                                //                     data-target="#modal_theme_danger"
                                //                     data-url="{{ url('updateStatusToVoid/${data.id}')}}"
                                //                     data-tanggal="${tanggal}"
                                //                     data-shop_id="${shop_select_id}"
                                //                     >
                                //                         <button type="button" class="btn btn-danger btn-icon">
                                //                             <i class="icon-x" title="Void"></i>
                                //                         </button>
                                //                     </a>`
                                // }

                                if (data.status != 99 && data.transaction_date == tanggal_sistem && data.status != 2) {
                                    html_print = `<a href="{{url('quick-print-invoice-pos')}}/${data.id}/${data.shop_id}" target="_blank">
                                                        <button type="button" class="btn btn-primary btn-icon btn-tooltip">
                                                            <i class="fas fa-print" title="Cetak"></i>
                                                        </button>
                                                    </a>`
                                }else if(data.status != 2){
                                    html_print = `<a class="print_login"
                                                    data-toggle="modal"
                                                    data-target="#print_login"
                                                    data-url="{{ url('printLoginPosTransaction/${data.id}')}}"
                                                    data-shop_id="${data.shop_id}"
                                                    data-filter_shop_id="${shop_select_id}"
                                                    data-filter_tanggal="${tanggal}"
                                                    >
                                                        <button type="button" class="btn btn-primary btn-icon">
                                                            <i class="fas fa-print" title="Cetak"></i>
                                                        </button>
                                                    </a>`
                                }

            					let html = `<div style="width: 100%; text-align:center">
                                                <a class="detail"
                                                    data-toggle="modal"
                                                    data-target="#detail"
                                                    data-cartresto_id="${data.id}"
                                                    data-table_id="${data.table_id}"
                                                    >
                                                        <button type="button" class="btn btn-info btn-icon">
                                                            <i class="icon-pencil5" title="Detail"></i>
                                                        </button>
                                                </a>

            									${html_print}

                                                ${html_void}
            								</div>`
            					return html;
            				}},
            			]
            		}
                    );

                    // Alternative pagination
                    $('.datatable-pagination').DataTable({
                        pagingType: "simple",
                        language: {
                            paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
                        }
                    });

                    // Datatable with saving state
                    $('.datatable-save-state').DataTable({
                        stateSave: true
                    });

                    // Scrollable datatable
                    var table = $('.datatable-scroll-y').DataTable({
                        autoWidth: true,
                        scrollY: 300
                    });

                    // Resize scrollable table when sidebar width changes
                    $('.sidebar-control').on('click', function() {
                        table.columns.adjust().draw();
                    });
                };

                // Select2 for length menu styling
                var _componentSelect2 = function() {
                    if (!$().select2) {
                        console.warn('Warning - select2.min.js is not loaded.');
                        return;
                    }

                    // Initialize
                    $('.dataTables_length select').select2({
                        minimumResultsForSearch: Infinity,
                        dropdownAutoWidth: true,
                        width: 'auto'
                    });
                };


                //
                // Return objects assigned to module
                //

                return {
                    init: function() {
                        _componentDatatableBasic();
                        _componentSelect2();
                    }
                }


		}();

		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
            DatatableBasicNull.init();
		});

        $('.container_modal').on('hidden.bs.modal', function () {
            console.log('reset');
            $(this).find('form').trigger('reset');
        })

        let shop_services = 0;
        let shop_ppn = 0;
        // function get detail shop
        function getDetailShop(id){
            $.ajax({
                type: 'GET',
                    url: "{{ url('/get-detail-shopresto')}}/"+id,
                    success: function (data) {
                        shop_ppn = data.ppn;
                        shop_services = data.services;
                    }
            })
        }

        function formatRibuanComma(params) {
            return params.toLocaleString('en-US')
        }

        //On Click modal detail
        $(document).on("click", ".detail", function () {

            let table_id = $(this).data('table_id') ?? 0;
            let cartresto_id = $(this).data('cartresto_id')

            $.ajax({
                type : 'POST',
                data:{
                        _token: '{{csrf_token()}}',
                        table_id : table_id,
                        cartresto_id : cartresto_id,
                    },
                url: "{{ url('/get-cart-list-resto')}}",
                success: function (data) {
                    // console.log(data, 'data nih bos')

                    $('#fieldset_cart').empty();
                    $('#jenis_pembayaran').empty();

                    // Variable total Tagihan Temporary untuk tagihan masih di meja atau belum settlement
                    let total_tagihan_temporary = 0;
                    let sub_total_tempo = 0;
                    let grand_total_tempo = 0;
                    let tax_tempo = 0;
                    let serv_tempo = 0;
                    let total_discount = 0;

                    if (data.carts.length >= 1) {

                        $.each(data.carts, function(index, value){

                            // sum for temporary
                            pprice = value.total_biaya;
                            pprice -= value.diskon;
                            total_tagihan_temporary += pprice;
                            grand_total_tempo += (value.grand_total - value.diskon);
                            sub_total_tempo += pprice;
                            tax_tempo += value.ppn;
                            serv_tempo += value.service;
                            total_discount += value.diskon;

                            let diskon = "";
                            // if (value.diskon > 0) {
                            //     diskon += `
                            //             <div id="order_id_discount${value.menu_id ? value.menu_id : value.keterangan_custom}" data-idx="${value.menu_id}" class="list-group-item list-group-item-action d-flex bd-highlight" >
                            //                 <span class="flex-fill col-sm-4">Discount</span>
                            //                 <span class="flex-fill col-sm-4" style="text-align:center;"></span>
                            //                 <span class="flex-fill col-sm-4" style="font-size:12px; text-align:right;">Rp. ${(value.diskon*-1).toLocaleString('ID')}</span>
                            //             </div>
                            //             `;
                            // }


                            list_carts =
                            `
                                <div id="order_id_${value.menu_id ? value.menu_id : value.keterangan_custom}" data-idx="${value.menu_id}" class="list-group-item list-group-item-action d-flex bd-highlight" >

                                    <input name="menu_id[]" data-idx="${value.menu_id}" type="hidden" value="${value.menu_id}" readonly>
                                    <input name="total_biaya[]" data-idx="${value.menu_id}" class="form-control" type="hidden" value="${pprice}" readonly>

                                    <span class="flex-fill col-sm-4">${ value.menu_id ? value.menu.nama : value.keterangan_custom }</span>
                                    <span class="flex-fill col-sm-4" style="text-align:center;">${value.jumlah}</span>
                                    <span class="flex-fill col-sm-4" style="font-size:12px; text-align:right;">Rp. ${pprice ? formatRibuanComma(pprice) :'0'}</span>

                                </div>

                                ${diskon}

                            `;

                            $('#fieldset_cart').append(list_carts);

                        })

                    }else{
                        list_carts =
                            `
                                <div class="col-md-12 mt-2">
                                    <div class="alert alert-danger text-center mb-2" role="alert">
                                        No Order!
                                    </div>
                                </div>
                            `;

                        $('#fieldset_cart').empty();

                        $('#fieldset_cart').html(list_carts);
                    }

                    // Total Tagihan Temporary untuk tagihan masih di meja atau belum settlement; status = 2 untuk belum settlement
                    let sub_temporary           = Number(total_tagihan_temporary);
                    let services_temporary      = Number(total_tagihan_temporary * shop_services / 100);
                    let ppn_temporary           = Number((total_tagihan_temporary + services_temporary) * shop_ppn /100);
                    total_tagihan_temporary     = Number(total_tagihan_temporary + services_temporary + ppn_temporary);
                    // console.log(total_tagihan_temporary);

                    let grand_total     = data.detail.status   != 2 ? (data.detail.grand_total_pos ?? 0) : total_tagihan_temporary;
                    let sub_total       = data.detail.status   != 2 ? (data.detail.sub_total ?? 0) : sub_temporary;
                    let ppn             = data.detail.status   != 2 ? (data.detail.ppn_charge ?? 0) : ppn_temporary;
                    let service         = data.detail.status   != 2 ? (data.detail.services_charge ?? 0) : services_temporary;

                    // let bank = data.detail.bank
                    // let card_number = data.detail.card_number
                    // let cash = data.detail.total_payment_pos ?? 0
                    // let kembalian = 0;

                    // if (data.detail.complimentary_id == 0) {
                    //     kembalian = parseInt(cash) - parseInt(grand_total)
                    // }


                    // $('.html_grand_total').html('Rp. '+grand_total.toLocaleString('ID'));
                    // $('.html_sub_total').html('Rp. '+sub_total.toLocaleString('ID'));
                    // $('.html_ppn').html('Rp. '+ppn.toLocaleString('ID'));
                    // $('.html_service').html('Rp. '+service.toLocaleString('ID'));
                    $('.html_grand_total').html('Rp. '+formatRibuanComma(grand_total_tempo));
                    $('.html_sub_total').html('Rp. '+formatRibuanComma(sub_total_tempo));
                    $('.html_ppn').html('Rp. '+formatRibuanComma(tax_tempo));
                    $('.html_service').html('Rp. '+formatRibuanComma(serv_tempo));

                    $('#total_discount').attr('style','display:none !important');
                    if(total_discount > 1){
                        $('#total_discount').attr('style','!important');
                        // $('.html_total_disc').html('Rp. '+parseInt(total_discount*-1).toLocaleString('ID'));
                        $('.html_total_disc').html('Rp. '+formatRibuanComma(parseInt(total_discount*-1)));
                    }else{
                        $('#total_discount').attr('style','display:none !important');
                    }


                    // if (bank != null || card_number != null) {
                    //     replace_card_number = card_number.replace(card_number.substring(5,10), "xxxxx")
                    //     final_card_number = replace_card_number.match(new RegExp('.{1,4}', 'g')).join("-");

                    //     $('.html_bank').text(bank)
                    //     $('.html_card_number').text(final_card_number)

                    //     $('#card').show()
                    //     $('#cash').hide()
                    // } else {
                    //     $('.html_cash').text('Rp. '+cash.toLocaleString('ID'))
                    //     $('.html_kembalian').text('Rp. '+kembalian.toLocaleString('ID'))

                    //     $('#card').hide()
                    //     $('#cash').show()
                    // }

                    // Cek apakah terdapat pembayaran
                    if (data.detail.pembayaranpos.length >= 1) {
                        // mendefinisikan variabel jenis pembayaran dengan string kosong
                        let jenis_pembayaran = '';
                        // let cash = 0;
                        let total_bayar = 0;
                        let kembalian = 0;

                        $.each(data.detail.pembayaranpos, function(index, value){
                            total_bayar += value.nominal
                            if (value.jenis_pembayaran_id == 1) {
                                // cash += parseInt(value.nominal) ?? 0;

                                jenis_pembayaran +=
                                `
                                    <div id="cash">
                                        <div class="row mt-1">
                                            <div class="col-lg-2">
                                            Cash
                                            </div>
                                            <div class="col-lg-1">
                                                    :
                                            </div>
                                            <div class="html_cash col-lg-9" style="text-align: right" >
                                                Rp. ${formatRibuanComma(value.nominal)}
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }

                            if(value.jenis_pembayaran_id == 2 || value.jenis_pembayaran_id == 4){
                                jenis_pembayaran +=
                                `
                                    <div id="card">
                                        <div class="row mt-1">
                                            <div class="col-lg-2">
                                            ${value.platform.nama} - ${value.voucher}
                                            </div>
                                            <div class="col-lg-1">
                                                    :
                                            </div>
                                            <div class="html_cash col-lg-9" style="text-align: right" >
                                                Rp. ${formatRibuanComma(value.nominal)}
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }

                            if(value.jenis_pembayaran_id == 6){
                                jenis_pembayaran +=
                                `
                                    <div id="transfer_nonstay">
                                        <div class="row mt-1">
                                            <div class="col-lg-2">
                                            Transfer Nonstay
                                            </div>
                                            <div class="col-lg-1">
                                                    :
                                            </div>
                                            <div class="html_cash col-lg-9" style="text-align: right" >
                                                Rp. ${formatRibuanComma(value.nominal)}
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }

                            if(value.jenis_pembayaran_id == 5){
                                jenis_pembayaran +=
                                `
                                    <div id="ledger">
                                        <div class="row mt-1">
                                            <div class="col-lg-2">
                                            Ledger
                                            </div>
                                            <div class="col-lg-1">
                                                    :
                                            </div>
                                            <div class="html_cash col-lg-9" style="text-align: right" >
                                                Rp. ${formatRibuanComma(value.nominal)}
                                            </div>
                                        </div>
                                    </div>
                                `;
                            }

                            // console.log(jenis_pembayaran, 'ini jenis')
                        })
                        $('#jenis_pembayaran').html(jenis_pembayaran);

                        if (data.detail.complimentary_id != 0) {
                            kembalian = 0
                        }else{
                            kembalian = total_bayar - data.detail.grand_total_pos
                        }

                        let html_kembalian = `<div class="row">
                                                    <div class="col-lg-2">
                                                        Change
                                                    </div>
                                                    <div class="col-lg-1">
                                                            :
                                                    </div>
                                                    <div class="html_kembalian col-lg-9" style="text-align: right" >
                                                        Rp. ${formatRibuanComma(kembalian)}
                                                    </div>
                                                </div>`

                        $('#kembalian').html(html_kembalian)
                    }else{

                        if (data.detail.status == 3 || data.detail.status == 4) {
                            jenis_pembayaran =
                                `
                                    <div class="col-md-12 mt-2">
                                        <div class="alert alert-danger text-center mb-2" role="alert">
                                            ${status_pos[data.detail.status]}
                                        </div>
                                    </div>
                                `;
                        }else{
                            jenis_pembayaran =
                                `
                                    <div class="col-md-12 mt-2">
                                        <div class="alert alert-danger text-center mb-2" role="alert">
                                            Payment Not Found!
                                        </div>
                                    </div>
                                `;
                        }

                        $('#jenis_pembayaran').html(jenis_pembayaran);
                    }

                    if (data.detail.complimentary_id != 0) {
                        $('#complimentary_show').show()
                    }else{
                        $('#complimentary_show').hide()
                    }
                }
            });

        });

        // Ketika resto di pilih
        $(document).on("change", "#shop_select", function () {

            shop_select_id = $('#shop_select').val();
            tanggal = $('#filter_tanggal').val();

            getDetailShop(shop_select_id);

            let in_table = $('#shop_select').find(':selected').data('in_table');
            let in_pos = $('#shop_select').find(':selected').data('in_pos');

            if (shop_select_id == '') {
                $('.datatable-basic').DataTable().clear().destroy();
                DatatableBasicNull.init();
            }else{
                $('.datatable-basic').DataTable().clear().destroy();

                DatatableBasicPos.init();
            }

        });

        // ketika tanggal di pilih
        $(document).on("change", "#filter_tanggal", function () {

            shop_select_id = $('#shop_select').val();
            tanggal = $('#filter_tanggal').val();
            console.log(tanggal, 'tanggal lho ini')

            let in_table = $('#shop_select').find(':selected').data('in_table');
            let in_pos = $('#shop_select').find(':selected').data('in_pos');

            if (shop_select_id == '') {
                $('.datatable-basic').DataTable().clear().destroy();
                DatatableBasicNull.init();
            }else{
                $('.datatable-basic').DataTable().clear().destroy();
                DatatableBasicPos.init();
            }

        });

        $('#closed_bill').on('click', function(){

            shop_select_id = $('#shop_select').val();

            // ambil data checkbox
            let checkbox_closedbill = $("#closed_bill").is(":checked");
            if (checkbox_closedbill) {
                // console.log('yes');
                condition_closed_bill = 1;
                $('#container_tanggal').hide();
            }else{
                // console.log('no');
                condition_closed_bill = 0;
                $('#container_tanggal').show();
            }

            if (shop_select_id == '') {
            $('.datatable-basic').DataTable().clear().destroy();
                DatatableBasicNull.init();
            }else{
                $('.datatable-basic').DataTable().clear().destroy();
                DatatableBasicPos.init();
            }

        });

	</script>

	<script type="text/javascript">
		$( document ).ready(function() {
	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif

		});
	</script>
@endsection