@extends('backend.layout')

@section('content')


<div class="row">
	<div class="col-md-12">
		<div class="panel panel-flat">
			<div class="panel-heading" style="padding-top: 5px; padding-bottom: 5px;">
				<h3 class="content-group text-semibold mt-10 mb-10" >
					Thông tin đại lý : <b>{{$item->fullname }}</b>
				</h3>
				<div class="heading-elements">
					<ul class="icons-list">
                		<li style="margin-right: 15px;"><a href="{{route('backend.web_agen.list')}}"><i class="icon-arrow-left7"></i>Danh sách</a></li>
                		<li><a href="{{route('backend.web_agen.edit',$item->id)}}"><i class="icon-pencil"></i></a></li>
                	</ul>
            	</div>
			</div>

			<div class="panel-body">
				<div class="tabbable">
					<a href="#" class="visible-xs"><i class="icon-arrow-left7"></i>Danh sách</a>
					@include('backend.web.agency.nav')
					<div class="tab-content">
                        <div class="tab-pane {{ $action == 'buy-package' ? 'active' : null }}" id="top-tab4">
                            <div class="panel panel-flat">
                                <div class="panel-body" style="padding: 5px;">
                                    <form action="" method="POST">
                                        {{ csrf_field() }}
                                        <fieldset class="content-group">
                                        	<div class="col-md-4">
                                        		<div class="form-group has-feedback @if( @$errors->first('fullname') != null ) has-error  @endif ">
	                                                <label class="control-label text-semibold">SL tài khoản</label>
                                                    <input type="text" id="accountNumber" class="form-control" placeholder="Nhập vào số lượng tài khoản" name="fullname" value="{{ old('fullname',@$agency->fullname)}}">
                                                    <div class="form-control-feedback">
                                                         @if( @$errors->first('fullname') != null ) <i class="icon-notification2"></i> @endif
                                                        </div>
                                                    <span class="help-block">{{ @$errors->first('fullname') }}</span>
	                                            </div>
                                        	</div>
                                            
                                            <div class="col-md-4">
	                                            <div class="form-group has-feedback @if( @$errors->first('service_id') != null ) has-error  @endif ">
	                                                <label class="control-label text-semibold">Dịch vụ</label>
                                                    <select name="service_id" id="service_id" class="form-control select2"  data-allow-clear="true"  data-placeholder="Chọn danh mục">
                                                        <option value="">Chọn dịch vụ</option>
                                                        @foreach ($services as $service)
                                                            <option value="{{$service ->id}}" data-price="{{$service->usd}}">{{$service->name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-control-feedback">
                                                         @if( @$errors->first('service_id') != null )<i class="icon-notification2"></i> @endif
                                                    </div>
                                                    <span class="help-block">{{ @$errors->first('service_id') }}</span>
	                                            </div>  
	                                        </div>

	                                        <div class="col-md-3">
	                                            <div class="form-group has-feedback @if( @$errors->first('type') != null ) has-error  @endif ">
	                                                <label class="control-label text-semibold">Website</label>
                                                    <select name="type" id="type" class="form-control select2" data-placeholder="Website">
                                                        <option value="">Website</option>
                                                        <option value="jp">itvjp.com</option>
                                                        <option value="kr">kr.itvjp.com</option>
                                                        <option value="vi">vi.itvjp.com</option>
                                                    </select>
                                                    <div class="form-control-feedback">
                                                        @if( @$errors->first('type') != null )<i class="icon-notification2"></i> @endif
                                                    </div>
                                                    <span class="help-block">{{ @$errors->first('type') }}</span>
	                                            </div>  
	                                        </div>

	                                        <div class="col-md-1 text-right">
	                                        	<div class="form-group has-feedback @if( @$errors->first('service_id') != null ) has-error  @endif ">
		                                        	<label class="control-label">&nbsp;</label>
		                                        	<button type="submit" class="btn btn-primary form-control text-center" id="addService"> Thêm <i class="icon-file-plus position-right"></i></button>
		                                        </div>
	                                        </div>
	                                        
                                        </fieldset>
                                    </form>
                    				

                    				<table class="table">
                    					<thead>
                    						<tr>
	                    						<th>Dịch vụ</th>
	                    						<th>Sl tài khoản</th>
	                    						<th>Đơn giá</th>
	                    						<th>#</th>
	                    					</tr>
                    					</thead>
	                    					
                    					<tbody id="listPackage">
                    						
                    					</tbody>

                    					<tfoot>
										    <tr>
										    	<th></th>
										     	<th>Total account : <span id="totalAccount"></span></th>
										      	<th>
										      		Tổng: <span id="totalPrice"></span><br>
										      		Giảm giá: <span id="discount"></span><br>
										      		Thanh toán: <span id="payPrice"></span>
										      	</th>
										      	<th class="text-right"><button class="btn btn-info hide" id="buy">Hoàn tất</button></th>
										    </tr>
										</tfoot>

                    				</table>
                                </div>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@push('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
	<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
	<style type="text/css">
		
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	<script type="text/javascript">
		var services 	= @json($services);
		var discounts 	= @json($discounts);
		

		var amount_paid, amount_total, discount;

		var details = {};

    	$(document).ready(function() {
			$('.select2').select2();
		});

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

			if(accountNumber == "" || serviceId == "" || type == ""){
				alert('Vui lòng chọn đủ thông tin');
			}else {
				$('#buy').removeClass('hide');

				$('#type').select2({disabled:'readonly'});
				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 class="inputEdit" contenteditable="true" data-id="'+serviceId+'">'+accountNumber+'</td>';
					html += '<td>'+parseFloat(type == 'vi' ? service.vi_usd :service.usd)+' usd</td>';
					html += '<td><button class="btn btn-danger removeItem" data-id="'+serviceId+'">Xoá</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');
	        	$('#type').select2({disabled:false});
	        }
	        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);
            });
        });

	   	$('#type').change(function() {
	   		updateTotal();
	   	});

	   	function updateTotal(){
	   		var type = $('#type').val();
	   		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(type == 'vi' ? service.vi_usd : service.usd)*details[key];
			}

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

			$('#discount').text(discount + '%');
			$('#totalAccount').text(totalAccount);
			$('#totalPrice').text(totalPrice + ' usd');
			$('#payPrice').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;
		}

        $('#buy').click(function() {
        	if(details.length == 0){
        		alert('Thiếu dữ liệu');
        	} else {
        		$("body").LoadingOverlay('show');
        		var url = '{{ route("backend.web_agen.buy_package", $item->id) }}';

        		$.post(url, {_token: _token, data: details, type : $('#type').val() })
					.done(function(response) {
						new PNotify({
				            title: 'Thông báo',
				            text: 'Mua thêm thành công!',
				            icon: 'icon-cancel-circle2',
				            type: 'success'
				        });
						$("body").LoadingOverlay("hide");
						window.location.href = "{{ route('backend.web_agen.item',['id' => $item->id, 'action' => 'index']) }}";
					})
					.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>

@endpush