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

@section('title', 'Deposit')

@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">Deposit</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">

			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th>No. </th>
						<th>Reservation Number</th>
						<th>Reservation Name</th>
						<th>Group Name</th>
						<th>Guest Name</th>
						<th>Arrival</th>
						<th>Deposit To</th>
						{{-- <th>Due Date</th> --}}
						<th>Deposit Paid</th>
						<th>Balance</th>
						<th>Pay Date</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')
					<div class="modal-body" align="center">
						<h2> Hapus Data? </h2>
					</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 Transfer TO Nonstay Bill
	--------------------------------------------------------------
	--}}
    <!--MODAL-->
    <div id="transfer_nonstay_modal" class="modal fade">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header bg-primary" align="center">
					<h6 class="modal-title"><i class="icon icon-file-upload-2 mr-1"></i>Transfer To Nonstay Bill</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{url('transfer-to-nonstay')}}" id="nonstay_bill_form" method="POST">
					<div class="modal-body">
						@csrf

                        <input type="hidden" id="invoice_id" name="invoice_id">

						<table class="table table-hover" id="table_transfer_nonstay">
							<thead>
								<tr>
									<th>No.</th>
									<th>Description</th>
									<th>Qty</th>
									<th>Total</th>
									<th>Transfer to</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
							<div id="pilihan_detail_nonstay">

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

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
						<button type="submit" class="btn bg-primary">Transfer</button>
					</div>
				</form>
			</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/ui/moment/moment.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/daterangepicker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/anytime.min.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.date.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/picker.time.js"></script>
	<script src="{{asset('/')}}/global_assets/js/plugins/pickers/pickadate/legacy.js"></script> -->
	<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 jenis_identitas = {!! json_encode(config('custom.jenis_identitas')) !!};
		let tipe_booking = {!! json_encode(config('custom.tipe_booking')) !!};
		let jenis_pembayaran = {!! json_encode(config('custom.jenis_pembayaran')) !!};
        let status_bill = {!! json_encode(config('custom.status_bill')) !!};
		let jenis_deposit_text = {!! json_encode(config('custom.jenis_deposit')) !!};

		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

        $('#customStatusBill').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var id = button.data('id');
                var status = button.data('status');
                var modal = $(this);

                modal.find('.modal-body #invoices_id').val(id);
                modal.find('.modal-body #status_bill').val(status);

        })

		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: "{{route('deposit-datatable')}}",
					"order": [[ 0, "desc" ]],
					columns:[
						{data:'DT_RowIndex', name:'no'},
						{data:null, name:'kode_booking', render:function(data, type, row){
							var infobook = ''
							infobook = data.booking ? data?.booking?.kode_booking : '';

							if (data.booking) {
								var infocancel = ''
								if (data.booking.status_booking == 13) {
									infocancel = '<br> <span class="text-muted">Cancel Reservation</span>';

									return infobook+infocancel
								} else {
									return infobook
								}
							}

						}},
						{data:null, name:'nama', render:function(data, type, row){
							return data.booking ? data?.booking?.nama : '';
						}},
						{data:null, render:function(data, type, row){
							return data.booking ? (data.booking.company ? data.booking.company.name : '-') : '';
						}},
						{data:null, name:'nama', render:function(data, type, row){
							return data.booking ? data.booking?.nama : '';
						}},
						{data:null, name:'start_date', render:function(data, type, row){

                            // Penyesuaian start date per kamar
                            let arrival = '-';
                            $.each(data.booking.booking_details, function (index, value) {
                                if (value.nomor_kamar == data.nomor_kamar && value.room_index == data.room_index && value.array_sub == 0) {
                                    arrival = value.checkin ?? value.start_date;
                                    arrival = moment(arrival, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY');
                                }
                            });

							return `${arrival}`;
                            // return `${moment(data?.booking?.start_date, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}`;
						}},
						// deposit to
						{data:null, name:'nominal', render:function(data, type, row){
							var deposit = data.nominal
							return `Rp. ${deposit.toLocaleString('ID')}`;
						}},
						// {data:null, name:''},
						// deposit paid
						{data:null, name:'nominal', render:function(data, type, row){
							var deposit = data.nominal
							if (data.booking) {
								if (data.nomor_kamar) {
									return `Rp. ${deposit.toLocaleString('ID')}`;
								} else {
									return `-`;

								}
							}
						}},
						{data:null, name:'balance', render:function(data, type, row){
							var deposit_to = data?.nominal
							var deposit_paid = 0
							if (data.booking) {
								if (data.nomor_kamar) {
									deposit_paid = data?.nominal
								}
							}
							var balance = deposit_to - deposit_paid
							return `Rp. ${balance.toLocaleString('ID')}`;
						}},
						{data:null, name:'checkin', render:function(data, type, row){
							if (data.booking) {
								if (data.nomor_kamar) {
									return `${moment(data?.booking?.checkin, 'YYYY-MM-DD hh:mm:ss').format('DD-MM-YYYY')}`;
								} else {
									return `-`;
								}
							}
						}},
						{data:null, render:function(data, type, row){
							var deposit_to = data?.nominal
							var deposit_paid = 0
							if (data.booking) {
								if (data.nomor_kamar) {
									deposit_paid = data?.nominal
								}
							}
							var balance = deposit_to - deposit_paid
                            console.log(balance);
							let btn_transfer_nonstay = ``;
							if(balance){
								btn_transfer_nonstay = `<a href="#transfer_nonstay_modal"
															   id="btn_transfer_nonstay_modal"
															   class="btn-tooltip btn_transfer_nonstay_modal mr-1"
                                                                onclick="ClickBtnTransferNonstay(${data.invoice_id})"
															   data-target="#transfer_nonstay_modal"
															   data-toggle="modal"
															   title="Transfer To Nonstay Bill"
															>
																<button type="button" class="btn btn-sm btn-info btn-icon btn-tooltip">
																	<i class="icon icon-file-upload2" title="Transfer Nonstay"></i>
																</button>
															</a>`;
							}
							else{
								btn_transfer_nonstay = ``;
							}

                            //    onclick="ClickBtnTransferNonstay(${data.booking?.invoice?.id})"

							let html = `<div class="btn-group" style="width: 100%; text-align:center">
											${btn_transfer_nonstay}
											<a href="{{url('cetak-deposit')}}/${data.id}"
											   target="_blank"
											>
												<button type="button" class="btn btn-sm btn-success btn-icon btn-tooltip">
													<i class="fas fa-print" title="Cetak"></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() {
		    DatatableBasic.init();
		});

		//Button tooltip
		$('.btn-tooltip').tooltip()
	</script>
	<script type="text/javascript">


	//Transfer Deposit To Nonstay Bill
	function ClickBtnTransferNonstay(id){
			var html = ''
			var cekopt = ''

			$('#invoice_id').val(id)
			$.ajax({
				type: 'GET',
				url: "{{url('rv_getdata_transferbill')}}",
				data: {
					_token:'{{csrf_token()}}',
					id: id
				},
				success: function (res) {
					var no = 1;
					var qty = 0

					$.each(res.invoice_utama, function(index2, value2) {

						// //Load Shop Transaction ID
						// if(value2.shop_transaction.length > 0){
						// 	$.each(value2.shop_transaction, function(idx_shop, value_shop) {
						// 		if(value_shop.jenis_transaksi == 1 && value_shop.deleted_at === null){
						// 			html += `
						// 					<tr>
						// 					<td>${no}</td>
						// 					<td>${value_shop.menu ? value_shop.menu.nama : value_shop.keterangan_custom}</td>
						// 					<td>
						// 					${value_shop.jumlah}
						// 					</td>
						// 					<td>Rp ${Number(value_shop.total_biaya).toLocaleString("id-ID")}</td>
						// 					<td>`
						// 			html += `<input type='hidden' id='detail_id_${value_shop.id}' name='detail_id[]'>`;
						// 			html += `<input type='hidden' id='shop_transaction_id_${value_shop.id}' name='shop_transaction_id[]' value='${value_shop.id}'>`;
						// 			html += `<input type='hidden' id='deposit_id_${value_shop.id}' name='deposit_id[]'>`;
                        //             html += `<input type='hidden' id='pembayaran_nonstay${value_shop.id}' name='pembayaran_nonstay[]'> `;
						// 			html += `<select class="form-control form-control-select2" name="transferto_nonstay[]">`;
						// 			html += '<option value="">-- Select Nonstay --</option>';
						// 			$.each(res.other_nonstay, function (ind, val) {
						// 				html += `<option value='${val.id}'>${val.guest_profile.name} - ${val.no_bill}</option>`
						// 			})
						// 			html += '</select>'
						// 			html += `</td>
						// 					</tr>`;
						// 			no++;
						// 		}
						// 	})
						// }

						//Load Deposit ID
						if(value2.bookings.deposits.length > 0){
							$.each(value2.bookings.deposits, (idx_deposit, value_deposit) => {
								if(value_deposit.jenis_transaksi == 1 && value_deposit.deposit_reservasi != null && value_deposit.deleted_at === null){
									html += `
											<tr>
											<td>${no}</td>
											<td>Pembayaran ${jenis_deposit_text[value_deposit.jenis_deposit]} A.N. ${value_deposit.nama}</td>
											<td></td>
											<td>Rp ${Number(value_deposit.nominal).toLocaleString("id-ID")}</td>
											<td>`
									html += `<input type='hidden' id='detail_id_${value_deposit.id}' name='detail_id[]'>`;
									html += `<input type='hidden' id='shop_transaction_id_${value_deposit.id}' name='shop_transaction_id[]'>`;
									html += `<input type='hidden' id='deposit_id_${value_deposit.id}' name='deposit_id[]'  value='${value_deposit.id}'>`;
                                    html += `<input type='hidden' id='pembayaran_pos${value_deposit.id}' name='pembayaran_pos[]'> `;
									html += `<select class="form-control form-control-select2" name="transferto_nonstay[]">`;
									html += '<option value="">-- Select Nonstay --</option>';
									$.each(res.other_nonstay, function (ind, val) {
										html += `<option value='${val.id}'>${val.guest_profile.name} - ${val.no_bill}</option>`
									})
									html += '</select>'
									html += `</td>
											</tr>`;
									no++;
								}
							});
						}

                        //Load PembayaranPOS yang nonstay ID ini
						// if(value2.bookings.pembayaran_pos.length > 0){
						// 	$.each(value2.bookings.pembayaran_pos, function(idx_pos, value_pos) {
						// 		if(value_pos.jenis_pembayaran_id == 6){
                        //             console.log(value2.bookings.value_pos)
						// 			html += `
						// 					<tr>
						// 					<td>${no}</td>
						// 					<td>Outlet Bill: ${value_pos?.cart?.order_flag}</td>
						// 					<td>Rp ${Number(value_pos.nominal).toLocaleString("id-ID")}</td>
						// 					<td>Rp ${Number(value_pos.nominal).toLocaleString("id-ID")}</td>
						// 					<td>`
                        //             html += `<input type='hidden' id='detail_id_${value_pos.id}' name='detail_id[]'>`;
						// 			html += `<input type='hidden' id='shop_transaction_id_${value_pos.id}' name='shop_transaction_id[]'>`;
						// 			html += `<input type='hidden' id='deposit_id_${value_pos.id}' name='deposit_id[]'>`;
						// 			html += `<input type='hidden' id='pembayaran_nonstay${value_pos.id}' name='pembayaran_nonstay[]' value='${value_pos.id}'> `;
						// 			html += `<select class="form-control form-control-select2" name="transferto_nonstay[]">`;
                        //             html += '<option value="">-- Select Nonstay --</option>';
						// 			$.each(res.other_nonstay, function (ind, val) {
						// 				html += `<option value='${val.id}'>${val.guest_profile.name} - ${val.no_bill}</option>`
						// 			})
						// 			html += '</select>'
						// 			html += `</td>
						// 					</tr>`;
						// 			no++;
						// 		}
						// 	})
						// }

					})

					$('#table_transfer_nonstay tbody').empty()
					$('#table_transfer_nonstay tbody').append(html)
					$('.form-control-select2').select2();
				}
			})
		}



		$( 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