{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<button type="submit" form="form_payment" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
				<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
			</div>
			<h1>{{ heading_title }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
				<li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		{% if error_warning %}
		<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
			<button type="button" class="close" data-dismiss="alert">&times;</button>
		</div>
		{% endif %}
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
			</div>
			<div class="panel-body">
				<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form_payment" class="form-horizontal">
					<ul class="nav nav-tabs">
						<li class="nav-tab active"><a href="#tab_general" data-toggle="tab">{{ text_general }}</a></li>
						<li class="nav-tab"><a href="#tab_order_status" data-toggle="tab">{{ text_order_status }}</a></li>
						<li class="nav-tab"><a href="#tab_checkout_express" data-toggle="tab">{{ text_checkout_express }}</a></li>
						<li class="nav-tab hidden"><a href="#tab_checkout_card" data-toggle="tab">{{ text_checkout_card }}</a></li>
					</ul>
		  
					<div class="tab-content">
						<div class="tab-pane active" id="tab_general">
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_environment">{{ entry_environment }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_environment" id="input_environment" class="form-control">
										{% if (environment == 'production') %}
										<option value="production" selected="selected">{{ text_production }}</option>
										<option value="sandbox">{{ text_sandbox }}</option>
										{% else %}
										<option value="production">{{ text_production }}</option>
										<option value="sandbox" selected="selected">{{ text_sandbox }}</option>
										{% endif %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_connect">{{ entry_connect }}</label>
								<div class="col-sm-10">
									<div id="section_connect" {% if client_id and secret and merchant_id %}class="hidden"{% endif %}>
										<style type="text/css">
											a[data-paypal-button="PPLtBlue"]::before {
												content: "";
												background: url(https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png) 11px no-repeat #fff;
												background-size: 80px;
												display: table-cell;
												width: 100px;
												height: 42px;
												float: left;
												margin-right: 16px;
												border-bottom-left-radius: 5px;
												border-top-left-radius: 5px;
												margin-top: -12px;
											}
										</style>
										<a id="button_connect_ppcp" href="{{ configure_url[environment]['ppcp'] }}" target="_blank" data-paypal-button="PPLtBlue" data-paypal-onboard-complete="onBoardedCallback">{{ button_connect }}</a><br />
										<p>{{ help_checkout_express }}</p>
									</div>
									{% if client_id and secret and merchant_id %}
									<div id="section_disconnect">
										<p class="alert alert-info">{{ text_connect }}</p>
										<a id="button_disconnect" class="btn btn-danger">{{ button_disconnect }}</a>
									</div>
									{% endif %}
									<input type="hidden" name="payment_paypal_client_id" value="{{ client_id }}" id="input_client_id" />
									<input type="hidden" name="payment_paypal_secret" value="{{ secret }}" id="input_secret" />
									<input type="hidden" name="payment_paypal_merchant_id" value="{{ merchant_id }}" id="input_merchant_id" />
									<input type="hidden" name="payment_paypal_webhook_id" value="{{ webhook_id }}" id="input_webhook_id" />
								</div>
							</div>
							{% if client_id and secret and merchant_id %}
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_express_status"><span data-toggle="tooltip" title="{{ help_checkout_express_status }}">{{ entry_checkout_express_status }}</span></label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][express][status]" id="input_checkout_express_status" class="form-control">
										{% if setting['checkout']['express']['status'] %}
										<option value="1" selected="selected">{{ text_enabled }}</option>
										<option value="0">{{ text_disabled }}</option>
										{% else %}
										<option value="1">{{ text_enabled }}</option>
										<option value="0" selected="selected">{{ text_disabled }}</option>
										{% endif %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_card_status">{{ entry_checkout_card_status }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][card][status]" id="input_checkout_card_status" class="form-control hidden">
										{% if setting['checkout']['card']['status'] %}
										<option value="1" selected="selected">{{ text_enabled }}</option>
										<option value="0">{{ text_disabled }}</option>
										{% else %}
										<option value="1">{{ text_enabled }}</option>
										<option value="0" selected="selected">{{ text_disabled }}</option>
										{% endif %}
									</select>
									<div class="alert alert-warning alert-dismissible hidden"><i class="fa fa-exclamation-circle"></i> {{ help_checkout_card_status }}
										<button type="button" class="close" data-dismiss="alert">&times;</button>
									</div>
								</div>
							</div>
							{% endif %}
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_debug">{{ entry_debug }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_debug" id="input_debug" class="form-control">
										{% if debug %}
										<option value="1" selected="selected">{{ text_enabled }}</option>
										<option value="0">{{ text_disabled }}</option>
										{% else %}
										<option value="1">{{ text_enabled }}</option>
										<option value="0" selected="selected">{{ text_disabled }}</option>
										{% endif %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_transaction_method">{{ entry_transaction_method }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_transaction_method" id="input_transaction_method" class="form-control">
										{% if (transaction_method == 'authorize') %}
										<option value="authorize" selected="selected">{{ text_authorization }}</option>
										<option value="capture">{{ text_sale }}</option>
										{% else %}
										<option value="authorize">{{ text_authorization }}</option>
										<option value="capture" selected="selected">{{ text_sale }}</option>
										{% endif %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_total"><span data-toggle="tooltip" title="{{ help_total }}">{{ entry_total }}</span></label>
								<div class="col-sm-10">
									<input type="text" name="payment_paypal_total" value="{{ total }}" placeholder="{{ entry_total }}" id="input_total" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_geo_zone">{{ entry_geo_zone }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_geo_zone_id" id="input_geo_zone" class="form-control">
										<option value="0">{{ text_all_zones }}</option>
										{% for geo_zone in geo_zones %}
										{% if geo_zone['geo_zone_id'] == geo_zone_id %}
										<option value="{{ geo_zone['geo_zone_id'] }}" selected="selected">{{ geo_zone['name'] }}</option>
										{% else %}
										<option value="{{ geo_zone['geo_zone_id'] }}">{{ geo_zone['name'] }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_status">{{ entry_status }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_status" id="input_status" class="form-control">
										{% if status %}
										<option value="1" selected="selected">{{ text_enabled }}</option>
										<option value="0">{{ text_disabled }}</option>
										{% else %}
										<option value="1">{{ text_enabled }}</option>
										<option value="0" selected="selected">{{ text_disabled }}</option>
										{% endif %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_sort_order">{{ entry_sort_order }}</label>
								<div class="col-sm-10">
									<input type="text" name="payment_paypal_sort_order" value="{{ sort_order }}" placeholder="{{ entry_sort_order }}" id="input_sort_order" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_currency_code"><span data-toggle="tooltip" title="{{ help_currency_code }}">{{ entry_currency_code }}</span></label>
								<div class="col-sm-10">
									<select name="payment_paypal_currency_code" id="input_currency_code" class="form-control">
										{% for currency in setting['currency'] %}
										{% if currency['code'] == currency_code %}
										<option value="{{ currency['code'] }}" selected="selected">{{ attribute(_context, currency['name']) }}</option>
										{% else %}
										<option value="{{ currency['code'] }}">{{ attribute(_context, currency['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_currency_value"><span data-toggle="tooltip" title="{{ help_currency_value }}">{{ entry_currency_value }}</span></label>
								<div class="col-sm-10">
									<input type="text" name="payment_paypal_currency_value" value="{{ currency_value }}" placeholder="{{ entry_currency_value }}" id="input_currency_value" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_smart_button">{{ entry_smart_button }}</label>
								<div class="col-sm-2">
									<a href="{{ configure_smart_button_url }}" target="_blank" class="btn btn-primary">{{ button_smart_button }}</a>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab_order_status">
							{% for paypal_order_status in setting['order_status'] %}
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_order_status_{{ paypal_order_status['code'] }}">{{ attribute(_context, paypal_order_status['name']) }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[order_status][{{ paypal_order_status['code'] }}][id]" id="input_{{ paypal_order_status['code'] }}_status" class="form-control">
										{% for order_status in order_statuses %}
										{% if order_status['order_status_id'] == paypal_order_status['id'] %}
										<option value="{{ order_status['order_status_id'] }}" selected="selected">{{ order_status['name'] }}</option>
										{% else %}
										<option value="{{ order_status['order_status_id'] }}">{{ order_status['name'] }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							{% endfor %}
						</div>
						<div class="tab-pane" id="tab_checkout_express">
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_express_button_align">{{ entry_button_align }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][express][button_align]" id="input_checkout_express_button_align" class="form-control">
										{% for button_align in setting['button_align'] %}
										{% if (button_align['code'] == setting['checkout']['express']['button_align']) %}
										<option value="{{ button_align['code'] }}" selected="selected">{{ attribute(_context, button_align['name']) }}</option>
										{% else %}
										<option value="{{ button_align['code'] }}">{{ attribute(_context, button_align['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_express_button_size">{{ entry_button_size }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][express][button_size]" id="input_checkout_express_button_size" class="form-control">
										{% for button_size in setting['button_size'] %}
										{% if (button_size['code'] == setting['checkout']['express']['button_size']) %}
										<option value="{{ button_size['code'] }}" selected="selected">{{ attribute(_context, button_size['name']) }}</option>
										{% else %}
										<option value="{{ button_size['code'] }}">{{ attribute(_context, button_size['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_express_button_color">{{ entry_button_color }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][express][button_color]" id="input_checkout_express_button_color" class="form-control">
										{% for button_color in setting['button_color'] %}
										{% if (button_color['code'] == setting['checkout']['express']['button_color']) %}
										<option value="{{ button_color['code'] }}" selected="selected">{{ attribute(_context, button_color['name']) }}</option>
										{% else %}
										<option value="{{ button_color['code'] }}">{{ attribute(_context, button_color['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_express_button_shape">{{ entry_button_shape }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][express][button_shape]" id="input_checkout_express_button_shape" class="form-control">
										{% for button_shape in setting['button_shape'] %}
										{% if (button_shape['code'] == setting['checkout']['express']['button_shape']) %}
										<option value="{{ button_shape['code'] }}" selected="selected">{{ attribute(_context, button_shape['name']) }}</option>
										{% else %}
										<option value="{{ button_shape['code'] }}">{{ attribute(_context, button_shape['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_express_button_label">{{ entry_button_label }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][express][button_label]" id="input_checkout_express_button_label" class="form-control">
										{% for button_label in setting['button_label'] %}
										{% if (button_label['code'] == setting['checkout']['express']['button_label']) %}
										<option value="{{ button_label['code'] }}" selected="selected">{{ attribute(_context, button_label['name']) }}</option>
										{% else %}
										<option value="{{ button_label['code'] }}">{{ attribute(_context, button_label['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
						</div>
						<div class="tab-pane hidden" id="tab_checkout_card">
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_card_form_align">{{ entry_form_align }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][card][form_align]" id="input_checkout_card_form_align" class="form-control">
										{% for form_align in setting['form_align'] %}
										{% if (form_align['code'] == setting['checkout']['card']['form_align']) %}
										<option value="{{ form_align['code'] }}" selected="selected">{{ attribute(_context, form_align['name']) }}</option>
										{% else %}
										<option value="{{ form_align['code'] }}">{{ attribute(_context, form_align['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_card_form_size">{{ entry_form_size }}</label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][card][form_size]" id="input_checkout_card_form_size" class="form-control">
										{% for form_size in setting['form_size'] %}
										{% if (form_size['code'] == setting['checkout']['card']['form_size']) %}
										<option value="{{ form_size['code'] }}" selected="selected">{{ attribute(_context, form_size['name']) }}</option>
										{% else %}
										<option value="{{ form_size['code'] }}">{{ attribute(_context, form_size['name']) }}</option>
										{% endif %}
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_card_secure_status"><span data-toggle="tooltip" title="{{ help_secure_status }}">{{ entry_secure_status }}</span></label>
								<div class="col-sm-10">
									<select name="payment_paypal_setting[checkout][card][secure_status]" id="input_checkout_card_secure_status" class="form-control">
										{% if setting['checkout']['card']['secure_status'] %}
										<option value="1" selected="selected">{{ text_enabled }}</option>
										<option value="0">{{ text_disabled }}</option>
										{% else %}
										<option value="1">{{ text_enabled }}</option>
										<option value="0" selected="selected">{{ text_disabled }}</option>
										{% endif %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="input_checkout_card_secure_scenario"><span data-toggle="tooltip" title="{{ help_secure_scenario }}">{{ entry_secure_scenario }}</span></label>
								<div class="col-sm-10">
									{% for secure_scenario in setting['secure_scenario'] %}
									<div class="row">
										<div class="col-sm-8">
											<label class="control-label" for="input_checkout_card_secure_scenario">{{ attribute(_context, secure_scenario['name']) }}</label>
										</div>
										<div class="col-sm-4">										
											<select name="payment_paypal_setting[checkout][card][secure_scenario][{{ secure_scenario['code'] }}]" class="form-control">
												<option value="1" {% if setting['checkout']['card']['secure_scenario'][secure_scenario['code']] %}selected="selected"{% endif %}>{{ text_accept }}{% if secure_scenario['recommended'] %} {{ text_recommended }}{% endif %}</option>
												<option value="0" {% if not setting['checkout']['card']['secure_scenario'][secure_scenario['code']] %}selected="selected"{% endif %}>{{ text_decline }}{% if not secure_scenario['recommended'] %} {{ text_recommended }}{% endif %}</option>
											</select>
										</div>
									</div>
									<br />
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
{% if client_id and secret and merchant_id %}
<script type="text/javascript" src = "https://www.paypal.com/sdk/js?components=hosted-fields&client-id={{ client_id }}&merchant-id={{ merchant_id }}" data-partner-attribution-id="{{ setting['partner'][environment]['partner_id'] }}" data-client-token="{{ client_token }}"></script>
<script type="text/javascript">

try {
	if (paypal.HostedFields.isEligible() === true) {
		$('[href="#tab_checkout_card"]').parents('.nav-tab').removeClass('hidden');
		$('#tab_checkout_card').removeClass('hidden');
		$('#input_checkout_card_status').removeClass('hidden');
	} else {
		$('#input_checkout_card_status').parents('.form-group').find('.alert').removeClass('hidden');
	}
} catch (error) {
	console.error('PayPal Card failed during startup', error);
}

</script>
{% endif %}
<script type="text/javascript">

function onBoardedCallback(authorization_code, shared_id) {
	var environment = $('#input_environment').val();
	
	$.ajax({
		url: '{{ callback_url }}',
		type: 'post',
		data: 'environment=' + environment + '&authorization_code=' + authorization_code + '&shared_id=' + shared_id + '&seller_nonce={{ seller_nonce }}',
		dataType: 'json',
		success: function(json) {
			
		},
		error: function(xhr, ajaxOptions, thrownError) {
			console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
}

</script>
<script type="text/javascript">

$('#button_disconnect').on('click', function() {
	if (confirm('{{ text_confirm }}')) {
		$('#input_client_id').val('');
		$('#input_secret').val('');
		$('#input_merchant_id').val('');
		$('#section_connect').removeClass('hidden');
		$('#section_disconnect').addClass('hidden');
	}
});

$('#input_environment').on('change', function() {
	var environment = $(this).val();
	
	if (environment == 'production') {
		$('#button_connect_ppcp').attr('href', '{{ configure_url['production']['ppcp'] }}');
		$('#button_connect_express_checkout').attr('href', '{{ configure_url['production']['express_checkout'] }}');
	} else {
		$('#button_connect_ppcp').attr('href', '{{ configure_url['sandbox']['ppcp'] }}');
		$('#button_connect_express_checkout').attr('href', '{{ configure_url['sandbox']['express_checkout'] }}');
	}
	
	$('#input_client_id').val('');
	$('#input_secret').val('');
	$('#input_merchant_id').val('');
	$('#section_connect').removeClass('hidden');
	$('#section_disconnect').addClass('hidden');
});

</script>
<script id="paypal-js" src="https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js"></script>   
{{ footer }}