@extends('layouts.customer')

@section('content')
    <div class="container-fluid disable-text-selection">
        <div class="row">
            <div class="col-12">
                <div class="mb-2">
                    <h1>POS Settings</h1>
                    <div class="top-right-button-container">
                    </div>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="#">Home</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">POS Settings</li>
                        </ol>
                    </nav>
                </div>

                <div class="separator mb-5"></div>
            </div>
        </div>

        <div class="row mb-2">
			<div class="offset-2 col-xl-8">
				@if ($errors->any())
					<div class="alert alert-danger">
						<strong>Oops!</strong> There were some problems with your input.<br><br>
						<ul>
							@foreach ($errors->all() as $error)
								<li>{{ $error }}</li>
							@endforeach
						</ul>
					</div>
				@endif
			</div>
        </div>

        <div class="row mb-2">
			<div class="offset-2 col-xl-8">
				@if ($message = Session::get('success'))
					<div class="w-100 alert alert-success">
						<p>{{ $message }}</p>
					</div>
				@endif
			</div>
        </div>

        <style>
            .card-label .card {
		      border: 1px solid #e2ebf6;
			}

			.card-label:hover .card {
		      cursor: pointer;
		      border: 1px solid #e2ebf6;
			  /*box-shadow: 0px 1px 5px rgba(0 0 0 / 15%);*/
			}

			.pos_type {
			    font-size: inherit;
			    margin: 0;
			    position: absolute;
			    right: 20px;
			    top: 4px;
			    z-index: 10;
			}

			@supports (-webkit-appearance: none) or (-moz-appearance: none) {
			  .pos_type {
			    -webkit-appearance: none;
			    -moz-appearance: none;
			    background: #fff;
			    border: 2px solid #e2ebf6;
			    border-radius: 50%;
			    cursor: pointer;
			    height: 1.5em;
			    outline: none;
			    transition: background 0.2s ease-out, border-color 0.2s ease-out;
			    width: 1.5em;
			  }
			  .pos_type::after {
			    border: 2px solid #fff;
			    border-top: 0;
			    border-left: 0;
			    content: "";
			    display: block;
			    height: 0.75rem;
			    left: 25%;
			    position: absolute;
			    top: 50%;
			    transform: rotate(45deg) translate(-50%, -50%);
			    width: 0.375rem;
			  }
			  .pos_type:checked {
			    background: #184f90 !important;
			    border-color: #184f90 !important;
			  }

			  .card-label:hover .pos_type {
			    border-color: #c4d1e1;
			  }
			  .card-label:hover .pos_type:checked {
			    border-color: #184f90 !important;
			  }
			}

			.card-label:hover .card {
			  border-color: #c4d1e1;
			}

			.pos_type:checked ~ .card {
			  border-color: #184f90 !important;
			}

			.pos_type:focus ~ .card {
			  box-shadow: 0 0 0 2px #c4d1e1;
			}

			.pos_type:disabled ~ .card {
			  color: #c4d1e1;
			  cursor: default;
			}

			.pos_type:disabled ~ .card .plan-type {
			  color: #c4d1e1;
			}

			.card-label:hover .pos_type:disabled ~ .card {
			  border-color: #e2ebf6;
			  box-shadow: none;
			}

			.card-label:hover .pos_type:disabled {
			  border-color: #e2ebf6;
			}

			.pos-content.hide-token .access_token_wrapper, .pos-content .no_access_token_wrapper {
				display: none !important;
			}

			.pos-content.hide-token .no_access_token_wrapper, .pos-content .access_token_wrapper {
				display: block !important;
			}

            .clover_location.hide-location, .clover_merchant.hide-merchant {
                display: none !important;
            }
			        
		</style>

        <div class="row">
			<div class="col-xl-4">
				<div class="card">
                    <div class="card-body">
						<ul class="nav nav-pills flex-column" role="tablist">
                            <li class="nav-item clickable" role="presentation">
                                <a href="#general-settings" class="nav-link @if(request()->get('tab')) not-active @else active @endif" id="general-settings-tab" data-toggle="tab" href="#general-settings" role="tab" aria-controls="general-settings" aria-selected="@if(request()->get('tab')) false @else true @endif">
                                    General Settings
                                </a>
                            </li>
                            <li class="nav-item clickable" role="presentation">
                                <a href="#receipt-settings" class="nav-link @if('receipt' == request()->get('tab')) active @else not-active @endif" id="receipt-settings-tab" data-toggle="tab" href="#receipt-settings" role="tab" aria-controls="receipt-settings" aria-selected="@if('receipt' == request()->get('tab')) true @else false @endif">
                                    Receipt Settings
                                </a>
                            </li>
							<li class="nav-item clickable" role="presentation">
                                <a href="#ticket-settings" class="nav-link @if('ticket' == request()->get('tab')) active @else not-active @endif" id="ticket-settings-tab" data-toggle="tab" href="#ticket-settings" role="tab" aria-controls="ticket-settings" aria-selected="@if('ticket' == request()->get('tab')) true @else false @endif">
                                    Ticket Settings
                                </a>
                            </li>
							<li class="nav-item clickable" role="presentation">
                                <a href="#tipping-settings" class="nav-link @if('tipping' == request()->get('tab')) active @else not-active @endif" id="tipping-settings-tab" data-toggle="tab" href="#tipping-settings" role="tab" aria-controls="tipping-settings" aria-selected="@if('tipping' == request()->get('tab')) true @else false @endif">
                                    Tipping Settings
                                </a>
                            </li>
                            <li class="nav-item clickable" role="presentation">
                                <a href="#report-settings" class="nav-link @if('report' == request()->get('tab')) active @else not-active @endif" id="report-settings-tab" data-toggle="tab" href="#report-settings" role="tab" aria-controls="report-settings" aria-selected="@if('report' == request()->get('tab')) true @else false @endif">
                                    Report Settings
                                </a>
                            </li>
							<li class="nav-item clickable" role="presentation">
                                <a href="#order-settings" class="nav-link @if('order' == request()->get('tab')) active @else not-active @endif" id="order-settings-tab" data-toggle="tab" href="#order-settings" role="tab" aria-controls="order-settings" aria-selected="@if('order' == request()->get('tab')) true @else false @endif">
                                    Order Settings
                                </a>
                            </li>
                        </ul>
					</div>
				</div>
			</div>
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body">
                        <!-- <h4 class="header-title mb-4">Tabs Justified</h4> -->

                        <div class="tab-content">
                            <div class="tab-pane @if(request()->get('tab')) not-active @else active show @endif" id="general-settings" role="tabpanel">
								<h5 class="mt-4">General Settings</h5>
								<form action="{{ route('pos.settings.update', ['account'=>$account, 'id'=>$pos_setting->id ?? null]) }}" method="POST"  enctype="multipart/form-data">
                                    @csrf
									<div class="form-group">
										<label for="display_restaurant_name">Display restaurant name</label>
										<input type="text" class="form-control" name="display_restaurant_name" required id="display_restaurant_name" placeholder="Display restaurant name" value="{{ $pos_setting->display_restaurant_name ?? '' }}">
									</div>

									<div class="form-group">
										<label for="subtitle">Subtitle</label>
										<input type="text" class="form-control pac-target-input" name="subtitle" id="subtitle" required placeholder="Subtitle" value="{{ $pos_setting->subtitle ?? '' }}">
									</div>

									<div class="form-group">
										<label for="receipt_logo">Receipt logo</label>
										<div class="dropzone"></div>
									</div>

									<div class="form-group d-none">
										<label for="receipt_logo">Receipt logo</label>
										<input type="file" class="form-control" name="receipt_logo" id="receipt_logo">
									</div>

									<input type="hidden" name="logo_exists" value="{{ $pos_setting->receipt_logo ?? 0 }}">
									<button type="button" class="btn btn-primary">Save</button>
								</form>
                            </div>
                            <div class="tab-pane @if('receipt' == request()->get('tab')) active show @else not-active @endif" id="receipt-settings" role="tabpanel">
                                <h5 class="mt-4">Receipt Settings</h5>
								@if($devices)
									<form action="{{ route('pos.settings', ['account' => $account]) }}">
										<div class="form-group">
											<label for="device">Device</label>
											<select name="device" id="device" class="form-control" onchange="this.form.submit();">
												<option value="">-- SELECT DEVICE --</option>
												@foreach( $devices as $name => $device )
													<option value="{{$device}}" @if($device == request()->get('device') || (!is_null($receipt_setting) && $receipt_setting->device_id == $device ) ) selected @endif>{{$name}}</option>
												@endforeach
											</select>
											<input type="hidden" name="tab" value="receipt" />
											<!-- <input type="text" class="form-control" name="display_restaurant_name" required id="display_restaurant_name" placeholder="Display restaurant name" value="{{ $pos_setting->display_restaurant_name ?? '' }}"> -->
										</div>
									</form>
									@if( $receipt_setting )
									<form action="{{ route('pos.settings.receipt.update', ['account'=>$account, 'setting_key'=>$receipt_setting->setting_key, 'device_id'=>$receipt_setting->device_id]) }}" method="POST"  enctype="multipart/form-data">
										@csrf

										@php 
											$rSetting = json_decode($receipt_setting->setting_value,true);
										@endphp

										<div class="col-12">
											<div class="form-group row mb-1">
												<label class="col-12 col-form-label">
													<strong>Custom Message</strong>
												</label>
												<div class="col-12">
													<div class="form-group">
														<input type="text" class="form-control" name="setting_value[message]" id="message" placeholder="Display custom message" value="{{ $rSetting['message'] ?? '' }}">
													</div>
												</div>
											</div>
										</div>

										<div class="col-12">
											<div class="form-group row mb-1">
												<label class="col-12 col-form-label">
													<strong>Logo</strong>
												</label>
												<div class="col-12">
													<div class="custom-switch custom-switch-secondary mb-2">
														<input class="custom-switch-input" id="r_logo" type="checkbox" value="true" name="setting_value[logo]" @if( isset($rSetting['logo']) && $rSetting['logo'] ) checked @endif>
														<label class="custom-switch-btn" for="r_logo"></label>
													</div>
												</div>
											</div>
										</div>
										<div class="col-12">
											<div class="form-group row mb-1">
												<label class="col-12 col-form-label">
													<strong>Restaurant Address</strong>
												</label>
												<div class="col-12">
													<div class="custom-switch custom-switch-secondary mb-2">
														<input class="custom-switch-input" id="restaurant_address" type="checkbox" value="true" name="setting_value[restaurant_address]" @if( isset($rSetting['restaurant_address']) && $rSetting['restaurant_address'] ) checked @endif>
														<label class="custom-switch-btn" for="restaurant_address"></label>
													</div>
												</div>
											</div>
										</div>
										<div class="col-12">
											<div class="form-group row mb-1">
												<label class="col-12 col-form-label">
													<strong>Domain</strong>
												</label>
												<div class="col-12">
													<div class="custom-switch custom-switch-secondary mb-2">
														<input class="custom-switch-input" id="domain" type="checkbox" value="true" name="setting_value[domain]" @if( isset($rSetting['domain']) && $rSetting['domain'] ) checked @endif>
														<label class="custom-switch-btn" for="domain"></label>
													</div>
												</div>
											</div>
										</div>
										<div class="col-12">
											<div class="form-group row mb-1">
												<label class="col-12 col-form-label">
													<strong>Website Receipt</strong>
												</label>
												<div class="col-12">
													<div class="custom-switch custom-switch-secondary mb-2">
														<input class="custom-switch-input" id="websiteReceipt" type="checkbox" value="true" name="setting_value[websiteReceipt]" @if( isset($rSetting['websiteReceipt']) && $rSetting['websiteReceipt'] ) checked @endif>
														<label class="custom-switch-btn" for="websiteReceipt"></label>
													</div>
												</div>
											</div>
										</div>
										<button type="submit" class="btn btn-primary">Save</button>
									</form>
									@else 
										<form action="{{ route('pos.settings.receipt.create', ['account'=>$account]) }}" method="POST"  enctype="multipart/form-data">
											@csrf

											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Custom Message</strong>
													</label>
													<div class="col-12">
														<div class="form-group">
															<input type="text" class="form-control" name="setting_value[message]" id="message" placeholder="Display custom message">
														</div>
													</div>
												</div>
											</div>

											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Logo</strong>
													</label>
													<div class="col-12">
														<div class="custom-switch custom-switch-secondary mb-2">
															<input class="custom-switch-input" id="r_logo" type="checkbox" value="true" name="setting_value[logo]">
															<label class="custom-switch-btn" for="r_logo"></label>
														</div>
													</div>
												</div>
											</div>
											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Restaurant Address</strong>
													</label>
													<div class="col-12">
														<div class="custom-switch custom-switch-secondary mb-2">
															<input class="custom-switch-input" id="restaurant_address" type="checkbox" value="true" name="setting_value[restaurant_address]">
															<label class="custom-switch-btn" for="restaurant_address"></label>
														</div>
													</div>
												</div>
											</div>
											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Domain</strong>
													</label>
													<div class="col-12">
														<div class="custom-switch custom-switch-secondary mb-2">
															<input class="custom-switch-input" id="domain" type="checkbox" value="true" name="setting_value[domain]">
															<label class="custom-switch-btn" for="domain"></label>
														</div>
													</div>
												</div>
											</div>
											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Website Receipt</strong>
													</label>
													<div class="col-12">
														<div class="custom-switch custom-switch-secondary mb-2">
															<input class="custom-switch-input" id="websiteReceipt" type="checkbox" value="true" name="setting_value[websiteReceipt]">
															<label class="custom-switch-btn" for="websiteReceipt"></label>
														</div>
													</div>
												</div>
											</div>
											<input type="hidden" name="device_id" value="{{ request()->get('device') }}">
											<button type="submit" class="btn btn-primary">Save</button>
										</form>

									@endif
								@else
									{{ 'No devices added yet.' }}
								@endif
                            </div>
							<div class="tab-pane @if('ticket' == request()->get('tab')) active show @else not-active @endif" id="ticket-settings" role="tabpanel">
                                <h5 class="mt-4">Ticket Settings</h5>
								@if($devices)
									<form action="{{ route('pos.settings', ['account' => $account]) }}">
										<div class="form-group">
											<label for="device">Device</label>
											<select name="device" id="device" class="form-control" onchange="this.form.submit();">
												<option value="">-- SELECT DEVICE --</option>
												@foreach( $devices as $name => $device )
													<option value="{{$device}}" @if($device == request()->get('device') || (!is_null($ticket_setting) && $ticket_setting->device_id == $device ) ) selected @endif>{{$name}}</option>
												@endforeach
											</select>
											<input type="hidden" name="tab" value="ticket" />
											<!-- <input type="text" class="form-control" name="display_restaurant_name" required id="display_restaurant_name" placeholder="Display restaurant name" value="{{ $pos_setting->display_restaurant_name ?? '' }}"> -->
										</div>
									</form>
									@if( $ticket_setting )
										<form action="{{ route('pos.settings.ticket.update', ['account'=>$account, 'setting_key'=>$ticket_setting->setting_key, 'device_id'=>$ticket_setting->device_id]) }}" method="POST"  enctype="multipart/form-data">
											@csrf

											@php 
												$tSetting = json_decode($ticket_setting->setting_value,true);
											@endphp

											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Page width</strong>
													</label>
													<div class="col-12">
														<div class="form-group">
															<input type="text" class="form-control" name="setting_value[pageWidthLength]" id="pageWidthLength" placeholder="Page width length" value="{{ $tSetting['pageWidthLength'] ?? '' }}">
														</div>
													</div>
												</div>
											</div>

											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Page left margin</strong>
													</label>
													<div class="col-12">
														<div class="form-group">
															<input type="text" class="form-control" name="setting_value[pageLeftMarginLength]" id="pageLeftMarginLength" placeholder="Page left margin" value="{{ $tSetting['pageLeftMarginLength'] ?? '' }}">
														</div>
													</div>
												</div>
											</div>

											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Auto order print</strong>
													</label>
													<div class="col-12">
														<div class="custom-switch custom-switch-secondary mb-2">
															<input class="custom-switch-input" id="autoOrderPrint" type="checkbox" value="true" name="setting_value[autoOrderPrint]" @if( $tSetting['autoOrderPrint'] ) checked @endif>
															<label class="custom-switch-btn" for="autoOrderPrint"></label>
														</div>
													</div>
												</div>
											</div>

											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Print ticket option</strong>
													</label>
													<div class="col-12">
														<div class="form-group">
															<select name="setting_value[printTicketOption]" id="printTicketOption" class="form-control">
																<option value="auto">auto</option>
															</select>
														</div>
													</div>
												</div>
											</div>

											<div class="col-12">
												<div class="form-group row mb-1">
													<label class="col-12 col-form-label">
														<strong>Hide category</strong>
													</label>
													<div class="col-12">
														<div class="form-group">
															<select name="setting_value[hideCategory][]" id="hideCategory" class="form-control select2-multiple select2-hidden-accessible" multiple data-width="100%" tabindex="-1" aria-hidden="true">
																@php $selected = $tSetting['hideCategory'] ?? []; @endphp
																@foreach( $categories as $category )
																	<option value="{{ $category->id ?? '' }}" @if( in_array( $category->id, $selected ) ) selected @endif>{{ $category->category_name ?? '' }}</option>
																@endforeach	
															</select>
														</div>
													</div>
												</div>
											</div>

											<input type="hidden" name="setting_value[printerId]" value="{{ $tSetting['printerId'] ?? '' }}" />
											<input type="hidden" name="setting_value[selectedPrinter]" value="{{ $tSetting['selectedPrinter'] ?? '' }}" />
											<button type="submit" class="btn btn-primary">Save</button>
										</form>
									@else
										{{ 'Printer setting not added yet.' }}
									@endif
								@else
									{{ 'No devices added yet.' }}
								@endif
                            </div>
							<!-- Tipping Settings -->
							<div class="tab-pane @if('tipping' == request()->get('tab')) active show @else not-active @endif" id="tipping-settings" role="tabpanel">
                                <h5 class="mt-4">Tipping Settings</h5>
								@if($devices)
									<form action="{{ route('pos.settings', ['account' => $account]) }}">
										<div class="form-group">
											<label for="device">Device</label>
											<select name="device" id="device" class="form-control" onchange="this.form.submit();">
												<option value="">-- SELECT DEVICE --</option>
												@foreach( $devices as $name => $device )
													<option value="{{$device}}" @if($device == request()->get('device') || (!is_null($ticket_setting) && $ticket_setting->device_id == $device ) ) selected @endif>{{$name}}</option>
												@endforeach
											</select>
											<input type="hidden" name="tab" value="tipping" />
											<!-- <input type="text" class="form-control" name="display_restaurant_name" required id="display_restaurant_name" placeholder="Display restaurant name" value="{{ $pos_setting->display_restaurant_name ?? '' }}"> -->
										</div>
									</form>
									@if( $tipping_setting )
										<form action="{{ route('pos.settings.tipping.update', ['account'=>$account, 'setting_key'=>$tipping_setting->setting_key, 'device_id'=>$tipping_setting->device_id]) }}" method="POST"  enctype="multipart/form-data">
											@csrf

											@php 
												$tSetting = json_decode($tipping_setting->setting_value,true);
											@endphp

											<div class="form-group">
												<h6>Tipping type</h6>
												<div class="mb-4">
													<div class="custom-control custom-radio">
														<input type="radio" id="tippingTypeDevice" name="setting_value[tippingType]" class="custom-control-input" value="device" @if( isset($tSetting['tippingType']) && 'device' == $tSetting['tippingType'] ) checked @endif>
														<label class="custom-control-label" for="tippingTypeDevice">Device tipping</label>
													</div>
													<div class="custom-control custom-radio">
														<input type="radio" id="tippingTypeReceipt" name="setting_value[tippingType]" class="custom-control-input" value="receipt" @if( isset($tSetting['tippingType']) && 'receipt' == $tSetting['tippingType'] ) checked @endif>
														<label class="custom-control-label" for="tippingTypeReceipt">Receipt tipping</label>
													</div>
												</div>
											</div>

											<button type="submit" class="btn btn-primary">Save</button>
										</form>
									@else
										<form action="{{ route('pos.settings.tipping.create', ['account'=>$account]) }}" method="POST"  enctype="multipart/form-data">
											@csrf

											<div class="form-group">
												<h6>Tipping type</h6>
												<div class="mb-4">
													<div class="custom-control custom-radio">
														<input type="radio" id="tippingTypeDevice" name="setting_value[tippingType]" class="custom-control-input" value="device" @if( 'device' == old('tippingType') ) checked @endif>
														<label class="custom-control-label" for="tippingTypeDevice">Device tipping</label>
													</div>
													<div class="custom-control custom-radio">
														<input type="radio" id="tippingTypeReceipt" name="setting_value[tippingType]" class="custom-control-input" value="receipt" @if( 'receipt' == old('tippingType') ) checked @endif>
														<label class="custom-control-label" for="tippingTypeReceipt">Receipt tipping</label>
													</div>
												</div>
											</div>

											<input type="hidden" name="device_id" value="{{ request()->get('device') }}">
											<button type="submit" class="btn btn-primary">Save</button>
										</form>
									@endif
								@else
									{{ 'No devices added yet.' }}
								@endif
                            </div>

                            <div class="tab-pane @if('report' == request()->get('tab')) active show @else not-active @endif" id="report-settings" role="tabpanel">
                            	<div id="report-settings-message" class="alert d-none"></div>
                                <h5 class="mt-4">Actively Report Settings</h5>
								@if($posdevices)
									<form id="reportSettingsForm" action="javascript:void(0);">
										<div class="form-group">
											@foreach( $posdevices as $device )
												<div class="custom-switch custom-switch-secondary mb-2 col-md-6" style="margin-top:20px;float: left;width: 100%;">
													<input type="hidden" name="setting_value[{{ $device->device_id }}][report_setting]" value="0" />
													<input class="custom-switch-input" id="report_setting{{ $device->device_id }}" type="checkbox" value="1" name="setting_value[{{ $device->device_id }}][report_setting]" @if( isset($device->report_setting) && $device->report_setting ) checked @endif>
													<label class="custom-switch-btn" style="float: left;" for="report_setting{{ $device->device_id }}"></label>
													<p style="float: left;margin-top: 5px;margin-left: 10px;"> {{ $device->name ?? '' }}  </p>
												</div>
											@endforeach
										</div>
										<button type="submit" id="save_report"  class="btn btn-primary">Save</button>
									</form>
								@endif
							</div>

							<div class="tab-pane @if('order' == request()->get('tab')) active show @else not-active @endif" id="order-settings" role="tabpanel">
                                <h5 class="mt-4">Order Settings</h5>
								<form action="{{ route('pos.settings.update', ['account'=>$account, 'id'=>$pos_setting->id ?? null]) }}" method="POST"  enctype="multipart/form-data">
									@csrf

									<div class="col-12">
										<div class="form-group row mb-1">
											<label class="col-12 col-form-label">
												<strong>Enable Auto Order Confirmation</strong>
											</label>
											<div class="col-12">
												<div class="custom-switch custom-switch-secondary mb-2">
													<input type="hidden" name="data[is_auto_confirm]" value="false" />
													<input class="custom-switch-input" id="is_auto_confirm" type="checkbox" value="true" name="data[is_auto_confirm]" @if( isset($pos_setting->data["is_auto_confirm"]) && filter_var($pos_setting->data["is_auto_confirm"], FILTER_VALIDATE_BOOLEAN) ) checked @endif>
													<label class="custom-switch-btn" for="is_auto_confirm"></label>
												</div>
											</div>
										</div>
									</div>

									<button type="submit" class="btn btn-primary">Save</button>
								</form>
                            </div>

                        </div>
                    </div>
                </div> <!-- end card-->
            </div> <!-- end col -->
        </div>
    </div>
@endsection

@section('script')
<script>
	$(document).ready(function() {
		if ($().dropzone && !$(".dropzone").hasClass("disabled")) {
			$(".dropzone").dropzone({
				url: "#",
				maxFiles: 1,
				autoProcessQueue: false,
				acceptedFiles: "image/*",
				init: function () {
					const dz = this;
					const fileInput = $("#receipt_logo");
					const dataTransfer = new DataTransfer();
					
					dz.on("addedfile", function (file) {
						if (dz.files.length > dz.options.maxFiles) {
							// dz.removeFile(file);
						} else {
							dataTransfer.items.add(file);
							fileInput[0].files = dataTransfer.files;
						}
					});
					
					dz.on("removedfile", function () {
						fileInput[0].files = dataTransfer.files;
					});
				},
				thumbnailWidth: 160,
				previewTemplate: '<div class="dz-preview dz-file-preview mb-3"><div class="d-flex flex-row "><div class="p-0 w-30 position-relative"><div class="dz-error-mark"><span><i></i></span></div><div class="dz-success-mark"><span><i></i></span></div><div class="preview-container"><img data-dz-thumbnail class="img-thumbnail border-0" /><i class="simple-icon-doc preview-icon" ></i></div></div><div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"><div><span data-dz-name></span></div><div class="text-primary text-extra-small" data-dz-size /><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div></div><a href="#/" class="remove" data-dz-remove><i class="glyph-icon simple-icon-trash"></i></a></div>'
			});
		}
		$(document).on("click", "#save_report", function () {
		    
		    $.ajax({
		        url: "{{ route('pos.settings.report', ['account' => $account]) }}", // Ensure this is the correct route
		        type: "POST",
		        data: $("#reportSettingsForm").serialize(),
		        dataType: "json",
		        success: function (response) {
		            $("#report-settings-message")
		                .removeClass("d-none alert-danger")
		                .addClass("alert-success")
		                .text(response.message);
					
					var redirectTo = updateQueryStringParameter(window.location.href, 'tab', 'report')
					window.location.href = redirectTo;
		        },
		        error: function (xhr) {
		            let errorMessage = "Error updating settings.";
		            if (xhr.responseJSON && xhr.responseJSON.message) {
		                errorMessage = xhr.responseJSON.message;
		            }

		            $("#report-settings-message")
		                .removeClass("d-none alert-success")
		                .addClass("alert-danger")
		                .text(errorMessage);
		        },
		    });
		});

		function updateQueryStringParameter(uri, key, value) {
			var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
			var separator = uri.indexOf('?') !== -1 ? "&" : "?";
			if (uri.match(re)) {
				return uri.replace(re, '$1' + key + "=" + value + '$2');
			}
			else {
				return uri + separator + key + "=" + value;
			}
		}

		

	});


</script>
@endsection