@if(empty($shippingConfig))
	<p>Vui lòng kiểm tra lại cấu hình vận chuyển TopShip</p>
@else
	<div class="shipping_service" id="etop" hidden>
		<div id="etop-component"></div>
		{!! Form::open([
	            'method' => 'POST',
	            'url'  => route('admin.order.delivery', $order->id),
	            'files'  => true,
	            'id' => 'delivery-form'
	        ]) !!}
	        <div id="etop-shipping-form-step1">
		    	<input hidden name="type" value="etop">
		    	<input hidden name="tracking_code" value="">
		    	<input hidden name="order_note" value="">
		    	<input hidden name="partner_shipping_fee" value="">
		    	<div class="form-group">
			        <h5>Địa chỉ kho hàng</h5>
			        <div class="form-group">
			            <select class="form-control shop_address" required="" name="shop_address">
			                @foreach($shop_address as $id => $address)
			                <option value="{{$id}}" data-province-name="{{$address['province']}}" data-district-name="{{$address['district']}}" data-address="{{$address['address']}}" data-sender-name="{{$address['fullname'] or ''}}" data-sender-phone="{{$address['phone'] or ''}}" data-sender-email="{{$address['email']}}" {{$loop->first ? 'selected' : ''}}>{{$address['name']}}</option>
			                @endforeach
			            </select>
			        </div>
			    </div>
			    <div class="form-group">
			        <h5>Thông tin người nhận hàng</h5>
			        <div class="row">
			            <div class="col-sm-6">
			                {{ Form::bsText('Họ tên', 'etop_fullname', $order->fullname, ['disabled'=>true]) }}
			            </div>
			            <div class="col-sm-6">
			                {{ Form::bsText('Điện thoại', 'etop_phone', $order->phone, ['disabled'=>true]) }}
			            </div>
			            <div class="col-sm-6">
			                {{ Form::bsSelect('Tỉnh/ Thành phố', 'etop_province',[], null, ['required'=>true, 'class' => 'receiver-province-id form-control', 'disabled' => true]) }}
			            </div>
			            <div class="col-sm-6">
			                {{ Form::bsSelect('Quận/Huyện', 'etop_district',[], null, ['required'=>true, 'class' => 'receiver-district-id form-control', 'disabled' => true]) }}
			            </div>
			            <div class="col-sm-12">
			                {{ Form::bsText('Địa chỉ (Số nhà, Đường, Xã/Phường)', 'etop_address', $order['address'], ['disabled' => true]) }}
			            </div>
			        </div>
			    </div>
		    	<div class="form-group">
			        <h5>Thông tin gói hàng</h5>
			        <div class="row">
			            <div class="col-sm-6">
			                <div class="form-group">
			                    <label>Số tiền thu hộ (COD)</label>
			                    <div class="input-group">
			                        <input type="number" class="form-control amount" name="cod_price" value="{{$order->payment_status?0:$order->total+$order->shipping_fee}}">
			                        <span class="input-group-addon">đ</span>
			                    </div>
			                    <span class="help-block"></span>
			                </div>
			            </div>
			            <div class="col-sm-6">
			                <div class="form-group">
			                    <label>Khối lượng</label>
			                    <div class="input-group">
			                        <input type="number" class="form-control weight" name="weight" value="{{!empty($weight) ? $weight : 300}}" required>
			                        <span class="input-group-addon">gram</span>
			                    </div>
			                </div>
			            </div>
			        </div>
			    </div>
		    	{{Form::bsTextArea('Ghi chú:', 'note', $order['note'], ['class' => 'form-control order-note'])}}
		    	<div class="modal-footer">
			        <div class="col-sm-6 text-left"></div>
			        <div class="col-sm-6">
			            <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
			            <button type="submit" class="btn btn-info btn-etop-shipping-step1">Tiếp tục</button>
			        </div>
			    </div>
	    	</div>
	    	<div id="etop-shipping-form-step2" style="display: none;">
		    	<div class="modal-footer">
		    		<div class="row">
				        <div class="col-sm-6 text-left">
				            <label class="checkbox-inline">
				                <input hidden name="send_notification_email" value="0">
				                <input bs-type="checkbox" checked="checked" name="send_notification_email" type="checkbox" value="1" class="checkbox-send-mail">
				                Gửi email tới khách hàng
				            </label>
				        </div>
				        <div class="col-sm-6">
				            <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
	                		<button type="submit" class="btn btn-info btn-etop-shipping-step2">Gửi</button>
	                		<button type="submit" class="hidden btn btn-info btn-create-shipping-order">Gửi</button>
				        </div>
			        </div>
			    </div>
	    	</div>
	    {!! Form::close() !!}
	</div>
	@php
		$order_items = [];
		$items_discount = 0;
		$total_items = 0;
		foreach($order->details as $item) {
			$attributes = [];
			if($item->product_option && is_array($item->product_option) && count($item->product_option)) {
	            foreach($item->product_option as $option) {
	            	$attributes[] = [
	            		'name' => $option['parent_name'],
	            		'value' => $option['name']
	            	];
	            }
	        }

	        $retail_price = $item->original_price >= $item->price ? $item->original_price : $item->price;
	        $payment_price = $item->price;
	        $items_discount += (($retail_price - $payment_price) * $item->quantity);
	        $total_items += $item->quantity;

			$order_items[] = [
				'product_name' => $item->product_name,
				'quantity' => $item->quantity,
				'retail_price' => $retail_price,
				'payment_price' => $payment_price,
				'attributes' => $attributes,
			];
		}

		$order_discount = ($subtotal + ($subtotal * ($order->tax/100))) - $order->total;
	@endphp
	<script src="{{env('APP_ENV') == 'production' ? config('ecommerce.shipping.etop.production.API_HOST') : config('ecommerce.shipping.etop.dev.API_HOST')}}/dist/ecom/ecom-polyfill.js"></script>
	<script type="text/javascript">
		var etopComponent;
		$('.btn-etop-shipping-step1').on('click', function (e) {
			$('#etop-shipping-form-step1').hide();
			$('.title-select-shipping-service').hide();
			$('#etop-shipping-form-step2').show();
			$('#etop-component').show();
			var order = {
				"external_code": "{{$order->code}}",
			 	"customer_address": {
			      "full_name": $('#etop').find('.shop_address').find(':selected').data('sender-name') || '',
			      "phone": $('#etop').find('.shop_address').find(':selected').data('sender-phone') || '',
			      "province": $('#etop').find('.shop_address').find(':selected').data('province-name') || '',
			      "district": $('#etop').find('.shop_address').find(':selected').data('district-name') || '',
			      "ward": '',
			      "address1": $('#etop').find('.shop_address').find(':selected').data('address') || '',
			  	},
			    "shipping_address": {
			      "full_name": $('#orderDetailPanel').data('receiver-name') || '',
			      "phone": $('#orderDetailPanel').data('receiver-phone') || '',
			      "province": $('#orderDetailPanel').data('province-name') || '',
			      "district": $('#orderDetailPanel').data('district-name') || '',
			      "ward": '',
			      "address1": $('#orderDetailPanel').data('address') || '',
			    },
			    "lines": {!!json_encode($order_items, true)!!},
			    "total_items": {{$total_items}},
			    "basket_value": {{$subtotal + $items_discount}},
	  			"order_discount": {{$order_discount}},
			    "total_discount": {{$order_discount + $items_discount}},
			    "total_amount": parseInt($('#etop').find('.amount').val()) || 0,
				"total_fee": {{$order->shipping_fee + ($subtotal * ($order->tax/100))}},
				"order_note": "{{$order->note ?? ''}}",
				"fee_lines": [
					{
					  "type": "shipping",
					  "name": 'Phí vận chuyển tính với khách',
					  "amount": {{$order->shipping_fee}}
					},
					{
					  "type": "tax",
					  "name": 'Thuế ({{$order->tax}}%)',
					  "amount": {{$subtotal * ($order->tax/100)}}
					},
				],
			    "shipping": {
				    "chargeable_weight": parseInt($('#etop').find('.weight').val()) || 0,
				    "cod_amount": parseInt($('#etop').find('.amount').val()),
				    "shipping_service_fee": {{$order->shipping_fee}},
				    "shipping_note": "{{$order->note ?? ''}}",
				    "include_insurance": true,
				    "pickup_address": {
						"full_name": $('#etop').find('.shop_address').find(':selected').data('sender-name') || '',
						"phone": $('#etop').find('.shop_address').find(':selected').data('sender-phone') || '',
						"province": $('#etop').find('.shop_address').find(':selected').data('province-name') || '',
						"district": $('#etop').find('.shop_address').find(':selected').data('district-name') || '',
						"ward": '',
						"address1": $('#etop').find('.shop_address').find(':selected').data('address') || '',
				    }
				  }
			};
			etopComponent = etop.init({
			elem: "etop-component",
			auth_token: "{{$shippingConfig['etop']['auth_token']}}",
			customize: {
				fromAddress: true,
				toAddress: true,
				orderFees: true,
				transportFees: true,
				submitButton: false
			}
			}).onAccessGranted(msg => {

			})
			.onError((data) => {
				if (data.event != "hello") {
					console.error(data.error.message);
				}
			})
			.onReady(() => {
				console.log(JSON.stringify(order));
				etopComponent.newOrder(order);
				$('#etop').find('.btn-create-shipping-order').removeAttr('disabled');
			 });

			  return false;
		});

		$('.btn-etop-shipping-step2').on('click', function (e) {
			$('.btn-etop-shipping-step2').attr('disabled', true);
			etopComponent.submitOrder((err, data) => {
				if(typeof err != 'undefined') {
					errorNotice('Lỗi', err.message, {timeOut: 3000});
					$('.btn-etop-shipping-step2').removeAttr('disabled');
				}else{
					$('input[name=tracking_code]').val(data.code)
					$('input[name=order_note]').val(data.order_note);
					$('input[name=partner_shipping_fee]').val(data.shop_shipping.x_shipping_fee);
					$('.btn-etop-shipping-step2').addClass('disabled').html('Đang xử lý');
					$('.btn-create-shipping-order').click();
				}
			});
			return false;
		});
	</script>
	@section('scripts')
	    @parent
	    <style type="text/css">
	    	#etop-component{
	    		min-height: 500px;
	    		display: none;
	    	}
	    	#etop-component iframe{
		        height: 500px;
		        width: 100%;
		    }
	    </style>
		<script>
		 jQuery(document).ready(function($) {
		    $(document).on('change', 'select[id=service_shipping]', function () {
		        let currentShippingMethod = $(this).val();
		        if (currentShippingMethod !== 'etop') {
		            return;
		        }
		        const service = new Shipping(currentShippingMethod);
		        service.getProvinces()
		            .then((provinces) => {
		                service.mapProvinceDataToSenderAddress(provinces);
		                service.mapProvinceDataToReceiverAddress(provinces);
		                service.createReceiverProvinceSelectBox(provinces);
		            })
		            .then(() => {
		                return Promise.all([
		                    service.getDistricts('sender'),
		                    service.getDistricts('receiver')
		                ]);
		            })
		            .then((data) => {
		                let senderDistricts = data[0];
		                let receiverDistricts = data[1];
		                service.createReceiverDistrictSelectBox(receiverDistricts);
		                service.mapDistrictDataToSenderAddress(senderDistricts);
		                service.mapDistrictDataToReceiverAddress(receiverDistricts);
		            })
		            .then(() => {
		                return service.findAvailableTransportMethod();
		            })
		            .then((methods) => {
		                service.createTransportMethodsSelectBox(methods);
		                service.handleOrderWeightChange();
		            })
		            .catch((error) => {
		                errorNotice('Lỗi', 'Mạng lỗi, vui lòng thử lại', {timeOut: 5000});
		            });
		    });
		});
		</script>
	@endsection
@endif