@extends('layout')

@section('title','Daily')

@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 page-header-light">
	<div class="page-header-content header-elements-md-inline">
		<div class="page-title d-flex">
			<h4><span class="font-weight-semibold">{{ $homestay }}</span> - Harga Kamar</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 header-elements">
			<div class="form-group row">
				<a href="/homestays"><button type="button" class="btn btn-light rounded-round"><i
					class="icon-arrow-left52 mr-2"></i> Kembali </button></a>
			</div>
			<div class="form-group row">
				<div class="col-lg-6">
					<form method="get" action="/rooms/{{ $id }}">
						<div class="form-group row">
							<div class="col-lg-4">
								<input type="date" id="tanggal" name="tanggal" class="form-control pickadate-tanggal"
									value="{{ request()->get('tanggal') ? request()->get('tanggal') : date('Y-m-d') }}">
							</div>
							<div class="col-lg-6">
								<button type="submit" class="btn btn-primary">
									Cari
								</button>
								<a href="/rooms/{{ $id }}" class="btn btn-light"><i class="icon-reset mr-1"></i>Reset
								</a>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="form-group row">
				<h1 class="ml-1">Tanggal : {{ $tanggal }}</h1>
			</div>
		</div>

		<div class="card-body mt-0">
			<table class="table datatable-basic table-bordered">
				<thead>
					<tr>
						<th>No</th>
						<th>Kamar</th>
						<th>Harga</th>
						<th>Availability</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1.</td>
						<td>Room 1</td>
						<td>22 Januari 2025</td>
						<td>form</td>
					</tr>
				</tbody>
			</table>
		</div>
	</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> are you sure you want to permanently delete this file? </h2>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn bg-danger">Delete</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- /default modal -->
{{-- Payment Modal --}}
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header bg-primary" align="center">
				<h5 class="modal-title" id="paymentModalLabel">Payment Instructions</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<div class="modal-body" id="paymentModalBody">

			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
{{-- /payment 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/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('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>

<script>
	function formatPayment(element) {
		let element_value = $(element).val()
		let start = element_value.slice(0, 1)
		let check_negative_symbol = element_value.indexOf('-', 1)
		if (check_negative_symbol > -1) {
			$(element).val(start + element_value.slice(1, element_value.length).replace('-', '').replace('-', ''))
		}

		$(element).val(function (index, value) {
			return value
				.replace(/[^0-9-]/g, "")
				.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
		});
	}

	$(".pickadate-tanggal").pickadate({
		labelMonthNext: 'Go to the next month',
		labelMonthPrev: 'Go to the previous month',
		labelMonthSelect: 'Pick a month from the dropdown',
		labelYearSelect: 'Pick a year from the dropdown',
		selectMonths: true,
		selectYears: true,
		format: 'yyyy-mm-dd',
	})
	//modal delete
	$(document).on("click", ".delbutton", function () {
		var url = $(this).data('uri');
		$("#delform").attr("action", url);
	});

	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: 100,
					// targets: [7]
				}],
				dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
				language: {
					search: '<span>Search:</span> _INPUT_',
					searchPlaceholder: 'Type to search...',
					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: 'DT_RowIndex' },
				{ data: 'nama' },
				{
					data: null,
					className: 'editable-price',
					render: function (data, type, row) {
						let html = `<div class="d-flex justify-content-between align-items-center">`;

						if (data.daily_price?.harga) {
							html += `<span>Rp ${parseInt(data.daily_price.harga).toLocaleString('id-ID')}</span>`;
						} else {
							html += `<span class="text-muted">Rp ${data.harga_owner.toLocaleString('id-ID')}</span>`;
						}

						html += `
							<button class="btn btn-sm btn-primary edit-harga ms-2"
								data-id="${row.id}"
								data-date="${row.tanggal}">
								<i class="fa fa-edit"></i>
							</button>
						`;

						html += `</div>`;
						return html;
					}
				},
				{
					data: null,
					className: 'editable-status',
					render: function (data, type, row) {
						let hasBookings = row.bookings && row.bookings.length > 0;
						let isAvailable = row.daily_price?.is_available ?? 1;

						// Jika ada booking atau is_available == 0, uncheck
						let checked = (!hasBookings && isAvailable) ? "checked" : "";

						return `<input type="checkbox" class="availability-checkbox" data-id="${row.id}" data-date="${row.tanggal}" ${checked}>`;
					}
				}
			];

			// Basic datatable
			$('.datatable-basic').DataTable(
				{
					processing: true,
					serverSide: true,
					ajax: {
						url: "{{url('/rooms/' . $id)}}",
						type: "GET",
						data: function (d) {
							let urlParams = new URLSearchParams(window.location.search);
							let tanggal = urlParams.get('tanggal');

							if (tanggal) {
								d.tanggal = tanggal;
							}
						},
						beforeSend: function () {
							$('.datatable-basic > tbody').html(
								'<tr class="odd">' +
								'<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
								'</tr>'
							);
						},
					},
					columns: datas,
					searching: false,
					"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>
	$(document).ready(function () {
		const table = $('.datatable-basic').DataTable();

		// Event untuk Menampilkan Input Saat Tombol Edit Ditekan
		$('.datatable-basic tbody').on('click', '.edit-harga', function () {
			let button = $(this);
			let row = table.row(button.closest('tr'));
			let rowData = row.data();
			let harga = rowData.daily_price?.harga || 0;

			// Ubah tampilan harga menjadi input + tombol save
			let hargaCell = $(row.node()).find('td.editable-price');
            console.log(harga)
			hargaCell.html(`
				<input type="text" value="${harga.toLocaleString('id-ID')}" class="edit-input form-control" oninput="formatPayment(this)" style="width:75%; display:inline-block;">
				<button class="btn btn-sm btn-success save-harga"><i class="icon-floppy-disk"></i></button>
			`);

			let input = hargaCell.find('.edit-input');
			input.focus();
			input[0].setSelectionRange(input.val().length, input.val().length); // Cursor di akhir teks
		});

		// Event untuk Menyimpan Saat Tombol Save Ditekan
		$('.datatable-basic tbody').on('click', '.save-harga', function () {
			let button = $(this);
			let hargaCell = button.closest('td');
			let input = hargaCell.find('.edit-input');
			let newValue = input.val();

			let row = table.row(hargaCell.closest('tr'));
			let rowData = row.data();

			updateData(rowData.id, rowData.tanggal, newValue, 'harga', function () {
				let formattedValue = parseInt(newValue) > 0
					? `Rp ${newValue}`
					: `<span class="text-muted">Rp ${rowData.harga_owner.toLocaleString('id-ID')}</span>`;

				// Update data di DataTable agar saat edit lagi, nilainya tidak kembali ke lama
				rowData.daily_price = rowData.daily_price || {};
				rowData.daily_price.harga = parseInt(newValue.replace(/\./g, '').toLocaleString('id-ID'));

				hargaCell.html(`
					<div class="d-flex justify-content-between align-items-center">
						<span>${formattedValue}</span>
						<button class="btn btn-sm btn-primary edit-harga ms-2"
							data-id="${rowData.id}"
							data-date="${rowData.tanggal}">
							<i class="fa fa-edit"></i>
						</button>
					</div>
				`);
			});
		});

		// Fungsi Update Data ke Server
		function updateData(id, tanggal, value, column, callback) {
			$.ajax({
				url: '/update_daily_price',
				method: 'POST',
				data: {
					id: id,
					column: column,
					tanggal: tanggal,
					value: value,
					_token: '{{ csrf_token() }}'
				},
				success: function (response) {
					new PNotify({
						title: 'Success',
						text: response.message,
						icon: 'icon-checkmark3',
						type: 'success'
					});
					callback();
				},
				error: function (xhr) {
					let errorMessage = 'Data gagal diupdate.';

					if (xhr.responseJSON && xhr.responseJSON.message) {
						errorMessage = xhr.responseJSON.message;
					}

					new PNotify({
						title: 'Error',
						text: errorMessage,
						icon: 'icon-blocked',
						type: 'error'
					});
				}
			});
		}
	});


	// Handle change event checkbox availability
	$(document).on("change", ".availability-checkbox", function () {
		let isChecked = $(this).is(":checked") ? 1 : 0;
		let roomId = $(this).data("id");
		let tanggal = $(this).data("date");
		let checkbox = $(this);

		$.ajax({
			url: "{{ url('/update_daily_price') }}",
			type: "POST",
			data: {
				id: roomId,
				tanggal: tanggal,
				column: "is_available",
				value: isChecked,
				_token: "{{ csrf_token() }}"
			},
			success: function (response) {
				new PNotify({
					title: 'Success',
					text: response.message,
					icon: 'icon-checkmark3',
					type: 'success'
				});
				callback();
			},
			error: function (xhr) {
				let errorMessage = 'Data gagal diupdate.';

				if (xhr.responseJSON && xhr.responseJSON.message) {
					errorMessage = xhr.responseJSON.message;
				}

				new PNotify({
					title: 'Error',
					text: errorMessage,
					icon: 'icon-blocked',
					type: 'error'
				});

				checkbox.prop('checked', false);
			}
		});
	});
</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