@extends('layouts.app')
@section('title', trans('menu.schedule_title'))
@section('plugin-styles')
    <link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
	<link rel="stylesheet" href="{{ Module::asset('schedule:css/calendar.css') }}">
@stop
@section('content')
	@php
		$days = array(1=>'Mon', 2=>'Tue', 3=>'Wed', 4=>'Thu', 5=>'Fri', 6=>'Sat',7=>'Sun');
		$currentDate = date(config('settings.date_format'));
		$now = Carbon\Carbon::now();
		$weekText = $from->weekOfYear;
		$dateConfig = date(config('settings.date_format'), strtotime($date));
	@endphp
	<div class="content">
		<div class="content-header pb-1">
			@include('layouts.partials.single-page-header-schedule', [
				'userData' => $user,
				'mySchdule' => 1,
			])
		</div>
		@include('layouts.partials.excelModal')
		@include('layouts.partials.excelModalSendEmail')
		<div class="flex flex-wrap gap-4 justify-end items-center">
			<div class="flex flex-wrap gap-[6px]">
			  <div class="bg-custom-purple-300 rounded-2xl flex items-center py-1 pl-[17px] pr-4 gap-[7px]">
				<div class="h-[10px] w-[10px] rounded-full bg-custom-purple-500"></div>
				<h1 class="text-md-medium text-custom-purple-500">
					{!! trans('specialdays.title') !!}
				</h1>
			  </div>
			  <div class="bg-custom-yellow-200 rounded-2xl flex items-center py-1 pl-[17px] pr-4 gap-[7px]">
				<div class="h-[10px] w-[10px] rounded-full bg-custom-yellow-500"></div>
				<h1 class="text-md-medium text-custom-yellow-500">
					{!! trans('menu.vacationhour_title') !!}
				</h1>
			  </div>
			  <div class="bg-custom-red-200 rounded-2xl flex items-center py-1 pl-[17px] pr-4 gap-[7px]">
				<div class="h-[10px] w-[10px] rounded-full bg-custom-red-500"></div>
				<h1 class="text-md-medium text-custom-red-500">{!! trans('menu.absence_title') !!}</h1>
			  </div>
			  <div class="bg-custom-blue-100 rounded-2xl flex items-center py-1 pl-[17px] pr-4 gap-[7px]">
				<div class="h-[10px] w-[10px] rounded-full bg-custom-blue-500"></div>
				<h1 class="text-md-medium text-custom-blue-500">{!! trans('compensations.title') !!}</h1>
			  </div>
			</div>
		</div>
		<div data-toggle="calendar" id="calendar"></div>
		<div id="fc-popover" class="tooltip-container absolute z-[9999] bg-base-white shadow-base rounded-lg w-[336px] hidden">
			<div class="h-full w-full p-5 relative flex flex-col gap-4 cursor-default">
				<div id="fc-popover-close" class='tooltip-close absolute right-[10px] top-[10px] rounded-full bg-custom-grey-100 text-base-black h-[24px] w-[24px] flex justify-center items-center cursor-pointer'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18 6L6 18M6 6L18 18' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></div>
					<div id="popover-content"></div>
			</div>

		</div>
  
	</div>
@stop
@section('footer-script')
<script type="text/javascript" src="{{asset('vendors/daterangepicker/js/daterangepicker.js')}}"></script>

	<script>
        var s_date = '{{request()->has('date') && request()->get('date') != "" ? date(request()->get('date')) : ''}}';
        date = (s_date  != "") ? moment(s_date , "{{getDateFormat()}}") : '';

        $('body').on('click', 'button.email', function(e) {
			e.preventDefault();
			var week = '{{$week}}';
			PDRequest({
				type    : "GET",
				url     : '{{ route('users.schedules', $id)}}?week='+week+'&email=1'
			});
		});

		$(document).ready(function() {
			$('body').on('click', '.printOnPage', function(e) {
				var monthId = calendar.getDate().getMonth() + 1;				
				var scheduleType = "indexByMonth";
				var exportType = $(this).attr('data-name');
				var from = "{{$from}}";
				var id = "{{$id}}";
				var to = "{{$to}}";
				var week = '{{$week}}';
				var date = s_date;
				var url = "{{route('user.schedules.index-by-id-excel')}}"+'?from='+from+ '&to='+to+ '&exportType='+exportType+ '&week='+week+ '&id='+id+ '&scheduleType='+scheduleType+ '&date='+date+ '&monthId='+monthId;
				var myWindow = window.open(url, "");
			});
			$('body').on('click', '.printOnPageSendMail', function(e) {
				var scheduleType = "indexByMonth";
				var menuType = "my";
				var exportType = $(this).attr('data-name');
				var from = "{{$from}}";
				var id = "{{$id}}";
				var to = "{{$to}}";
				var week = '{{$week}}';
				var date = s_date;
				var url = "{{route('schedules.send-as-email')}}"+'?from='+from+ '&to='+to+ '&exportType='+exportType+ '&week='+week+ '&id='+id+ '&menuType='+menuType+ '&scheduleType='+scheduleType+ '&date='+date;
				var myWindow = window.open(url, "");
			});

				let schedule = @json($events);
				let eventVacation = @json($eventsVacation);
				let eventsLeave = @json($eventsLeave);
				let eventsCompensation = @json($eventsCompensation);
				let eventsSday = @json($eventsSday);
				
				const calendarEl = document.getElementById('calendar');
        		const calendar = new FullCalendar(calendarEl, {
					initialView: 'dayGridMonth',
					headerToolbar: {
						left: 'title prev,next today',
						center: '',
						right: '',
					},

					locale: '{{ app()->getLocale() }}',
					buttonText: {
						today: '{{ trans("menu.today_title") }}',
						month: '{{ trans("title.month") }}',
						week: '{{ trans("title.week") }}',
						day: '{{ trans("forms.lbl_day") }}',
						year: '{{ trans("forms.lbl_year") }}'
					},
					plugins: [dayGridPlugin],
					eventSources: [
						{
							events: schedule,
						},
						{
							events: eventVacation,
						},
						{
							events: eventsLeave,
						},
						{
							events: eventsCompensation,
						},
						{
							events: eventsSday,
						}
					],
					selectable: true,
					selectHelper: true,
					firstDay: 1,
					displayEventTime: false,
					locale: '{{ app()->getLocale() }}',

					eventClick: function (info) {
						const event = info.event;
						const jsEvent = info.jsEvent;
						const timeLabel = @json(__('forms.time'));
						const breakLabel = @json(__('forms.break_time'));
						if (event.extendedProps.isVacation) return;
						jsEvent.preventDefault();

						let content = `
							<strong class="text-md-semibold text-custom-grey-900 text-left">${event.extendedProps.workstation}</strong><br>
							${event.title}<br><br>
							<strong class="text-xs-regular text-custom-grey-500 text-left">${timeLabel}:</strong><br>
							${event.extendedProps.start_time} - ${event.extendedProps.end_time}<br>
						`;

						if (event.extendedProps.breakTimeString) {
							content += `
								<strong class="text-xs-regular text-custom-grey-500 text-left">${timeLabel}:</strong><br>
								${event.extendedProps.breakTimeString}<br>
							`;
						}

						const popover = document.getElementById('fc-popover');
						const popoverContent = document.getElementById('popover-content');
						popoverContent.innerHTML = content;

						popover.style.visibility = 'hidden';
						popover.classList.remove('hidden');

						const popoverWidth = popover.offsetWidth;
						const popoverHeight = popover.offsetHeight;
						const windowWidth = window.innerWidth;
						const windowHeight = window.innerHeight;

						popover.classList.add('hidden');
						popover.style.visibility = 'visible';

						let left;
						if (jsEvent.pageX + 10 + popoverWidth <= windowWidth) {
							left = jsEvent.pageX + 10;
						} else {
							left = jsEvent.pageX - popoverWidth - 10;
							if (left < 10) left = 10;
						}

						let top;
						if (jsEvent.pageY + 15 + popoverHeight <= windowHeight) {
							top = jsEvent.pageY + 15;
						} else {
							top = jsEvent.pageY - popoverHeight - 15;
							if (top < 10) top = 10;
						}

						popover.style.top = top + 'px';
						popover.style.left = left + 'px';
						popover.classList.remove('hidden');
					}


				});

				calendar.render();

				$('#fc-popover-close').click(function() {
					$('#fc-popover').addClass('hidden');
				});

				$(document).on('click', function(e) {
					if (!$(e.target).closest('#fc-popover').length && !$(e.target).closest('.fc-event').length) {
						$('#fc-popover').addClass('hidden');
					}
				});

					
				setTimeout(function () {

					$('.fc-toolbar').css('margin-top', '0');

					const $toolbarChunks = $('.fc-toolbar-chunk');
					if ($toolbarChunks.length >= 3) {
						const $fcRight = $toolbarChunks.eq(2);
						const customHeaderHtml = `
							<div class="flex bg-custom-grey-50 rounded-[8px] w-max items-center p-[8px]">
								<div class="mr-2">
									<a href="{{ route('users.schedules', $user->id) }}" 
									class="tabs-btn-box">
										{{ trans('forms.lbl_weekly') }}
									</a>
								</div>
								<div>
									<a href="{{ route('users.schedulesMonthly', $user->id) }}" 
									class="tabs-btn-box min-w-[94px] text-custom-grey-700 bg-base-white shadow active">
										{{ trans('forms.lbl_monthly') }}
									</a>
								</div>
							</div>
						`;
						$fcRight.html(customHeaderHtml);
					}

					$('.fc-icon').addClass('!bg-custom-orange-25 !text-custom-orange-900');
					$('.fc .fc-scrollgrid thead th span').css('color', 'inherit');
				}, 0);


		});

		function cb(start, end) {
            $('#reportrange span.date-text').html(start.format('D MMM, YYYY'));
            window.location = "{{route('users.schedules', $id)."?date="}}"+start.format(current_date_format)
        }

        $('#reportrange').daterangepicker({
            opens           : 'left',
            singleDatePicker: true,
            showDropdowns   : true,
			showWeekNumbers: true,
            @if(request()->has('date') && request()->get('date') != "")
                startDate      : (date != "") ? date : moment(),
            @endif
            locale          : {
                format          : "{{getDateFormat()}}",
                "firstDay": 1,
                "daysOfWeek": daysOfWeek,
                "monthNames": monthNames
            },
            showDropdowns       : true
        }, cb);
	</script>
@endsection