@extends('templates.adweb-admin')

@section('styles')
	<style media="screen">
		.agendamento-1.pagina{{$pagina->id}}{
			background: {{$pagina->cor_fundo}};
			padding-top: 50px;
			padding-bottom: 50px;
			color: {{$pagina->cor_fonte}}
		}
		.agendamento-1.pagina{{$pagina->id}} .logo{
			width: 150px;
			height: 150px;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #ccc;
			margin: 0 auto;
			border-radius: 50%;
			margin-bottom: 10px;
		}
		.agendamento-1.pagina{{$pagina->id}} .social-icons{
			margin-top: 10px;
			margin-bottom: 20px;
		}
		.agendamento-1.pagina{{$pagina->id}} .social-icons i{
			font-size: 25px;
			margin-right: 15px;
			color: {{$pagina->cor_fonte}};
		}
		.agendamento-1.pagina{{$pagina->id}} .btn.link{
			background: {{$pagina->cor_fonte}};
			border: 2px solid {{$pagina->cor_fonte}};
			color: {{$pagina->cor_fundo}};
		}
		.agendamento-1.pagina{{$pagina->id}} .btn.link:hover,
		.agendamento-1.pagina{{$pagina->id}} .btn.link:active,
		.agendamento-1.pagina{{$pagina->id}} .btn.link:checked,
		.agendamento-1.pagina{{$pagina->id}} .btn.link.active{
			background: {{$pagina->cor_fundo}};
			border: 2px solid {{$pagina->cor_fonte}};
			color: {{$pagina->cor_fonte}};
		}
		.botao{
			position: relative;
			padding-top: 40px;
		}
		.botao .remove_botao{
			position: absolute;
			right: 10px;
			top: 10px;
		}
		.dataAll{
			display: none;
		}
		.display{
			display: inherit;
		}
	</style>
	{{-- PLUGIN CALENDÁRIO --}}
	<link rel="stylesheet" href="{{asset('vendor/fullcalendar/main.min.css')}}">
	<link rel="stylesheet" href="{{asset('vendor/fullcalendar-plugins/daygrid/main.min.css')}}">
	<link rel="stylesheet" href="{{asset('vendor/fullcalendar-plugins/timegrid/main.min.css')}}">
	<link rel="stylesheet" href="{{asset('vendor/fullcalendar-plugins/bootstrap/main.min.css')}}">
	<link rel="stylesheet" href="{{asset('vendor/fullcalendar-plugins/interaction/main.min.css')}}">
@endsection
@section('navigation')
<div class="row">
	<div class="col-2 align-items-center d-flex justify-content-center">
		<a href="{{route('adweb.index')}}"><i style="font-size: 20px;" class="fa fa-chevron-left"></i></a>
  	</div>
  	<div class="col-10">
	  	<a class="copyUrl" href="javascript:void(0)" id="dominio">
		  {{Auth::user()->solicitacao->configuracao->site_app_url}}
	  	</a><br/>
	  	Este é o link para o seu site
  	</div>
</div>
@endsection
@section('conteudo')
	<div class="container-fluid">
		<div class="row">
			<div class="col-6">
				<p class="mt-4 mb-4 text-secondary"><b>Editar Página</b></p>
			</div>
			<div class="col-6 text-end">
				<a href="#" class="config-button" data-bs-toggle="modal" data-bs-target="#configuracaoModal"><i class="fa fa-cog"></i></a>
			</div>
		</div>
		<p class="text-center text-secondary mt-4">
			Toque no campo desejado para editar
		</p>
		<form action="{{route('adweb.update',$pagina->id)}}" method="post" enctype="multipart/form-data">
			{{ csrf_field() }}
			<input type="hidden" name="_method" value="PUT">
			<div class="mb-3">
				<label for="">Cor do fundo</label>
				<input type="color" onchange="this.form.submit()" name="cor_fundo" value="{{$pagina->cor_fundo}}">
			</div>
			<div class="mb-3">
				<label for="">Cor da fonte</label>
				<input type="color" onchange="this.form.submit()" name="cor_fonte" value="{{$pagina->cor_fonte}}">
			</div>
		</form>
		<div class="main box agendamento-1 pagina{{$pagina->id}}">
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#logoModal">
				<div class="logo" style="background-image: url('{{$pagina->imagem}}')"></div>
				<p><b>{{$pagina->titulo1}}</b></p>
			</section>
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#socialModal">
				<div class="social-icons">
					@if($pagina->facebook)
						<i class="fab fa-facebook"></i>
					@endif
					@if($pagina->instagram)
						<i class="fab fa-instagram"></i>
					@endif
					@if($pagina->youtube)
						<i class="fab fa-youtube"></i>
					@endif
					@if($pagina->linkedin)
						<i class="fab fa-linkedin"></i>
					@endif
					@if($pagina->twitter)
						<i class="fab fa-twitter"></i>
					@endif
					@if($pagina->whatsapp)
						<i class="fab fa-whatsapp"></i>
					@endif
					@if($pagina->email)
						<i class="fa fa-envelope"></i>
					@endif
				</div>
			</section>
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#descricaoModal">
				<h1 class="h3">{{$pagina->titulo2}}</h1>
				<p>
					{{$pagina->descricao}}
				</p>
			</section>
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#agendamentosModal">
				Visualizar Agendamentos
			</section>
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#horarioModal">
				Horário de atendimento
			</section>
			<section id="agendamentosModal2Button" class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#agendamentosModal2" style="display: none;">
			<!-- Section with display none -->
			</section>
		</div>
	</div>

	{{-- MODAL HORÁRIO DE ATENDIMENTO --}}
    <div class="modal fade" id="horarioModal" tabindex="-1" role="dialog" aria-labelledby="horarioModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="horarioModalLabel">Horário de Funcionamento</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
					<form class="box" action="{{route('adweb.update',$pagina->id)}}" method="post" enctype="multipart/form-data">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Segunda</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][segunda][inicio]" value="{{old('horario.segunda.inicio',$pagina->configuracao->horarioJson->segunda->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][segunda][fim]" value="{{old('horario.segunda.fim',$pagina->configuracao->horarioJson->segunda->fim)}}">
	                        </div>
	                    </div>
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Terça</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][terca][inicio]" value="{{old('horario.terca.inicio',$pagina->configuracao->horarioJson->terca->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][terca][fim]" value="{{old('horario.terca.fim',$pagina->configuracao->horarioJson->terca->fim)}}">
	                        </div>
	                    </div>
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Quarta</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][quarta][inicio]" value="{{old('horario.quarta.inicio',$pagina->configuracao->horarioJson->quarta->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][quarta][fim]" value="{{old('horario.quarta.fim',$pagina->configuracao->horarioJson->quarta->fim)}}">
	                        </div>
	                    </div>
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Quinta</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][quinta][inicio]" value="{{old('horario.quinta.inicio',$pagina->configuracao->horarioJson->quinta->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][quinta][fim]" value="{{old('horario.quinta.fim',$pagina->configuracao->horarioJson->quinta->fim)}}">
	                        </div>
	                    </div>
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Sexta</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][sexta][inicio]" value="{{old('horario.sexta.inicio',$pagina->configuracao->horarioJson->sexta->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][sexta][fim]" value="{{old('horario.sexta.fim',$pagina->configuracao->horarioJson->sexta->fim)}}">
	                        </div>
	                    </div>
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Sábado</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][sabado][inicio]" value="{{old('horario.sabado.inicio',$pagina->configuracao->horarioJson->sabado->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][sabado][fim]" value="{{old('horario.sabado.fim',$pagina->configuracao->horarioJson->sabado->fim)}}">
	                        </div>
	                    </div>
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Domingo</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][domingo][inicio]" value="{{old('horario.domingo.inicio',$pagina->configuracao->horarioJson->domingo->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][domingo][fim]" value="{{old('horario.domingo.fim',$pagina->configuracao->horarioJson->domingo->fim)}}">
	                        </div>
	                    </div>
	                    <div class="row form-group">
	                        <div class="col" style="max-width: 90px; padding-top: 10px;">
	                            <label>Feriados</label>
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][feriados][inicio]" value="{{old('horario.feriados.inicio',$pagina->configuracao->horarioJson->feriados->inicio)}}">
	                        </div>
	                        <div class="col" style="max-width: 20px; padding: 10px 0 0 0;">
	                            às
	                        </div>
	                        <div class="col">
	                            <input type="time" class="form-control" name="configuracao[horario_funcionamento][feriados][fim]" value="{{old('horario.feriados.fim',$pagina->configuracao->horarioJson->feriados->fim)}}">
	                        </div>
	                    </div>
	                    <button type="submit" class="btn btn-success btn-block" data-dismiss="modal">Salvar</button>
					</form>
                </div>
            </div>
        </div>
    </div>

	<!-- Modal LOGO -->
	<div class="modal fade" id="logoModal" tabindex="-1" aria-labelledby="logoModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="logoModalLabel">Nome e Imagem</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
					<p>
						Adicione um nome e uma imagem que representem você ou o tipo de conteúdo que seu público vai encontrar aqui.
					</p>
					<form class="box" action="{{route('adweb.update',$pagina->id)}}" method="post" enctype="multipart/form-data">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<div class="form-group mb-4">
							<label for="">Trocar Imagem/Logo</label>
							<input class="form-control" type="file" name="imagem">
						</div>
						<div class="form-group mb-4">
							<label for="">Nome</label>
							<input class="form-control" type="text" name="titulo1" value="{{old('titulo1',$pagina->titulo1)}}">
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
					</form>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal REDES SOCIAIS -->
	<div class="modal fade" id="socialModal" tabindex="-1" aria-labelledby="socialModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="socialModalLabel">Redes sociais</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
					<p>
						Configure os seus links de redes sociais. Você deve preencher os links sociais com a URL completa do seu perfil. Ex.: https://instagram.com/seunome
					</p>
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<div class="form-group mb-4">
							<label for="">Seu Facebook</label>
							<input class="form-control" type="text" name="facebook" value="{{old('facebook',$pagina->facebook)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Instagram</label>
							<input class="form-control" type="text" name="instagram" value="{{old('instagram',$pagina->instagram)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Youtube</label>
							<input class="form-control" type="text" name="youtube" value="{{old('youtube',$pagina->youtube)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Linkedin</label>
							<input class="form-control" type="text" name="linkedin" value="{{old('linkedin',$pagina->linkedin)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Twitter</label>
							<input class="form-control" type="text" name="twitter" value="{{old('twitter',$pagina->twitter)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Email</label>
							<input class="form-control" type="email" name="email" value="{{old('email',$pagina->email)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Whatsapp</label>
							<input class="form-control phone" type="text" name="whatsapp" value="{{old('whatsapp',$pagina->whatsapp)}}">
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal descrição -->
	<div class="modal fade" id="descricaoModal" tabindex="-1" aria-labelledby="descricaoModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="descricaoModalLabel">Título e descrição</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<div class="form-group mb-4">
							<label for="">Título</label>
							<input class="form-control" type="text" name="titulo2" value="{{old('titulo2',$pagina->titulo2)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Descricao</label>
							<textarea class="form-control" name="descricao" rows="5">{!!old('descricao',$pagina->descricao)!!}</textarea>
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal calendário -->
	<div class="modal fade" id="agendamentosModal" tabindex="-1" aria-labelledby="agendamentosModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="agendamentosModalLabel">Meus Agendamentos</h5>
		        	<button id="fecharCalendario" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
				  <div id="calendar{{$pagina->id}}" class="mb-3"></div>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal configuração -->
	<div class="modal fade" id="configuracaoModal" tabindex="-1" aria-labelledby="configuracaoModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="configuracaoModalLabel">Configurar página</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
					<p>
						Defina as configurações referentes a sua página.
					</p>
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<input type="hidden" name="ativa" value="0">
						<div class="form-check form-switch mb-4">
						  	<input class="form-check-input" name="ativa" value="1" {{old('ativa',$pagina->ativa ? 'checked' : '')}} type="checkbox" id="flexSwitchCheckDefault">
						  	<label class="form-check-label" for="flexSwitchCheckDefault">
								Página ativa<br/>
								<small>Ao desativar sua página, ela não estará mais visível para seus visitantes.</small>
							</label>
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal agendamentos -->
	<div class="modal fade" id="agendamentosModal2" tabindex="-1" aria-labelledby="agendamentosModal2" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 id="tituloData" class="modal-title">Meus Agendamentos </h5>
		        	<button onclick="fecharAgendamento()" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" data-bs-toggle="modal" data-bs-target="#agendamentosModal"></button>
		      	</div>
		      	<div class="modal-body">
				  	@foreach ($pagina->agendamentos as $key => $agendamento)
					  	<script type="text/javascript">console.log('{{!! $agendamento->data !!}}')</script>
						<div class="accordion">
							<div class="accordion-item dataAll data{{ date('Y-m-d', strtotime($agendamento->data)) }}">
								<h2 class="accordion-header" id="heading{{$agendamento->id}}">
									<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-{{$agendamento->id}}" aria-expanded="true" aria-controls="collapseOne">
									{{date('H:i',strtotime($agendamento->data))}}
									</button>
								</h2>
								<div id="accordion-{{$agendamento->id}}" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
									<div class="accordion-body">
										<p>
											<b>{{$agendamento->nome}}</b><br><br>
											<b>Dados para contato</b><br>
											<i class="fas fa-envelope"></i> {{$agendamento->email}} <br>
											<i class="fas fa-phone"></i> {{$agendamento->telefone}} <br><br>
											<b>Assunto</b><br>
											{{$agendamento->descricao}}
										</p>
									</div>
								</div>
							</div>
						</div>
					@endforeach
		      	</div>
		    </div>
	  	</div>
	</div>
	
@endsection

@section('scripts')
{{-- PLUGIN CALENDÁRIO --}}
<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<script src="https://kit.fontawesome.com/c48da2eb92.js" crossorigin="anonymous"></script>
<script src="{{asset('vendor/fullcalendar/main.min.js')}}"></script>
<script src="{{asset('vendor/fullcalendar/locales-all.min.js')}}"></script>
<script src="{{asset('vendor/fullcalendar-plugins/daygrid/main.min.js')}}"></script>
<script src="{{asset('vendor/fullcalendar-plugins/timegrid/main.min.js')}}"></script>
<script src="{{asset('vendor/fullcalendar-plugins/bootstrap/main.min.js')}}"></script>
<script src="{{asset('vendor/fullcalendar-plugins/interaction/main.min.js')}}"></script>
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="{{ asset('landing-page/js/jquery-mask-v1.14.11.js') }}"></script>
<script src="{{ asset('js/adweb-admin.js') }}"></script>

<script type="text/javascript">
	function setDate(data){
		var dateObj = new Date(data+' 00:00');
		var selectHoras = document.querySelector('#select_hora');
		document.querySelector('#label_data_agendamento').innerHTML = dateObj.toLocaleDateString('pt-BR');
		document.querySelector('#data_agendamento').value = data;
		selectHoras.innerHTML = '';

		$.post('api/agendamento/horas/'+data,{pagina_id: {{$pagina->id}}},function(response){
			for (var i = 0; i < response.length; i++) {
				var label = response[i]
				selectHoras.innerHTML += '<option value="'+label+'">'+label+'</option>';
			}
		});
	}

	function pauseCarousel(){
		var carousel = bootstrap.Carousel.getInstance(document.querySelector('#carouselExampleIndicators'));
		carousel.pause();
	}

	function fecharAgendamento(){  
		agendaEl = document.getElementsByClassName('dataAll');
		for(let index in agendaEl){
			let teste = agendaEl[index].classList;
			console.log(teste);
			teste.remove('display');
		}
	}
  $(function () {
    /* initialize the calendar
     -----------------------------------------------------------------*/
    var Calendar = FullCalendar.Calendar;
    var calendarEl = document.getElementById('calendar{{$pagina->id}}');
	var agendamentos = {!! $pagina->agendamentos !!};
	var eventos = [];
	var data = '';

	for (let index in agendamentos){
		let dataArray = agendamentos[index]['data'].split(' '); // Dividindo data e horario
		let horaArray = dataArray[1].split(':');                // Dividindo horas, minutos e segundos do horario

		eventos.push({
			title: horaArray[0] + ':' + horaArray[1] ,
			start: dataArray[0]
		});
	}

    var calendar = new Calendar(calendarEl, {
      	plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
      	header    : {
        	left  : 'prev,next',
        	center: 'title',
        	right: '',
      	},
      	locale: 'pt-br',
      	'themeSystem': 'bootstrap',
      	events    : eventos,
		height: "auto"
    });

	calendar.on('dateClick', function(info) {
		document.querySelector('#tituloData').innerHTML = 'Meus Agendamentos ' + info.dateStr
		document.getElementById('fecharCalendario').click();
		document.getElementById('agendamentosModal2Button').click();
		let agendaEl = document.getElementsByClassName('data' + info.dateStr);
		for (let index in agendaEl){
			agendaEl[index].className += ' display' 
		}
	});
    calendar.render();
  });
</script>
@endsection