{% extends "/layouts/main.twig" %}
{% set active_menu = '/admin/settings' %}

{% set xdata = 'settings' %}
{% block title p__('title', 'Paypal settings')|title %}

{% set config %}
{
	mode: `{{ option.paypal.mode ?? 'sandbox' }}`,
	sandbox_secret_key: `{{ environment == 'demo' ? 'hidden in demo' : option.paypal.sandbox.secret_key ?? '' }}`,
	sandbox_client_id: `{{ option.paypal.sandbox.client_id ?? '' }}`,
	sandbox_webhook_id: `{{ option.paypal.sandbox.webhook_id ?? '' }}`,
	live_secret_key: `{{ environment == 'demo' ? 'hidden in demo' : option.paypal.live.secret_key ?? '' }}`,
	live_client_id: `{{ option.paypal.live.client_id ?? '' }}`,
	live_webhook_id: `{{ option.paypal.live.webhook_id ?? '' }}`,
}
{% endset %}

{% block template %}
	<div>
		{% include "snippets/back.twig" with {link: 'admin/settings/payments', label: 'Payments'} %}

		<h1 class="mt-4">{{ p__('heading', 'Paypal settings') }}</h1>
	</div>

	<x-form>
		<form @submit.prevent="submit" x-ref="form" autocomplete="off">
			<div class="flex flex-col gap-8" x-data="{{ config }}">
				<input type="hidden" name="paypal[secret_key]" :value="mode=='live' ? live_secret_key : sandbox_secret_key ">

				<input type="hidden" name="paypal[client_id]" :value="mode=='live' ? live_client_id : sandbox_client_id ">

				<input type="hidden" name="paypal[webhook_id]" :value="mode=='live' ? live_webhook_id : sandbox_webhook_id ">

				<div class="flex flex-col gap-2">
					<section class="grid grid-cols-1 gap-6 box" data-density="comfortable">
						<h2>{{ p__('heading', 'Details') }}</h2>

						<div class="flex items-center justify-between p-3 rounded-lg bg-intermediate">
							{{ p__('label', 'Status') }}

							<label class="inline-flex items-center gap-2 cursor-pointer">
								<input type="checkbox" name="paypal[is_enabled]" class="hidden peer" {{ option.paypal.is_enabled is defined and option.paypal.is_enabled ? 'checked' : '' }}>

								<span class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ms-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>

								<span class="text-content-dimmed peer-checked:hidden">
									{{ __('Disabled') }}
								</span>

								<span class="hidden text-success peer-checked:inline">
									{{ __('Enabled') }}
								</span>
							</label>
						</div>

						<div x-data="{currency: `{{ option.paypal.currency ?? '' }}`}">
							<label for="paypal[currency]">
								{{ p__('label', 'Charge Currency') }}
							</label>

							<select id="paypal[currency]" name="paypal[currency]" class="mt-2 input" x-model="currency">

								<option value="">{{ __('Inherit') }}</option>

								{% for code, name in currencies %}
									<option value="{{ code }}" {{ option.paypal.currency is defined and code == option.paypal.currency ? 'selected' : '' }}>
										{{ name }}
									</option>
								{% endfor %}
							</select>

							<ul class="info mt-2">
								<template x-if="!currency">
									<li>
										{{ __('All charges will be made in default currency:') }}
										<a href="/admin/settings/billing" target="_blank" class="inline-flex items-center gap-1 text-content hover:underline">
											{{ option.billing.currency ?? '' }}

											<i class="text-xs ti ti-external-link"></i>
										</a>
									</li>
								</template>

								<template x-if="currency">
									<li>
										{{ __('If the currency rate provider is set up, the amount for all transactions processed via this payment gateway will automatically be converted into the chosen currency.') }}
									</li>
								</template>
							</ul>
						</div>

						<div>
							<label>{{ p__('label', 'Mode') }}</label>

							<div class="flex items-center gap-2 mt-2">
								<label>
									<input type="radio" name="paypal[mode]" value="sandbox" class="radio-button" x-model="mode"/>

									<span>{{ p__('input-value', 'Sandbox') }}</span>
								</label>

								<label>
									<input type="radio" name="paypal[mode]" value="live" class="radio-button" x-model="mode"/>

									<span>{{ p__('input-value', 'Live') }}</span>
								</label>
							</div>
						</div>
					</section>

					<section class="grid grid-cols-1 gap-6 box" data-density="comfortable">
						<div class="flex items-center gap-2">
							<h2>{{ p__('heading', 'Keys') }}</h2>

							<span x-show="mode == 'sandbox'" class="badge">
								{{ __('Sandbox mode') }}
							</span>
						</div>

						<div>
							<label for="paypal.live.client_id">
								{{ p__('label', 'Client ID') }}
							</label>

							<template x-if="mode=='live'">
								<input type="text" id="paypal.live.client_id" name="paypal[live][client_id]" class="mt-2 input" autocomplete="off" x-model="live_client_id"/>
							</template>

							<template x-if="mode=='sandbox'">
								<input type="text" id="paypal.sandbox.client_id" name="paypal[sandbox][client_id]" class="mt-2 input" autocomplete="off" x-model="sandbox_client_id"/>
							</template>

							<ul class="info mt-2">
								<li>
									{{ __("Can't find your Client ID?") }}

									<a href="https://developer.paypal.com/api/rest/#link-getclientidandclientsecret" target="_blank" class="text-content hover:underline">
										{{ p__('button', 'Click here') }}
									</a>
								</li>
							</ul>
						</div>

						<div>
							<label for="paypal.live.secret_key">
								{{ p__('label', 'API secret key') }}
							</label>

							<div class="relative mt-2" x-data="{isVisible: false}">
								<template x-if="mode=='live'">
									<input :type="isVisible ? 'text' : 'password'" id="paypal.live.secret_key" name="paypal[live][secret_key]" class="input pe-11" autocomplete="new-password" x-model="live_secret_key"/>
								</template>

								<template x-if="mode=='sandbox'">
									<input :type="isVisible ? 'text' : 'password'" id="paypal.sandbox.secret_key" name="paypal[sandbox][secret_key]" class="input pe-11" autocomplete="new-password" x-model="sandbox_secret_key"/>
								</template>

								<button type="button" class="absolute end-3 top-1/2 text-2xl -translate-y-1/2 text-content-dimmed" @click="isVisible = !isVisible">
									<i class="block ti" :class="{'ti-eye-closed' : isVisible, 'ti-eye':!isVisible}"></i>
								</button>
							</div>

							<ul class="m-3 mb-0 text-xs list-disc list-inside text-content-dimmed">
								<li>
									{{ __("Can't find your API Secret Key?") }}

									<a href="https://developer.paypal.com/api/rest/#link-getclientidandclientsecret" target="_blank" class="text-content hover:underline">
										{{ p__('button', 'Click here') }}
									</a>
								</li>
							</ul>
						</div>
					</section>

					<section class="grid grid-cols-1 gap-6 box" data-density="comfortable">
						<div class="flex items-center gap-2">
							<h2>{{ p__('heading', 'Webhooks') }}</h2>

							<span x-show="mode == 'sandbox'" class="badge">
								{{ __('Sandbox mode') }}
							</span>
						</div>

						<div>
							<label>{{ p__('label', 'Webhook URL') }}</label>

							<div class="flex items-center mt-2 input">
								<x-copy data-msg="URL copied to clipboard" data-tippy-placement="right" class="badge">{your_domain}/webhooks/paypal</x-copy>
							</div>

							<ul class="info mt-2">
								<li>
									{% set link %}
									<a :href="mode == 'sandbox' ? 'https://developer.paypal.com/dashboard/applications/sandbox' : 'https://developer.paypal.com/dashboard/applications/'" target="_blank" class="text-content hover:underline">
										{{ p__('button', 'PayPal Developer Dashboard') }}
									</a>
									{% endset %}

									{{ __('Create a webhook endpoint in your %s with the Webhook URL.', link)|raw }}
								</li>

								<li>{{ __('Make sure to subscribe to All Events') }}</li>
							</ul>
						</div>

						<div>
							<label for="paypal.live.webhook_id">
								{{ p__('label', 'Webhook ID') }}
							</label>

							<template x-if="mode=='live'">
								<input type="text" id="paypal.live.webhook_id" name="paypal[live][webhook_id]" class="mt-2 input" autocomplete="off" x-model="live_webhook_id"/>
							</template>

							<template x-if="mode=='sandbox'">
								<input type="text" id="paypal.sandbox.webhook_id" name="paypal[sandbox][webhook_id]" class="mt-2 input" autocomplete="off" x-model="sandbox_webhook_id"/>
							</template>
						</div>
					</section>
				</div>

				<div class="flex justify-end gap-4">
					<a href="admin/settings" class="button button-outline">
						{{ p__('button', 'Cancel') }}
					</a>

					<button type="submit" class="button button-accent" :processing="isProcessing">
						{% include "/snippets/spinner.twig" %}

						{{ p__('button', 'Save changes') }}
					</button>
				</div>
			</div>
		</form>
	</x-form>
{% endblock %}