@extends('layouts.app')

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

@section('content')
<section class="content no-print">
	<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') }}
	 <div class=" @if ($visitId)  pos-mobile-layout @endif">
    
    <!-- MAIN POS CONTENT -->
    	<div class=" @if ($visitId) pos-mobile-content @endif">
			<div class="row mb-12">
				<div class="col-md-12 tw-pt-0 tw-mb-14">
					<div class="row tw-flex lg:tw-flex-row md:tw-flex-col sm:tw-flex-col tw-flex-col tw-items-start md:tw-gap-4">
						<div class="tw-px-3 tw-w-full  lg:tw-px-0 lg:tw-pr-0 @if(empty($pos_settings['hide_product_suggestion'])) lg:tw-w-[60%]  @else lg:tw-w-[100%] @endif">
							<div class="tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-rounded-2xl tw-bg-white tw-mb-2 md:tw-mb-8 tw-p-2">
								<div class="box-body pb-0">
									{!! Form::hidden('location_id', $transaction->location_id, ['id' => 'location_id', 'data-receipt_printer_type' => !empty($location_printer_type) ? $location_printer_type : 'browser', 'data-default_payment_accounts' => $transaction->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}}">
									 <div class="@if ($visitId) pos-mobile-hight @endif">
											@include('sale_pos.partials.pos_form_edit')
									 </div>

									@include('sale_pos.partials.pos_form_totals', ['edit' => true])

									@include('sale_pos.partials.payment_modal')

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

									@if(empty($pos_settings['disable_recurring_invoice']))
										@include('sale_pos.partials.recurring_invoice_modal')
									@endif
								</div>
									@if(!empty($only_payment))
										<div class="overlay"></div>
									@endif
								</div>
							</div>
						@if(empty($pos_settings['hide_product_suggestion'])  && !isMobile())
							<div class="col-md-5 no-padding">
								@include('sale_pos.partials.pos_sidebar')
							</div>
						@endif
					</div>
				</div>
			</div>
		</div>
	 </div>
	<div>

        <div class= "@if($visitId) pos-mobile-actions @endif">
			@include('sale_pos.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 -->
@include('sale_pos.partials.featured_product_modal')
<div class="modal fade register_details_modal" tabindex="-1" role="dialog" 
	aria-labelledby="gridSystemModalLabel">
</div>
<div class="modal fade smart_root_discounts_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade pay_for_contact_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 return_sell_by_product_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('video.video_modal') 

@include('sale_pos.partials.weighing_scale_modal')
  @php
        $search_sku=auth()->user()->can('search_sku') && auth()->user()->role_name != 'Admin' ?true:false;
    @endphp

	<div id="barcodeModal" class="custom-swal">
    <div class="custom-swal-content">
        <h3 class="custom-swal-title">ROOT</h3>
        <video id="video" autoplay muted playsinline style="width:100%; height:160px; object-fit:cover; border-radius:5px;"></video>
        <div class="scan-line"></div>
        <button class="custom-swal-cancel">إلغاء</button>
    </div>
</div>
@stop

@section('javascript')
<script>
	 window.fake_enabled = @json(config('constants.fake_product_price'));
        window.search_sku = @json($search_sku);
		 window.from_edit = true;
    </script>
	<script src="{{ asset('js/pos.js?v=' . $asset_v) }}"></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>
	@include('sale_pos.partials.keyboard_shortcuts')
	<script src="https://unpkg.com/@zxing/library@latest"></script>
	<style>
    @media (max-width: 768px) {
    .pos-mobile-layout {
        display: flex;
        flex-direction: column;
        min-height: 80vh; /* fill screen */
    }

      .pos-mobile-content {
        flex-grow: 1; /* allow to grow */
        max-height: calc(100vh - 54px); /* 80px is approximate height of actions row, adjust if needed */
        overflow-y: auto; /* scroll only this section if content exceeds */
        padding-bottom: 1rem; /* optional spacing */
    }
      .pos-mobile-hight {
     min-height: 60vh; /* fill screen */
    }

    .pos-mobile-actions {
          flex-shrink: 0; /* don’t shrink */
        background: #fff;
        z-index: 9999;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.08);
    }
}
</style>

<script>

let codeReader;
let stream;

const modal = document.getElementById("barcodeModal");
const video = document.getElementById("video");
const cancelBtn = modal.querySelector(".custom-swal-cancel");

// Open modal and start scanning
$('#scan_barcode_btn2').on('click', async function() {
    modal.style.display = "flex";
    codeReader = new ZXing.BrowserBarcodeReader();

    try {
        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
        video.srcObject = stream;
        await video.play();

        const result = await codeReader.decodeOnceFromVideoDevice(undefined, video);

        // Fill input and trigger autocomplete
        $('#search_product').val(result.text).autocomplete('search', result.text);

        // Stop scanner and close modal
        if(stream) stream.getTracks().forEach(track=>track.stop());
        codeReader.reset();
        modal.style.display = "none";

    } catch(err) {
        console.error(err);
      toastr.error('تعذر الوصول إلى الكاميرا أو قراءة الباركود');
        modal.style.display = "none";
        if(stream) stream.getTracks().forEach(track=>track.stop());
        if(codeReader) codeReader.reset();
    }
});

// Cancel button closes modal and stops camera
cancelBtn.onclick = () => {
    if(stream) stream.getTracks().forEach(track=>track.stop());
    if(codeReader) codeReader.reset();
    modal.style.display = "none";
}

// Click outside content closes modal
window.onclick = (event) => {
    if(event.target === modal){
        if(stream) stream.getTracks().forEach(track=>track.stop());
        if(codeReader) codeReader.reset();
        modal.style.display = "none";
    }
}
</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
	
@endsection

@section('css')
	<style type="text/css">
		/*CSS to print receipts*/
		.print_section{
		    display: none;
		}
		@media print{
		    .print_section{
		        display: block !important;
		    }
		}
		@page {
		    size: 3.1in auto;/* width height */
		    height: auto !important;
		    margin-top: 0mm;
		    margin-bottom: 0mm;
		}
		.overlay {
			background: rgba(255,255,255,0) !important;
			cursor: not-allowed;
		}
	</style>
	<!-- 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
@endsection