@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

@section('title', '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">General Cashier</span></h4>
			</div>
            <div class="d-flex">
                @if (in_array($user_role, [1,2,11,12,20,6]))
                <button type="button"
                        class="btn btn-success modal_reset_idx_data"
                        data-toggle="modal"
                        data-target="#modal_create_general_cashier"
                >
                    <i class="fas fa-coins"></i>&nbsp;
                    Create General Cashier
                </button>
                @endif

                &nbsp;
                <button type="button"
                        class="btn btn-primary modal_reset_idx_data"
                        data-toggle="modal"
                        data-target="#modal_create_expenditure"
                >
                    <i class="fas fa-coins"></i>&nbsp;
                    Expenditure
                </button>
            </div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
        <div class="row mb-1 justify-content-between">
            {{-- <div class="d-flex"></div> --}}
            <div>
                <div class="row">
                    <label class="col-sm-6 col-form-label font-weight-bolder">Filter Date Summary Balance: </label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="transaction_date_summary">
                    </div>
                </div>
                <br>
                <table id="transactionlist" class="transactionlist">
                    @if(in_array(\Auth::user()->role, [1, 2, 11, 12, 20, 6]))
                    <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>
                    @else
                    <thead><tr><th colspan="2">SUMMARY OF BALANCE</th><th style="width: 150px; text-align:right;">Ending Balance</th></tr></thead>
                    @endif
                    <tbody class="font-weight-bold">
                        @if(in_array(\Auth::user()->role, [1, 2, 11, 12, 20, 6]))
                            <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" id="hbfo_ending_name">{{$hbfo_ending_name}}</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" id="exp_ending_name">{{$exp_ending_name}}</td><td id="exp_debit" style="width: 150px; text-align:right;"></td><td id="exp_credit" style="width: 150px; text-align:right;"></td><td id="exp_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>
                        @else
                            {{-- <tr><td colspan="2" id="hbfo_ending_name">{{$hbfo_ending_name}}</td><td id="hbfo_ending" style="width: 150px; text-align:right;"></td></tr> --}}
                            <tr><td colspan="2" id="exp_ending_name">{{$exp_ending_name}}</td><td id="exp_ending" style="width: 150px; text-align:right;"></td></tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
        <br>
        <legend></legend>
		<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">
            <div class="card p-2 m-1" style="width: 200px">
                <div class="ml-2 font-weight-bolder">
                    <label class="col-form-label mr-2">Total Debet <i class="icon-exclamation btn-tooltip" title="For incoming balance"></i> : <span id="total_debet_id"> 0</span></label>
                </div>
            </div>
            <div class="card p-2 m-1" style="width: 200px">
                <div class="ml-2 font-weight-bolder">
                    <label class="col-form-label mr-2">Total Credit <i class="icon-exclamation btn-tooltip" title="For outgoing balance"></i> : <span id="total_credit_id"> 0</span></label>
                </div>
            </div>
            <div class="card p-2 m-1" style="width: 200px">
                <div class="ml-2 font-weight-bolder">
                    <label class="col-form-label mr-2">Total Ending Balance: <span id="total_amount_id">0</span></label>
                </div>
            </div>
        </div>
		<div class="card mt-0 table-responsive">
			<table class="datatable-basic table table-hover">
				<thead>
					<tr>
						<th style="width: 4px">No</th>
						<th style="width: 100px">Date</th>
						<th style="width: 100px">Reference No. Journal</th>
						<th style="width: 100px">Amount</th>
						<th style="width: 100px">Note</th>
						<th style="width: 50px">Action</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<!-- /content area -->

    <!--MODAL Create General Cashier-->
    <div id="modal_create_general_cashier" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h6 class="modal-title"><i class="fas fa-coins"></i>&nbsp;Create General Cashier</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{url('general-cashier/store')}}" method="post" id="form-general-cashier">
					@csrf
					<div class="modal-body">
                        <div class="form-group col-lg-5">
                            <label for="date">Transaction Date <span class="text-danger font-weight-bolder">*</span>:</label>
                            <input type="text" name="transaction_date" id="transaction_date" class="form-control daterange-single" required>
                        </div>

                        <legend></legend>

                            <div class="form-group row">
                                <div class="col-lg-3 form-group">
                                    @if (simpleCOA())
                                    @endif
                                    <label for="debit0">{{simpleCOA() ? 'Article' : 'COA'}}<span class="text-danger font-weight-bolder">*</span>:</label>
                                    <select name="coa[]" id="coa_0" class="form-control form-control-select2" onchange="viewBalance(this.value, 0)" required>
                                        <option value="">--{{simpleCOA() ? 'Select Article' : 'Select COA'}}--</option>
                                        @foreach($coas as $coa)
                                            @if (simpleCOA())
                                            <option value="{{ $coa->id }}">{{ @$coa->nama_lain }}</option>
                                            @else
                                            <option value="{{ $coa->id }}">{{ $coa->description }} ({{$coa->account_no}})</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-2 form-group">
                                    <label>Current Balance <span class="text-danger font-weight-bolder"></span>:</label>
                                    <br>
                                    <label id="balancecoa0" class="col-form-label font-weight-bolder">0</label>
                                </div>
                                <div class="col-lg-3 form-group">
                                    <label for="debit0">Debit <span class="text-danger font-weight-bolder">*</span>:  <i class="icon-exclamation text-warning btn-tooltip" title="For incoming balance"></i> </label>
                                    <input type="text" name="debet[]" id="debit0" class="form-control input_comma_custom debit">
                                </div>
                                <div class="col-lg-3 form-group">
                                    <label for="credit0">Credit <span class="text-danger font-weight-bolder">*</span>:  <i class="icon-exclamation text-warning btn-tooltip" title="For outgoing balance"></i> </label>
                                    <input type="text" name="credit[]" id="credit0" class="form-control input_comma_custom credit">
                                </div>
                                <div class="col-lg-1 form-group">
                                    <label>&nbsp;</label>
                                    <button class="btn btn-success form-control" type="button" onclick="addData()"><i class="icon-plus22"></i></button>
                                </div>
                            </div>

                            <div id="content-cashier">

                            </div>

                        <legend></legend>

                        <div class="form-group col-lg-8">
                            <label for="note">Note:</label>
                            <textarea name="note" id="note" class="form-control" rows="3"></textarea>
                        </div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-link btn-lg" data-dismiss="modal">Close</button>
						<button type="submit" id="submitbtn_new" class="btn btn-success disabled-submit">Submit</button>
					</div>
				</form>
			</div>
		</div>
	</div>
    <!--/MODAL Create General Cashier-->

    <!--MODAL Expenditure-->
    <div id="modal_create_expenditure" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-primary" align="center">
					<h6 class="modal-title"><i class="fas fa-coins"></i>&nbsp;Expenditure</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{url('general-cashier/expenditure')}}" method="post" id="form-expenditure">
					@csrf
					<div class="modal-body">
                        <div class="form-group col-lg-5">
                            <label for="date">Transaction Date <span class="text-danger font-weight-bolder">*</span>:</label>
                            <input type="text" name="transaction_date" id="transaction_date_expenditure" class="form-control daterange-single" disabled readonly>
                        </div>

                        <legend></legend>

                            <div class="form-group row">
                                <div class="col-lg-3 form-group">
                                    @if (simpleCOA())
                                    @endif
                                    <label>{{simpleCOA() ? 'Category' : 'COA'}}<span class="text-danger font-weight-bolder">*</span>:</label>
                                    <select name="coa[]" id="coa_0" class="form-control form-control-select2" required>
                                        <option value="">--{{simpleCOA() ? 'Select Category' : 'Select COA'}}--</option>
                                        @foreach($coas_fo as $coa)
                                            @if (simpleCOA())
                                            <option value="{{ $coa->id }}">{{ @$coa->description }}</option>
                                            @else
                                            <option value="{{ $coa->id }}">{{ $coa->description }} ({{$coa->account_no}})</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3 form-group">
                                    <label for="desc0">Description <span class="text-danger font-weight-bolder">*</span>: </label>
                                    <input type="text" name="description[]" id="desc0" class="form-control"  placeholder="input description ...">
                                </div>
                                <div class="col-lg-3 form-group">
                                    <label for="amount0">Amount <span class="text-danger font-weight-bolder">*</span>: </label>
                                    <input type="text" name="amount[]" id="amount0" class="form-control input_comma_custom"  placeholder="0">
                                </div>
                                <div class="col-lg-1 form-group">
                                    <label>&nbsp;</label>
                                    <button class="btn btn-primary form-control" type="button" onclick="addDataExpenditure()"><i class="icon-plus22"></i></button>
                                </div>
                            </div>

                            <div id="content-expenditure">

                            </div>

                        <legend></legend>

                        <div class="form-group col-lg-8">
                            <label for="note">Note:</label>
                            <textarea name="note" id="note" class="form-control" rows="3"></textarea>
                        </div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-link btn-lg" data-dismiss="modal">Close</button>
						<button type="submit" id="submitbtn_new" class="btn btn-primary disabled-submit">Submit</button>
					</div>
				</form>
			</div>
		</div>
	</div>
    <!--/MODAL Expenditure-->

    <!--Modal Detail GC-->
    <div id="modal_detail_gc" class="modal fade">
        <div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-light" align="center">
					<h6 class="modal-title"><i class="fas fa-coins"></i>&nbsp;Detail General Cashier</span></h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-4">Transaction Date</div>
                        <div class="col-lg-1">:</div>
                        <div class="col-lg-4" id="date"></div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">Total Debet</div>
                        <div class="col-lg-1">:</div>
                        <div class="col-lg-4" id="debet">0</div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">Total Credit</div>
                        <div class="col-lg-1">:</div>
                        <div class="col-lg-4" id="credit">0</div>
                    </div>
                </div>

                <div class="col-form-label form-group">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>No</th>
                                @if (simpleCOA())
                                <th>Article</th>
                                @else
                                <th>No.Account</th>
                                <th>Name Account</th>
                                @endif
                                <th>Remark</th>
                                <th>Debet</th>
                                <th>Credit</th>
                            </tr>
                        </thead>
                        <tbody id="table-body">

                        </tbody>
                    </table>
                </div>

			</div>
		</div>
    </div>
    <!--/Modal Detail GC-->
@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">
    let idx_data = 0;
    var date     =  {!! json_encode($date) !!};
    let tanggal = {!! json_encode((\Request::get('filter_date') ? \Request::get('filter_date') : date('d-m-Y', strtotime((getSystemDate())) ).' - '.date('d-m-Y', strtotime((getSystemDate())) ))  ) !!}
    tanggal = tanggal.split(" - ");
    $('#filter_date').daterangepicker({
        showDropdowns: true,
        startDate: tanggal[0],
        endDate: tanggal[1],
        applyClass: 'btn-primary',
        cancelClass: 'btn-light',
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

    $('#transaction_date').daterangepicker({
        singleDatePicker:true,
        showDropdowns: true,
        startDate: '{{dateFormat(getSystemDate(), "d-m-Y")}}',
        applyClass: 'btn-primary',
        cancelClass: 'btn-light',
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

    $('#transaction_date_summary').daterangepicker({
        singleDatePicker: true,
        startDate: "{{date('d-m-Y', strtotime(getSystemDate()))}}",
        applyClass: 'btn-primary',
        cancelClass: 'btn-light',
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

    $('#transaction_date_expenditure').daterangepicker({
        singleDatePicker:true,
        showDropdowns: true,
        startDate: '{{dateFormat(getSystemDate(), "d-m-Y")}}',
        applyClass: 'btn-primary',
        cancelClass: 'btn-light',
        locale: {
            format: 'DD-MM-YYYY'
        }
    });

	function countLeftBalance(element){
		//Input Value
		let value = $(element).val();
			value = parseInt(value.replaceAll(',', ''));
		//Balance Value
		let balance = $('#payment_left_balance').val();
			balance = parseInt(balance.replaceAll(',', ''));

		//Left Balance
		let left_balance = balance-value;
			left_balance = left_balance.toLocaleString('EN-US')
		$('#payment_left_balance').val(left_balance);
	}

	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;' }
				}
			});

            let datas = [
                {data:'DT_RowIndex', name:'no'},
                {data: 'transaction_date'},
                {data:null, render:function(data, type, row){
                    var html = data.gl ? data.gl.reference_no : '-';
                    return html
                }},
                {data:null, render:function(data, type, row){
                    var html = data.amount ? ribuanWithComma(data.amount) : '-';
                    return html
                }},
                {data: 'cash_name'},
                {data:null, render:function(data, type, row){
                    let html = '';
                    html += `
                    <div style="text-align:center">
                        <button onclick="detailGC(${data.id})" type="button" class="btn btn-light btn-icon"><i class="icon-search4" title="Lihat"></i></button>
                    </div>
                    `;
                    return html
                }}
            ];

			// Basic datatable
			$('.datatable-basic').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                        url: '{{url("general-cashier-datatable")}}',
                        data:{date:date},
                        type: "GET",
                    },
                columns: datas,
                "order": [[ 0, "desc" ]],
            });

			// 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()
            totalamount()
		});
        $('#transaction_date_summary').on('apply.daterangepicker', (e, picker) => {
            var date = document.getElementById("transaction_date_summary").value
            $.ajax({
                type: 'GET',
                url: "{{ url('coa-loadbalance')}}",
                data:{
                    date:date
                },
                success: function (data) {
                    if(data){
                        $('.transactionlist #gc_debit').html((Number(data.gc.debit).toLocaleString('en-US')) ?? 0)
                        $('.transactionlist #gc_credit').html((Number(data.gc.credit).toLocaleString('en-US')) ?? 0)
                        $('.transactionlist #gc_ending').html((Number(data.gc.ending_balance).toLocaleString('en-US')) ?? 0)

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

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

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

                        $('.transactionlist #hbfb_debit').html((Number(data.hbfb.debit).toLocaleString('en-US')) ?? 0)
                        $('.transactionlist #hbfb_credit').html((Number(data.hbfb.credit).toLocaleString('en-US')) ?? 0)
                        $('.transactionlist #hbfb_ending').html((Number(data.hbfb.ending_balance).toLocaleString('en-US')) ?? 0)

                        $('.transactionlist #exp_debit').html((Number(data.exp.debit).toLocaleString('en-US')) ?? 0)
                        $('.transactionlist #exp_credit').html((Number(data.exp.credit).toLocaleString('en-US')) ?? 0)
                        $('.transactionlist #exp_ending').html((Number(data.exp.ending_balance).toLocaleString('en-US')) ?? 0)
                    }
                }
            });
        });
        $('form').submit(function() {
            $('.disabled-submit').prop('disabled', true);
        });
        $('.debit').on('change', function(){
            $('.disabled-submit').prop('disabled', false)
        })
        $('.credit').on('change', function(){
            $('.disabled-submit').prop('disabled', false)
        })
	</script>


<script>
    function balanceLoad() {
        var date = document.getElementById("transaction_date_summary").value
        $.ajax({
            type: 'GET',
            url: "{{ url('coa-loadbalance')}}",
            data:{
                date:date
            },
            success: function (data) {
                if(data){
                    $('.transactionlist #hbfo_ending_name').html(data.name)

                    $('.transactionlist #gc_debit').html((Number(data.gc.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlist #gc_credit').html((Number(data.gc.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlist #gc_ending').html((Number(data.gc.ending_balance).toLocaleString('en-US')) ?? 0)

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

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

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

                    $('.transactionlist #hbfb_debit').html((Number(data.hbfb.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlist #hbfb_credit').html((Number(data.hbfb.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlist #hbfb_ending').html((Number(data.hbfb.ending_balance).toLocaleString('en-US')) ?? 0)

                    $('.transactionlist #exp_debit').html((Number(data.exp.debit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlist #exp_credit').html((Number(data.exp.credit).toLocaleString('en-US')) ?? 0)
                    $('.transactionlist #exp_ending').html((Number(data.exp.ending_balance).toLocaleString('en-US')) ?? 0)
                }
            }
		});
    }

    function totalamount() {
        $.ajax({
            type: 'GET',
            url: "{{ url('totalamount-gc')}}",
            data:{date:date},
            success: function (data) {
                if(data){
                    $('#total_debet_id').html((Number(data.total_debit).toLocaleString('en-US')) ?? 0)
                    $('#total_credit_id').html((Number(data.total_credit).toLocaleString('en-US')) ?? 0)
                    $('#total_amount_id').html((Number(data.total_ending_balance).toLocaleString('en-US')) ?? 0)
                    // console.log(data.total_amount)
                }
            }
		});
    }

    $('#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();
    });

    $('.modal_reset_idx_data').on('click', function(){
        idx_data = 0
        $('#content-expenditure').html(null)
        $('#content-cashier').html(null)
    })

    function detailGC(id) {
        $('#table-body').html(null)
        $('#modal_detail_gc #date').html(null)
        $('#modal_detail_gc #debet').html(null)
        $('#modal_detail_gc #credit').html(null)
        $.ajax({
            type: "get",
            url: "{{url('detail-gc')}}",
            data: {id:id},
            dataType: "json",
            success: function (data) {
                var gc =data.gc;
                var detail =data.detail;
                var debet = credit = 0;
                var html = ``;
                $.each(detail, function (i, v) {
                    debet += Number(v.debet)
                    credit += Number(v.credit)
                    html+= `
                        <tr>
                            <td>${i+1}</td>
                            @if (simpleCOA())
                                <td>${v.coa.description}</td>
                            @else
                                <td>${v.coa.account_no}</td>
                                <td>${v.coa.description}</td>
                            @endif
                            <td>${v.remark}</td>
                            <td>${ribuanWithComma(Number(v.debet))}</td>
                            <td>${ribuanWithComma(Number(v.credit))}</td>
                        </tr>
                    `;
                });
                $('#table-body').html(html)
                $('#modal_detail_gc #date').html(gc.transaction_date)
                $('#modal_detail_gc #debet').html(ribuanWithComma(Number(debet)))
                $('#modal_detail_gc #credit').html(ribuanWithComma(Number(credit)))

                $('#modal_detail_gc').modal('show')
            }
        });
    }

    function addData() {
        idx_data++
        var html = `
            <div class="form-group row" id="data${idx_data}">
                <div class="col-lg-3 form-group">
                    <select name="coa[]" id="coa_${idx_data}" class="form-control form-control-select2" onchange="viewBalance(this.value, ${idx_data})" required>
                        <option value="">--{{simpleCOA() ? 'Select Article' : 'Select COA'}}--</option>
                        @foreach($coas as $coa)
                            @if (simpleCOA())
                            <option value="{{ $coa->id }}">{{ @$coa->nama_lain }}</option>
                            @else
                            <option value="{{ $coa->id }}">{{ $coa->description }} ({{$coa->account_no}})</option>
                            @endif
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 form-group">
                    <label id="balancecoa${idx_data}" class="col-form-label font-weight-bolder">0</label>
                </div>
                <div class="col-lg-3 form-group">
                    <input type="text" name="debet[]" id="debit${idx_data}" class="form-control input_comma_custom debit">
                </div>
                <div class="col-lg-3 form-group">
                    <input type="text" name="credit[]" id="credit${idx_data}" class="form-control input_comma_custom credit">
                </div>
                <div class="col-lg-1 form-group">
                    <button class="btn btn-danger form-control" type="button" onclick="deleteData(${idx_data})"><i class="icon-trash"></i></button>
                </div>
            </div>
        `;
        $('#content-cashier').append(html);
        $('.form-control-select2').select2()
        $('.input_comma_custom').on('input', function(){
            $('.input_comma_custom').mask("#,##0", {
                reverse: true,
                translation: {
                    '#': {
                    pattern: /-|[0-9*]/,
                    recursive: true
                    }
                }
            });//set separator number
        })
        $('.debit').on('change', function(){
            $('.disabled-submit').prop('disabled', false)
        })
        $('.credit').on('change', function(){
            $('.disabled-submit').prop('disabled', false)
        })
    }

    function deleteData(idx) {
        $('#data'+idx).remove()
        idx_data--
    }

    $('#form-general-cashier').submit(function(event) {

        event.preventDefault(); //this will prevent the default submit

        var debits = $('.debit')
        var credits = $('.credit')

        var sumdebit=0;
        var sumcredit=0;
        $.each(debits, function(key, val){
            let value = parseInt(($(val).val()).replaceAll(".",""));
            if ($(val).val()) {
                sumdebit += value;
            }
        });
        $.each(credits, function(key, val){
            let value = parseInt(($(val).val()).replaceAll(".",""));
            if ($(val).val()) {
                sumcredit += value;
            }
        });

        if (sumdebit == sumcredit) {
            $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
        }else{
            new PNotify({
                title: 'Error',
                text: 'Debit Credit must balance.',
                icon: 'icon-blocked',
                type: 'Error'
            });
        }

    })

    function ribuanWithComma(val){
        return val.toLocaleString('en-US')
    }

    function viewBalance(id, idhtml){
		$.ajax({
				type: 'GET',
				url: "{{ url('coa/remainingbalance')}}/"+id,
				success: function (data) {
                    if(data){
                        $('#modal_create_general_cashier #balancecoa'+idhtml).html((Number(data.balance).toLocaleString('en-US')) ?? 0)
                    }
				}
		});
	}

    function addDataExpenditure() {
        idx_data++
        var html = `
            <div class="form-group row" id="data-expenditure${idx_data}">
                <div class="col-lg-3 form-group">
                    <select name="coa[]" id="coa_${idx_data}" class="form-control form-control-select2" required>
                        <option value="">--{{simpleCOA() ? 'Select Category' : 'Select COA'}}--</option>
                        @foreach($coas_fo as $coa)
                            @if (simpleCOA())
                            <option value="{{ $coa->id }}">{{ @$coa->description }}</option>
                            @else
                            <option value="{{ $coa->id }}">{{ $coa->description }} ({{$coa->account_no}})</option>
                            @endif
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 form-group">
                    <input type="text" name="description[]" id="desc${idx_data}" class="form-control" placeholder="input description ...">
                </div>
                <div class="col-lg-3 form-group">
                    <input type="text" name="amount[]" id="amount${idx_data}" class="form-control input_comma_custom"  placeholder="0">
                </div>
                <div class="col-lg-1 form-group">
                    <button class="btn btn-danger form-control" type="button" onclick="deleteDataExpenditure(${idx_data})"><i class="icon-trash"></i></button>
                </div>
            </div>
        `;
        $('#content-expenditure').append(html);
        $('.form-control-select2').select2()
        $('.input_comma_custom').on('input', function(){
            $('.input_comma_custom').mask("#,##0", {
                reverse: true,
                translation: {
                    '#': {
                    pattern: /-|[0-9*]/,
                    recursive: true
                    }
                }
            });//set separator number
        })
    }

    function deleteDataExpenditure(idx) {
        $('#data-expenditure'+idx).remove()
        idx_data--
    }
</script>
@endsection