@extends('layouts.app')

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

@section('content')

<style>
    @media (min-width: 768px) {
        .desktop-content {
            display: flex;
            flex-wrap: wrap;
        }
        .mobile-content {
            display: none;
        }
        .qty-box {
            margin-right: 40px;
            height: 28px;
            display: inline-block;
            background: #bfea7c;
            color: #222;
            border-radius: 8px;
            padding: 2px 5px;
            font-weight: 500;
            box-shadow: 0 1px 4px rgba(60,60,60,0.07);
            border: 1px solid #e0e0e0;
            transition: background 0.2s;
        }
    }
    @media (max-width: 767px) {
        .desktop-content {
            display: none;
        }
        .mobile-content {
            display: block;
        }
        .qty-box {
            margin-right: 20px;
            background: #e0ffe0;
            color: #222;
            border-radius: 8px;
            padding: 2px 10px;
            font-weight: 500;
            box-shadow: 0 1px 4px rgba(60,60,60,0.07);
            border: 1px solid #c0eac0;
            transition: background 0.2s;
        }
    }

    .category-block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px;
        background: linear-gradient(90deg, #416d19 0%, #393e46 100%);
        border: none;
        color: #fff;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 600;
        margin: 8px 0;
        box-shadow: 0 2px 8px rgba(60,60,60,0.08);
        transition: background 0.3s, box-shadow 0.2s;
    }
    .category-block:hover {
        background: linear-gradient(90deg, #6eae14 0%, #416D19 100%);
        box-shadow: 0 4px 16px rgba(60,60,60,0.12);
    }

    .subcategory-block {
        padding: 10px 18px;
        margin-left: 28px;
        background: #f7f7fa;
        color: #393e46;
        border-radius: 8px;
        font-size: 15px;
        margin-top: 6px;
        cursor: pointer;
        border: 1px solid #e0e0e0;
        transition: background 0.2s;
    }
    .subcategory-block:hover {
        background: #bfea7c;
    }

    .toggle-arrow {
        cursor: pointer;
        transition: transform 0.2s;
        font-size: 18px;
    }
    .rotate-down {
        transform: rotate(90deg);
    }
    .d-none {
        display: none;
    }
    
    /* Multi-Tab Container Visibility */
    .pos-tabs-container {
        display: {{ !empty($pos_settings['enable_multi_sales_tab']) ? 'block' : 'none' }} !important;
        visibility: {{ !empty($pos_settings['enable_multi_sales_tab']) ? 'visible' : 'hidden' }} !important;
        position: relative;
        z-index: 10;
        margin-bottom: 15px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }
    
    .pos-tabs-wrapper {
        display: {{ !empty($pos_settings['enable_multi_sales_tab']) ? 'flex' : 'none' }} !important;
        visibility: {{ !empty($pos_settings['enable_multi_sales_tab']) ? 'visible' : 'hidden' }} !important;
        width: 100%;
        min-width: 100%;
        justify-content: flex-start;
        gap: 5px;
    }
</style>

<section class="content no-print">
	<!-- Multi-Tab POS Container -->
	@if(!empty($pos_settings['enable_multi_sales_tab']))
	<div class="pos-tabs-container">
		<div class="pos-tabs-wrapper" id="pos-tabs-wrapper">
			<!-- Tabs will be dynamically rendered here -->
			<button class="pos-tab-add" onclick="alert('Multi-tab feature loading...')" style="display: inline-flex !important; align-items: center; justify-content: center; background: rgba(255,255,255,0.3); border: 2px dashed white; color: white; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 18px; min-width: 40px; height: 36px;">
				<i class="fas fa-plus" style="font-size: 18px;"></i>
			</button>
		</div>
	</div>
	@endif

	<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('SellPosController@store'), 'method' => 'post', 'id' => 'add_pos_sell_form', 'enctype' => 'multipart/form-data']) !!}
<div class="row mb-12">
		<div class="col-md-12">
			<div class="row">
				<div class="@if(empty($pos_settings['hide_product_suggestion'])) col-md-6 @else col-md-10 col-md-offset-1 @endif no-padding pr-12">
					<div class="box box-solid mb-12 @if(!isMobile()) mb-40 @endif">
						<div class="box-body pb-0">
							{!! Form::hidden('location_id', $default_location->id ?? null , ['id' => 'location_id', 'data-receipt_printer_type' => !empty($default_location->receipt_printer_type) ? $default_location->receipt_printer_type : 'browser', 'data-default_payment_accounts' => $default_location->default_payment_accounts ?? '']); !!}
							<!-- sub_type -->
							{!! Form::hidden('sub_type', isset($sub_type) ? $sub_type : null) !!}
							<input type="hidden" id="item_addition_method" value="{{$business_details->item_addition_method}}">

								@include('sale_pos.partials.sell_pos_form')


								@include('sale_pos.partials.pos_form_totals')

								@include('sale_pos.partials.payment_modal')

								@if(empty($pos_settings['disable_suspend']) || $is_admin)
									@include('sale_pos.partials.suspend_note_modal')
								@endif

								@if(empty($pos_settings['disable_recurring_invoice']))
									@include('sale_pos.partials.recurring_invoice_modal')
								@endif
							</div>
						</div>
					</div>
					<div class="col-md-2" >
						<div class="row desktop-content" style="flex-wrap: wrap;border: 0px solid; border-color: #001f3f; margin-bottom: 5px;max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;">
							<div class="col-xs-6 offset-xs-0 col-md-12 " style="margin-top: 5px;">
								<div class="btn btn-success product_category_block" data-value="all" data-level="all" style="display: block !important; text-align: initial !important;">
									@lang('lang_v1.all_category')
								</div>
							</div>
<style>
    .category-block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
       background: linear-gradient(135deg, #416d19, #393e46);
       border-color: #fff;
        color: white;
        border-radius: 15px;
        cursor: default;
        font-weight: 500;
		margin-top: 5px;
		margin-bottom: 5px;
        transition: background-color 0.3s ease;
    }

    .subcategory-block {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        margin-left: 20px;
        background-color: #f0f0f0;
        color: #333;
        border-radius: 5px;
        font-size: 14px;
        margin-top: 5px;
        cursor: pointer;
    }

    .toggle-arrow {
        cursor: pointer;
        transition: transform 0.2s;
    }

    .rotate-down {
        transform: rotate(90deg);
    }

    .d-none {
        display: none;
    }
</style>
<div id="loading_spinner" class="text-center my-2" style="display: none;">
    <i class="fa fa-spinner fa-spin fa-2x text-primary"></i>
</div>
						@foreach($categories as $category)
							<div class="col-md-12 mb-2 sas">
								<div data-value="{{ $category['id'] }}" data-level="category" class="category-block product_category_block">
									<span class="selectable-category" style="flex: 1;">
										{{ \Illuminate\Support\Str::limit(ucfirst($category['name']), 23) }}
									</span>

									@if(!empty($category['sub_categories']))
										<i class="fa fa-chevron-right toggle-arrow" data-target="#subcat-{{ $category['id'] }}" onclick="event.stopPropagation();"></i>
									@endif
								</div>

								@if(!empty($category['sub_categories']))
									<div id="subcat-{{ $category['id'] }}" class="d-none">
										@foreach($category['sub_categories'] as $sc)
											<div class="subcategory-wrapper">
												<div class="subcategory-block product_category_block" data-value="{{ $sc['id'] }}" data-level="subcategory" data-parent-category="{{ $category['id'] }}">
													<span class="selectable-subcategory" style="flex: 1;">
														<i class="fa fa-minus mr-1"></i> {{ \Illuminate\Support\Str::limit($sc['name'], 23) }}
													</span>
													@if(!empty($sc['sub_sub_categories']))
														<i class="fa fa-chevron-right toggle-arrow" data-target="#subsubcat-{{ $sc['id'] }}" style="font-size: 12px;" onclick="event.stopPropagation();"></i>
													@endif
												</div>

												@if(!empty($sc['sub_sub_categories']))
													<div id="subsubcat-{{ $sc['id'] }}" class="d-none" style="margin-left: 20px;">
														@foreach($sc['sub_sub_categories'] as $ssc)
															<div class="subcategory-block product_category_block" data-value="{{ $ssc['id'] }}" data-level="subsubcategory" data-parent-category="{{ $category['id'] }}" data-parent-subcategory="{{ $sc['id'] }}" style="padding-left: 25px; font-size: 13px;">
																<i class="fa fa-angle-right mr-1"></i> {{ \Illuminate\Support\Str::limit($ssc['name'], 20) }}
															</div>
														@endforeach
													</div>
												@endif
											</div>
										@endforeach
									</div>
								@endif
							</div>
						@endforeach

						</div>

					</div>
				@if(empty($pos_settings['hide_product_suggestion']) && !isMobile())
				<div class="col-md-4 no-padding">
					@include('sale_pos.partials.pos_sidebar')
				</div>
				@endif
			</div>
		</div>
	</div>
	@include('sale_pos.partials.pos_form_actions')
	{!! 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>
<div class="modal fade pay_contact_due_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>

<div class="modal fade" id="expense_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
</div>

@include('sale_pos.partials.configure_search_modal')

@include('sale_pos.partials.recent_transactions_modal')

@include('sale_pos.partials.weighing_scale_modal')

<div class="modal fade" tabindex="-1" role="dialog" id="packages_products_modal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Packages</h4>
			</div>
			<div class="modal-body" id="packages_products_body">

			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="GFG">

</div>

<div class="modal fade" id="SecondScreenModal" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<div class="col-12 mt-2">
							<table class="table table-striped" id="second_pos_table">
								<tbody></tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@stop
@section('css')

<style>
	    .d-none{
        display: none !important;
    }
</style>
@if(!empty($pos_settings['enable_multi_sales_tab']))
<!-- Multi-Tab POS CSS -->
<link rel="stylesheet" href="{{ asset('css/multi-tab-pos.css') }}?v={{ time() }}">
@endif

<!-- Voice Command CSS -->
<link rel="stylesheet" href="{{ asset('css/voice-command.css') }}?v={{ time() }}">

	<!-- 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
@stop
@section('javascript')

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const arrows = document.querySelectorAll('.toggle-arrow');

        arrows.forEach(arrow => {
            arrow.addEventListener('click', function () {
                const targetSelector = this.getAttribute('data-target');
                const targetDiv = document.querySelector(targetSelector);

                if (targetDiv) {
                    targetDiv.classList.toggle('d-none');
                    this.classList.toggle('rotate-down');
                }
            });
        });
    });
</script>
<script src="{{ asset('js/pos.js') }}?v={{ time() }}"></script>
	<script src="{{ asset('js/printer.js?v=' . $asset_v) }}"></script>
	<script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script>
	<script src="{{ asset('js/opening_stock.js?v=' . $asset_v) }}"></script>
	@if(!empty($pos_settings['enable_multi_sales_tab']))
	<!-- Multi-Tab POS JS -->
	<script src="{{ asset('js/multi-tab-pos-new.js') }}?v={{ time() }}"></script>
	@endif
	<!-- Voice Command JS -->
	<script src="{{ asset('js/voice-command.js') }}?v={{ time() }}"></script>

	<!-- Voice Recognition (Google STT) -->
	@if(config('services.google_speech.enabled'))
	<script src="{{ asset('js/voice-recognition.js') }}?v={{ time() }}"></script>
	<script>
		$(document).ready(function() {
			// Initialize voice search button
			$('#voice_search_btn').on('click', function() {
				var inputId = $(this).data('input');
				var inputElement = $(inputId)[0];
				if (inputElement) {
					window.voiceRecognition.startListening(this, inputElement, {
						mode: 'replace',
						language: '{{ config("services.google_speech.default_language", "en-US") }}',
						continuous: true,
						timeslice: 4000
					});
				}
			});
		});
	</script>
	@endif

	@include('sale_pos.partials.keyboard_shortcuts')

	<!-- 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=' . time()) }}"></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 type="text/javascript">
		$(document).ready( function(){
		  $('#od_datetimepickers').datetimepicker({
			format: moment_date_format + ' ' + moment_time_format
		  });
		});
	  </script>
	<script>
		$(document).ready(function() {
			var baseUrl = "{{ url('payments/pay-contact-due') }}"; // URL without ID
			const location_ids = $('input#location_id').val();

		function updatePayDueLink(customerId) {
			var url = baseUrl + '/' + customerId + '?type=sell&location_id=' + location_ids;

			
			$('#pay_due_link').attr('href', url);
			$('#pay_due_link').attr('data-contact-id', customerId);
		}

		$('#customer_id').change(function() {
			var customerId = $(this).val();
			updatePayDueLink(customerId);
		});

		var initialCustomerId = $('#customer_id').val();
		if (initialCustomerId) {
			updatePayDueLink(initialCustomerId);
		}
		});
		</script>
	<script>
		$("#open-drawer").click(function(e){
			e.preventDefault();
			swal({
				title: "Do you want to open Drawer",
				icon: 'warning',
				buttons: true,
				dangerMode: true,
			}).then(yes => {
				if (yes) {
					// window.print("open cash drawer");
					var divContents = document.getElementById("GFG").innerHTML;
					var a = window.open('', '', 'height=500, width=500');
					a.document.write('<html>');
					a.document.write('<body > <h1>Open cash Drawer <br>');
					a.document.write(divContents);
					a.document.write('</body></html>');
					a.document.close();
					a.print();
				}
			});
		});
	</script>

	<script>
		$( "#secondScreen" ).click(function() {
			const location_id =   $('input#location_id').val();
			const href = '/pos-second-screen?location='+location_id;
			const width = '700';
			const height = '500';
			window.open(href , 'newwindow', 'width=' + width + ', height=' + height);
		});
	</script>

	<!-- Multi-Currency Support -->
	@if(!empty(session('business.enable_multi_currency')))
	<script src="{{ asset('js/pos_multi_currency.js') }}?v={{ time() }}"></script>
	<script>
		var enable_multi_currency = true;
		var business_currency_code = '{{ session()->get("business.currency.code") ?? "USD" }}';
	</script>
	@endif
@endsection