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

{% block title %}
	{{ 'app.shop_owner.pages.modes.title'|trans }}
{% endblock %}

{% block toolbar_actions %}
	<a class="btn btn-sm fw-bold btn-primary new-entity" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_shop">
		{{ 'app.global.buttons.add'|trans }}
	</a>
{% 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 class="ps-4 min-w-50px rounded-start">{{ 'app.global.fields.status'|trans }}</th>
							<th class="ps-4 min-w-100px rounded-start">{{ 'app.global.fields.image.label'|trans }}</th>
							<th class="ps-4 min-w-100px">{{ 'app.shop_owner.pages.modes.title'|trans }}</th>
							<th class="ps-4 min-w-100px">{{ 'app.shop_owner.pages.modes.list.sale_time'|trans }}</th>
							<th class="ps-4 min-w-100px">{{ 'app.shop_owner.pages.modes.list.min_orders'|trans }}</th>
							<th class="ps-4 min-w-100px">{{ 'app.shop_owner.pages.modes.list.order_fees'|trans }}</th>
							<th class="ps-4 min-w-100px">{{ 'app.global.labels.order_interval'|trans }}</th>
							<th class="ps-4 min-w-100px">{{ 'app.shop_owner.pages.modes.list.anonymous'|trans }}</th>
							<th class="ps-4 min-w-100px">{{ 'app.shop_owner.pages.modes.list.visible'|trans }}</th>
							<th class="w-50px text-end rounded-end"></th>
						</tr>
					</thead>
					<tbody class="fs-6 draggable-zone">
						{% for mode in modes %}
							<tr data-id="{{ mode.id }}">
								<td class="ps-4">
									<label class="form-check form-switch form-check-custom form-check-solid">
										<input class="form-check-input toggle-mode"
											type="checkbox"
											{% if mode.enabled %} checked="checked" {% endif %}
											data-mode="{{ mode.id }}"
										>
									</label>
								</td>
                                <td class="symbol symbol-100px symbol-circle text-center">
									{% set image = getImage(shop_modes_images ~ mode.svg) %}
									<img src="{{ asset(image) }}">
                                </td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{{ mode.modeName }}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{% if mode.modeType != "simple" %}
										{{ mode.averageDeliveryTime }}
									{% else %}
										-
									{% endif %}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{% if mode.modeType != "simple" %}
										{{ mode.averageDeliveryOrder|price  }}
									{% else %}
										-
									{% endif %}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{% if mode.modeType != "simple" %}
										{{ mode.orderFees|price }}
									{% else %}
										-
									{% endif %}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{{ mode.orderInterval }}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{{ mode.anonymous|polar }}
								</td>
								<td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
									{{ mode.visible|polar }}
								</td>
								<td class="text-end">
									<div class="d-flex justify-content-end flex-shrink-0">
										{{ link('edit','modal', 'success', {'entity-id' : mode.id, 'modalId': 'foxorders_modal_form_shop' }) }}
										{# {% include 'Includes/delete.html.twig' with {
											'route': path('foxorders_shop_mode_delete', {'id': mode.id}) ,
											'token': csrf_token('delete' ~ mode.id),
											'button': 'list_delete'
										} %} #}
									</div>
								</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="5" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
		<div class="card-footer">
			{% include 'List/pagination.html.twig' with { 'data' : modes } %}
		</div>
	</div>
{% endblock %}

{% block modals %}
	{% include 'Modal/form.html.twig' with {
        'title': 'app.shop_owner.pages.modes.new.title'|trans,
        'id': 'shop',
		'modal_size': 'mw-90',
    } %}
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		var shop = {{ shop.id }};
		var isPickupModeOrhasFutureOrders = {{ isPickupModeOrhasFutureOrders ? 'true' : 'false' }};
		var translations = {
		"mode": '{{ 'app.global.validation.shop_mode.mode'|trans }}',
		"averageDeliveryTime": '{{ 'app.global.validation.shop_mode.average_delivery_time'|trans }}',
		"averageDeliveryOrder": '{{ 'app.global.validation.shop_mode.average_delivery_order'|trans({'%min%': 0, '%max%': 999}) }}',
		"orderFees": '{{ 'app.global.validation.shop_mode.order_fees'|trans({'%min%': 0, '%max%': 999}) }}',
		"orderInterval": '{{ 'app.global.validation.order_interval'|trans }}',
		"city": '{{ 'app.global.validation.zone.city'|trans }}',
		"shippingCost": '{{ 'app.global.validation.zone.shipping_cost'|trans }}',
		"deliveryTime": '{{ 'app.global.validation.zone.delivery_time'|trans }}',
		"deliveryMin": '{{ 'app.global.validation.zone.delivery_min'|trans }}',
		"numeric": '{{ 'app.global.validation.regexp.numeric'|trans }}',
		"modal": {
			'add': '{{ 'app.shop_owner.pages.modes.new.title'|trans }}',
			'edit': '{{ 'app.shop_owner.pages.modes.edit.title'|trans }}'
			},
		"alert": {
			'disable_pickup_future_alert': '{{ 'app.shop_owner.pages.shop_mode.form.disable_pickup_future_alert'|trans }}'
			}
		};
	</script>
	<script src="{{ asset('foxorders/js/validation/rules/shop/mode.js') }}"></script>
	<script src="{{ asset('foxorders/js/shop/mode/mode.js') }}"></script>
{% endblock %}