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

@section('title', 'Hotel Group | General Cashier')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
    #company_id{
        width:12.5rem;
    }
    .transactionlist {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        font-size: 11px;
    }

    .transactionlist td, .transactionlist th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .transactionlist tr:nth-child(even){background-color: #f2f2f2;}

    .transactionlist tr:hover {background-color: #ddd;}

    .transactionlist th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #525659;
        color: white;
    }
    .font_head_title_column{
        font-size: 14px;
    }

    /* LOADING ANIMATION */
    .loading-overlay {
        /* position: fixed; */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .loader {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .content {
        padding: 20px;
    }
</style>
@endsection

@section('content')

    @php
        $user_role = \Auth::user()->role;
    @endphp

	<!-- 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">Hotel Group | General Cashier</span></h4>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
        <div class="row mb-1 justify-content-between">
            <div class="d-flex">
                <table id="transactionlistgroup" class="transactionlist transactionlistgroup">
                    <thead><tr><th colspan="2">SUMMARY OF BALANCE</th><th style="width: 150px; text-align:right;">Debet <i class="icon-exclamation text-light btn-tooltip" title="For incoming balance"></i></th><th style="width: 150px; text-align:right;">Credit <i class="icon-exclamation text-light btn-tooltip" title="For outgoing balance"></i></th><th style="width: 150px; text-align:right;">Ending Balance</th></tr></thead>
                    <tbody class="font-weight-bold">
                        <tr><td colspan="2">GENERAL CASH</td><td id="gc_debit" style="width: 150px; text-align:right;"></td><td id="gc_credit" style="width: 150px; text-align:right;"></td><td id="gc_ending" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">Cash Clearance FO</td><td id="fo_debit" style="width: 150px; text-align:right;"></td><td id="fo_credit" style="width: 150px; text-align:right;"></td><td id="fo_ending" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">Cash Clearance FB</td><td id="fb_debit" style="width: 150px; text-align:right;"></td><td id="fb_credit" style="width: 150px; text-align:right;"></td><td id="fb_ending" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">HOUSE BANK FO</td><td id="hbfo_debit" style="width: 150px; text-align:right;"></td><td id="hbfo_credit" style="width: 150px; text-align:right;"></td><td id="hbfo_ending" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">HOUSE BANK FB</td><td id="hbfb_debit" style="width: 150px; text-align:right;"></td><td id="hbfb_credit" style="width: 150px; text-align:right;"></td><td id="hbfb_ending" style="width: 150px; text-align:right;"></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <br>
        <legend></legend>

        <div class="row mb-1">
            @if (count($groups) > 0)
                @foreach ($groups as $hotel)
                <div class="col-lg-3 p-2">
                    <table id="transactionlist{{$hotel->id}}" class="transactionlist">
                        <thead><tr><th style="width: 200px;" colspan="2">{{$hotel->nama}}</th><th style="width: 150px; text-align:right;">Debet <i class="icon-exclamation text-light btn-tooltip" title="For incoming balance"></i></th><th style="width: 150px; text-align:right;">Credit <i class="icon-exclamation text-light btn-tooltip" title="For outgoing balance"></i></th><th style="width: 150px; text-align:right;">Ending Balance</th></tr></thead>
                        <tbody class="font-weight-bold">
                            <tr><td colspan="2">GENERAL CASH</td><td id="gc_debit" style="width: 150px; text-align:right;"></td><td id="gc_credit" style="width: 150px; text-align:right;"></td><td id="gc_ending" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">Cash Clearance FO</td><td id="fo_debit" style="width: 150px; text-align:right;"></td><td id="fo_credit" style="width: 150px; text-align:right;"></td><td id="fo_ending" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">Cash Clearance FB</td><td id="fb_debit" style="width: 150px; text-align:right;"></td><td id="fb_credit" style="width: 150px; text-align:right;"></td><td id="fb_ending" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">HOUSE BANK FO</td><td id="hbfo_debit" style="width: 150px; text-align:right;"></td><td id="hbfo_credit" style="width: 150px; text-align:right;"></td><td id="hbfo_ending" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">HOUSE BANK FB</td><td id="hbfb_debit" style="width: 150px; text-align:right;"></td><td id="hbfb_credit" style="width: 150px; text-align:right;"></td><td id="hbfb_ending" style="width: 150px; text-align:right;"></td></tr>
                        </tbody>
                    </table>
                </div>
                @endforeach
            @endif
        </div>
	</div>
	<!-- /content area -->

@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('global_assets/js/plugins/forms/inputs/jquery.mask.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 type="text/javascript">
	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,
					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();

			// 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() {
		DatatableBasic.init();
	});
	</script>

	<script type="text/javascript">
		$( document ).ready(function() {
            $('.form-control-select2').select2()
	        // 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

            balanceLoad()
		});
	</script>


<script>
    function balanceLoad() {
        $.ajax({
            type: 'GET',
            url: "{{ url('group-hotel/general-cashier-data')}}",
            success: function (data) {
                total = data.total
                group = data.group
                if(group){
                    $.each(group, function (i, val) {
                        $('#transactionlist'+i+' #gc_debit').html((Number(val.gc.debit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #gc_credit').html((Number(val.gc.credit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #gc_ending').html((Number(val.gc.ending_balance).toLocaleString('en-US')) ?? 0)

                        $('#transactionlist'+i+' #fo_debit').html((Number(val.fo.debit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #fo_credit').html((Number(val.fo.credit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #fo_ending').html((Number(val.fo.ending_balance).toLocaleString('en-US')) ?? 0)

                        $('#transactionlist'+i+' #fb_debit').html((Number(val.fb.debit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #fb_credit').html((Number(val.fb.credit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #fb_ending').html((Number(val.fb.ending_balance).toLocaleString('en-US')) ?? 0)

                        $('#transactionlist'+i+' #hbfo_debit').html((Number(val.hbfo.debit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #hbfo_credit').html((Number(val.hbfo.credit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #hbfo_ending').html((Number(val.hbfo.ending_balance).toLocaleString('en-US')) ?? 0)

                        $('#transactionlist'+i+' #hbfb_debit').html((Number(val.hbfb.debit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #hbfb_credit').html((Number(val.hbfb.credit).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #hbfb_ending').html((Number(val.hbfb.ending_balance).toLocaleString('en-US')) ?? 0)
                    });
                }
                if (total) {
                    $('.transactionlistgroup #gc_debit').html((Number(total.gc.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #gc_credit').html((Number(total.gc.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #gc_ending').html((Number(total.gc.ending_balance).toLocaleString('en-US')) ?? 0)

                    $('.transactionlistgroup #fo_debit').html((Number(total.fo.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #fo_credit').html((Number(total.fo.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #fo_ending').html((Number(total.fo.ending_balance).toLocaleString('en-US')) ?? 0)

                    $('.transactionlistgroup #fb_debit').html((Number(total.fb.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #fb_credit').html((Number(total.fb.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #fb_ending').html((Number(total.fb.ending_balance).toLocaleString('en-US')) ?? 0)

                    $('.transactionlistgroup #hbfo_debit').html((Number(total.hbfo.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #hbfo_credit').html((Number(total.hbfo.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #hbfo_ending').html((Number(total.hbfo.ending_balance).toLocaleString('en-US')) ?? 0)

                    $('.transactionlistgroup #hbfb_debit').html((Number(total.hbfb.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #hbfb_credit').html((Number(total.hbfb.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlistgroup #hbfb_ending').html((Number(total.hbfb.ending_balance).toLocaleString('en-US')) ?? 0)
                }
            }
		});
    }

    $('#filter_date').on('apply.daterangepicker', (e, picker) => {
        let newRequest = window.location.search;
        let params = new URLSearchParams(newRequest);
        params.delete('filter_date');
        params.append('filter_date', document.getElementById("filter_date").value);
        document.location.href = "?" + params.toString();
    });

    // RIBUAN DENGAN COMMA
    $('.input_comma_custom').on('input', function(){
        $('.input_comma_custom').mask("#,##0", {
                                                reverse: true,
                                                translation: {
                                                    '#': {
                                                    pattern: /-|[0-9*]/,
                                                    recursive: true
                                                    }
                                                }
                                            });//set separator number
    })

    $('form').submit(function() {
        $(".input_comma_custom").unmask();
    });

    function ribuanWithComma(val){
        return val.toLocaleString('en-US')
    }
</script>
@endsection