{% extends 'Shop/base.html.twig' %}

{% block title %}
	{{ 'app.global.user.show.title'|trans({
		'%instance%': ('app.global.user.instance.' ~ instance)|trans
	}) }}
{% endblock %}

{% block toolbar_actions %}
	{% set canModifyShopManager = userTypeShopManager != instance or (not isSwitchedByDeveloper and not isDeveloper) %}
	<div>
		{% if userTypeShopManager == instance and user.device is not null %}
			<a 	href="{{ path('foxorders_shop_device_unlink_manager', {'device': user.device.id}) }}"
				title="{{ 'app.user.buttons.unlink_manager'|trans }}"
				data-bs-toggle="tooltip"
				data-bs-placement="top"
				class="btn btn-icon btn-bg-light btn-active-color-danger align-self-center btn-sm me-2 unlink-manager">
					<i class="fa-solid fa-user-xmark text-danger"></i>
			</a>
		{% endif %}
		{% if canModifyShopManager %}
			{% include 'Includes/delete.html.twig' with {
				'route': path('foxorders_security_user_delete', {'id': user.id}),
				'token': csrf_token('delete' ~ user.id)
			} %}
		{% endif %}
		{% if true == canSubscribeToQoodos %}
			{% if true == isQoodosClient %}
				<a href="{{ path('foxorders_qoodos_customer_unsubscription',{'id' : user.id }) }}" class="btn btn-sm fw-bold btn-danger" onclick="return confirm('{{ 'app.global.flash_messages.qoodos.unsubscription.confirm'|trans }}')">
					{{ 'app.global.buttons.unsubscription'|trans }}
				</a>
			{% else %}
				<a href="{{ path('foxorders_qoodos_customer_subscription',{'id' : user.id }) }}" class="btn btn-sm fw-bold btn-qoodos">
					{{ 'app.global.buttons.subscription'|trans }}
				</a>
			{% endif %}
		{% endif %}
		{% if canModifyShopManager %}
			<a class="btn btn-sm fw-bold btn-primary update-user" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_user" data-id="{{ user.id }}">
				{{ 'app.global.buttons.update'|trans }}
			</a>
			<a class="btn btn-sm fw-bold btn-primary update-user-password" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_user" data-id="{{ user.id }}">
				{{ 'app.global.buttons.update_password'|trans }}
			</a>
		{% endif %}
		{% if 'customer' == instance and false == user.verified %}
			<a href="{{ path('foxorders_security_account_verification_request', {'id': user.id, 'franchiseId': franchise.id ?? null}) }}" class="btn btn-sm fw-bold btn-warning">
				<i class="fas fa-check"></i>
				{{ 'app.global.user.buttons.verify_email'|trans }}
			</a>
		{% endif %}
	</div>
{% endblock %}

{% block body %}
	<div id="kt_content_container" class="container-xxl">
		{% include 'Menu/User/menu.html.twig'  %}
		<div class="app-content flex-column-fluid">
			{% if 'customer' == instance %}
				<div class="d-flex flex-column gap-7 gap-lg-10">
					<div class="d-flex flex-wrap flex-stack gap-5 gap-lg-10">
						<ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-lg-n2 me-auto" role="tablist">
							<li class="nav-item" role="presentation">
								<a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#user_history" aria-selected="true" role="tab">
									{{ 'app.global.tabs.user.history'|trans }}
								</a>
							</li>
							<li class="nav-item" role="presentation">
								<a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#user_summary" aria-selected="false" tabindex="-1" role="tab">
									{{ 'app.global.tabs.user.details'|trans }}
								</a>
							</li>
							<li class="nav-item" role="presentation">
								<a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#user_delivery_addresses" aria-selected="false" tabindex="-1" role="tab">
									{{ 'app.global.tabs.user.delivery_addresses'|trans }}
								</a>
							</li>
							{% if 'customer' == instance and true == isQoodosClient %}
								<li class="nav-item" role="presentation">
									<a class="nav-link text-active-primary text-qoodos pb-4" data-bs-toggle="tab" href="#user_qoodos" aria-selected="false" tabindex="-1" role="tab">
										{{ 'app.global.tabs.user.qoodos'|trans }}
									</a>
								</li>
							{% endif %}
						</ul>
					</div>
				</div>
			{% endif %}
			<div class="tab-content mt-10">
				{% if 'customer' == instance %}
					<div class="tab-pane fade show active" id="user_history" role="tab-panel">
						<div class="d-flex flex-column gap-7 gap-lg-10">
							<div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
								{% include 'Security/User/Components/history.html.twig' %}
							</div>
						</div>
					</div>
				{% endif %}
				<div class="tab-pane fade {% if 'customer' != instance %}show active{% endif %}" id="user_summary" role="tab-panel">
					<div class="d-flex flex-column gap-7 gap-lg-10">
						{% include 'Security/User/Components/details.html.twig' %}
					</div>
				</div>
				{% if 'customer' == instance %}
					<div class="tab-pane fade {% if 'customer' != instance %}show active{% endif %}" id="user_delivery_addresses" role="tab-panel">
						<div class="d-flex flex-column gap-7 gap-lg-10">
							<div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
								{% include 'Security/User/Components/delivery_addresses.html.twig' %}
							</div>
						</div>
					</div>
				{% endif %}
				{% if 'customer' == instance and true == isQoodosClient %}
					<div class="tab-pane fade {% if 'customer' != instance %} show active {% endif %}" id="user_qoodos" role="tab-panel">
						<div class="d-flex flex-column gap-7 gap-lg-10">
							{% include 'Security/User/Components/qoodos.html.twig' %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}

{% block modals %}
	{% include 'Modal/form.html.twig' with {
        'title': 'app.global.buttons.edit'|trans,
        'id': 'user',
    } %}
{% endblock %}

{% block javascripts %}
	{% set thirdPartiesRoles = [userTypeManager, userTypeShopManager] %}

    <script>
        var instance = "{{ instance }}";
		var thirdPartiesRoles = {{ thirdPartiesRoles|json_encode|raw }};
		var userTypeCustomer = {{ userTypeCustomer|json_encode|raw }};
		var countOnGoingOrders = {{ countOnGoingOrders|json_encode|raw }};

		const deleteMessages = {
			thirdParty: '{{ 'app.user.validation.modal.delete.third_parties.message'|trans|nl2br|e("js") }}',
			customer: '{{ 'app.user.validation.modal.delete.customer.message'|trans|nl2br|e("js") }}',
			default: '{{ 'app.global.validation.modal.delete.message'|trans }}'
		};

		if (thirdPartiesRoles.includes(instance)) {
			modalTranslations['delete']['message'] = deleteMessages.thirdParty;
		} else if(instance === userTypeCustomer && countOnGoingOrders > 0) {
			modalTranslations['delete']['message'] = deleteMessages.customer;
		} else {
			modalTranslations['delete']['message'] = deleteMessages.default;
		}
    </script>
	{{ parent() }}
	<script type="text/javascript">
		var user = {{ user.id }};
		var translations = {
			'firstname': '{{ 'app.global.validation.user.firstname'|trans }}',
			'lastname': '{{ 'app.global.validation.user.lastname'|trans }}',
			'gender': '{{ 'app.global.validation.user.gender'|trans }}',
			'email': {
				'empty': '{{ 'app.global.validation.user.email.empty'|trans }}',
			},
			'phone': {
				'empty': '{{ 'app.global.validation.user.phone.empty'|trans }}',
				'invalid': '{{ 'app.global.validation.user.phone.invalid'|trans }}',
				'length': '{{ 'app.global.validation.user.phone.length'|trans }}'
			},
			'password': {
				'first': {
					'empty': '{{ 'app.global.validation.user.password.first.empty'|trans }}',
					'format': '{{ 'app.global.validation.user.password.first.format'|trans }}',
				},
				'second': {
					'notidentical': '{{ 'app.global.validation.user.password.second.notidentical'|trans }}',
				},
			},
			"modal": {
				'add': '{{ 'app.global.buttons.edit_user'|trans }}'
			},
			'unlink_manager' : {
                'message': '{{ 'app.user.validation.modal.unlink_manager.message'|trans }}',
                'yes': '{{ 'app.global.validation.modal.unlink.yes'|trans }}',
                'no': '{{ 'app.global.validation.modal.unlink.no'|trans }}',
                'cancel': {
                    'message': '{{ 'app.global.validation.modal.unlink.cancel.message'|trans }}',
                    'ok': '{{ 'app.global.validation.modal.unlink.cancel.ok'|trans }}'
                }
            },
		}
	</script>
	<script src="{{ asset('foxorders/js/user/user.js') }}"></script>
{% endblock %}