@extends('layouts.base')

@section('content-header')
    <div class="col-12">
        <div class="container" style="display: contents">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0"> Kasir <small>kasir 3.0</small></h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Kasir</a></li>
                        <li class="breadcrumb-item active">History</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="col-12 mt-2">
        <div class="container" style="display: contents">
            <div class="card">
                <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
                <div class="card-body">
                    {{-- <h5 class="card-title">Form List Data</h5> --}}
                    <div class="table-responsive mt-3">
                        <table id="tabelku" class="table table-hover display" style="width: 100%">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th>Kode Pesanan</th>
                                    <th>Pemesan</th>
                                    <th>Nomor Meja</th>
                                    <th>Tanggal & Jam</th>
                                    <th>Total Pesanan</th>
                                    <th>Sub Total</th>
                                    <th>Diskon(%)</th>
                                    <th>Grand Total</th>
                                    <th class="text-center"><i class="fas fa-cog"></i></th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th class="text-right" colspan="5">Total</th>
                                    <th></th>
                                    <th class="text-right"></th>
                                    <th></th>
                                    <th class="text-right"></th>
                                    <th class="text-center"><i class="fas fa-cog"></i></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <!-- Toastr -->
    <style>
        @media only screen and (max-width : 991px) {
            /* Styles */
        }

        @media only screen and (max-width : 768px) {
            /* Styles */
        }

        @media only screen and (max-width : 414px) {
            /* Styles */
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#tabelku').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('history.getDataHistory') }}',
                columns: [{
                        data: 'nomor',
                        name: 'nomor',
                        orderable: false,
                        className: 'text-center'
                    },
                    {
                        data: 'kode_pesanan',
                        name: 'kode_pesanan'
                    },
                    {
                        data: 'nama_pemesan',
                        name: 'nama_pemesan'
                    },
                    {
                        data: 'nomor_meja',
                        name: 'nomor_meja'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'total_pesanan',
                        name: 'total_pesanan',
                        className: 'text-center'
                    },
                    {
                        data: 'total_bayar',
                        name: 'total_bayar',
                        className: 'text-right',
                        render: function(data) {
                            // change to IDR
                            return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                        }
                    },
                    {
                        data: 'diskon_persen',
                        name: 'diskon_persen',
                        className: 'text-center',
                        render: function(data) {
                            return data ?? 0;
                        }
                    },
                    {
                        data: 'grand_total',
                        name: 'grand_total',
                        className: 'text-right',
                        render: function(data) {
                            // change to IDR
                            return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                        }
                    },
                    {
                        data: 'ubah',
                        name: 'ubah',
                        className: 'text-center'
                    },
                ],
                footerCallback: function(row, data, start, end, display) {
                    let api = this.api();
                    // Remove the formatting to get integer data for summation
                    let intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i :
                            0;
                    };

                    // GrandTotal over all pages
                    totalAll = api
                        .column(8)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // GrandTotal over all pages
                    diskonTotal = api
                        .column(7)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // Total over this page
                    pageTotal = api
                        .column(6, {
                            page: 'current'
                        })
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // total pesanan
                    totalPesanan = api
                        .column(5)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // Update footer
                    api.column(5).footer().innerHTML = totalPesanan + ' Item';
                    api.column(6).footer().innerHTML =
                        'Rp. ' + pageTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                    api.column(7).footer().innerHTML = diskonTotal + ' %';
                    api.column(8).footer().innerHTML =
                        'Rp. ' + totalAll.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                }
            })
        })
    </script>
    <script>
        function print(id) {
            var url = "{{ route('history.print', '') }}/" + id + '?print=true'
            window.open(url, '_blank');
        }
    </script>
@endpush