{% 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="horizontal-padding-medium shadow-small bottom-margin-small">
						<div class="flex between-xs">
							<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="flex center-xs middle-xs gap-2 bottom-padding-small pointer" @click="isFilterOpen = !isFilterOpen">
							<span class="col-ms bottom-border-gray" style="margin-top: -2rem"></span>
							<div class="flex middle-xs gap-1 text-gray hover:text-dark"> 
								<span class="text-small">Mais filtros</span>
								<i :class="isFilterOpen ? 'fas fa-angle-up' : 'fas fa-angle-down'"></i>
							</div>
							<span class="col-ms bottom-border-gray" style="margin-top: -2rem"></span>
						</div>

						<transition name="moreFilters">	
							<div v-if="isFilterOpen" class="vertical-padding-small">
								<div class="row">
									<div class="col-xs-12">
										<div class="flex middle-xs gap-1">
											<span class="visible-block text-small text-dark">Ordenar por:</span>
											<select name="orderBy" v-model="orderBy" class="orderByFilter">
												<option value="" disabled>Selecione</option>
												<option value="desc">Decrescente</option>
												<option value="asc">Crescente</option>
											</select>
										</div>

										<div class="relative full-width gap-1 flex middle-xs top-margin-medium searchBarSchedule">
											<span class="text-small">Filtre pelo nome da agenda:</span>
											<input type="text" placeholder="Ex: agenda..." maxlength="60" v-model="filterName">
											<i class="fa-solid fa-pencil" title="Digite para filtrar" v-if="(filterName.length <= 0)"></i>
											<i class="fa-regular fa-circle-xmark" title="Limpar" v-if="(filterName.length > 0)" @click="filterName = ''"></i> 		
										</div>

									</div>
								</div>
							</div>
						</transition>
					</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 filteredSchedules" :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 %}
