@push('head')
    <script src='{!! url('fullcalendar/main.js') !!}'></script>
    <script src='{!! url('fullcalendar/locales/tr.js') !!}'></script>
	<link href='{!! url('fullcalendar/main.css') !!}' rel='stylesheet' />
	<style>
	.fc-event{
		cursor: pointer;
	}
	</style>
    <script>
	/*
	function alinamadi(mesaj = "") {
		if (mesaj != "") {
			var element = document.getElementById("hataMesaji");
			element.innerHTML = mesaj+" ";
		}
		
		window.scrollTo(0, 0);
		var element = document.getElementById("alinamadi");
		element.classList.remove("hidden");
	}
	*/
	function randevuAlinabilirText(num) {
		return num + " randevu alınabilir";
    }
	
	function cekimliAlText(saat) {
		var str = "";
		switch(parseInt(saat.slice(-1))) {
			case 0:
			case 9:
				str += "'a";
				break;
			case 1:
			case 3:
			case 4:
			case 5:
			case 8:
				str += "'e";
				break;
			case 2:
			case 7:
				str += "'ye";
				break;
			case 6:
				str += "'ya";
				break;
		}
		return str + " al";
	}
	
    document.addEventListener('DOMContentLoaded', function() {
		var today = new Date();
		today = new Date(today.getTime() - today.getTimezoneOffset() * 60000);
		var nextMonth = new Date();
		nextMonth.setMonth(nextMonth.getMonth()+1);
		nextMonth = nextMonth.toISOString().slice(0, 10);

        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
		  locale: 'tr',
		  timeZone: 'UTC',
		  events: '{!! url('musait/'.$doctor->id) !!}',
          initialView: 'dayGridMonth',
		  headerToolbar: { center: 'dayGridMonth,timeGridWeek' },
		  validRange: {
			start: today, // doesn't accept time, just date
			end: nextMonth
		  },
		  dateClick: function(info) {
			if (info.view.type == "dayGridMonth")
				calendar.changeView('timeGridWeek', info.dateStr);
		  },
		  views: {
			dayGridMonth: {
			  dayMaxEventRows: 1,
			  moreLinkClick: "week",
			  moreLinkText: randevuAlinabilirText
			},
			timeGridWeek: {
			  allDaySlot: false,
			  slotDuration: "00:15",
			  scrollTime: "08:00",
			  expandRows: true
			}
		  },
		  eventContent: function(arg) {
			if (arg.event.start < today)
				arg.event.setProp('display', 'none');
			else
				return arg.timeText + cekimliAlText(arg.timeText);
		  },
		  eventClick: function(info) {
			var url = "{{ route('randevuDogrula', [$doctor->id, ':zaman']) }}";
			var isoDate = info.event.start.toISOString();
			{{-- var isoButInTurkey = isoDate.substring(0, isoDate.length - 1) + "{!! \Carbon\Carbon::now('Europe/Istanbul')->getOffsetString(); !!}"; --}}
			url = url.replace(':zaman', isoDate);
			location.href = url;
			/*
			if (confirm("{{ $doctor->name }} için,\n"+
				info.event.start.toLocaleDateString("tr-TR") + " günü\n"+
				info.event.start.toLocaleTimeString("tr-TR") + " ve "+ info.event.end.toLocaleTimeString("tr-TR") + " arasına \n"+
				"randevu almak istediğinize emin misiniz?")) {
					
				let _token = $('meta[name="csrf-token"]').attr('content');
				$.ajax({
					url: "{{ route("randevuAl2") }}",
					type: "POST",
					data: "_token="+_token+"&doctor={{ $doctor->id }}&start="+info.event.start.toISOString(),
					dataType: 'json',
					success:function(response, textStatus, xhr){
						console.log(response);
						console.log(xhr.status);
						if (xhr.status != 201) {
							alinamadi(('message' in response) ? response.message : "");
						} else {
							//location.href = '';
						}
					},
					error:function(response){
						alinamadi();
					}
				});
			}
			*/
		  }
		});
        calendar.render();
      });
	 </script>
@endpush

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-2xl text-gray-800 ">
           <span class="border-2 border-gray-400 px-2">3</span> <span class="font-bold">{{ $doctor->name }}</span> için randevu almak istediğiniz saati seçin
        </h2>
    </x-slot>

    <div class="py-5">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
					@if (session('takvim_hata'))
					<div id="alinamadi" class="bg-red-50 p-4 rounded flex items-start text-red-600 my-4 shadow-lg max-w-xl mx-auto">
						<div class="text-lg">
							<svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-5 pt-1" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.597 17.954l-4.591-4.55-4.555 4.596-1.405-1.405 4.547-4.592-4.593-4.552 1.405-1.405 4.588 4.543 4.545-4.589 1.416 1.403-4.546 4.587 4.592 4.548-1.403 1.416z"/></svg>
						</div>
						<div class=" px-3">
							<h3 class="text-red-800 font-semibold tracking-wider">
								Randevunuz alınamadı 
							</h3>
							<p class="pt-2">{{ session('takvim_hata') }}&nbsp;Sayfayı yenileyip tekrar deneyin, yine randevu alamazsanız Mediko Sosyal'i arayıp randevu alabilirsiniz.
							</p>
						</div>
					</div>
					@endif
					<div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>