<v-app>
	<v-main>
		<v-app-bar app color="white" elevate-on-scroll>
			<v-toolbar-title class="mx-5">DialvoxCRM</v-toolbar-title>
			<v-spacer></v-spacer>
			<v-text-field
				solo
				append-icon="mdi-magnify"
				hide-details
				single-line
				:placeholder="traducirFrase('Buscar')"
				flat
				:background-color="color+' lighten-5'"
				:color="color"
				dense
				v-model="busqueda"
				class="ml-1 mr-1"
			></v-text-field>
			<v-select
				:items="selectCampos"
				v-if="campos.length > 0"
				:placeholder="campos.length > 0 ? traducirFrase('Campo') : traducirFrase('No hay campos')"
				solo
				hide-details
				flat
				dense
				:color="color"
				:background-color="color+' lighten-5'"
				v-model="campo"
				class="ml-1 mr-1"
				:no-data-text="traducirFrase('No hay campos para seleccionar')"
			></v-select>
			<v-btn
				depressed
				:color="color+' lighten-5'"
				:disabled="busqueda === ''"
				:class="color+'--text'"
				@click="buscarRegistro"
			>
				{{ traducirFrase("Buscar") }}
			</v-btn>
		</v-app-bar>
		<v-progress-linear
			indeterminate
			:color="color"
			v-if="loading"
		></v-progress-linear>
		<v-navigation-drawer
			app
			permanent
			right
			v-if="!resultadoBusqueda"
			:value="telefonoGestion !== ''"
			disable-resize-watcher
		>
			<v-list-item>
				<v-list-item-title class="title">
					{{traducirFrase("Categorias")}}
				</v-list-item-title>
			</v-list-item>
			<v-list dense nav>
				<v-list-item-group :color="color">
					<v-list-item
						v-for="(categoria, index) in categorias"
						:key="categoria.id"
						link
						@click="togglecategoria(index)"
					>
						<v-list-item-icon>
							<v-icon
								v-text="!categoria.Contraido ? 'mdi-chevron-up' : 'mdi-chevron-down'"
							></v-icon>
						</v-list-item-icon>
						<v-list-item-content>
							<v-list-item-title>
								{{ categoria.Nombre }}
							</v-list-item-title>
						</v-list-item-content>
					</v-list-item>
				</v-list-item-group>
			</v-list>
			<v-list-item>
				<v-list-item-title class="title">
					{{traducirFrase("Historial")}}
				</v-list-item-title>
			</v-list-item>
			<v-list dense nav>
				<v-expansion-panels flat multiple hover>
					<v-expansion-panel v-for="registro in historial" v-model="panelsHistorial">
						<v-expansion-panel-header>
							<v-text style="font-weight: bold;">{{registro.date}}</v-text>
						</v-expansion-panel-header>
						<v-expansion-panel-content>
							<div style="display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem;" class="mx-2">
								<v-text><span style="font-weight: bold;">Agente:</span> {{registro.agent}}</v-text>
								<v-text v-for="i in registro.info"><span style="font-weight: bold;">{{i.field}}:</span> {{i.value}}</v-text></div>
						</v-expansion-panel-content>
						<v-divider/>
					</v-expansion-panel>
				</v-expansion-panels>
			</v-list>
		</v-navigation-drawer>
		<v-container v-if="!resultadoBusqueda">
			<v-expansion-panels
				flat
				multiple
				hover
				inset
				v-model="panels"
				v-if="telefonoGestion !== ''"
			>
				<v-expansion-panel v-if="perfilVicidial !== null && !ocultarInfo">
					<v-expansion-panel-header
						:color="color+' lighten-5'"
						:class="color+'--text'"
					>
						{{traducirFrase("Información general")}}
					</v-expansion-panel-header>
					<v-expansion-panel-content>
						<v-container>
							<v-row justify="space-between" no-gutters>
								<v-col
									cols="12"
									sm="5"
									v-for="keyPerfilVicidial in Object.keys(perfilVicidial)"
									:key="keyPerfilVicidial"
								>
									<v-text-field
										:label="keyPerfilVicidial"
										:value="perfilVicidial[keyPerfilVicidial]"
										:color="color"
										:readonly="true"
									></v-text-field>
								</v-col>
							</v-row>
						</v-container>
					</v-expansion-panel-content>
				</v-expansion-panel>
				<v-expansion-panel
					v-for="(categoria, index) in categorias"
					:key="categorias.id"
				>
					<v-expansion-panel-header
						:color="color+' lighten-5'"
						:class="color+'--text'"
					>
						{{ categoria.Nombre }}
					</v-expansion-panel-header>
					<v-expansion-panel-content>
						<v-container>
							<v-row justify="space-between" no-gutters>
								<v-col
									cols="12"
									sm="5"
									v-for="resp in obtenerRespuestasPorCategoria(categoria.id)"
									:key="resp.Campo.Nombre"
								>
									<v-text-field
										v-if="resp.Campo.Tipo === 2"
										:label="resp.Campo.Nombre + (resp.Campo.Requerido ? '*' : '')"
										v-model="resp.Respuesta"
										:color="color"
										:readonly="resp.Campo.Edicion === 1"
									></v-text-field>
									<v-textarea
										v-else-if="resp.Campo.Tipo === 1"
										:label="resp.Campo.Nombre + (resp.Campo.Requerido ? '*' : '')"
										v-model="resp.Respuesta"
										:color="color"
										rows="3"
										:readonly="resp.Campo.Edicion === 1"
									></v-textarea>
									<v-select
										v-else-if="resp.Campo.Tipo === 3"
										:items="generarOpciones(resp.Campo.Valor)"
										v-model="resp.Respuesta"
										:label="resp.Campo.Nombre + (resp.Campo.Requerido ? '*' : '')"
										:color="color"
										:readonly="resp.Campo.Edicion === 1"
									></v-select>
									<v-checkbox
										v-else-if="resp.Campo.Tipo === 4"
										:label="resp.Campo.Nombre + (resp.Campo.Requerido ? '*' : '')"
										v-model="resp.Respuesta"
										:color="color"
										:readonly="resp.Campo.Edicion === 1"
									></v-checkbox>
								</v-col>
							</v-row>
						</v-container>
					</v-expansion-panel-content>
				</v-expansion-panel>
			</v-expansion-panels>
			<v-row v-if="errorRequerido !== ''">
				<v-text
					class="red--text ml-5"
				>
					{{traducirFrase(errorRequerido)}}
				</v-text>
			</v-row>
			<v-row
				justify="end"
				v-if="telefonoGestion !== ''"
				class="mr-4 mt-4"
			>
				<v-btn
					:color="color"
					dark
					depressed
					@click="guardarInformacion"
				>
					{{traducirFrase("Guardar información")}}
				</v-btn>
			</v-row>
			<div
				style="
					display: flex;
					justify-content: center;
					flex-direction: column;
				"
				class="mt-3"
				v-else
			>
				<img
					src="../../public/homeAgente/img/crm_agente.svg"
					:alt="traducirFrase('Busqueda')"
					style="width: auto; height: 60vh"
				/>
				<h4 class="title mt-4" style="text-align: center">
					{{traducirFrase("No hay información que mostrar")}}
				</h4>
			</div>
		</v-container>
		<v-container v-else>
			<v-row justify="center" v-if="resultadosBusqueda.length !== 0">
				<v-col cols="12" sm="10" md="8" lg="6">
					<v-card
						outlined
						class="mt-3 mb-3"
						v-for="resultado in resultadosBusqueda"
						:key="resultado.Valor"
						:ripple="{ class: 'teal--text' }"
						@click="obtenerGestion(resultado.Original)"
					>
						<v-card-title class="subtitle-2 teal--text">
							{{ resultado.Valor + " " + (resultado.Nombre ?
							resultado.Nombre : '') }}
						</v-card-title>
						<v-card-subtitle>
							<span
								v-for="(telefono, i) in resultado.Telefonos"
								:key="i"
							>
								{{ telefono ? telefono : traducirFrase("Sin registro") }}
							</span>
						</v-card-subtitle>
					</v-card>
				</v-col>
			</v-row>
			<div
				style="
					display: flex;
					justify-content: center;
					flex-direction: column;
				"
				class="mt-3"
				v-else
			>
				<img
					src="../../public/homeAgente/img/crm_agente.svg"
					:alt="traducirFrase('Busqueda')"
					style="width: auto; height: 60vh"
				/>
				<h4 class="title mt-4" style="text-align: center">
					{{traducirFrase("No se encontraron resultados")}}
				</h4>
			</div>
			<v-row justify="center">
				<v-col cols="12" sm="6">
					<v-btn :color="color" @click="crearGestion" dark>
						{{traducirFrase("Crear registro")}}
					</v-btn>
				</v-col>
			</v-row>
		</v-container>
	</v-main>
</v-app>
