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

@section('title', 'Hotel Group | Profit Loss')

@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 | Profil Loss</span></h4>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
        <form method="GET" id="form-filter-payment-date">
			<div class="row mb-1 justify-content-between">
				<div class="d-flex pl-2">
					<label class="col-form-label mr-2 font-weight-bolder">Transaction Date: </label>
					<div>
						<input type="text" name="filter_date" class="form-control" id="filter_date">
					</div>
				</div>
			</div>
		</form>
        <div class="row mb-1 justify-content-between">
            <div class="d-flex">
                <table id="transactionlist" class="transactionlist">
                    <thead><tr><th colspan="2">SUMMARY</th><th style="width: 150px; text-align:right;">Amount</th></thead>
                    <tbody class="font-weight-bold">
                        <tr><td colspan="2">Revenue</td><td id="total_revenue" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">Cost</td><td id="total_cost" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">Gross</td><td id="total_gross" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">Expenses</td><td id="total_expenses" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">Ebitda</td><td id="total_ebitda" style="width: 150px; text-align:right;"></td></tr>
                        <tr><td colspan="2">Non Operating Exp</td><td id="total_nonop" style="width: 150px; text-align:right;"></tr>
                        <tr><td colspan="2">Nett Profit</td><td id="total_profit" style="width: 150px; text-align:right;"></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;">Amount</th></thead>
                        <tbody class="font-weight-bold">
                            <tr><td colspan="2">Revenue</td><td id="total_revenue" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">Cost</td><td id="total_cost" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">Gross</td><td id="total_gross" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">Expenses</td><td id="total_expenses" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">Ebitda</td><td id="total_ebitda" style="width: 150px; text-align:right;"></td></tr>
                            <tr><td colspan="2">Non Operating Exp</td><td id="total_nonop" style="width: 150px; text-align:right;"></tr>
                            <tr><td colspan="2">Nett Profit</td><td id="total_profit" style="width: 150px; text-align:right;"></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() {
        var from = $('#filter_date').val()
        $.ajax({
            type: 'GET',
            url: "{{ url('/group-hotel/profit-loss-data')}}",
            data:{from},
            success: function (data) {
                perhotel = data.perhotel
                total = data.total
                if(perhotel){
                    $.each(perhotel, function (i, val) {
                        $('#transactionlist'+i+' #total_revenue').html((Number(val.total_revenues).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #total_cost').html((Number(val.total_cost).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #total_gross').html((Number(val.total_gross).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #total_expenses').html((Number(val.total_expenses).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #total_nonop').html((Number(val.total_non_operating_exp).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #total_ebitda').html((Number(val.EBITDA).toLocaleString('en-US')) ?? 0)
                        $('#transactionlist'+i+' #total_profit').html((Number(val.total_nett_profit).toLocaleString('en-US')) ?? 0)
                    });
                }
                if (total) {
                    $('#transactionlist #total_revenue').html((Number(total.total_revenues).toLocaleString('en-US')) ?? 0)
                    $('#transactionlist #total_cost').html((Number(total.total_cost).toLocaleString('en-US')) ?? 0)
                    $('#transactionlist #total_gross').html((Number(total.total_gross).toLocaleString('en-US')) ?? 0)
                    $('#transactionlist #total_expenses').html((Number(total.total_expenses).toLocaleString('en-US')) ?? 0)
                    $('#transactionlist #total_nonop').html((Number(total.total_non_operating_exp).toLocaleString('en-US')) ?? 0)
                    $('#transactionlist #total_ebitda').html((Number(total.EBITDA).toLocaleString('en-US')) ?? 0)
                    $('#transactionlist #total_profit').html((Number(total.total_nett_profit).toLocaleString('en-US')) ?? 0)
                }
            }
		});
    }

    $('#filter_date').on('apply.daterangepicker', (e, picker) => {
        balanceLoad()
    });

    $('#filter_date').daterangepicker({
        startDate: `${moment("{{getSystemDate()}}").clone().startOf('month').format('DD-MM-YYYY')}`,
	    endDate: `${moment("{{getSystemDate()}}").clone().endOf('month').format('DD-MM-YYYY')}`,
        showDropdowns: true,
        applyClass: 'btn-primary',
        cancelClass: 'btn-light',
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

    // 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