<div class="flex bottom-margin-x-large">
	<div class="container-relative content-box background-info rounded-x-large shadow-medium">
		<div class="container-absolute content-box background-white rounded-x-large shadow-medium padding-large">
			{% if schedule.has_order == true %}

				<span class="top-margin-medium text-dark-opacity text-large text-bold text-break-word">{{ schedule.name }}</span>

				<div class="width-fit background-success padding-x-small rounded-large top-margin-x-small">
					<span class="text-success text-bold text-x-small">{{ schedule.status }}</span>
				</div>

				<div class="flex start-xs gap-6 vertical-margin-medium">
					{% for item in schedule.schedule_times %}
						<div class="flex-col">
							<p class="text-dark-opacity text-x-small text-bold">{{ item.title }}</p>
							<p class="text-dark-opacity text-small ">{{ item.info }}</p>
						</div>
					{% endfor %}
				</div>

				<div class="content-buttons">
					<a href="{{ schedule.url }}" target="_blank" class="btn-default btn-small width-fit button-order-schedule">
						<span>Consultar agendas</span>
					</a>

					{# Link ticket #}
					<div class="js-link-ticket btn-default btn-small width-fit button-order-schedule">
						<span>Vincular ticket</span>
					</div>
				</div>
			{% else %}

				<div class="flex start-xs middle-xs gap-1 bottom-margin-medium">
					<i class="fas fa-exclamation-triangle text-warning"/>
					<span class="text-warning text-large text-bold ">Atenção</span>
				</div>

				<p class="bottom-margin-medium text-dark-opacity text-medium">Este pedido não contém agendamento. Consulte as agendas disponíveis pelo botão abaixo</p>

				<div class="content-buttons">
					<a href="{{ schedule.url }}" target="_blank" class="btn-default btn-small width-fit button-order-schedule">
						<span>Consultar agendas</span>
					</a>

					{# Link ticket #}
					<div class="js-link-ticket btn-default btn-small width-fit button-order-schedule">
						<span>Vincular ticket</span>
					</div>
				</div>
			{% endif %}

			{# TICKET FIELDS #}
			<div class="ticket-container hidden">
				<div class="flex flex-column full-width">
					<span class="text-small text-color text-bold">Certificado:</span>
					<input class="js-ticket-type ticket-input text-medium" type="text" maxlength="50" placeholder="Digite o tipo do certificado...">
				</div>

				<div class="flex flex-column full-width">
					<span class="text-small text-color text-bold">Ticket:</span>
					<input class="js-ticket-number ticket-input text-medium" type="text" maxlength="15" placeholder="Digite o número do ticket...">
				</div>

				<div class="btn-default btn-success btn-small width-fit button-order-schedule btn-link-ticket js-save-ticket">
					<span>Vincular</span>
				</div>
			</div>

			{# MESSAGE ERROR #}
			<div class="js-ticket-error hidden top-margin-small">
				<span class="input-error text-small">Todos os campos devem estar preenchidos</span>
			</div>


			{# SEND EMAIL #}
			<div class="top-margin-small btn-default btn-small width-fit button-order-schedule full-width js-ticket-email">
				<span>Enviar tickets via e-mail</span>
			</div>

			<div class="email-container hidden">
			{% if ticketLink %}
				<div class="flex flex-column full-width">
					<span class="text-medium text-color text-justify">Ao clicar em "Enviar", todos os tickets relacionados ao pedido serão automaticamente enviados por e-mail ao cliente responsável pela compra.</span>
				</div>

				<div class="flex between-xs">
					<div class="btn-default btn-success btn-small width-fit button-order-schedule btn-email js-send-email">
						<span>Enviar</span>
					</div>

					<div class="btn-default btn-error btn-small width-fit button-order-schedule btn-email js-cancel-email">
						<span>Cancelar</span>
					</div>
				</div>
			{% else %}
				<div class="flex flex-column full-width">
					<span class="text-medium text-color text-justify">Nenhum ticket está vinculado a este pedido. Por favor, vincule um ticket ao pedido antes de prosseguir com o envio do e-mail.</span>
				</div>
			{% endif %}
			</div>

		</div>
	</div>

	{# Linked ticket #}
	{% if ticketLink %}
		<div class="tickets-box">
			{% for ticket in ticketLink %}
				<div id="{{ticket.ticket_number}}" class="content-ticket content-box background-white rounded-x-large shadow-medium padding-medium flex flex-column between-xs">
					<div class="flex between-xs">
						<span class="text-medium text-gray">Tipo do certificado:</span>
						<span class="text-medium text-dark-opacity">{{ticket.ticket_type}}</span>
					</div>
					<div class="flex between-xs">
						<span class="text-medium text-gray">Número do ticket:</span>
						<span class="text-medium text-dark-opacity js-data-ticket">{{ticket.ticket_number}}</span>
					</div>
					<div data-ticket="{{ticket.ticket_number}}" class="js-ticket-remove ticket-remove btn-default btn-error btn-small width-fit button-order-schedule">
						<span class="right-margin-small ">Desvincular</span>
						<i class="fa-regular fa-trash-can ticket-remove-icon" title="Desvincular certificado"></i>
					</div>
				</div>
			{% endfor %}
		</div>
	{% endif %}
</div>

<style>
	.container-relative {
		position: relative;
		width: 360px;
		height: 200px;
	}

	.container-absolute {
		position: absolute;
		top: 10%;
		left: 7.5%;
		width: 370px;
		min-height: 200px;
	}

	.button-order-schedule {
		background-color: #D9EDF2;
		color: rgba(0, 0, 0, 0.8);
		font-weight: bold;
	}

	.content-buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ticket-container {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 210px;
		padding: 8px;
		border-radius: 4px;
		background-color: #D9EDF2;
	}

	.email-container{
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 150px;
		padding: 8px;
		border-radius: 4px;
		background-color: #D9EDF2;
	}

	.ticket-input {
		width: 100%;
		height: 36px;
		margin-top: 6px;
		border: none;
	}

	.btn-link-ticket {
		width: 100%;
		height: 36px;
	}
	.btn-email {
		width: 48%;
		height: 36px;
	}

	.input-error {
		color: #af3944;
	}

	.text-color {
		color: rgba(0, 0, 0, 0.8);
	}

	.content-ticket {
		height: 130px;
		width: 346px;
		margin-bottom: 16px;
		padding: 20px;
		background-color: #f5f5f5;
		border: 2px dashed #D9EDF2;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		position: relative;
	}

	.tickets-box {
		display: flex;
		margin-left: 60px;
		justify-content: space-between;
		width: 704px;
		flex-wrap: wrap;
	}
	.ticket-remove {
		display: flex;
		width: 100%;
	}

	.content-ticket:hover .ticket-remove {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ticket-remove-icon {
		font-size: 22px;
		color: #af3944;
		cursor: pointer;
	}
</style>
