{% extends "cliente/base.php" %}
{% block body %}
<style>
	[type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after {
    border: 2px solid #60b86c;}

	.theme-primary [type=checkbox]:checked + label:before {
    	border-right: 2px solid #60b86c;
    	border-bottom: 2px solid #60b86c;
	}

	[type="checkbox"] + label {
	    padding-left: 24px;
	}

	.btn-light {
		background-color: #F2F5FA;
		border: none;
		color: #000000;
	}

	.wrapper .border-light {
		border: none;
	}

	.btn-close {
	  filter: invert(47%) sepia(88%) saturate(403%) hue-rotate(336deg) brightness(90%) contrast(95%);
	  opacity: 1;
	}

	.form-control:disabled, .form-control:read-only {
	    background-color: #e3e3e3;
	    opacity: 1;
	}

	.badge-success{
		background-color: #60b86c!important;
	}

	.theme-primary .border-primary {
	    border-color: #585EA8 !important;
	}

	[type="checkbox"].filled-in:not(:checked) + label:after {
	    border: 2px solid #60b86c;
	}

	.theme-primary [type=checkbox].filled-in:checked + label:after {
	    border: 2px solid #60b86c;
	    background-color: #60b86c;
	}

	.custom-checkbox[type="checkbox"]:not(:checked),
	.custom-checkbox[type="checkbox"]:checked {
	    position: relative !important;
	    left: 0 !important;
	    opacity: 1 !important;
	}

	.form-check-input:checked {
	    background-color: #60b86c;
	    border-color: #60b86c;
	}

	.form-control:disabled, .form-control:read-only {
	    background-color: #f2f5fa;
	    opacity: 1;
	}
</style>
<div class="content-wrapper bg-light">
	<div class="container-full ">
		
		<!-- Content Header (Page header) -->
		<div class="content-header">
			<div class="d-flex align-items-center">
				<div class="me-auto">
					<h4 class="page-title fw-bold text-purple">Atendentes\Departamentos</h4>
				</div>
				
				<div class="">
					<a id="feriados" class="btn btn-green-manager2 fw-bold btn-sm pull-right"><i class="fa fa-calendar-days"></i> Feriados</a>
				</div>
			</div>
		</div>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					
					<div class="row">
						<div class="col-12">
							<div class="box">
								<div class="box-header with-border p-3">
									<div class="d-flex align-items-center">
										<h4 class="box-title fw-bold text-purple me-3">Departamentos</h4>
										<a id="adicionar_departamento" class="btn btn-green-manager fw-bold btn-sm pull-right" data-bs-toggle="tooltip" data-bs-original-title="Novo departamento"><i class="fa-solid fa-sitemap me-1"></i>Novo Departamento</a>
										<!-- <a id="adicionar_departamento" class="waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-success ms-2" data-bs-toggle="tooltip" data-bs-original-title="Novo departamento"><i class="mdi mdi-tag-plus mdi-18px"></i></a> -->
									</div>
								</div>
								
								<div class="box-body no-padding mb-2">
									<div class="table-responsive" style="max-height: 40vh; border-radius: 10px 10px 0 0; ">
										<table id="tabelaDepartamentos" class="table table-sm table-hover" >
											<thead class="bg-purple sticky-top" style="z-index: 9;">
												<tr>
													<th class="col-2">#</th>
													<th class="col-6"><i class="fa-solid fa-sitemap me-1"></i>Nome</th>
													<th class="col-2"><i class="fa-solid fa-arrow-down-1-9 me-1"></i>Fila Atendimento</th>
													<th class="col-2"></th>
												</tr>
											</thead>
											<tbody>
												<script>let horarios = []; </script>
												{% for d in departamentos %}
												<script>
													horarios[{{d.getIdDepartamentos}}] = '{{d.getHorarios|raw}}';
												</script>
												<tr class="text-muted">
													<td>{{d.getIdDepartamentos}}</td>
													<td>{{d.getNomeDepartamento}}</td>
													<td>{%if d.getFilaAtendenteAleatorio == 1%}Ativado{%else%}Desativado{%endif%}</td>
													<td class="p-2">
														<!--div class="d-flex justify-content-end">
															<a id="" data-id="{{d.getIdDepartamentos}}" data-nome="{{d.getNomeDepartamento}}" class="editarDepartamento waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-warning me-1" data-bs-toggle="tooltip" data-bs-original-title="Editar departamento"><i class="mdi mdi-pencil mdi-16px"></i></a>
															<a id="" data-id="{{d.getIdDepartamentos}}" data-nome="{{d.getNomeDepartamento}}" class="excluirDepartamento waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-danger me-1" data-bs-toggle="tooltip" data-bs-original-title="Excluir departamento"><i class="mdi mdi-delete mdi-16px"></i></a>
														</div-->
														<div class="dropdown float-end">
															<a class="px-10 pt-5" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt"></i></a>
															<div class="dropdown-menu dropdown-menu-end" style="position:static;">
															  <a id="" class="editarDepartamento text-purple dropdown-item" data-id="{{d.getIdDepartamentos}}" data-nome="{{d.getNomeDepartamento}}" data-fila_atendentes="{{d.getFilaAtendenteAleatorio}}" href="javascript:void(0)"><i class="fa fa-pen"></i> Editar departamento</a>
															  <a id="" class="excluirDepartamento text-purple dropdown-item" data-id="{{d.getIdDepartamentos}}" data-nome="{{d.getNomeDepartamento}}" href="javascript:void(0)"><i class="fa fa-close"></i> Excluir departamento</a>
															  <a id="" class="horariosDepartamento text-purple dropdown-item" data-id="{{d.getIdDepartamentos}}" data-nome="{{d.getNomeDepartamento}}" data-encerrar_horario="{{d.getEncerrarChamadoHorario}}" data-mensagem_fechado="{{d.getMensagemFechado}}" href="javascript:void(0)"><i class="fa fa-clock"></i> Horário de funcionamento</a>
															</div>
														</div>
													</td>
												</tr>
												{%endfor%}
											</tbody>
										</table>
									</div>
								</div>	
							</div>
						</div>
					</div>

					
					<div class="box">	
						<div class="box-header with-border p-3">
							<div class="d-flex align-items-center">
								<h4 class="box-title fw-bold text-purple me-3">Atendentes</h4>
								<a id="adicionar_atendente" class="btn btn-green-manager fw-bold btn-sm pull-right" data-bs-toggle="tooltip" data-bs-original-title="Novo atendente"><i class="fa-solid fa-headset me-1"></i>Novo Atendente</a>
								<!-- <a id="adicionar_atendente" class="waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-success ms-2" data-bs-toggle="tooltip" data-bs-original-title="Novo atendente"><i class="mdi mdi-account-multiple-plus mdi-18px"></i></a> -->
							</div>
						</div>
					
						<div class="box-body no-padding">
							<div class="table-responsive" style="max-height: 40vh; overflow: auto; border-radius: 10px 10px 0 0;">
								<table id="tabelaAtendentes" class="table table-hover" >
									<thead class="bg-purple sticky-top" style="z-index: 9;">
										<tr>
											<th>#</th>
											<th><i class="fa-solid fa-user me-1"></i>Nome</th>
											<th><i class="fa-solid fa-envelope me-1"></i>Email</th>
											<th><i class="fa-solid fa-chart-simple me-1"></i>Status</th>
											<th><i class="fa-solid fa-toggle-on me-1"></i>Fila</th>
											<th><i class="fa-solid fa-sitemap me-1"></i>Departamento</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										{% for a in atendentes %}
										<tr class="text-muted">
											<td class="id_atendentes">{{a.getIdAtendentes}}</td>
											<td class="nome_atendente">{{a.getNomeAtendente}}</td>
											<td class="email_atendente">{{a.getEmailAtendente}}</td>
											<td class="status_atendente">{{a.getStatus}}</td>
											<td class="fila_antendente">{% if a.getAtivarFilaAtendimento == 1 %}Ativo{%else%}Inativo{%endif%}</td>
											{% set atendenteNomeDepartamentos = [] %}
											{% set atendenteIdDepartamentos = [] %}
											{% for d in a.getDepartamentos%}
												{% set atendenteNomeDepartamentos = atendenteNomeDepartamentos|merge([d.getIdDepartamentos.getNomeDepartamento]) %}
												{% set atendenteIdDepartamentos = atendenteIdDepartamentos|merge([d.getIdDepartamentos.getIdDepartamentos]) %}
											{%endfor%}
											<td class="id_departamento" 
														data-id_departamento="[{{atendenteIdDepartamentos|join(',')}}]">
												{% if a.getDepartamentos is empty %}
													{{a.getDepartamentos.getNomeDepartamento|default('Todos')}}
												{%else%}
													{%if atendenteNomeDepartamentos|length() > 3 %}
														<span class="badge b-1 border-dark badge-pill text-dark" data-bs-toggle="tooltip" data-bs-original-title="{{atendenteNomeDepartamentos|join(' | ')}}" style="height: 25px; width: 25px; cursor: pointer;">
															{{atendenteNomeDepartamentos|length()}}
														</span>
													{%else%}
														{{atendenteNomeDepartamentos|join(' | ')}}
													{%endif%}
												{%endif%}
											</td>
											<td class="p-2">
												<div class="dropdown float-end">
													<a class="px-10 pt-5" href="#" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt"></i></a>
													<div class="dropdown-menu dropdown-menu-end" style="position:static;">
														<a id="" class="editarAtendente text-purple dropdown-item" data-id="{{a.getIdAtendentes}}" href="javascript:void(0)"><i class="fa fa-user-pen"></i> Editar atendente</a>
														<a id="" class="excluirAtendente text-purple dropdown-item" data-id="{{a.getIdAtendentes}}" href="javascript:void(0)"><i class="fa fa-user-xmark"></i> Excluir atendente</a>
														{%if userLogged.tipo == 'CLIENTE'%}
														<a id="" class="alterarPermissoes text-purple dropdown-item" data-id="{{a.getIdAtendentes}}" data-permissoes="{{a.getPermissoes}}" href="javascript:void(0)"><i class="fa fa-list"></i> Alterar permissões</a>
														<a id="" class="ativarDesativarFila text-purple dropdown-item" data-id="{{a.getIdAtendentes}}" data-fila="{{a.getAtivarFilaAtendimento}}" href="javascript:void(0)"><i class="fa fa-users-line"></i> {% if a.getAtivarFilaAtendimento == 1 %}Desativar{%else%}Ativar{%endif%} fila</a>
														<a id="" class="redefinirSenha text-purple dropdown-item" data-id="{{a.getIdAtendentes}}" href="javascript:void(0)"><i class="fa-solid fa-lock"></i> Redefinir Senha</a>
														{%endif%}
													</div>
												</div>
												
												<!--div class="d-flex justify-content-end">
													<a id="" class="editarAtendente waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-warning me-1" data-bs-toggle="tooltip" data-bs-original-title="Editar atendente"><i class="mdi mdi-account-edit mdi-16px"></i></a>
													<a id="" class="excluirAtendente waves-effect waves-circle btn btn-xs btn-social-icon btn-circle btn-danger me-1" data-bs-toggle="tooltip" data-bs-original-title="Excluir atendente"><i class="mdi mdi-account-remove mdi-16px"></i></a>
												</div-->
											</td>
										</tr>
										{%endfor%}
									</tbody>
								</table>
							</div>
						</div>
						
						
						
					</div>

				</div>
			</div>
		</section>
		<!-- /.content -->
		
		
	</div>
	
	<!-- MODAL HORARIOS -->
	<div id="modalHorarios" class="modal fade bs-example-modal-lg" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog modal-lg text-start">
			<div class="modal-content bg-purple" style="border-radius: 10px; overflow: hidden;">
				<div class="modal-header bg-purple fw-bold" style="border-radius: 10px 10px 0 0;">
					<h5 class="modal-title" id="modalHorariosTitle"></h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body bg-white text-purple fw-bold">
					<div class="p-3" style="">
						{% set dias = {1:{'id':'segunda','nome':'Segunda-feira'},2:{'id':'terca','nome':'Terça-feira'},
										3:{'id':'quarta','nome':'Quarta-feira'},4:{'id':'quinta','nome':'Quinta-feira'},
										5:{'id':'sexta','nome':'Sexta-feira'},6:{'id':'sabado','nome':'Sábado'},
										7:{'id':'domingo','nome':'Domingo'}
						}%}
						
						<div class="row">
						{% for n in  1..7 %}
							<div class="col-lg-6 col-12 ">
								<div class="card shadow bs-3 b-0 border-primary p-2 pb-0 m-1 d-flex">
									<div class="d-flex justify-content-between mb-2">
										<div class="custom-control custom-checkbox pull-left">
											<input type="checkbox" class="custom-control-input" id="{{dias[n].id}}_check">
											<label class="custom-control-label" for="{{dias[n].id}}_check" style=""><h5 class="mb-0 fw-bold">{{dias[n].nome}}</h5></label>
										</div>
										<div class="d-flex">
											<a data-dias_id="{{dias[n].id}}" class="me-1 badge badge-xs badge-success badge-pill d-flex align-items-center justify-content-center adicionar_horario text-white" data-bs-toggle="tooltip" data-bs-original-title="Adicionar horário" style="cursor: pointer;">
												<i class="fa fa-plus"></i>
											</a>
											<a data-dias_id="{{dias[n].id}}" class="badge badge-xs badge-danger badge-pill d-flex align-items-center justify-content-center remover_horario text-white" data-bs-toggle="tooltip" data-bs-original-title="Remover último horário" style="cursor: pointer;">
												<i class="fa fa-xmark"></i>
											</a>
										</div>
									</div>
									<div class="" id="{{dias[n].id}}" data-id="{{dias[n].id}}">
										<div class="horario_{{dias[n].id}} d-flex">
											<div class="form-group text-left me-1">
												<label class="custom-control-label" for="{{dias[n].id}}_inicio"><h6 class="mb-0 fw-bold">Início</h6></label>
												<div class="input-group">
													<div class="input-group-addon bg-manager-gray border-0 text-purple">
														<i class="fa fa-clock"></i>
													</div>
													<input id="{{dias[n].id}}_inicio" type="text" class="form-control horario bg-manager-gray border-0" placeholder="00:00" autocomplete="off">
												</div>
											</div>
											<div class="form-group">
												<label class="custom-control-label" for="{{dias[n].id}}_fim"><h6 class="mb-0 fw-bold">Fim</h6></label>
												<div class="input-group">
													<div class="input-group-addon bg-manager-gray border-0 text-purple">
														<i class="fa fa-clock"></i>
													</div>
													<input id="{{dias[n].id}}_fim" type="text" class="form-control bg-manager-gray border-0 horario" placeholder="00:00" autocomplete="off">
												</div>
											</div>
										</div>
									</div>
								</div>
								
							</div>
						{% endfor %}
						</div>
						
						<div class="mb-2 mt-4">
							<div class="form-group 2">
								<label for="departamentoMensagemFechado" class="text-purple fw-bold"><i class="fa-solid fa-message me-1"></i>Mensagem</label>
								<textarea id="departamentoMensagemFechado" class="form-control bg-manager-gray border-0" placeholder="Mensagem" autocomplete="off" style="z-index: 99;"></textarea>
							</div>
						</div>
						<div class="mb-2 mt-4">
							<div class="custom-control custom-checkbox pull-left">
								<input type="checkbox" class="custom-control-input" id="modal_encerrar">
								<label class="custom-control-label text-purple" for="modal_encerrar"><h5>Encerrar chamado se mensagem fora do horário</h6></label>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer bg-purple">
					<button type="button" class="btn btn-secondary fw-bold" data-bs-dismiss="modal">Cancelar</button>
					<button id="modalHorariosSalvar" data-id="" type="button" class="btn btn-green-manager2 float-end fw-bold"><i class="fa-solid fa-floppy-disk me-1"></i>Salvar</button>
				</div>
			</div>
		</div>
	</div>
	<!-- MODAL HORARIOS -->
	
	<!-- MODAL FERIADOS -->
	<div id="modalFeriados" class="modal fade bs-example-modal-lg" data-bs-backdrop="static" data-bs-focus="false"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog modal-lg">
			<div class="modal-content bg-purple" style="border-radius: 10px; overflow: hidden;">
				<div class="modal-header bg-purple text-white" style="border-radius: 10px 10px 0 0;">
					<h5 class="modal-title fw-bold" id="modalFeriadosTitle">Cadastrar feriados</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body bg-white">
					<div class="row">
						
						<div class="mb-2">
							<div class="form-group">
								<a id="cadastrarFeriado" class="btn btn-green-manager btn-sm float-end"><i class="fa fa-plus"></i> Novo feriado</a>
							</div>
						</div>
					</div>
					
					<div class="p-0" style="">
						<div class="row">
							<div class="table-responsive" style="max-height: 50vh;height: 50vh; overflow: auto;">
								<table id="tabelaFeriados" class="table table-hover" style="border-radius: 10px 10px 0 0; overflow: hidden;">
									<thead class="bg-purple sticky-top" style="z-index: 99; border-radius: 10px 10px 0 0; overflow: hidden;"">
										<tr>
											<th>#</th>
											<th><i class="fa-solid fa-mobile-screen-button me-1"></i>Número</th>
											<th><i class="fa-solid fa-calendar-day me-1"></i>Dia</th>
											<th><i class="fa-regular fa-calendar-days me-1"></i>Mês</th>
											<th><i class="fa-solid fa-calendar me-1"></i>Ano</th>
											<th><i class="fa-solid fa-circle-xmark me-1"></i>Encerrar</th>
											<th><i class="fa-solid fa-message me-1"></i>Mensagem</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					
					
				</div>
				<div class="modal-footer bg-purple">
					<button id="salvarFeriados" type="button" class="btn btn-sm btn-green-manager2 float-end fw-bold" data-bs-dismiss="modal"><i class="fa-solid fa-floppy-disk me-1"></i>Salvar</button>
				</div>
			</div>
		</div>
	</div>
	<!-- MODAL FERIADOS -->
</div>
{% endblock %}

{% block scripts %}
<style>
		.box-header {
	    border: none;
	}

	.box-header.with-border {
	    border: none;
	}

	.swal2-html-container{
		overflow: visible;
	}
	.table-responsive>table .dropdown{position:static;}
	.table-responsive>table .dropdown>.dropdown-menu{left:0 !important;top:0 !important;}

	@media (max-width: 768px) {
		.fixed .content-wrapper {
	    	margin-top: 75px!important;
		}
	}
	
	.fixed .content-wrapper {
	    margin-top: 0px;
	}

	.table-responsive tbody tr {
	    transition: visibility 0.2s ease, opacity 0.2s ease;
	    opacity: 1;
	}
	
	.table-responsive tbody tr[style*="hidden"] {
	    opacity: 0;
	}



</style>
<script>
	$('body').addClass('sidebar-collapse');

	document.addEventListener("DOMContentLoaded", function () {
	    const tableContainers = document.querySelectorAll(".table-responsive");

	    if (tableContainers.length > 0) {
	        const checkRowsVisibility = (container) => {
	            const rows = container.querySelectorAll("tbody tr");
	            const containerRect = container.getBoundingClientRect();

	            rows.forEach((row) => {
	                const rowRect = row.getBoundingClientRect();

	                const isFullyVisible = 
	                    rowRect.top >= containerRect.top &&
	                    rowRect.bottom <= containerRect.bottom;

	                row.style.visibility = isFullyVisible ? "visible" : "hidden";
	            });
	        };
	        tableContainers.forEach((container) => {
	            checkRowsVisibility(container);

	            container.addEventListener("scroll", () => checkRowsVisibility(container));
	        });
	    }
	});

var maskHorarios = {
					onKeyPress: function (time, e, field, op) {
						if (time.length > 1) return;


						// allow input hours between from 00 to 19
						var hour_pattern = /[0-9]/;

						// allow input hours between from 20 to 23
						var first_char_of_hour = time[0];
						if (first_char_of_hour == '2') hour_pattern = /[0-3]/;

						// overwrite translation
						maskHorarios.translation['h'] = {pattern: hour_pattern};

						// reset mask
						field.unmask();
						field.mask('Hh:M0', maskHorarios);
					},

					translation: {
						'H': {
							pattern: /[0-2]/
						},
						'M': {
							pattern: /[0-5]/
						},
					},

					placeholder: '__:__',
				};

$(document).ready(function() {
	initilizeTooltips();
	$('.horario').mask('H0:M0', maskHorarios);
})

function initilizeTooltips(){
	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	  return new bootstrap.Tooltip(tooltipTriggerEl)
	})
}

$('#adicionar_departamento, #tabelaDepartamentos > tbody .editarDepartamento').on('click', function(){
	let id = ($(this).data('id') ? $(this).data('id') : '');
	let nome = ($(this).data('nome') ? $(this).data('nome') : '');
	let fila_atendentes = ($(this).data('fila_atendentes') ? $(this).data('fila_atendentes') : '');

	Swal.fire({
	  title: '<span class="text-purple">' + (id == '' ? 'Novo departamento' : 'Alterar departamento') + '</span>',
	  html:
		'<div class="container">' +
			'<input id="editarDepartamentoId" type="hidden" class="form-control" value="'+id+'"/>' +
			'<div class="col-12 text-start mt-4">' +
				'<h6 class="mb-1 text-purple fw-bold"><i class="fa-solid fa-sitemap me-1"></i>Nome departamento*</h6>' +
				'<input id="novoDepartamentoNome" placeholder="Nome" class="form-control bg-manager-gray border-0" value="'+nome+'"/>' +
			'</div>' +
			'<div class="col-lg-12">' +
				'<div class="form-group">' +
					'<div class="custom-control custom-checkbox text-start">' +
						'<input type="checkbox" class="custom-control-input" id="fila_atendentes" autocomplete="off" '+(fila_atendentes == 1 ? 'checked' : '')+'>' +
						'<label class="custom-control-label pe-2 mt-2" for="fila_atendentes">' +
							'<h6 class="mt-1 fw-bold text-purple">' +
								'Ativar fila de atendimento' +
								'<i class="fa fa-circle-info text-purple ms-2" data-bs-toggle="tooltip" data-bs-original-title="As conversas serão igualmente encaminhadas para cada atendentes do departamento."></i>' +
							'</h6>' +
						'</label>' +
					'</div>' +
				'</div>' +
				
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Salvar',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
		  $('#novoDepartamentoNome').focus();
		  initilizeTooltips();
	  },
	  preConfirm: (value) => {
		let novoDepartamentoNome = $('#novoDepartamentoNome').val();
		
		switch(true){
			case novoDepartamentoNome == '':
				Swal.showValidationMessage('Nome departamento não pode ser vazio')
				break;
		}
	  }
	  
	}).then((result) => {
		if(result.isConfirmed){
			let novoDepartamentoNome = $('#novoDepartamentoNome').val();
			let filaAtendentes = ($('#fila_atendentes').is(':checked') ? 1 : 0);
			
			Swal.fire({title : 'Salvando departamento...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('novoDepartamento', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id + '&nome=' + novoDepartamentoNome + '&fila_atendentes=' + filaAtendentes
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: (id == '' ? 'Novo departamento' : 'Alterar departamento'),
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: (id == '' ? 'Departamento não cadastrado' : 'Erro ao alterar departamento'),
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#tabelaDepartamentos > tbody .excluirDepartamento').on('click', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	
	Swal.fire({
	  title: '<span class="text-purple">Excluir Departamento ?</span>',
	  html: '<span>Deseja excluir o departamento: <strong class="text-purple">' + nome + '</stron> ?</span>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			fetch('excluirDepartamento', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Exclusão realizada',
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: 'Não foi possível excluir',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#adicionar_atendente, #tabelaAtendentes > tbody .redefinirSenha').on('click', function () {
    let id_atendentes = $(this).closest('tr').find('.id_atendentes').text().trim();
    console.log(id_atendentes);

    Swal.fire({
        title: '<span class="text-purple">Redefinir Senha</span>',
        html:
            '<div class="container">' +
            '<input id="editarAtendenteId" type="hidden" class="form-control" value="' + id_atendentes + '"/>' +
            '<div class="col-12 text-start mt-4">' +
            '<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-lock me-1"></i>Nova Senha</h6>' +
            '<input id="novaSenhaAtendente" autocomplete="off" type="password" placeholder="Nova Senha" class="form-control bg-manager-gray border-0" value=""/>' +
            '</div>' +
            '<div class="col-12 text-start mt-4">' +
            '<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-lock me-1"></i>Confirmar Senha</h6>' +
            '<input id="confirmarSenhaAtendente" autocomplete="off" type="password" placeholder="Confirmar Senha" class="form-control bg-manager-gray border-0" value=""/>' +
            '</div>' +
            '</div>',
        showCloseButton: true,
        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText: 'Salvar',
        cancelButtonText: 'Cancelar',
        scrollbarPadding: false,
        allowOutsideClick: false,
        confirmButtonColor: '#60b86c',
        scrollbarPadding: false,
        preConfirm: () => {
            let novaSenhaAtendente = $('#novaSenhaAtendente').val();
            let confirmarSenhaAtendente = $('#confirmarSenhaAtendente').val();

            let mensagemErro = null;

            switch (true) {
                case novaSenhaAtendente === '':
                    mensagemErro = 'Nova senha não pode ser vazia';
                    break;
                case confirmarSenhaAtendente === '':
                    mensagemErro = 'Confirmar Senha não pode ser vazia';
                    break;
                case novaSenhaAtendente !== confirmarSenhaAtendente:
                    mensagemErro = 'As senhas não conferem!';
                    break;
            }

            if (mensagemErro) {
                Swal.showValidationMessage(mensagemErro);
                return false;
            }

            return { id: id_atendentes, novaSenha: novaSenhaAtendente };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            
        }
    });
});



$('#adicionar_atendente, #tabelaAtendentes > tbody .editarAtendente').on('click', function(){
	let id_atendentes = $(this).closest('tr').find('.id_atendentes').text().trim();
	let nome_atendente = $(this).closest('tr').find('.nome_atendente').text().trim();
	let email_atendente = $(this).closest('tr').find('.email_atendente').text().trim();
	let id_departamento = $(this).closest('tr').find('.id_departamento').data('id_departamento');
	let status_atendente = $(this).closest('tr').find('.status_atendente').text().trim();
	

	Swal.fire({
	  title:'<span class="text-purple">' + (id_atendentes == '' ? 'Novo atendente' : 'Alterar atendente') + '</span>',
	  html:
		'<div class="container">' +
			'<input id="editarAtendenteId" type="hidden" class="form-control" value="'+id_atendentes+'"/>' +
			'<div class="col-12 text-start mt-4">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-user me-1"></i>Nome atendente*</h6>' +
				'<input id="novoAtendenteNome" placeholder="Nome" class="form-control bg-manager-gray border-0" value="'+nome_atendente+'"/>' +
			'</div>' +
			'<div class="col-12 text-start mt-4">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-envelope me-1"></i>Email atendente*</h6>' +
				'<input id="novoAtendenteEmail" placeholder="Email" class="form-control bg-manager-gray border-0" value="'+email_atendente+'"/>' +
			'</div>' +
			'<div class="col-12 text-start mt-4">' +
				'<h6 class="mb-1 fw-bold text-purple"><i class="fa-solid fa-sitemap me-1"></i>Selecione um ou mais departamentos*</h6>' +
				'<select id="novoAtendenteIdDepartamento" class="selectpicker mb-3" title="Selecionar departamentos" multiple>' +
					//'<option value="0" class="" style="letter-spacing: 1px !important;" '+(id_departamento ? '' : 'selected')+'>Todos (Visualiza todas as conversas)</option>' +
					{% for d in departamentos %}
					'<option value="{{d.getIdDepartamentos}}" class="" style="letter-spacing: 1px !important;" '+(id_departamento ? (id_departamento.includes({{d.getIdDepartamentos}}) ? 'selected' : '') : '')+'>{{d.getNomeDepartamento}}</option>' +
					{% endfor %}
				'</select>' +
				'<i class="fa-solid mt-2 fa-triangle-exclamation me-2 text-purple"></i>'+
				'<text class="mt-1" style="font-size: 14px; font-weight: 500;">Visualiza <strong class="text-purple fw-bold">TODOS</strong> os departamentos se nenhum for selecionado.</text>' +
			'</div>' +
			'' +
		'</div>' +
		'',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Salvar',
	  cancelButtonText: 'Cancelar',
	  showDenyButton: (id_atendentes == '' || status_atendente == 'AGUARDANDO PRIMEIRO ACESSO' ? false : true),
	  denyButtonText: (status_atendente == 'BLOQUEADO' ? 'Ativar Atendente' : 'Bloquear Atendente'),
	  denyButtonColor: (status_atendente == 'ATIVO' ? 'var(--bs-danger)' : 'var(--bs-success)'),
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  scrollbarPadding: false,
	  willOpen: () => {
	  },
	  didOpen: () => {
			$('#novoAtendenteNome').focus();
			/*if(id_departamento == ''){
				$('#novoAtendenteIdDepartamento').val(0);
			}else{
				$('#novoAtendenteIdDepartamento').val(id_departamento);
			}*/
			$('#novoAtendenteIdDepartamento').selectpicker({actionsBox:true, selectAllText: 'Selecionar Todos', deselectAllText: 'Desmarcar todos'});
			$('#novoAtendenteIdDepartamento').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
				$('.bs-actionsbox .btn-group').addClass('w-p100')
			});
			$('#selectAcoes').on('hidden.bs.select', function () {
				$('.swal2-actions').css('z-index', '');
			});
	  },
	  preConfirm: (value) => {
		let novoAtendenteNome = $('#novoAtendenteNome').val();
		let novoAtendenteEmail = $('#novoAtendenteEmail').val();
		let novoAtendenteIdDepartamento = $('#novoAtendenteIdDepartamento').val();
		
		switch(true){
			case novoAtendenteNome == '':
				Swal.showValidationMessage('Nome atendente não pode ser vazio')
				break;
			case novoAtendenteEmail == '':
				Swal.showValidationMessage('Email atendente não pode ser vazio')
				break;
			case !validateEmail(novoAtendenteEmail):
				Swal.showValidationMessage('Email inválido')
				break;
			/*case novoAtendenteIdDepartamento == '':
				Swal.showValidationMessage('Selecione um departamento')
				break;*/
		}
	  }
	  
	}).then((result) => {
		
		if(result.isConfirmed){
			let novoAtendenteNome = $('#novoAtendenteNome').val();
			let novoAtendenteEmail = $('#novoAtendenteEmail').val();
			let novoAtendenteIdDepartamento = $('#novoAtendenteIdDepartamento').val();
			
			Swal.fire({title : 'Salvando atendente...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('novoAtendente', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id_atendentes + '&nome=' + novoAtendenteNome + '&email=' +  novoAtendenteEmail +
						'&id_departamento=' + JSON.stringify(novoAtendenteIdDepartamento)
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: (id_atendentes == '' ? 'Novo atendente' : 'Alterar atendente'),
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: (id_atendentes == '' ? 'Atendente não cadastrado' : 'Erro ao alterar atendente'),
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
		
		if(result.isDenied){
			Swal.fire({title : 'Alterando status atendente...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('statusAtendente', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id_atendentes
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: (status_atendente == 'ATIVO' ? 'Bloquear atendente' : 'Ativar atendente'),
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: 'Não foi possível alterar o status do atendente',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#tabelaAtendentes > tbody .excluirAtendente').on('click', function(){
	let id_atendentes = $(this).closest('tr').find('.id_atendentes').text().trim();
	let nome = $(this).closest('tr').find('.nome_atendente').text().trim();
	
	Swal.fire({
	  title: '<span class="text-purple">Excluir Atendente ?</span>',
	  html: '<span>Deseja excluir o atendente: <strong class="text-purple">' + nome + '</strong> ?</span>',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Excluir',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			fetch('excluirAtendente', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id_atendentes
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Exclusão realizada',
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: 'Não foi possível excluir',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})


$('#tabelaAtendentes > tbody .alterarPermissoes').on('click', function(){
	let id_atendentes = $(this).closest('tr').find('.id_atendentes').text().trim();
	let nome = $(this).closest('tr').find('.nome_atendente').text().trim();
	let permissoesPadrao = JSON.parse('{{permissoesPadrao|raw}}');
	let permissoesAtendente = ($(this).data('permissoes') == '' ? permissoesPadrao :  $(this).data('permissoes'));
	
	$.each(permissoesPadrao, function(index, p){
		var paKey = permissoesAtendente[index];
		if(!permissoesAtendente[index]){
			permissoesAtendente[index] = p;
		}else{
			delete permissoesAtendente[index];
			permissoesAtendente[index] = paKey;
			$.each(p, function(index2, sub){
				
				var subKey = permissoesAtendente[index][index2];
				if(!permissoesAtendente[index][index2]){
					permissoesAtendente[index][index2] = sub;
				}else{
					delete permissoesAtendente[index][index2];
					permissoesAtendente[index][index2] = subKey;
				}
			})
			
		}
	})
	
	permissoesHtml = '';
	$.each(permissoesAtendente, function(index, p){
	
	    subPermissao = '';
	    acoesPermissao = '';
	    $.each(p, function(subIndex, subP) {
		    if (typeof(subP) == 'object') {
		        if (subIndex != 'acoes') {
		            subPermissao += '<div class="col-12 mt-2">' +
		                                '<div class="d-flex align-items-center">' +
		                                    '<label class="text-purple me-2 fw-bold" for="'+ subIndex +'">'+ subIndex.charAt(0).toUpperCase() + subIndex.slice(1).replace('_', ' ') +'</label>' +
		                                    '<div class="form-check form-switch">' +
		                                        '<input class="form-check-input subtelaChk custom-checkbox" type="checkbox" id="'+ subIndex +'" data-parent="'+ index +'" '+ (subP.visualizar == 1 ? 'checked' : '') +'>' +
		                                    '</div>' +
		                                '</div>' +
		                            '</div>';
		        } else {
		            $.each(subP, function(acoesIndex, a) {
		                acoesPermissao += '<div class="col-12 mt-2">' +
		                                    '<div class="d-flex align-items-center">' +
		                                        '<label class="text-purple me-2 fw-bold" for="'+ acoesIndex +'">'+ acoesIndex.charAt(0).toUpperCase() + acoesIndex.slice(1).replace('_', ' ') +'</label>' +
		                                        '<div class="form-check form-switch">' +
		                                            '<input class="form-check-input acaoChek custom-checkbox" type="checkbox" id="'+ acoesIndex +'" data-parent="'+ index +'" '+ (a == 1 ? 'checked' : '') +'>' +
		                                        '</div>' +
		                                    '</div>' +
		                                '</div>';
		            });
		        }
		    }
		});

		permissoesHtml += '<div class="'+ (subPermissao || acoesPermissao ? 'col-lg-5 bg-manager-gray' : 'col-lg-5 col-md-6 col-12') +' mt-2 mb-2 text-start border-0 p-0 rounded">' +
		                    '<div class="header d-flex flex-row bg-purple align-items-center text-white p-2 rounded">' +
		                        '<h5 class="fw-bold mt-0 mb-0 me-2">'+ index.charAt(0).toUpperCase() + index.slice(1).replaceAll('_', ' ') +'</h5>' +
		                        '<div class="form-check form-switch">' +
		                            '<input class="form-check-input permissaoChk custom-checkbox" type="checkbox" id="'+ index +'" '+ (p.visualizar == 1 ? 'checked' : '') +'>' +
		                        '</div>' +
		                    '</div>' +
		                    '<div class="row flex-column ms-1 mb-1 sub-acoes" style="display: '+ (p.visualizar == 1 ? 'flex' : 'none') +';">'+ subPermissao + acoesPermissao + '</div>' +
		                 '</div>';

		// Evento para mostrar/ocultar sub-permissões e ações
		$(document).on('change', '.permissaoChk', function() {
		    var isChecked = $(this).is(':checked');
		    var container = $(this).closest('.col-lg-5');
		    container.toggleClass('bg-manager-gray', isChecked && container.find('.sub-acoes').children().length > 0);
		    container.find('.sub-acoes').css('display', isChecked ? 'flex' : 'none');
		});
	
	});

	
	let width = '100vw';
	if($(window).width() > 900){width = '50%';}
	
	Swal.fire({
		title: '<span class="text-purple">Permissões/Telas</span>',
		html: '<div id="permissoes" class="row d-flex justify-content-center gap-3">' + permissoesHtml + '</div>',
		showCloseButton: true,
		showCancelButton: true,
		focusConfirm: false,
		confirmButtonText: 'Salvar',
		cancelButtonText: 'Cancelar',
		scrollbarPadding: false,
		allowOutsideClick: false,
		confirmButtonColor: '#60b86c',
		scrollbarPadding: false,
		width: width,
		didOpen: () => {
			$('.swal2-close').blur();
			
			//$('#conversas').attr('disabled', true);
			//$('#chat').attr('disabled', true);
			
			$('.permissaoChk').on('change', function(){
				permissoesAtendente[$(this).attr('id')].visualizar = Number($(this).is(':checked'));
			})
			
			$('.subtelaChk').on('change', function(){
				permissoesAtendente[$(this).data('parent')][$(this).attr('id')].visualizar = Number($(this).is(':checked'));
			})
			
			$('.acaoChek').on('change', function(){
				//console.log($(this).attr('id'));
				permissoesAtendente[$(this).data('parent')]['acoes'][$(this).attr('id')] = Number($(this).is(':checked'));
			})
		},
		preConfirm: (value) => {
			let nenhumaOp = false;
			$.each(permissoesAtendente, function(subIndex, p){
				if(p.visualizar == 1){
					nenhumaOp = true;
				}
			})
			
			switch(true){
				case nenhumaOp == '':
					Swal.showValidationMessage('Marque pelo menos uma opção.');
					break;
			}
		}
	}).then((result) => {
		if(result.isConfirmed){
			
			fetch('alterarPermissaoAtendente', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id_atendentes + '&permissoes=' + JSON.stringify(permissoesAtendente)
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Permissões alteradas',
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: 'Não foi possível alterar as permissões',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#tabelaAtendentes > tbody .ativarDesativarFila').on('click', function(){
	let id_atendentes = $(this).closest('tr').find('.id_atendentes').text().trim();
	let fila = $(this).data('fila');
	let nome = $(this).closest('tr').find('.nome_atendente').text().trim();
	
	Swal.fire({
	  //title: 'Alterar status da fila de atendimento ?',
	  html: 'Deseja <strong class="text-purple">'+(fila == 1 ? 'desativar' : 'ativar')+'</strong> a fila de atendimento para <strong class="text-purple">'+ nome +'</strong>?',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: (fila == 1 ? 'Desativar' : 'Ativar'),
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: (fila == 1 ? 'var(--bs-danger)' : 'var(--bs-primary)'),
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Alterando status fila de atendimento...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('ativarDesativarFilaAtendente', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id_atendentes
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						//title: 'Exclusão realizada',
						title: res.Success,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: 'Não foi possível alterar status',
						title: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})


/*------------------------ HORARIOS -----------------------------------------*/
$("input[type='checkbox']").on('change', function(){
	if($(this).prop("checked")){
		$(this).closest('.card').find('.horario').prop("disabled",false);
	}else{
		$(this).closest('.card').find('.horario').prop("disabled",true);
	}
})

$('#tabelaDepartamentos > tbody .horariosDepartamento').on('click', function(){
	let id = $(this).data('id');
	let nome = $(this).data('nome');
	let encerrar_horario = $(this).data('encerrar_horario');
	let mensagem_fechado = $(this).data('mensagem_fechado');
	$('#modalHorariosSalvar').data('id', id);
	$('#modalHorariosTitle').text('Horário de funcionamento - Departamento ' + nome);
	
	let horario = JSON.parse(horarios[id]);
	$.each(horario, function(index, h) {
		if(h.aberto){
			$('#' + index + '_check').prop( "checked", true );
			if(!h.horarios){
				$('#' + index + '_inicio').prop( "disabled", false );
				$('#' + index + '_inicio').val(h.inicio);
				$('#' + index + '_fim').prop( "disabled", false );
				$('#' + index + '_fim').val(h.final);
			}else{
				
				$.each(h.horarios, function(index2, hDia){
					if(index2 == 0){
						$('#' + index + '_inicio').prop( "disabled", false );
						$('#' + index + '_inicio').val(hDia.inicio);
						$('#' + index + '_fim').prop( "disabled", false );
						$('#' + index + '_fim').val(hDia.final);
					}else{
						$('#'+ index).append(
							'<div class="horario_'+index+' d-flex">' +
								'<div class="form-group text-left me-1">' +
									'<label class="custom-control-label" for="{{dias[n].id}}_inicio"><h6 class="mb-0">Início '+(index2+1)+'</h6></label>' +
									'<div class="input-group">' +
										'<div class="input-group-addon">' +
											'<i class="fa fa-clock"></i>' +
										'</div>' +
										'<input type="text" class="form-control horario" placeholder="00:00" autocomplete="off"  value="'+hDia.inicio+'">' +
									'</div>' +
								'</div>' +
								'<div class="form-group ">' +
									'<label class="custom-control-label" for="{{dias[n].id}}_fim"><h6 class="mb-0">Fim '+(index2+1)+'</h6></label>' +
									'<div class="input-group">' +
										'<div class="input-group-addon">' +
											'<i class="fa fa-clock"></i>' +
										'</div>' +
										'<input type="text" class="form-control horario" placeholder="00:00" autocomplete="off" value="'+hDia.final+'">' +
									'</div>' +
								'</div>' +
							'</div>' +
							''
						);
					}
				})
				$('.horario').mask('H0:M0', maskHorarios);
			}
		}else{
			$('#' + index + '_check').prop( "checked", false );
			$('#' + index + '_inicio').prop( "disabled", true );
			$('#' + index + '_fim').prop( "disabled", true );
		}
		
		
	})
	if(encerrar_horario){
		$('#modal_encerrar').prop( "checked", true );
	}else{
		$('#modal_encerrar').prop( "checked", false );
	}
	$('#departamentoMensagemFechado').val(mensagem_fechado);
	
	$('#modalHorarios').modal('show');
})

$('.adicionar_horario').on('click', function(){
	var dias_id = $(this).data('dias_id');
	
	$('#'+ dias_id).append(
		'<div class="horario_'+dias_id+' d-flex">' +
			'<div class="form-group text-left me-1">' +
				'<label class="custom-control-label" for="{{dias[n].id}}_inicio"><h6 class="mb-0 fw-bold text-purple">Início '+($('#'+ dias_id).find('.horario_'+dias_id).length+1)+'</h6></label>' +
				'<div class="input-group">' +
					'<div class="input-group-addon bg-manager-gray border-0 text-purple">' +
						'<i class="fa fa-clock"></i>' +
					'</div>' +
					'<input type="text" class="form-control horario bg-manager-gray border-0" placeholder="00:00" autocomplete="off">' +
				'</div>' +
			'</div>' +
			'<div class="form-group ">' +
				'<label class="custom-control-label" for="{{dias[n].id}}_fim"><h6 class="mb-0 fw-bold text-purple">Fim '+($('#'+ dias_id).find('.horario_'+dias_id).length+1)+'</h6></label>' +
				'<div class="input-group">' +
					'<div class="input-group-addon bg-manager-gray border-0 text-purple">' +
						'<i class="fa fa-clock"></i>' +
					'</div>' +
					'<input type="text" class="form-control horario bg-manager-gray border-0" placeholder="00:00" autocomplete="off">' +
				'</div>' +
			'</div>' +
		'</div>' +
		''
	);
	$('.horario').mask('H0:M0', maskHorarios);
})


$('.remover_horario').on('click', function(){
	var dias_id = $(this).data('dias_id');
	var nHorarios = $('#'+ dias_id).find('.horario_'+dias_id).length;
	if(nHorarios > 1){
		$($('#'+ dias_id).find('.horario_'+dias_id)[nHorarios-1]).remove();
	}
})

$('#modalHorariosSalvar').on('click', function(){
	let id = $(this).data('id');
	if($('#modal_encerrar').prop('checked')){
		$('.horariosDepartamento[data-id='+id+']').data('encerrar_horario', 1) 
	}else{
		$('.horariosDepartamento[data-id='+id+']').data('encerrar_horario', 0) 
	}
	
	let nenhumDia = true;
	$.each($("input[type='checkbox']"), function(index, ck){
		if($(ck).prop('checked')){
			nenhumDia = false;
		}
	})
	
	if(nenhumDia){
		Swal.fire({
			title: 'Nenhum dia selecionado',
			text: 'Selecione pelo menos um dia da semana',
			scrollbarPadding: false,
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
		return;
	}
	
	var dias = {'segunda':'Segunda-feira','terca':'Terça-feira','quarta':'Quarta-feira',
					'quinta':'Quinta-feira','sexta':'Sexta-feira','sabado':'Sábado','domingo':'Domingo'}
	
	let horario = JSON.parse(horarios[id]);
	let err = false;
	$.each(horario, function(index, h) {
		console.log(index)
		if($('#' + index + '_check').prop("checked")){
			if($('#'+index+' .horario_'+index).length > 0){
				if(horario[index].inicio){delete horario[index].inicio;}
				if(horario[index].final){delete horario[index].final;}
				
				horario[index].horarios = [];
				horario[index].aberto = true;
				$.each($('#'+index+' .horario_'+index), function(index2, hDia) {
					var inicio = $(hDia).find('input:eq(0)').val();
					var fim = $(hDia).find('input:eq(1)').val();
					
					err = validaInicioFim(inicio, fim, dias[index]);
					if(err){return false;}
					
					horario[index].horarios.push({inicio: inicio,final: fim})
				})
				if(err){return false;}
				err = validaHorarios(horario[index].horarios, dias[index]);
				if(err){return false;}
			}else{
				var inicio = $('#' + index + '_inicio').val();
				var fim = $('#' + index + '_fim').val();
				
				err = validaInicioFim(inicio, fim, dias[index]);
				if(err){return false;}
				
				horario[index].aberto = true;
				horario[index].inicio = $('#' + index + '_inicio').val();
				horario[index].final = $('#' + index + '_fim').val();
			}
		}else{
			horario[index].aberto = false;
		}
	})
	
	//console.log(horario)
	//return;
	if(!err){
		horarios[id] = JSON.stringify(horario);
		
		fetch('alterarHorarioDepartamento', {
			method: 'POST',
			headers: {'Content-Type': 'application/x-www-form-urlencoded'},
			body: 'id=' + id + '&horarios=' + horarios[id] + '&encerrar_horario=' + $('#modal_encerrar').prop('checked') + '&mensagem_fechado=' + $('#departamentoMensagemFechado').val()
		})
		.then(function(res){ return res.json(); })
		.then(function(res){
			if(res.Success){
				$('.horariosDepartamento[data-id='+ id +']').data('mensagem_fechado', $('#departamentoMensagemFechado').val())
				
				Swal.fire({
					//title: '',
					text: res.Success,
					icon: 'success',
					confirmButtonColor: 'var(--bs-info)',
					scrollbarPadding: false
				}).then(() =>{
					//location.reload();
					$('#modalHorarios').modal('hide');
				})
			}else{
				Swal.fire({
					title: 'Não foi possível alterar horário',
					text: res.Erro,
					icon: 'error',
					confirmButtonColor: 'var(--bs-info)',
					scrollbarPadding: false
				}).then(() =>{
					//location.reload();
				})
			}
		})
	}
})

function validaInicioFim(inicio, fim, dia){	
	if(!moment(inicio, 'HH:mm').isValid() || !(inicio.length == 5)){
		Swal.fire({
			title: 'Horário inválido',
			text: 'Início ' + dia + ' não é um horário válido',
			scrollbarPadding: false,
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
		
		return true;
	}
	
	if(!moment(fim, 'HH:mm').isValid() || !(fim.length == 5)){
		Swal.fire({
			title: 'Horário inválido',
			text: 'Final ' + dia + ' não é um horário válido',
			scrollbarPadding: false,
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
		
		return true;
	}
	
	if(inicio == fim){
		Swal.fire({
			title: 'Horário inválido',
			text: dia + ' início e fim não podem ser iguais',
			scrollbarPadding: false,
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
		
		return true;
	}
	
	if(moment(fim, 'HH:mm') < moment(inicio, 'HH:mm')){
		Swal.fire({
			title: 'Horário inválido',
			text: 'Final não pode ser menor que início. Dia: ' + dia,
			scrollbarPadding: false,
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)',
			scrollbarPadding: false
		}).then(() =>{
			//location.reload();
		})
		
		return true;
	}
	
	return false;
}

function validaHorarios(horarios, dia){
	var inicio = horarios[0].inicio;
	var fim = horarios[0].final;
	if(horarios.length>1){
		for(var i = 1; i < horarios.length; i++) {
			if(!moment(horarios[i].inicio, 'HH:mm').isAfter(moment(fim, 'HH:mm'))){
				Swal.fire({
					title: 'Horário inválido',
					html: dia + ':<br>Horário Início '+(i+1)+' ('+horarios[i].inicio+') deve ser <b>MAIOR</b> que Horário Final '+i+' ('+fim+')' ,
					scrollbarPadding: false,
					icon: 'error',
					confirmButtonColor: 'var(--bs-info)',
					scrollbarPadding: false
				})
				return true;
			}
			
			inicio = horarios[i].inicio;
			fim = horarios[i].final;
		}
	}
	return false;
	/*$.each(horarios, function(index, h) {
			
		})*/
}

$('#modalHorarios').on('hidden.bs.modal', function () {
	$('#segunda').find('.horario_segunda:gt(0)').remove(); 
	$('#terca').find('.horario_terca:gt(0)').remove(); 
	$('#quarta').find('.horario_quarta:gt(0)').remove(); 
	$('#quinta').find('.horario_quinta:gt(0)').remove(); 
	$('#sexta').find('.horario_sexta:gt(0)').remove(); 
	$('#sabado').find('.horario_sabado:gt(0)').remove(); 
	$('#domingo').find('.horario_domingo:gt(0)').remove(); 
})

/*------------------------ HORARIOS -----------------------------------------*/







/*------------------------ FERIADOS -----------------------------------------*/
$('#feriados').on('click', function(){
	$('#modalFeriados').modal('show');
	buscaFeriados()
})

$('#cadastrarFeriado').on('click', function(){
	Swal.fire({
		title: '<span class="text-purple">Cadastrar Feriado</span>',
		html: 
			'<div class="row">' +
				'<div class="col-12">' +
					'<div class="form-group text-start">' +
						'<label for="numeroFeriado" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-solid fa-mobile-screen-button me-1"></i>Número</label>' +
						'<select id="numeroFeriado" class="selectpicker col-12 form-control form-control-sm" title="Número" data-live-search="true" autocomplete="off">' +
							'<option value="-1" class="" style="letter-spacing: 1px !important;" selected>Todos</option>' +
							{% for n in numeros %}
							'<option value="{{n.getIdNumeros}}" data-numero="{{n.getNumero}}" class="" style="letter-spacing: 1px !important;">{{n.getDescricao}} ({{n.getNumero}})</option>' +
							{% endfor %}
						'</select>' +
					'</div>' +
				'</div>' +
				
				'<div class="col-4">' +
					'<div class="form-group text-start">' +
						'<label for="dia" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-solid fa-calendar-day me-1"></i>Dia</label>' +
						'<select id="dia" class="col-12 form-control form-control-sm" title="Dia" data-live-search="true" autocomplete="off">' +
							{% for n in  1..31 %}
							'<option value="{{n}}" class="" style="letter-spacing: 1px !important;">{{n}}</option>' +
							{% endfor %}
						'</select>' +
					'</div>' +
				'</div>' +
				
				'<div class="col-4">' +
					'<div class="form-group text-start">' +
						'<label for="mes" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-regular fa-calendar-days me-1"></i>Mês</label>' +
						'<select id="mes" class="col-12 form-control form-control-sm" title="Mês" data-live-search="true" autocomplete="off">' +
							{% set meses = {
												1:{'nome':'Janeiro'},2:{'nome':'Fevereiro'},3:{'nome':'Março'},4:{'nome':'Abril'},
												5:{'nome':'Maio'},6:{'nome':'Junho'},7:{'nome':'Julho'},8:{'nome':'Agosto'},
												9:{'nome':'Setembro'},10:{'nome':'Outubro'},11:{'nome':'Novembro'},12:{'nome':'Dezembro'}
											}
							%}
							
							{% for n in  1..12 %}
							'<option value="{{n}}" class="" style="letter-spacing: 1px !important;">{{meses[n].nome}}</option>' +
							{% endfor %}
						'</select>' +
					'</div>' +
				'</div>' +
				
				'<div class="col-4">' +
					'<div class="form-group text-start">' +
						'<label for="ano" class="mb-1 mt-1 fw-bold text-purple"><i class="fa-solid fa-calendar me-1"></i>Ano</label>' +
						'<select id="ano" class="col-12 form-control form-control-sm" title="Ano" data-live-search="true" autocomplete="off">' +
							'<option value="-1" class="" style="letter-spacing: 1px !important;" selected>Todos</option>' +
							{% for n in  "now"|date("Y")..("now"|date("Y") + 10) %}
							'<option value="{{n}}" class="" style="letter-spacing: 1px !important;">{{n}}</option>' +
							{% endfor %}
						'</select>' +
					'</div>' +
				'</div>' +
				
				'<div class="col-lg-12">' +
					'<div class="form-group">' +
						'<div class="custom-control custom-checkbox text-start">' +
							'<input type="checkbox" class="custom-control-input" id="feriado_encerrar" autocomplete="off">' +
							'<label class="custom-control-label mt-2" for="feriado_encerrar"><h6 class="mt-1">Encerrar chamado</h6></label>' +
						'</div>' +
						'<h6 class="text-start">Caso desmarcado o chamado ficará com status \'<strong class="text-purple">AGUARDANDO ATENDENTE</strong>\'</h6>'+
					'</div>' +
					
				'</div>' +
				
				
				'<div class="col-lg-12 mt-0">' +
					'<div class="form-group 2 text-start">' +
						'<label for="mensagemFeriado" class="fw-bold text-purple mt-1 mb-1"><i class="fa-solid fa-message me-1"></i>Mensagem</label>' +
						'<textarea id="mensagemFeriado" class="form-control bg-manager-gray border-0" placeholder="Mensagem" autocomplete="off" style="z-index: 99;"></textarea>' +
					'</div>' +
				'</div>' +
			'</div>'
		,
		showCloseButton: true,
		showCancelButton: true,
		focusConfirm: false,
		confirmButtonText: 'Salvar',
		cancelButtonText: 'Cancelar',
		allowOutsideClick: false,
		confirmButtonColor: '#60b86c',
		scrollbarPadding: false,
		didOpen: () => {
			$('.swal2-close').blur()
			
			$('#numeroFeriado').selectpicker();
			$('#dia').selectpicker();
			$('#mes').selectpicker();
			$('#ano').selectpicker();
			
			$('#numeroFeriado,#dia,#mes,#ano').on('show.bs.select', function () {
				$('.swal2-actions').css('z-index', '0');
				$(this).parent().find('.bs-select-all').addClass('d-none');
				$(this).parent().find('.bs-deselect-all').css('font-size', '14px');
			});
			
		},
		preConfirm: (value) => {
			if($('#dia').val() == '' || $('#mes').val() == ''){
				Swal.showValidationMessage('Selecione pelo menos um dia e mês');
				return;
			}
			
			var dia = (Number($('#dia').val()).toString().length == 1 ? '0'+$('#dia').val() : $('#dia').val());
			var mes = (Number($('#mes').val()).toString().length == 1 ? '0'+$('#mes').val() : $('#mes').val());
			var data = moment(($('#ano').val() == -1 ? '2000' : $('#ano').val()) + '-' + mes + '-' +dia);
			if(!data._isValid){
				Swal.showValidationMessage('Selecione pelo menos um dia e mês');
				return;
			}
			
			if($('#mensagemFeriado').val() == ''){
				Swal.showValidationMessage('Informe uma mensagem');
				return;
			}
		}
	}).then((result) => {
		if(result.isConfirmed){
			var numero = $('#numeroFeriado').val();
			var dia = (Number($('#dia').val()).toString().length == 1 ? '0'+$('#dia').val() : $('#dia').val());
			var mes = (Number($('#mes').val()).toString().length == 1 ? '0'+$('#mes').val() : $('#mes').val());
			var ano = $('#ano').val();
			var data = moment(($('#ano').val() == -1 ? '2000' : $('#ano').val()) + '-' + mes + '-' +dia);
			var encerrar = ($('#feriado_encerrar').is(":checked") ? 1 : 0);
			var mensagem = $('#mensagemFeriado').val();
			
			
			Swal.fire({title : 'Cadastrando feriado...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('cadastrarFeriado', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'dia=' + dia + '&mes=' + mes + '&ano=' + ano + 
						'&numero=' + numero + '&mensagem=' + mensagem + '&encerrar=' + encerrar
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: res.Success,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						buscaFeriados();
					})
				}else{
					Swal.fire({
						title: 'Feriado não cadastrado',
						text: res.Erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					})
				}
			})
		}
	})

})

function buscaFeriados(){
	Swal.fire({title : 'Buscando feriados...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('buscarFeriados', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			var feriados = res.feriados;
			
			$('#tabelaFeriados > tbody').empty();
			$.each(feriados, function(i, f){
				$('#tabelaFeriados > tbody').append(
					'<tr class="text-muted">' +
						'<td>'+ f.idClientesFeriados +'</td>' +
						'<td>'+ (f.idNumeros == null ? 'Todos' : f.idNumeros.descricao + '(' + f.idNumeros.numero + ')') +'</td>' +
						'<td>'+ f.dia +'</td>' +
						'<td>'+ moment('2000-'+(Number(f.mes).toString().length == 1 ? '0'+f.mes : f.mes)+'-01').locale('pt-BR').format('MMMM') +'</td>' +
						'<td>'+ (f.ano == -1 ? 'Todos' : f.ano) +'</td>' +
						'<td>'+ (f.encerraChamado == 1 ? 'Sim' : 'Não') +'</td>' +
						'<td><i class="fa-solid fa-message" data-bs-toggle="tooltip" data-bs-original-title="'+ f.mensagem +'"></i></td>' +
						'<td>' +
							'<div class="float-end">' +
								'<a data-id="'+ f.idClientesFeriados +'"  class="btn btn-danger btn-xs btn-circle excluirFeriado d-flex w-20 h-20" href="javascript:void(0)" style=""><i class="fa fa-xmark m-auto"></i></a>' +
							'</div>' +
						'</td>' +
					'</tr>'
				);
			})
			
			initilizeTooltips();
			
			Swal.close();
		}else{
			Swal.fire({
				title: 'Feriado não cadastrado',
				text: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
		}
	})
}

$('#tabelaFeriados > tbody').on('click', '.excluirFeriado', function(){
	var id = $(this).data('id');
	
	Swal.fire({title : 'Excluindo feriado...', allowOutsideClick: false, scrollbarPadding: false});
	Swal.showLoading();
	
	fetch('excluirFeriado', {
		method: 'POST',
		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		body: 'id=' + id
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			Swal.fire({
				title: res.Success,
				icon: 'success',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				buscaFeriados();
			})
		}else{
			Swal.fire({
				title: 'Feriado não cadastrado',
				text: res.Erro,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			})
		}
	})
})

/*------------------------ FERIADOS -----------------------------------------*/


function validateEmail(email) 
{
	var re = /\S+@\S+\.\S+/;
	return re.test(email);
}


</script>
{% endblock %}