@push('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}};
		}
	</style>
@endpush
<div class="container-fluid agendamento-1 pagina{{$pagina->id}}">
	<div class="main box" onclick="">
		<div class="logo" style="background-image: url('{{$pagina->imagem}}')"></div>
		<p class="text-center"><b>{{$pagina->titulo1}}</b></p>
		<div class="social-icons text-center">
			@if($pagina->facebook)
				<a href="{{$pagina->facebook}}" target="_blank"><i class="fab fa-facebook"></i></a>
			@endif
			@if($pagina->instagram)
				<a href="{{$pagina->instagram}}" target="_blank"><i class="fab fa-instagram"></i></a>
			@endif
			@if($pagina->youtube)
				<a href="{{$pagina->youtube}}" target="_blank"><i class="fab fa-youtube"></i></a>
			@endif
			@if($pagina->linkedin)
				<a href="{{$pagina->linkedin}}" target="_blank"><i class="fab fa-linkedin"></i></a>
			@endif
			@if($pagina->twitter)
				<a href="{{$pagina->twitter}}" target="_blank"><i class="fab fa-twitter"></i></a>
			@endif
			@if($pagina->whatsapp)
				<a href="https://api.whatsapp.com/send?phone=55{{trim_string_full($pagina->whatsapp)}}"><i class="fab fa-whatsapp"></i></a>
			@endif
			@if($pagina->email)
				<a href="mailto:{{$pagina->email}}"><i class="fa fa-envelope"></i></a>
			@endif
		</div>
		<h1 class="text-center h3 mb-4">{{$pagina->titulo2}}</h1>
		<p class="text-center mb-4">
			{{$pagina->descricao}}
		</p>
		<button style="display: none;" id="ativarModal" type="button" name="button" data-bs-toggle="modal" data-bs-target="#agendamentoModal" class="btn link">Fazer agendamento</button>
		<div id="calendar{{$pagina->id}}"></div>
	</div>
</div>
@push('scripts')
<!-- Modal AGENDAMENTOS -->
<div class="modal fade" id="agendamentoModal" tabindex="-1" aria-labelledby="agendamentoModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="agendamentoModalLabel">Realizar Agendamento</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form class="" action="{{route('agendamento.store')}}" method="post">
					{{ csrf_field() }}
					<input type="hidden" name="pagina_id" value="{{$pagina->id}}">
					<input type="hidden" name="dia" value="" id="data_agendamento">

					<p>
						Agendamento para o dia <b id="label_data_agendamento"></b>
					</p>
					<div class="mb-3">
						<label for="">Selecione um horário para seu atendimento</label>
						<select class="form-control" name="hora" id="select_hora">
						</select>
					</div>
					<div class="mb-3">
						<label for="">Seu nome*</label>
						<input type="text" required class="form-control" name="nome" value="">
					</div>
					<div class="mb-3">
						<label for="">Email*</label>
						<input type="email" required class="form-control" name="email" value="">
					</div>
					<div class="mb-3">
						<label for="">Telefone*</label>
						<input type="text" required class="form-control phone" name="telefone" value="">
					</div>
					<div class="mb-3">
						<label for="">Descreva brevemente o motivo do seu agendamento</label>
						<textarea name="descricao" rows="8" class="form-control"></textarea>
					</div>
					<button type="submit" class="btn btn-success">Agendar</button>
				</form>
			</div>
		</div>
	</div>
</div>
<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 () {
    /* initialize the calendar
     -----------------------------------------------------------------*/
    var Calendar = FullCalendar.Calendar;
    var calendarEl = document.getElementById('calendar{{$pagina->id}}');
	var bladeHorarios = {!! $pagina->configuracao->horario_funcionamento !!};
	var Horarios = [];
	for (let index in bladeHorarios) {
		let dayOfWeek = 0;
		switch(index){
			case 'segunda': dayOfWeek = 1; break;
			case 'terca': dayOfWeek = 2; break;
			case 'quarta': dayOfWeek= 3; break;
			case 'quinta': dayOfWeek = 4; break;
			case 'sexta': dayOfWeek = 5; break;
			case 'sabado': dayOfWeek = 6; break;
			case 'domingo': dayOfWeek = 7;
		}
		if( bladeHorarios[index]['inicio'] && bladeHorarios[index]['fim'] ){
			Horarios.push({
				daysOfWeek: [dayOfWeek],
				startTime: bladeHorarios[index]['inicio'],
				endTime: bladeHorarios[index]['fim']
			})
		}
	}
	console.log(Horarios); // remover depois

    var calendar = new Calendar(calendarEl, {
      	plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
      	header    : {
        	left  : 'prev,next',
        	center: 'title',
        	right: '',
      	},
      	locale: 'pt-br',
      	'themeSystem': 'bootstrap',
		businessHours: Horarios,
		height: "auto",
    });
	calendar.on('dateClick', function(info) {
		console.log(info);
		setDate(info.dateStr);
		let classes = info.dayEl.className.split(' ');

		if(classes.includes('fc-past')){
			console.log('data passada');
		} else {
			document.getElementById('ativarModal').click();
		}
	});
    calendar.render();
  });
</script>
@endpush