{{ header }}
	<header class="background-white bottom-margin-large">
		<div class="container-fluid">
			<div class="row no-space-xs">
				<div class="col-xs-12">
					<div class="content-box vertical-padding-large flex between-xs middle-xs">
						<div>
							<span class="text-x-large text-dark">{{ heading_title }}</span>
							<div class="adm-breadcrumb">
								{% for breadcrumb in breadcrumbs %}
									<i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
									<a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">
										{{ breadcrumb.text }}
									</a>
								{% endfor %}
							</div>
						</div>

						<div class="flex flex-row middle-xs" style="margin-bottom: 1rem;">
							<a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
								<span>{{ btn_cancel_sale_coupon }}</span>
							</a>
							<button type="button" class="btn-default btn-medium btn-primary js-submit-main-form">
								<span>{{ btn_save_sale_coupon }}</span>
							</button>
						</div>

						{% if error_warning %}
							<div class="text-small text-error background-error padding-medium rounded-x-small full-width">{{ error_warning }}</div>
						{% endif %}
						{% if success %}
							<div class="text-small text-success background-success padding-medium rounded-x-small full-width">{{ success }}</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</header>
	<div class="container-fluid">
		<div id="root">
			<base-manual class="top-margin-medium" title="Sobre o Módulo:">
				<div>
					<h2 class="text-small bottom-margin-small">Cupons</h2>
					<p class="text-small">
						Este módulo tem a funcionalidade de adicionar o campo "Obter Desconto" na loja. A utilização do código promocional fornecido pelo lojista é realizado na finalização do pedido.<br><br>Também é permitido realizar a configuração de "descontos" para compras feitas pelos clientes, utilizando códigos promocionais. Ao inserir o código promocional fornecido pelo administrador da loja, o cliente receberá automaticamente o desconto correspondente em sua compra.
					</p>
				</div>
			</base-manual>
		</div>

		<span class="visible-block text-x-large text-dark top-margin-large bottom-margin-medium">{{ tab_title_general }}</span>

		<form action="{{ action }}" method="post" class="js-main-form">
			<div class="row">
				<div class="col-xs-12 ">
					<div class="background-white shadow-small padding-small">
						<div class="flex flex-row middle-xs">
							<div class="col-xs-4">
								<label class="field field-medium">
									<span class="field-label">{{ entry_status_general }}</span>
									<select class="field-entry" name="coupon_status">
										{% for key, status in Type_Status.getEnumList() %}
											<option value="{{ key }}" {{ ftr_geral.isSelected(key, coupon_status ) }}>{{ status }}</option>
										{% endfor %}
									</select>
								</label>
							</div>

							<div class="col-xs-4">
								<label class="field field-medium">
									<div class="flex">
										<span class="field-label">{{ entry_title_general }}</span>
										<i class="fas fa-info-circle info-icon icon-info" data-index="1"></i>
									</div>
									<div class="content-box show-modal-coupon absolute-position info-text hidden" data-index="1" style="margin: -1.5rem 0 0 5rem; background: white; padding: 12px 14px; border-radius: 8px; z-index: 3; border: 1px solid #ccc; max-width: 450px; text-align: left; color: #0D0D0D;">
										<span class="text-medium">
											Caso esse campo não seja preenchido, será exibido o título padrão na loja, 'Obter Desconto'.
										</span> 
									</div>
									<input class="field-entry" type="text" name="coupon_title" value="{{ coupon_title }}"/>
								</label>
							</div>

							<div class="col-xs-4">
								<label class="field field-medium">
									<span class="field-label">{{ entry_order_general }}</span>
									<input class="field-entry mask-number2" type="text" name="coupon_sort_order" value="{{ coupon_sort_order }}" size="1"/>
								</label>
							</div>				
						</div>
					</div>
				</div>
			</div>
		</form>

		<div class="row no-space-xs">
			<div class="col-xs-6">
				<div class="bottom-margin-medium" style="margin-top: 45px;">
					{% if filter_count >= 1 %}
						<a class="text-small text-primary text-decoration-none vertical-padding-small" href="index.php?route=sale/coupon&token={{ token }}">
							<span>Limpar Filtros ({{ filter_count }})</span>
						</a>
					{% endif %}

					<span class="visible-block text-x-large text-dark top-margin-large bottom-margin-medium">{{ tab_title_list }}</span>

					<div class="flex flex-row middle-xs" style="gap: 5px;">
						<button type="button" class="btn-default btn-error btn-medium right-margin-small js-delete-coupon" style="width: 120px; border: 1px solid #cecece;">				
							<span>{{ btn_delete_sale_coupon }}</span>
						</button>
						<a href="{{ insert }}" class="btn-success btn-default btn-medium right-margin-small" style="width: 120px; border: 1px solid #cecece;">
							<span>{{ btn_add_sale_coupon }}</span>
						</a>
						<button type="button" class="btn-default btn-medium-square btn-primary js-suspended-side-control" id="suspended-side-filter" style="width: 120px;">
							<span>{{ btn_filter_sale_coupon }}</span>
						</button>
					</div>
				</div>

				<div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-filter">
					<div class="horizontal-padding-large top-padding-large bottom-padding-small flex between-xs middle-xs js-suspended-side-close">
						<span class="text-x-large text-dark">Filtros</span>
						<i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
					</div>
					<div class="adm-suspended-side-content horizontal-padding-large">
						<label class="field field-medium top-margin-medium">
							<span class="field-label">{{ column_name }}</span>
							<input class="field-entry ui-autocomplete-input" type="text" name="filter_name" id="filter_name" value="{{ filter_name }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
						</label>
						<label class="field field-medium top-margin-large">
							<span class="field-label">{{ column_code }}</span>
							<input class="field-entry ui-autocomplete-input" type="text" name="filter_code" id="filter_code" value="{{ filter_code }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
						</label>
						<span class="visible-block top-margin-large text-small text-dark text-bold">{{ column_status }}</span>
						<label class="radio radio-medium">
							<input class="radio-entry" type="radio" name="filter_status" value="*" checked>
							<span class="radio-text">Ambos</span>
						</label>
						<label class="radio radio-medium">
							<input class="radio-entry" type="radio" name="filter_status" value="1" {{ filter_status ? 'checked' : '' }}>
							<span class="radio-text">{{ text_enabled }}</span>
						</label>
						<label class="radio radio-medium">
							<input class="radio-entry" type="radio" name="filter_status" value="0" {{filter_status is not null and not filter_status ? 'checked' : '' }}>
							<span class="radio-text">{{ text_disabled }}</span>
						</label>
						<label class="checkbox checkbox-medium top-margin-large">
							<input class="checkbox-entry" type="checkbox" name="filter_valido" value="0" {{ filter_valido ? 'checked' : '' }}>
							<span class="checkbox-text">{{ column_validate }}</span>
						</label>
					</div>
					<div class="padding-large">
						<a id="js-btn-filter" class="btn-default btn-medium btn-full btn-primary">
							<span>{{ button_filter }}</span>
						</a>
					</div>
				</div>
			</div>
		</div>

		<form action="{{ delete }}" method="post" class="js-main-form">
			<div class="row">
				<div class="col-xs-12">
					{% if coupons %}
						<div class="content-box flex middle-xs background-white top-padding-medium shadow-small hover:shadow-large bottom-margin-small" style="padding-left: 50px; padding-right: 26px;">
							<div class="row nowrap-md no-space-xs middle-xs" style="width: 100%;">					
								<div class="col-xs-12 col-md-3">
									<div class="content-box bottom-padding-medium">
										<span class="text-small text-dark text-bold">{{ column_sale_coupon_name }}</span>
									</div>
								</div>

								<div class="col-xs-12 col-md-3">
									<div class="content-box bottom-padding-medium">
										<span class="text-small text-dark text-bold">{{ column_sale_coupon_code }}</span>
									</div>
								</div>

								<div class="col-xs-6 col-md-2">
									<div class="content-box bottom-padding-medium">
										<span class="text-small text-dark text-bold">{{ column_sale_coupon_discount }}</span>
									</div>
								</div>

								<div class="col-xs-6 col-md-1" style="text-align: end;">
									<div class="content-box bottom-padding-medium">
										<span class="text-small text-dark text-bold">{{ column_sale_coupon_date_start }}</span>
									</div>
								</div>

								<div class="col-xs-6 col-md-1" style="text-align: center;">
									<div class="content-box bottom-padding-medium">
										<span class="text-small text-dark text-bold">{{ column_sale_coupon_date_end }}</span>
									</div>
								</div>

								<div class="col-xs-6 col-md-2" style="padding-left: 52px;">
									<div class="content-box bottom-padding-medium">
										<span class="text-small text-dark text-bold">{{ column_sale_coupon_status }}</span>
									</div>
								</div>
							</div>
						</div>

						{% for coupon in coupons %}
							<div class="content-box flex middle-xs background-white top-padding-medium horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-small">
								<div class="right-margin-medium bottom-margin-medium">
									<label class="checkbox">
										<input class="checkbox-entry" type="checkbox" name="selected[]" value="{{ coupon.coupon_id }}" {% if coupon.selected %} checked {% endif %}>
										<span class="checkbox-text"></span>
									</label>
								</div>

								<a href="{{ coupon.href }}" class="text-decoration-none" style="width: 96%;">
									<div class="row nowrap-md no-space-xs middle-xs">
										<div class="col-xs-12 col-md-3">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark visible-block text-ellipsis js-ellipsis-tooltip" data-fulltext="{{ coupon.name }}">
													{{ coupon.name }}
												</span>
											</div>
										</div>
										<div class="col-xs-12 col-md-3">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark">{{ coupon.code }}</span>
											</div>
										</div>

										<div class="col-xs-6 col-md-2">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark">
													{% set value = coupon.discount|number_format(2, ',', '.') %}

													{% if coupon.type == 'P' %}
														{{ coupon.discount|number_format(0, ',', '.') }}%
													{% else %}
														R$ {{ value }}
													{% endif %}
												</span>
											</div>
										</div>

										<div class="col-xs-6 col-md-1" style="text-align: end;">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark">{{ coupon.date_start }}</span>
											</div>
										</div>

										<div class="col-xs-6 col-md-1" style="text-align: end;">
											<div class="content-box bottom-padding-medium">
												<span class="text-small text-dark">{{ coupon.date_end }}</span>
											</div>
										</div>

										<div class="col-xs-6 col-md-2" style="text-align: center;">
											<div class="content-box bottom-padding-medium">
												<span class="{{ coupon.status == 'Habilitado' ? 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success' : 'text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error' }}">{{ coupon.status }}</span>
											</div>
										</div>
										
									</div>
								</a>
							</div>
						{% endfor %}
					{% else %}
						<div class="col-xs-12">
							<div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
								<span class="text-medium text-gray">{{ text_no_results }}</span>
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</form>
		<div class="row top-margin-medium">
			<div class="col-xs-12">
				<div class="content-box">
					{{ pagination }}
				</div>
			</div>
		</div>
	</div>

<script>
	const DATA = {{ data|json_encode() }};
</script>

<script>
  function applyEllipsisTooltip() {
    document.querySelectorAll('.js-ellipsis-tooltip').forEach(function (el) {
      if (el.scrollWidth > el.clientWidth) {
        el.setAttribute('title', el.dataset.fulltext);
      } else {
        el.removeAttribute('title');
      }
    });
  }

  // executa ao carregar
  document.addEventListener('DOMContentLoaded', applyEllipsisTooltip);

  // executa ao redimensionar
  window.addEventListener('resize', applyEllipsisTooltip);
</script>

{{ footer }}