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

{% block title %}
	{{ 'app.admin.pages.sms.title'|trans }}
{% endblock %}

{% block search %}
	{% include 'Search/list.html.twig' %}
{% endblock %}

{% block toolbar_actions %}
	{% if is_granted('ROLE_ADMIN') and ((app.request.attributes.get('action') ?? '') == constant('APP\\Entity\\Message\\MessageInterface::ACTION_OAUTH_VERIFICATION')) %}
		<a class="btn btn-sm fw-bold btn-primary sms-mode-setting" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_admin">
			<i class="fa-solid fa-key me-2"></i>
			{{ 'app.admin.pages.sms_mode_settings.button'|trans }}
		</a>
	{% endif %}
{% endblock %}

{% block component_body %}
	<div class="card card-flush">
		<div class="card-body pt-0">
			<div class="table-responsive">
				<table class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold">
					<thead class="fs-7 text-gray-400 text-uppercase">
						<tr>
							<th>{{ 'app.admin.pages.sms.list.customer'|trans }}</th>
							<th class="text-center">{{ 'app.global.fields.status'|trans }}</th>
							<th class="text-center">{{ 'app.admin.pages.sms.list.segments'|trans }}</th>
							<th class="text-center">{{ 'app.admin.pages.sms.list.error'|trans }}</th>
							<th class="text-center">{{ 'app.global.fields.send_at'|trans }}</th>
							<th class="text-center">{{ 'app.global.fields.created_at'|trans }}</th>
							{% if not isShopManager %}
								<th class="text-center">{{ 'app.global.fields.shop'|trans }}</th>
							{% endif %}
							{% if not isShopManager and not isManager %}
								<th class="text-center">{{ 'app.global.fields.franchise'|trans }}</th>
							{% endif %}
							<th class="text-center">{{ 'app.global.fields.action'|trans }}</th>
							<th class="text-center rounded-end">{{ 'app.global.fields.status'|trans }}</th>
						</tr>
					</thead>
					<tbody class="fs-6">
						{% for sms in smss %}
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<div class="me-5 position-relative">
											<div class="symbol symbol-35px symbol-circle">
												{% set hasName = sms.fullName is not empty %}
												<span class="symbol-label bg-light-primary text-primary fw-semibold">{{ hasName ? sms.fullName|slice(0,2)|upper : 'AN' }}</span>
											</div>
											<div class="bg-{{ hasName ? 'success' : 'info' }} position-absolute border border-4 border-body h-15px w-15px rounded-circle translate-middle start-100 top-100 ms-n1 mt-n1"></div>
										</div>
										<div class="d-flex flex-column justify-content-center">
											<a href="" class="mb-1 text-gray-800 text-hover-primary">{{ sms.fullName|capitalize }}</a>
											<div class="fw-semibold fs-6 text-gray-400">{{ sms.receiver }}</div>
										</div>
									</div>
								</td>
								<td class="text-center">
									<span class="d-block badge badge-{{ badges[sms.status] ?? badges['failed'] }} m-1">
										{% set key = 'app.global.messages.state.' ~ sms.status %}
										{{ key|trans == key ? sms.status : key|trans }}
									</span>
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									{{ sms.segments ?? '-' }}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									{% if sms.responseCode %}{{ sms.responseCode|badge('danger') }} - {% endif %}
									{{ sms.response }}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									{{ sms.sendAt ? sms.sendAt|date('d/m/Y H:i') : '-' }}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									{{ sms.createdAt|date('d/m/Y H:i') }}
								</td>
							{% if not isShopManager %}
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									{{ sms.shopName ?? '-' }}
								</td>
							{% endif %}
							{% if not isShopManager and not isManager %}
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									{{ sms.franchiseName ?? '-' }}
								</td>
							{% endif %}
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									{% set label = (sms.action is not null) ? ('app.sms.action.' ~ sms.action)|trans : '-' %}
									<span class="d-block badge badge-{{ actionBadges[sms.action] ?? 'secondary' }} m-1">
										{{ label }}
									</span>
									{# {% if sms.retries > 0 %}
										<div class="d-flex justify-content-end flex-shrink-0" style="display:none !important" data-id={{ sms.id }}>
											{{ btn('resend', 'success ') }}
										</div>
									{% endif %} #}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2 text-center">
									<button class="btn btn-icon btn-light btn-active-light-primary min-w-20px btn-sm check-status"
										data-id="{{ sms.id }}" data-kt-menu-trigger="click"
										data-check-enabled="false"
										data-kt-menu-placement="bottom-end"
										data-bs-toggle="tooltip"
										data-bs-placement="top"
										title="{{ 'app.global.buttons.check_status'|trans }}"
									>
										<span class="indicator-label"><i class="fa-solid fa-plug-circle-check"></i></span>
										<span class="indicator-progress">
											<span class="spinner-border spinner-border-sm align-middle"></span>
										</span>
									</button>
								</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="5" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
			{% include 'List/pagination.html.twig' with { 'data' : smss } %}
		</div>
	</div>
{% endblock %}

{% block modals %}
	{% include 'Modal/form.html.twig' with {
        'title': 'app.admin.pages.sms_mode_settings.title'|trans,
        'id': 'admin',
    } %}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		var period = "{{ data['period'] ?? '' }}";
		var inputId = "#search_form_period";
		var daysOfWeek = {{ daysOfWeek | raw }};
		var monthNames = {{ monthNames | raw }};
		var maxDate = "{{ lastSmsDate ? lastSmsDate|date('d/m/Y') : '' }}";
		var translations = {
			"apply": '{{ 'app.global.date.input.apply'|trans }}',
			"cancel": '{{ 'app.global.date.input.cancel'|trans }}',
			"from": '{{ 'app.global.date.input.from'|trans }}',
			"to": '{{ 'app.global.date.input.to'|trans }}',
			"custom": '{{ 'app.global.date.input.custom'|trans }}',
			"today": '{{ 'app.global.date.today'|trans }}',
			"yesterday": '{{ 'app.global.date.yesterday'|trans }}',
			"last7Days": '{{ 'app.global.date.last_7_days'|trans }}',
			"last30Days": '{{ 'app.global.date.last_30_days'|trans }}',
			"thisMonth": '{{ 'app.global.date.this_month'|trans }}',
			"lastMonth": '{{ 'app.global.date.last_month'|trans }}',
			"customRange": '{{ 'app.global.date.custom_range'|trans }}',
			"ok": '{{ 'app.global.buttons.ok'|trans }}',
			"smsModeSettingTitle": '{{ 'app.admin.pages.sms_mode_settings.title'|trans }}',
        }
	</script>
	<script src="{{ asset('foxorders/js/global/date/range-picker.js') }}"></script>
    <script src="{{ asset('foxorders/js/admin/sms/sms.js') }}"></script>
    <script src="{{ asset('foxorders/js/message/sms/sms.js') }}"></script>
{% endblock %}