@extends('layouts.app')

@section('title', __('sale.pos_sale'))

@section('content')
	<section class="content no-print no-margin no-padding" style="margin: 0; height: 100vh; overflow: hidden;">
	<input type="hidden" id="amount_rounding_method" value="{{$pos_settings['amount_rounding_method'] ?? ''}}">
	@if(!empty($pos_settings['allow_overselling']))
		<input type="hidden" id="is_overselling_allowed">
	@endif
	@if(session('business.enable_rp') == 1)
        <input type="hidden" id="reward_point_enabled">
    @endif
    @php
		$is_discount_enabled = $pos_settings['disable_discount'] != 1 ? true : false;
		$is_rp_enabled = session('business.enable_rp') == 1 ? true : false;
	@endphp
	{!! Form::open(['url' => action([\App\Http\Controllers\SellPosController::class, 'update'], [$transaction->id]), 'method' => 'post', 'id' => 'edit_pos_sell_form' ]) !!}
	{{ method_field('PUT') }}
		@include('restaurant.booking.booking_actions.partials.new_pos_header')

		<!-- Main Content -->
		<div class="container-fluid d-flex mt-5 mr-2 ml-2" style="height: calc(100vh - 60px);">
			<!-- القسم الأول -->
			<div class="d-flex flex-column flex-grow-1 me-2 bg-white" style="width: 50%;">
				<div  style="height: 85%; overflow-y: auto; overflow: hidden !important;">
					{!! Form::hidden('location_id', $transaction->location_id, ['id' => 'location_id', 'data-receipt_printer_type' => !empty($location_printer_type) ? $location_printer_type : 'browser', 'data-default_accounts' => $transaction->location->default_payment_accounts]); !!}

					{!! Form::hidden('sub_type', isset($sub_type) ? $sub_type : null) !!}
					<input type="hidden" id="item_addition_method" value="{{ $business_details->item_addition_method }}">
					@include('restaurant.booking.booking_actions.partials.pos_form_edit')

					@include('restaurant.booking.booking_actions.partials.payment_modal')

					@if (empty($pos_settings['disable_suspend']))
						@include('restaurant.booking.booking_actions.partials.suspend_note_modal')
					@endif

					@if (empty($pos_settings['disable_recurring_invoice']))
						@include('restaurant.booking.booking_actions.partials.recurring_invoice_modal')
					@endif
					@include('restaurant.booking.booking_actions.partials.pos_form_totals', ['edit' => true])

				</div>
				<div class="container-fluid">

					<div class="pos-total md:tw-flex md:tw-items-center md:tw-gap-3 tw-hidden  bg-label-primary ">
						<a class="btn btn-outline-info" type="button" data-bs-toggle="modal"
						   data-bs-target="#customersModal" aria-controls="customersModal">
							{{__('new.customer_view')}}
						</a>

						{!! Form::select('contact_id',
                                            [], null, ['class' => 'form-control mousetrap', 'id' => 'customer_id', 'placeholder' => 'Enter Customer name / phone', 'required']); !!}

						<div class="tw-text-black tw-font-bold tw-text-base md:tw-text-2xl tw-flex tw-items-center tw-flex-col">
							<div>Total</div>
						</div>
						<input type="hidden" name="final_total" id="final_total_input" value="0.00">
						<span id="total_payable"
							  class="tw-text-green-900 tw-font-bold tw-text-base md:tw-text-2xl number">0.00</span>
					</div>
				</div>
			</div>

			<!-- القسم الثاني -->
			<div class="d-flex flex-column flex-grow-1 me-2  " style="width: 50%; height: calc(100vh - 60px);">
				<!-- القسم الأول: عرض الأصناف (80% من الشاشة) -->
				<div  style="height: 80%; overflow-y: auto; overflow: hidden !important;">

					@include('restaurant.booking.booking_actions.partials.pos_sidebar')

				</div>
				<!-- القسم الثاني: أزرار الإجراءات (20% من الشاشة) -->
				@include('restaurant.booking.booking_actions.partials.pos_form_actions', ['edit' => true])

			</div>
		</div>


		{!! Form::close() !!}
</section>

<!-- This will be printed -->
<section class="invoice print_section" id="receipt_section">
</section>
<div class="modal fade contact_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
	@include('contact.create', ['quick_add' => true])
</div>
@if(empty($pos_settings['hide_product_suggestion']) && isMobile())
	@include('sale_pos.partials.mobile_product_suggestions')
@endif
<!-- /.content -->
<div class="modal fade register_details_modal" tabindex="-1" role="dialog" 
	aria-labelledby="gridSystemModalLabel">
</div>
<div class="modal fade close_register_modal" tabindex="-1" role="dialog" 
	aria-labelledby="gridSystemModalLabel">
</div>
<!-- quick product modal -->
<div class="modal fade quick_add_product_modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle"></div>

@include('sale_pos.partials.configure_search_modal')

@include('sale_pos.partials.recent_transactions_modal')

@include('sale_pos.partials.weighing_scale_modal')

	@include('restaurant.booking.booking_actions.partials.calendarModal')


@stop

@section('css')
	<!-- مكتبة jQuery Timepicker -->

	<!-- include module css -->
	@if (!empty($pos_module_data))
		@foreach ($pos_module_data as $key => $value)
			@if (!empty($value['module_css_path']))
				@includeIf($value['module_css_path'])
			@endif
		@endforeach
	@endif
	<style>
		.time24hr {
			display: none !important;

		}
		.datepicker td,th{
			min-width: 100px;
			text-align: center !important;
			padding: 8px 12px !important;
			font-size: 14px !important;
		}.datepicker-months td,th{
			 min-width: 100px;
			 text-align: center !important;
			 padding: 8px 12px !important;
			 font-size: 14px !important;
		 }
	</style>

@stop
@section('javascript')

	<script src="{{ asset('js/pos.js') }}"></script>
	<script src="{{ asset('js/printer.js') }}"></script>
	<script src="{{ asset('js/product.js') }}"></script>
	<script src="{{ asset('js/opening_stock.js') }}"></script>

	<!-- Call restaurant module if defined -->
	@if (in_array('tables', $enabled_modules) ||
            in_array('modifiers', $enabled_modules) ||
            in_array('service_staff', $enabled_modules))
		<script src="{{ asset('js/restaurant.js?v=' . $asset_v) }}"></script>
	@endif
	<!-- include module js -->
	@if (!empty($pos_module_data))
		@foreach ($pos_module_data as $key => $value)
			@if (!empty($value['module_js_path']))
				@includeIf($value['module_js_path'], ['view_data' => $value['view_data']])
			@endif
		@endforeach
	@endif


	<script>
		document.addEventListener("DOMContentLoaded", function () {
			let calendarInstance;

			// ✅ تعيين القيم الافتراضية عند تحميل الصفحة
			function setDefaultDate() {
				let now = new Date();

				// ✅ تنسيق التاريخ: 02/23/2025 11:21
				let formattedDate = now.toLocaleString('en-US', {
					month: '2-digit',
					day: '2-digit',
					year: 'numeric',
					hour: '2-digit',
					minute: '2-digit',
					hour12: false
				}).replace(',', '');

				// ✅ تعيين قيمة الحقل الافتراضية
				document.getElementById("transaction_date").value = formattedDate;

				// ✅ استخراج اليوم وتحديث `span`
				let formattedDay = now.toLocaleDateString('ar-EG', {
					weekday: 'long', // اسم اليوم
					day: '2-digit',
					month: '2-digit',
					year: 'numeric'
				});

				document.getElementById("selectedDay").textContent = formattedDay;
			}

			// ✅ تنفيذ الوظيفة عند تحميل الصفحة
			setDefaultDate();

			// ✅ عند الضغط على زر فتح المودال
			document.getElementById("openCalendarBtn").addEventListener("click", function () {
				$('#calendarModal').modal('show');

				// ✅ إنشاء التقويم داخل المودال
				if (!calendarInstance) {
					calendarInstance = flatpickr("#calendarContainer", {
						enableTime: true,
						dateFormat: "m/d/Y H:i",
						time_24hr: true,
						defaultDate: new Date(), // ✅ جعل اليوم هو الافتراضي
						inline: true,
						onChange: function(selectedDates, dateStr) {
							console.log("التاريخ المختار:", dateStr);

							// ✅ تحديث الحقل عند تغيير التاريخ
							document.getElementById("transaction_date").value = dateStr;

							// ✅ استخراج اليوم وتحديث `span`
							let selectedDate = new Date(selectedDates[0]);
							let formattedDay = selectedDate.toLocaleDateString('ar-EG', {
								weekday: 'long',
								day: '2-digit',
								month: '2-digit',
								year: 'numeric'
							});

							document.getElementById("selectedDay").textContent = formattedDay;
							reset_pos_form();
							// ✅ إغلاق المودال بعد اختيار التاريخ
							setTimeout(function () {
								$('#calendarModal').modal('hide');
							}, 500);
						}
					});
				}
			});

			// ✅ عند الضغط على زر الإغلاق، إغلاق المودال
			document.querySelectorAll(".close-modal").forEach(button => {
				button.addEventListener("click", function () {

					$('#calendarModal').modal('hide');


				});
			});

			// ✅ عند إغلاق المودال، إعادة تعيين التقويم
			$('#calendarModal').on('hidden.bs.modal', function () {
				if (calendarInstance) {
					calendarInstance.destroy();
					calendarInstance = null;

				}
			});
		});
	</script>


	<script>
		$(document).ready(function() {
			$(document).on('change', '.order_line_service_staff', function () {
				$('.booking_start_time').select2()
				selectedRow = $(this).closest('tr'); // تحديد الصف الحالي
				var staffId = $(this).find(":selected").val();
				var bookingDate = $("#transaction_date").val();
				var url = "{{ route('getAvailableTimes') }}"; // رابط API لجلب الأوقات

				var timeSelect = selectedRow.find('.booking_start_time');


				if (timeSelect.hasClass('hidden')) {
					timeSelect.removeClass('hidden'); // إزالة الكلاس hidden
				}
				// ✅ تنظيف `select` قبل التحميل
				timeSelect.html('<option value="">⏳ جارٍ التحميل...</option>');

				// ✅ استدعاء الأوقات من API
				$.ajax({
					url: url,
					method: 'GET',
					data: { staff_id: staffId, booking_date: bookingDate },
					dataType: 'json',
					success: function (response) {
						var options = '<option value="" disabled>🕒 اختر وقت الحجز</option>';
						response.available_times.forEach(function (time) {
							if (response.booked_times.includes(time)) {
								options += `<option value="${time}" disabled>⛔ ${time} (محجوز)</option>`;
							} else {
								options += `<option value="${time}">🕒 ${time}</option>`;
							}
						});

						timeSelect.html(options);

						if ($.fn.select2) {
							setTimeout(function () {
								try {
									timeSelect.select2();
									timeSelect.trigger('change');
								} catch (error) {
									console.error("❌ خطأ في تهيئة `selectpicker`:", error);
								}
							}, 100);
						}
					},
					error: function (xhr, status, error) {
						console.error("⚠️ خطأ في جلب الأوقات:", xhr.responseText);
						timeSelect.html('<option value="">❌ حدث خطأ، حاول مرة أخرى</option>');

						if ($.fn.selectpicker) {
							setTimeout(function () {
								try {
									timeSelect.selectpicker();
									timeSelect.selectpicker('refresh');
								} catch (error) {
									console.error("❌ خطأ في تحديث `selectpicker` بعد الفشل:", error);
								}
							}, 100);
						}
					}
				});
			});
		});

	</script>

	<script>
		$(document).ready(function() {
			$('.booking_start_time').selectpicker()
			$('#customersModal').on('shown.bs.modal', function() {
				loadCustomers(); // تحميل العملاء تلقائيًا عند فتح المودال
			});
		});

		function loadCustomers(page = 1) {
			let search = $('#searchCustomers').val();
			let url = "{{ route('getCustomersModal') }}";

			$.ajax({
				url: url,
				type: "GET",
				data: { page: page, q: search },
				dataType: "json",
				success: function(response) {
					let customersHTML = '';

					if (response.data.length > 0) {
						response.data.forEach(customer => {
							customersHTML += `
                    <div class="col-md-4 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">${customer.name}</h5>
                                <p class="card-text">${customer.mobile ? customer.mobile : 'لا يوجد رقم هاتف'}</p>
                                <button type="button" class="btn btn-primary select-customer"
                                    data-id="${customer.id}"
                                    data-name="${customer.name}"
                                    data-mobile="${customer.mobile}"
                                    data-pay-term-number="${customer.pay_term_number}"
                                    data-pay-term-type="${customer.pay_term_type}"
                                    data-balance="${customer.balance}"
                                    data-shipping-address="${customer.shipping_address}"
                                    data-price-calculation-type="${customer.price_calculation_type}"
                                    data-selling-price-group-id="${customer.selling_price_group_id}"
                                    data-bs-dismiss="modal">
                                    اختيار العميل
                                </button>
                            </div>
                        </div>
                    </div>
                    `;
						});

						customersHTML += `<div class="col-12 d-flex justify-content-center mt-3">`;
						if (response.prev_page_url) {
							customersHTML += `<button class="btn btn-secondary me-2" type="button" onclick="loadCustomers(${response.current_page - 1})">السابق</button>`;
						}
						if (response.next_page_url) {
							customersHTML += `<button class="btn btn-secondary" type="button" onclick="loadCustomers(${response.current_page + 1})">التالي</button>`;
						}
						customersHTML += `</div>`;

					} else {
						customersHTML = '<p class="text-center">لا يوجد عملاء.</p>';
					}

					$('#customersList').html(customersHTML);
				},
				error: function(xhr) {
					console.error("❌ خطأ في جلب العملاء:", xhr.responseText);
					alert("⚠️ حدث خطأ أثناء تحميل العملاء. يرجى المحاولة لاحقًا.");
				}
			});
		}
		$(document).on('click', '.select-customer', function() {
			let customerId = $(this).data('id'); // معرف العميل (القيمة)
			let customerName = $(this).data('name'); // اسم العميل (العرض)

			let $customerSelect = $('#customer_id');

			if ($customerSelect.length) {
				// ✅ التأكد من أن `select2` مهيأ قبل التحديث
				if (!$customerSelect.hasClass('select2-hidden-accessible')) {
					console.warn("⚠️ `select2` غير مهيأ، سيتم إعادة تهيئته الآن.");
					$customerSelect.select2();
				}

				// ✅ إزالة أي خيارات فارغة
				$customerSelect.find('option[value=""]').remove();

				// ✅ التحقق مما إذا كان الخيار موجودًا مسبقًا
				if ($customerSelect.find(`option[value="${customerId}"]`).length === 0) {
					let newOption = new Option(customerName, customerId, true, true);
					$customerSelect.append(newOption);
				}

				// ✅ تحديث قيمة `select2` بالقيمة الجديدة
				$customerSelect.val(customerId).trigger('change');

				// ✅ تحفيز `select2:select` لتحديث البيانات
				$customerSelect.trigger({
					type: 'select2:select',
					params: { data: { id: customerId, text: customerName } }
				});

				console.log(`✅ تم اختيار العميل: ${customerName} (${customerId})`);
			} else {
				console.error("❌ خطأ: لم يتم العثور على الحقل #customer_id");
			}
		});

	</script>


	<script>


		$(document).ready(function() {
			// عند الضغط على زر البحث عن الفاتورة
			$("#fetch_invoice").click(function() {
				let invoice_no = $("#invoice_no").val().trim();
				if (invoice_no === '') {
					alert("يرجى إدخال رقم الفاتورة");
					return;
				}

				$.ajax({
					url: "{{ route('service_ticket.fetch') }}",
					type: "POST",
					data: {
						invoice_no: invoice_no,
						_token: "{{ csrf_token() }}"
					},
					success: function(response) {
						console.log(response); // طباعة الاستجابة للتحقق من البيانات

						if (response.status === 'success') {
							let data = response.data;
							let rows = '';

							data.forEach(item => {
								rows += `<tr>
                                <td>${item.product_name}</td>
                                <td>${item.unit_price_inc_tax}</td>
                                <td>${item.surname ?? item.first_name + ' ' + item.last_name}</td>
                                <td><button class="btn btn-secondary print-ticket" data-sell-line-id="${item.sell_line_id}">طباعة</button></td>
                            </tr>`;
							});

							$("#ticket_data").html(rows);
							$("#invoiceInputModal").modal('hide');
							$("#serviceTicketModal").modal('show');
						} else {
							alert("⚠️ خطأ: " + response.message);
						}
					},
					error: function(xhr, status, error) {
						console.log(xhr.responseText); // طباعة تفاصيل الخطأ في الكونسول
						alert("❌ حدث خطأ أثناء استرجاع البيانات: " + error);
					}
				});
			});


			// عند الضغط على زر الطباعة
			$(document).on("click", ".print-ticket", function() {
				let sell_line_id = $(this).data("sell-line-id");

				$.ajax({
					url: "{{ route('service_ticket.ajax_print') }}",
					type: "POST",
					data: {
						sell_line_id: sell_line_id,
						_token: "{{ csrf_token() }}"
					},
					success: function(response) {
						if (response.status === 'success') {
							// إنشاء عنصر HTML جديد لإضافة محتوى التذكرة
							let printSection = document.createElement("div");
							printSection.id = "print-section";
							printSection.innerHTML = response.html;
							document.body.appendChild(printSection);

							// تشغيل الطباعة تلقائيًا
							window.print();

							// حذف التذكرة بعد الطباعة
							setTimeout(() => {
								document.body.removeChild(printSection);
							}, 1000);
						} else {
							alert(response.message);
						}
					},
					error: function() {
						alert("❌ حدث خطأ أثناء استرجاع بيانات الطباعة.");
					}
				});
			});

			// دالة طباعة التذكرة تلقائيًا دون فتح صفحة جديدة
			function printReceipt(sell_line) {
				let printContent = `
        <div id="print-section">
            <div class="ticket">
                <div class="container">
                    <div style="width:70mm !important; color: #000000 !important;" class="table-responsive">
                        <div class="col-12 bg-gray" style="border:1px solid black; border-radius: 30px;">
                            <h1 class="text-center">تذكرة الخدمة</h1>
                        </div>
                        <div class="col-12 justify-content-center">
                            <img src="{{ asset('img/barcode.png') }}" style="max-height:70px" class="logo center-block">
                        </div>
                        <div class="row">
                            <div class="col-4 bg-gray" style="border:2px solid gray; border-radius: 10px">
                                <h4 class="text-center">${sell_line.invoice_no}</h4>
                            </div>
                            <div class="col-4" style="border:2px solid gray; border-radius: 10px">
                                <h4 class="text-center">${sell_line.transaction_date}</h4>
                            </div>
                            <div class="col-10 col-xs-offset-1" style="border:1px gray solid; border-radius: 30px; margin-top: 5px;">
                                <h4 class="text-center"> المنتج: ${sell_line.product_name} </h4>
                            </div>
                            <div class="col-8 col-xs-offset-2 bg-gray" style="border-radius: 30px; margin-top: 5px;">
                                <h4 class="text-center"> السعر: ${sell_line.unit_price_inc_tax} </h4>
                            </div>
                            <div class="row col-12 justify-content-center d-flex" style="margin: 5px">
                                <div class="col-6" style="border:1px gray solid; border-radius: 30px;">
                                    <h3 class="text-center">طاقم الخدمة</h3>
                                    <h3 class="text-center">${sell_line.surname ?? (sell_line.first_name + ' ' + sell_line.last_name)}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>`;

				// إضافة التذكرة إلى الصفحة
				let printSection = document.createElement("div");
				printSection.id = "print-section";
				printSection.innerHTML = printContent;
				document.body.appendChild(printSection);

				// تشغيل الطباعة تلقائيًا
				window.print();

				// إزالة التذكرة بعد الطباعة لتجنب تكرارها
				setTimeout(() => {
					document.body.removeChild(printSection);
				}, 1000);
			}

		});

	</script>

	<script>
		window.addEventListener("afterprint", function() {
			location.reload();
		});
	</script>
	<script>
		$(document).ready(function() {
			// استمع إلى تغييرات في عنصر الواجهة الرسومية وقم بإرسال القيمة لتحديث الصفحة
			$('#business_locations').on('change', function() {
				var locationId = $(this).val();
				updatePage(locationId);
			});

			// دالة لإرسال القيمة المحدثة لتحديث الصفحة
			function updatePage(locationId) {
				$.ajax({
					url: '{{ route('bookings.create') }}', // اسم الراوت لتحديث الصفحة
					type: 'GET', // أو POST حسب الاحتياج
					data: {
						location_id: locationId
					},
					success: function(response) {
						// يمكنك هنا تحديث العناصر على الصفحة بناءً على الاستجابة المسترجعة
						// على سبيل المثال، إعادة تحميل بيانات أخرى أو تحديث جزء معين من الصفحة
						// هذا يعتمد على كيفية تنظيم الصفحة وما تحتاج إليه بعد التحديث
						location.reload(); // لتحديث الصفحة بأكملها
					},
					error: function(xhr, status, error) {
						// إدارة الأخطاء هنا إذا لزم الأمر
						console.error(xhr.responseText);
					}
				});
			}
		});
	</script>


@endsection