{% extends 'base/module.twig' %}

{% block header_actions %}
	<base-button apperance="primary" square size="medium" title="Adicione uma nova agenda" v-show="tabs[0].active" @click.native="handleShowForm">
		Cadastrar nova agenda
	</base-button>
{% endblock %}

{% block content %}
	<div class="container-fluid">
		<div v-if="tabs[0].active">
			<div class="row">
				<div class="col-md-12">

					<schedule-form v-if="showForm" :show-form="showForm" @callback="callbackCreateForm"></schedule-form>

					<schedule-item v-if="schedules.length"/>

				</div>
			</div>
		</div>

		<div v-if="tabs[1].active" class="background-white shadow-small col-xs-12 col-md-12">
			<div v-if="schedules.length" class="flex between-xs">
				<div class="col-xs-3 col-md-3">
					<div class="flex between-xs horizontal-padding-medium shadow-small bottom-margin-small">
						<base-radio 
						  name="Active"
						 :label="'Ativa'" 
						 v-model="status" 					
						 :value="1" 
						 value-checked="status" 
						 :checked="status" 
						 inline>
						 </base-radio>

						<base-radio 
						 name="Inactive" 
						:label="'Inativa'" 
						v-model="status" 					
						:value="0" 
						value-checked="status" 
						inline>
						</base-radio>
					</div>

					<div :class="loader ? 'flex-content-center' : '' " class="full-width limit-defined min-height-schedule scroll-gray margin-adjust card-border-radius-tag shadow-medium vertical-padding-small horizontal-padding-medium">
						<div v-if="(inactiveStatusSchedule.length || activeStatusSchedule.length)">
							<div v-if="!loader" v-for="(schedule, index) in newSchedules" :key="index">
								<div @click="scheduleChoice(schedule.schedule_id, true)" :key="schedule.schedule_id" :id="schedule.schedule_id" :class="{blockedSchedule: schedule.status === 0, addFocus: index === 0}" class="schedule-list flex height-fit gap-1 flex-column nowrap-xs card-border-radius-tag padding-small cursor-pointer rel vertical-margin-small">
									<div class="flex content-center between-xs">
										<span class="text-small text-dark-opacity">Nome:
										</span>
										<span v-text="limitText(schedule.name, 15)" class="text-small" :title="schedule.name"></span>
									</div>
									<div class="flex content-center between-xs">
										<span class="text-small text-dark-opacity">Status:
										</span>
										<span v-if="schedule.status === 1 " class="text-small text-dark-opacity">Ativa</span>
										<span v-else class="text-small text-inactive text-bold">Inativa</span>
									</div>
									<div class="flex content-center between-xs">
										<span class="text-small text-dark-opacity">Tipo:
										</span>
										<span v-text="schedule.type" class="text-small"></span>
									</div>
									<div class="flex content-center between-xs">
										<span class="text-small text-dark-opacity">Data início:
										</span>
										<span v-text="schedule.date_start" class="text-small"></span>
									</div>
									<div class="flex content-center between-xs">
										<span class="text-small text-dark-opacity">Data fim:
										</span>
										<span v-text="schedule.date_end" class="text-small"></span>
									</div>
								</div>
							</div>
							<div v-if="loader">
								<button style="border: none !important" class="btn-neutral-white btn-loading abs"></button>
							</div>
						</div>
						<div v-if="(!inactiveStatusSchedule.length || !activeStatusSchedule.length)">
							<div class="schedules-status" v-if="!activeStatusSchedule.length && status === 1">
								<span class="text-medium text-center">Você não possui agendas ativas!</span>
							</div>
							<div class="schedules-status" v-if="!inactiveStatusSchedule.length && status === 0">
								<span class="text-medium text-center">Você não possui agendas inativas!</span>
							</div>
						</div>
					</div>

					<div style="margin-top: 37px" class="legend-schedule full-width flex flex-column between-xs gap-1 padding-small card-border-radius-tag shadow-medium">
						<div class="flex between-xs">
							<span class="text-small text-dark-opacity">Agendado:</span>
							<div class="schedule-agendado"></div>
						</div>
						<div class="flex between-xs">
							<span class="text-small text-dark-opacity">Agendamento externo:</span>
							<div class="schedule-outSale"></div>
						</div>
						<div class="flex between-xs">
							<span class="text-small text-dark-opacity">Bloqueado:</span>
							<div class="schedule-bloqueado"></div>
						</div>
						<div class="flex between-xs">
							<span class="text-small text-dark-opacity">Disponível:</span>
							<div class="schedule-livre"></div>
						</div>
						<div class="flex between-xs">
							<span class="text-small text-dark-opacity">Indisponível:</span>
							<div class="schedule-indisponivel"></div>
						</div>
					</div>
				</div>

				<div class="col-xs-9 col-md-9">
					<schedule-table :inactive-status-schedule="inactiveStatusSchedule" :active-status-schedule="activeStatusSchedule" :schedule-id="scheduleId" :status="status" @callback="(value)=>load(value)" @callback-unload="(value)=>unLoad(value)"/>
				</div>
			</div>
			<div v-if="!schedules.length" class="flex-center content-center full-width card-border-radius-tag shadow-medium vertical-padding-large top-margin-medium">
				<i class="fa-solid fa-triangle-exclamation horizontal-margin-medium"></i>
				<span>Você não possui agenda cadastrada!</span>
			</div>
		</div>
	</div>
{% endblock %}
