@extends('layouts.agency')

@section('title', __('message.register_package').' | ITVJP.COM Seller')

@section('style-libraries')

@stop

@section('styles')
    <style>
		.select2-container{
			margin-top: 10px !important;
			width: 100% !important;
		}
		.td-left {
			text-align: left !important;
			padding-left: 0px !important;
		}
		.select2-selection {
			height: 35px !important;
			background: #1a40487d !important; 
			border: 1px solid #ccc !important;
		}
		.select2-container--default .select2-selection--single .select2-selection__rendered {
			color: white !important;
			padding-top: 3px !important;
		}
	</style>
@stop

@section('content')
	<div id="content">
		<section id="payment">
			<div class="w3-container">
				<h3 class="fw-700 text-center">{{ __('message.purchase_additional')}}</h3>
				<div id="pagePayment" class="mb-30">
					<form method="post" action="{{ route('registerPackage') }}" id="formRegister">
						{{ csrf_field() }}
						<div class="w3-row">
							<div class="w3-col m8 s12 ">
								<h4  class="fw-700">{{ __('website.buy_account') }}</h4>

								<div class="w3-card">
									<div class="packages">
										@isset($services)
											<div class="w3-row">
												<div class="w3-col m5 s12">
													<label class="w3-text fw-700">{{__('website.package')}}</label>
													
													<select name="service_id" class="form-control select2 w3-input w3-border w3-round-large" id="service_id"  data-allow-clear="true"  data-placeholder="{{__('website.select_package')}}">
														<option value="">{{__('website.select_package')}}</option>
														@foreach ($services as $service)
															<option value="{{$service->id}}" data-price="{{$service->usd}}" data-duration="{{ $service->using_day == 0 ? 'Demo (3 day)' : $service->using_day.__('message.month') }}" class="service">{{$service->name}}</option>
														@endforeach
													</select>
													 <div class="help-block" id="passwordError"></div>
												</div>
												<div class="w3-col m5 s8">
													<label class="w3-text fw-700">{{__('website.total_account')}}</label>
													<input type="number" min="1" class="w3-input w3-border w3-round-large" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" autofill="off" id="accountNumber" name="account_quantity" placeholder value="5"/>
													<div class="help-block" id="rePasswordError"></div>
												</div>
												<div class="w3-col m2 s4">
													<label class="w3-text fw-700">&nbsp;</label>
													<button class="btn float-right w3-input" id="addService">{{ __('website.add') }}</button>
												</div>
											</div>
												
											<div class="w3-row">
												<div class="w3-col m12 s12">
													<div class="table-responsive" style="overflow-x:auto;">
														<table class="my-table">
															<thead>
																<tr>
																	<th>{{__('website.service')}}</th>
																	<th style="width: 180px">{{__('website.unit_price')}}</th>
																	<th style="width: 180px">{{__('website.account_quantity')}}</th>
																	<th style="width: 100px">#</th>
																</tr>
															</thead>
															<tbody id="listPackage">
                    						
															</tbody>
														</table>
														
													</div>
												</div>
											</div>
											<br>
											{{-- <div class="w3-row" >
												<p class="w3-col l3 m6 s12 text-bold" style="padding-bottom: 10px">Total account : <span id="totalAccount"></span></p>
												<p class="w3-col l3 m6 s12 text-bold" style="padding-bottom: 10px">Tổng: <span id="totalPrice"></span></p>
												<p class="w3-col l3 m6 s12 text-bold" style="padding-bottom: 10px">Giảm giá: <span id="discount"></span></p>
												<p class="w3-col l3 m6 s12 text-bold" style="padding-bottom: 10px">Thanh toán: <span id="payPrice"></span></p>
											</div> --}}
										@endif
									</div>
								</div>
							</div>
							<div class="w3-col m4 s12">
								<h4 class="w3-text fw-700">{{__('message.information')}}</h4>
								<input type="hidden" name="package" value="{{ @$package }}">
								<div class="w3-card">
									@if(@$package != 'free')
									<table>
										<tr>
											<td class="w3-pt-10">{{__('website.total_account')}}</td>
											<td class="w3-right-align fw-700" id="totalAccount">0</td>
										</tr>
										<tr>
											<td>{{__('website.total')}}</td>
											<td class="w3-right-align fw-700" id="totalPrice">0</td>
										</tr>
										<tr>
											<td>{{__('website.discount')}}</td>
											<td class="w3-right-align fw-700" id="discount">0</td>
										</tr>
										<tr>
											<td>{{__('website.transaction_fee')}}</td>
											<td class="w3-right-align fw-700">+5%</td>
										</tr>
										<tr>
											<td>{{__('website.price_subsidy')}}</td>
											<td class="w3-right-align fw-700">-5%</td>
										</tr>
									</table>
									<div class="line"></div>
									<table>
										<tr>
											<td>{{__('message.total_buy')}}</td>
											<td class="plan-price w3-right-align fw-700 paypalPrice" id="payPrice">{{ number_format(0,2)}}$</td>
										</tr>
									</table>
									@endif
									<button id="submit" class="btn btn-paymnet fw-700 @if((!\Auth::user())) disabled @endif" @if((!\Auth::user())) disabled @endif>
										{{__('website.pay')}}&nbsp;&nbsp;<span class="total paypalPrice" id="paypalPrice">{{ number_format(0,2)}}$</span>
										<img src="{{ asset('images/icons/paypal.png') }}">
									</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</section>
			
	</div>
@stop
@section('scripts')
	<link rel="stylesheet" href="{{url('css/jquery-ui.css')}}">
	<script src="{{ url('js/packages/jquery-ui.js')}}"></script>
	<script src="{{ url('js/packages/select2.min.js') }}"></script>
	<link rel="stylesheet" href="{{ url('css/select2.min.css') }}">
	<script type="text/javascript">
		
		$(document).ready(function() {
			$('.select2').select2();
		});

		var textRemove = '{{ __("website.remove") }}';

		document.addEventListener('DOMContentLoaded', function() {
			const serviceSelect = document.getElementById('service_id');
			const durationTd = document.getElementById('duration');

			serviceSelect.addEventListener('change', function() {
				console.log('Select changed');
				const selectedOption = serviceSelect.options[serviceSelect.selectedIndex];
				const duration = selectedOption.getAttribute('data-duration');
				durationTd.textContent = duration ? duration : '{{__('message.demo_3_day')}}';
				alert(duration);
			});
		});

		$('#email').on('input', function() {
	    	var email = $('#email').val();
	        var errorMessage = $('#error-message');
	        var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

	        if (!emailPattern.test(email)) {
	        	$('#email').removeClass('success');
	            $('#emailError').text('{{trans('message.invalid_email')}}');
	        } else {

	        	var urlCheckEmail = "{{ route('checkEmail') }}";
	        	$.post('/check-email', {email: email, _token: _token}, function(data){
		            if(data.exists){
		                $('#email').removeClass('success');
	            		$('#emailError').text('{{trans('message.email_exists')}}');
		            } else {
		                $('#email').addClass('success');	
	            		$('#emailError').text('');
		            }
		        }, 'json');
	        }
	    });

	    $('#password').on('input', function() {
	        var passwordValue = $('#password').val();
	        var errorMessage = $('#passwordError');
	        var rePassword = $('#re-password').val();

	        if (passwordValue.length < 6) {
	        	$('#password').removeClass('success');
	            errorMessage.text('Password must be at least 6 characters long');
	        } else if (/\s/.test(passwordValue)) {
	        	$('#password').removeClass('success');
	            errorMessage.text('Password must not contain spaces');
	        } else if( rePassword != "" && passwordValue != rePassword){
	        	$('#password').removeClass('success');
	        	errorMessage.text('Password confirmation does not match');
	        }else {
	        	$('#password').addClass('success');
	            errorMessage.text('');
	        }
	    });

	    $('#re-password').on('input', function() {
	        var passwordValue = $('#password').val();
	        var rePassword = $('#re-password').val();
	        var errorMessage = $('#rePasswordError');

	        if( passwordValue != rePassword){
	        	$('#re-password').removeClass('success');
	        	errorMessage.text('Password confirmation does not match');
	        }else {
	        	$('#re-password').addClass('success');
	            errorMessage.text('');
	        }
	    });

	    $('#password, #email, #re-password').on('input', function() {
	    	if( $('.success').length != 3  ){
	    		$('#submit').addClass('disabled');
	    		$('#submit').attr('disabled', true);
	    	}else {
	    		$('#submit').removeClass('disabled');
	    		$('#submit').attr('disabled', false);
	    	}
	    });

	    
		function validateEmail(email) {
		    var re = /\S+@\S+\.\S+/;
		    return re.test(email);
		}
		var services = @json($services);
		var discounts = @json($discounts);

		var amount_paid, amount_total, discount;

		var details = {};


		$('#addService').click(function(e) {
			e.preventDefault();
			var accountNumber = $('#accountNumber').val();
			var serviceId = $('#service_id').val();

			if(accountNumber == "" || serviceId == "" || accountNumber <0 ){
				alert('{{__('message.please_double')}}');
			}else {
				$('#buy').removeClass('hide');

				var selectedOption = $('#service_id').find(':selected');
				var service = services.find(item => item.id == serviceId);

				if( $('#service_'+serviceId).length > 0 ){
					var totalCurrent = parseInt( $('#service_'+serviceId+' .inputEdit').text());
					$('#service_'+serviceId+' .inputEdit').text(parseInt(totalCurrent) + parseInt(accountNumber));

					details[serviceId] = parseInt(totalCurrent) + parseInt(accountNumber);

				}else {
					var html = '<tr id="service_'+serviceId+'">';
					html += '<td>'+service.name+'</td>';
					html += '<td>'+parseFloat(service.usd)+' usd</td>';
					html += '<td class="inputEdit" contenteditable="true" data-id="'+serviceId+'">'+accountNumber+'</td>';
					html += '<td><button class="btn btn-danger removeItem" data-id="'+serviceId+'">'+textRemove+'</button></td>';
					html += '</tr>';
					details[serviceId] = parseInt(accountNumber);
					$('#listPackage').prepend(html);
				}
			}
			updateTotal(details);
			return;
		});

		$(document).on("click",".removeItem",function() {
	        $(this).parents('tr').remove();
	        delete details[parseInt($(this).attr('data-id'))];
	        if( $('#listPackage tr').length == 0 ) {
	        	$('#buy').addClass('hide');
	        }
	        updateTotal(details);
	    });

	   $(document).ready(function() {	
            $(document).on("input", ".inputEdit", function() {
                var newValue = $(this).text().replace(/[^0-9]/g, '');
                if (newValue === '') {
                    newValue = '1';
                }

                $(this).text(newValue);
                details[parseInt($(this).attr('data-id'))] = newValue;
                updateTotal(details);
                var element = this;
                setTimeout(function() {
                    var range = document.createRange();
                    var sel = window.getSelection();
                    range.setStart(element, 1);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }, 1);
            });
        });
		
		function updateTotal(){
	   		var totalAccount = 0;
	   		var totalPrice = 0;

	   		for (var key in details) {
			   	var service = services.find(item => item.id == key);
			   	totalAccount 	+= parseInt(details[key]);
			   	totalPrice 		+= parseFloat(service.usd)*details[key];
			}

			var obj = findRange(totalAccount);
			var discount = 5;
			if(obj) discount = obj.discount;

			if( totalAccount >= 5 ) {
				$('#submit').removeClass('disabled');
	    		$('#submit').attr('disabled', false);
			}else {
				$('#submit').addClass('disabled');
	    		$('#submit').attr('disabled', true);
			}
			$('#discount').text(discount + '%');
			$('#totalAccount').text(totalAccount);
			$('#totalPrice').text(totalPrice + ' usd');
			$('#payPrice').text( Math.round(totalPrice - totalPrice*discount/100) + ' usd');
			$('.paypalPrice').text( ((totalPrice - totalPrice*discount/100) ) + ' usd');
	   	}

		function findRange(totalAccount) {
			if(totalAccount < discounts[0].account_quantity) return null;
			if(totalAccount >= discounts[discounts.length -1].account_quantity) return discounts[discounts.length -1];

			for (var i = 0; i < discounts.length; i++) {
				if (totalAccount >= discounts[i].account_quantity && typeof discounts[i+1] != 'undefined') {
					if(totalAccount < discounts[i+1].account_quantity) return discounts[i];
				}
			}
			return null;
		}

		$('#formRegister').submit(function(event) {
			event.preventDefault();
			$('#submit').addClass('disabled');
	    	$('#submit').attr('disabled', true);

			if(details.length == 0){
        		alert('Thiếu dữ liệu');
        	} else {
        		var url = '{{ route("registerPackage") }}';
        		$('#submit').append('<i class="fa fa-circle-o-notch fa-spin"></i>');
        		$.post(url, {_token: _token, data: details})
					.done(function(response) {
						
						if (response.success) {
							window.location.href = response.redirect_url;
							$('#submit i').remove();
						} else {
							alert(response.message);
							$('#submit').removeClass('disabled');
	    					$('#submit').attr('disabled', false);
	    					$('#submit i').remove();
						}
					})
					// .fail(function(xhr, status, error) {
					// 	// $("body").LoadingOverlay("hide");
					// 	new PNotify({
					// 		title: 'Thông báo',
					// 		text: 'Lỗi hệ thống!',
					// 		icon: 'icon-cancel-circle2',
					// 		type: 'danger'
					// 	});
					// });
        	}
		});
	</script>
@stop