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

@section('title', 'Resto 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">Data Transaksi Resto</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="">-- Pilih Resto/Shop --</option>
                                @foreach( $shops as $key => $val)
                                    <option value="{{$val->id}}" {{\Request::get('s') ? (\Request::get('s') == $val->id ? 'selected' : '') : ''}}>{{$val->nama}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-form-label col-sm-1">Tanggal</label>

                        <div class="col-sm-1">
                            <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>#</th>
                            <th>Resto</th>
                            <th>Nomor Meja</th>
                            <th>Nama Pelanggan</th>
                            <th>Order Flag</th>
                            <th class="text-center">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="delform">
                        @csrf
                        @method('DELETE')

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

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

                            <h3 class="text-center">Masukan username dan password dari 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">Batal</button>
                            <button type="submit" class="btn bg-danger">Hapus</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">
                                    Tidak ada yang dipesan!
                                </div>
                            </div>
                        </fieldset>

                        <div id="table_adds_price" class="ml-1 pt-2 border-top">
                            <div class="container">
                                <div class="row mt-1" id="complimentary_show">
                                    <div class="col-lg-12 text-center font-weight-bold">
                                        -------------------- Complimentary --------------------
                                    </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">
                                        PPN
                                    </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">
                                    <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 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 id="card">
                                    <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-->

@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 shop_select_id = get_shop_id ? get_shop_id : '';
        let tanggal = get_tanggal ? get_tanggal : $('#filter_tanggal').val();

		//modal delete
		$(document).on("click", ".delbutton", 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)

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

        // Inisialisasi datepicker
        $('#filter_tanggal').daterangepicker({
            singleDatePicker: true,
            maxDate: '{{ getSystemDate() }}',
            locale: {
            format: 'YYYY-MM-DD'
            }
        });

        // 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,
                        width: 150,
                        targets: [ 5 ]
                    }],
                    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('restoTransactionsDatatable')}}",
                                type: "POST",
                                data:{
                                    _token: '{{csrf_token()}}',
                                    shop_id: shop_select_id,
                                    tanggal: tanggal
                                },
                            },

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

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

            				{ data: null, render: function ( data, type ) {
                                return data.resto.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:'total_pendapatan', name:'total_pendapatan'},

            				{data:null, render:function(data, type){
            					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>
            									<a class="delbutton"
            									   data-toggle="modal"
            									   data-target="#modal_theme_danger"
                                                   data-url="{{ url('deleteRestoTrasaction/${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="Hapus"></i>
            										</button>
            									</a>
            								</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 DatatableBasic = 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,
                            width: 150,
                            targets: [ 5 ]
                        }],
                        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('restoTransactionsDatatable')}}",
                                type: "POST",
                                data:{
                                    _token: '{{csrf_token()}}',
                                    shop_id: shop_select_id,
                                    tanggal: tanggal
                                },
                            },

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

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

            				{ data: null, render: function ( data, type ) {
                                return data.resto.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:'total_pendapatan', name:'total_pendapatan'},

            				{data:null, render:function(data, type){
            					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>
            									<a class="delbutton"
            									   data-toggle="modal"
            									   data-target="#modal_theme_danger"
                                                   data-url="{{ url('deleteRestoTrasaction/${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="Hapus"></i>
            										</button>
            									</a>
            								</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');
        })

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

            let table_id = $(this).data('table_id')
            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) {

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

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

                        $.each(data.carts, function(index, value){
                            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="${value.total_biaya}" 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. ${value.total_biaya ? value.total_biaya.toLocaleString('ID') :'0'}</span>

                                </div>
                            `;

                            $('#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">
                                        Tidak ada yang dipesan!
                                    </div>
                                </div>
                            `;

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

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

                    let grand_total = data.detail.grand_total_pos ?? 0
                    let sub_total = data.detail.sub_total
                    let ppn = data.detail.ppn_charge
                    let service = data.detail.services_charge
                    let bank = data.detail.bank
                    let card_number = data.detail.card_number
                    let cash = data.detail.total_payment_pos ?? 0
                    let 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'));

                    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()
                    }

                    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();

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

        });

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

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

            if (shop_select_id != '') {
                $('.datatable-basic').DataTable().clear().destroy();
                DatatableBasicNull.init();
            }else{
                $('.datatable-basic').DataTable().clear().destroy();
                DatatableBasic.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