<section class="container-fluid">	
	<div class="row">
		<div class="col-md-8">
			<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
				<div class="card-header bg-white">
					<div class="float-left">
						<h5 class="card-title">Calendar</h5>
					</div>
				</div>
				<div class="card-body">
					<div class="card bg-white no-shadow">
						<div class="card-body">
							<div class="row">
								<div class="col-2">
									<?php foreach ($zoom_account as $type) { ?>
                                        <br><div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['account']; ?>" class="text-center mt-2 text-white" style="background-color: <?php echo $type['color_code']; ?>;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; height:28px;"><?php echo $type['short_name']; ?></div>
                                    <?php } ?> 
								</div>
								<div class="col-10">
									<div id="calendar"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
				<div class="card-header bg-white">
					<h5 class="card-title">Today Zoom Booking</h5>
				</div>
				<div class="card-body">
					<div class="card bg-white no-shadow">
						<div class="card-body">
							<?php if(!empty($zoom_booking_day)): foreach($zoom_booking_day as $type): ?>
								<div class="row">
									<div class="col-auto">
										<p class="text-uppercase" data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['account']; ?>"><?php echo $type['account']; ?></p>
									</div>
									<div class="col text-right">
										<p><?php echo date('d-m-Y',strtotime($type['start_date'])).' ['.$type['start_time'].']'; ?></p>
									</div>
								</div>
							<?php endforeach;endif; ?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="container" style="padding-bottom: 2rem;">
	<div class="row">
		<div class="col-sm-12">
			<div class="tab-content" id="tabContent">
				<div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
					<div class="card bg-light-transparent">
						<div class="card-header bg-light">
							<h4 class="card-title float-left"><?php echo (empty($ID))?'New ':'Edit '; ?>Zoom Booking Form</h4>
							<div class="float-right">
								<?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
									<button type="button" id="updateZoomAccount" class="btn btn-sm btn-primary" onclick="open_modal('create_zoom_account')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Zoom Account">Update Zoom Account</button>
								<?php } ?>
							</div>
						</div>
						<div class="card-body">
							<div class="card no-shadow">
								<div class="card-body">
									<form id="zoombookingForm" class="form" action="<?php echo ($ID)?base_url('hr/Serviceform/zoom_booking_edit'):base_url('hr/Serviceform/zoom_booking_save'); ?>" method="POST" onsubmit="return confirm('Do you really want to submit the form?')">
										<input type="text" class="form-control" name="zoomBookingID" id="zoomBookingID" value="<?php echo $ID; ?>" hidden>

										<div class="form-row">
											<div class="col-12 col-sm-6">
												<div class="form-group">
													<label>Name</label>
													<input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo ($ID)?$zoomBookingDetail['created_name']:$_SESSION['user']['name']; ?>" readonly>
													<input type="text" class="form-control" name="reqName_id" id="reqName_id" value="<?php echo ($ID)?$zoomBookingDetail['createdBY']:$_SESSION['user']['id']; ?>" hidden>
												</div>
											</div>

											<div class="col-12 col-sm-6">
												<div class="form-group">
													<label>Email</label>
													<input type="" class="form-control" name="email" id="email" value="<?php echo (!empty($ID))?$zoomBookingDetail['created_email']:$_SESSION['user']['email']; ?>" readonly>
												</div>
											</div>

											<div class="col-12 col-sm-6">
												<div class="form-group">
													<label>Department</label>
													<input type="text" class="form-control" name="department" id="department" value="<?php echo ($ID)?$zoomBookingDetail['created_dept_name'].' ['.$zoomBookingDetail['created_branch_name'].']':$_SESSION['user']['department_name'].' ['.$_SESSION['user']['branch_name'].']'; ?>" readonly>
													<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo ($ID)?$zoomBookingDetail['created_department_id']:$_SESSION['user']['department_id']; ?>" hidden>
												</div>
											</div>

											<div class="col-12 col-sm-6">
												<div class="form-group">
													<label>Date Request</label>
													<input type="text" class="form-control" name="reqDate" id="reqDate" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($zoomBookingDetail['createdTS'])):date('d-m-Y'); ?>" readonly>
												</div>
											</div>
										</div>

										<div class="form-row">
											<div class="col-12 col-sm-3">
												<div class="form-group">
													<label>Start Date</label>
													<input type="text" class="form-control datepicker" name="start_date" id="start_date" value="<?php echo ($ID)?date('d-m-Y',strtotime($zoomBookingDetail['start_date'])):''; ?>" required onchange="check_booking_date()">
												</div>
											</div>

											<div class="col-12 col-sm-3">
												<div class="form-group">
													<label>Start Time</label>
													<input type="time" class="form-control" name="start_time" id="start_time" value="<?php echo (!empty($ID))?$zoomBookingDetail['start_time']:''; ?>" required onchange="check_booking_date()">
												</div>
											</div>

											<div class="col-12 col-sm-3">
												<div class="form-group">
													<label>End Date</label>
													<input type="text" class="form-control datepicker" name="end_date" id="end_date" value="<?php echo ($ID)?date('d-m-Y',strtotime($zoomBookingDetail['end_date'])):''; ?>" required onchange="check_booking_date()">
												</div>
											</div>

											<div class="col-12 col-sm-3">
												<div class="form-group">
													<label>End Time</label>
													<input type="time" class="form-control" name="end_time" id="end_time" value="<?php echo (!empty($ID))?$zoomBookingDetail['end_time']:''; ?>" required onchange="check_booking_date()">
												</div>
											</div>
										</div>

										<h4 class="text-center" id="complete_fill_note"><b style="color: red;">*Please Fill In Date Start, Date End, Time Start, Time End*</b></h4>
										<div id="booking_detail">
											<div class="form-row">
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label>Purpose</label>
														<select class="form-control" name="meeting_type" id="meeting_type" required>
															<option value="-1" selected disabled>-- Please Select --</option>
															<option value="0" <?php echo ($ID && $zoomBookingDetail['meeting_type'] == 0)?'selected':''; ?>>Meeting</option>
															<option value="1" <?php echo ($ID && $zoomBookingDetail['meeting_type'] == 1)?'selected':''; ?>>Webinar</option>
														</select>
													</div>
												</div>

												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label>Zoom Account</label>
														<select class="form-control" id="account_id" name="account_id" required>
															<option value="-1" disabled selected>-- Please Select --</option>
															<?php if($zoom_account) foreach($zoom_account as $acc){ ?>
																<option value="<?php echo $acc['ID']; ?>" <?php echo ($ID && $zoomBookingDetail['account_id'] == $acc['ID'])?'selected':''; ?>><?php echo $acc['account'].' (Meeting User: '.$acc['meeting_user'].', Webinar User: '.$acc['webinar_user'].')'; ?></option>
															<?php } ?>
														</select>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<label>Topic</label>
														<input type="text" class="form-control" name="topic" id="topic" value="<?php echo ($ID)?$zoomBookingDetail['topic']:'' ?>" required>
													</div>
												</div>
											</div>

											<div class="form-row" <?php echo (isset($mode) && ($mode == 'view'))?'style="display: none;"':''; ?>>
												<div class="col-12">
													<h5><input type="checkbox" name="booking_checker" id="booking_checker" style="height: 1rem; width: 1rem;" onclick="checkbox(this)"> Please tick if you are booking for someone else.</h5>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12 col-sm-6 d-none" id="guest_details_form">
													<div class="form-group">
														<label>Guest Name [Department]</label>
														<select class="form-control select" name="guest_details" id="guest_details">
															<option value="-1" selected disabled>-- Please Select --</option>
															<?php if($listName) foreach($listName as $key => $gID){ ?>
																<?php if(($_SESSION['user']['id']) != $gID['id']){ ?>
																	<option value="<?php echo $gID['id']; ?>"><?php echo $gID['name'].' ['.$gID['department_short_name'].']'; ?></option>
																<?php } ?>
															<?php } ?>
														</select>
													</div>
												</div>

												<?php if(!empty($ID) && !empty($zoomBookingDetail)){ ?>
													<?php if($zoomBookingDetail['requester_id'] != $zoomBookingDetail['createdBY']){ ?>
														<div class="col-12 col-sm-6">
															<div class="form-group">
																<label>Guest Name [Department]</label>
																<input type="text" class="form-control" name="guest_name_input" id="guest_name_input" value="<?php echo $zoomBookingDetail['requester_name'].' ['.$zoomBookingDetail['department_short_name'].']'; ?>" readonly>
																<input type="text" class="form-control" name="guest_details_input" id="guest_details_input" value="<?php echo $zoomBookingDetail['requester_id']; ?>" hidden>
															</div>
														<?php } ?>
													</div>
												<?php } ?>
											</div>
											
											<div class=" form-row float-right" <?php echo (isset($mode) && ($mode == 'view'))?'style="display: none;"':''; ?>>
												<a class="btn btn-light" href="<?php echo base_url('hr/serviceform/zoom_booking_list/'); ?>">Cancel</a>
												<button type="submit" class="btn btn-primary text-right">Submit</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- modal edit zoom detail -->

<div class="modal fade d-print-none" id="update_zoom_modal" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg" id="update_zoom_modal_size">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="update_zoom_modal_title">Add/Update Zoom</h5>&emsp;
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<form id="zoomForm" class="form">
				<div class="modal-body">
					<div id="update_zoom_modal_content"></div>

					<div class="row pt-3">
						<div class="col-12">
							<div class="btn-group float-right">
								<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
								<button type="button" id="saveZoomBtn" class="btn btn-primary">Save</button>
							</div>
						</div>
					</div>

					<hr>

					<div class="row" id="zoom_account_list_table">
						<div class="col-12">
							<label>List Zoom</label>
							<div class="table-responsive">
								<table id="filter_table_zoom" class="table table-bordered">
									<thead>
										<th>#</th>
										<th>Account</th>
										<th>Username</th>
										<th>Detail</th>
										<th>Action</th>
									</thead>
									<tbody></tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- modal edit zoom detail -->

<?php echo (!empty($approval))?$approval:''; ?>

<style type="text/css">
	.tooltipevent
	{
		width:auto;
		height:auto;
		background:rgba(0,0,0,0.75);
		position:absolute;
		color: #fff;
		z-index:10001;
		padding:10px 10px 10px 10px ;  
		line-height: 200%;
	}
</style>

<script>
	$(document).ready(function()
    {
        var fc_event= '';
        var resource = <?php echo $resource;?>;

        var fullcalendar = $('#calendar').fullCalendar({ 
            themeSystem: 'bootstrap4',
            header: 
            {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },
            buttonText: {
                today: 'Today',
                month: 'Calendar',
                listMonth: 'List'
            },

            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: <?php echo $fc_event; ?>,

            eventMouseover: function (data, event, param, resource = <?php echo $resource;?>) {
                var js_res = JSON.parse(JSON.stringify(resource));
                var hover_item = js_res[data.id];
                var title = JSON.stringify(data.title);
                var start_date = moment(hover_item.start_date).format('DD-MM-YYYY');
                var end_date = moment(hover_item.end_date).format('DD-MM-YYYY');
                if(hover_item.meeting_type == 0) var purpose = "Meeting";
                else var purpose = "Webinar"; 

                tooltip = '<div class="tooltipevent"> Zoom Account : '+hover_item.account+' <br/> Purpose : '+purpose+'<br/> Topic : '+hover_item.topic+'<br/> Start Date : '+start_date+'<br/> End Date : '+end_date+'<br/>Start Time : '+hover_item.start_time+' <br/> End Time : '+hover_item.end_time+' <br/> Status : '+(hover_item.status_app).replace('_',' ')+' </div>';

                $("body").append(tooltip);
                $(this).mouseover(function (e) {
                    $(this).css('z-index', 10000);
                    $('.tooltipevent').fadeIn('500');
                    $('.tooltipevent').fadeTo('10', 1.9);
                }).mousemove(function (e) {
                    $('.tooltipevent').css('top', e.pageY + 10);
                    $('.tooltipevent').css('left', e.pageX + 20);
                });
            },

            eventMouseout: function(data, event) {
                $(this).css('z-index', 8);
                $('.tooltipevent').remove();
            },
        });

        fullcalendar.fullCalendar();

        check_booking_date();
    });

	function open_modal(mode, item_detail)
	{
		// clearForm('#zoomForm');

		$('#update_zoom_modal_title').html('');
		$('#update_zoom_modal_content').html('');
		$('#filter_table_zoom').DataTable().destroy();
		var table = $('#filter_table_zoom').DataTable({order: []});
		table.clear().draw();

		var temp_content = '';

		if(mode == 'create_zoom_account')
		{
			$('#update_zoom_modal_title').append('Add/Update Zoom');
			
			temp_content = 
			'<div class="form-row">\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Account</label>\
			<input type="text" class="form-control" name="account" id="account" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Username</label>\
			<input type="text" class="form-control" name="username" id="username" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Password</label>\
			<input type="text" class="form-control" name="password" id="password" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Remark</label>\
			<input type="text" class="form-control" name="remark" id="remark" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Meeting User</label>\
			<input type="number" class="form-control" name="meeting_user" id="meeting_user" min="1" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Webinar User</label>\
			<input type="number" class="form-control" name="webinar_user" id="webinar_user" min="1" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Short Name</label>\
			<input type="number" class="form-control" name="short_name" id="short_name" min="1" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Status</label>\
			<select class="form-control" name="status" id="status" required>\
			<option value="0" selected>Active</option>\
			<option value="1">Inactive</option>\
			</select>\
			</div>\
			</div>\
			</div>';

			$('#saveZoomBtn').html('');
            $('#saveZoomBtn').append('Save');
			$('#saveZoomBtn').attr('onclick', 'saveZoom('+"'"+mode+"'"+','+"'filter_table_zoom'"+','+"['account', 'username', 'password', 'remark', 'meeting_user', 'webinar_user', 'short_name', 'status']"+','+null+','+"'sv__ref_zoom_account'"+')');
			
			$.ajax({
				url:'<?php echo base_url('hr/serviceform/get_zoom_detail') ?>',
				data: {
					mode : mode,
				},
				type: 'post',
				dataType: 'json',
				success: (data) => {
					if(data.status == "Success") {
						let zoom_account = data.query;
						if(zoom_account != null)
						{
							$.each(zoom_account,function(key,content)
							{
								var password = '';
								var btn_edit = '<button type="button" class="btn btn-sm btn-warning" onclick="open_modal('+"'check_staff_password'"+','+"'"+window.btoa(JSON.stringify(content))+"'"+')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Zoom"><i class="far fa-edit"></i></button>';

								var btn_delete = '<button type="button" id="deleteButton" class="btn btn-sm btn-danger" data-account="'+content.account+'" data-id="'+content.ID+'" onclick="saveZoom('+"'delete_account_detail'"+','+"'filter_table_zoom'"+','+"['ID']"+','+null+','+"'sv__ref_zoom_account'"+',this)" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Zoom"><i class="fas fa-trash"></i></button>';

								if(content.status == 0) var status = 'Active';
								else var status = 'Inactive';

								if((content.password).length > 0)
								{
									for(var i = 0; i <= ((content.password).length); i++) password += '*';
								}

							table.row.add({
								0   : '<div class="text-center">'+(key + 1)+'</div>',
								1   : content.account,
								2   : '<b>Username : </b>'+content.username+'<br> <b>Password : </b>'+password,
								3 	: '<b>Meeting User : </b>'+content.meeting_user+'<br> <b>Webinar User : </b>'+content.webinar_user+'<br> <b>Remark : </b>'+content.remark+'<br> <b>Status : </b>'+status,
								4   : '<div class="text-center"><div class="btn-group">'+btn_edit+btn_delete+'</div></div>',
							}).draw();
						});

							$('#zoom_account_list_table').removeClass('d-none');
						}

					}
				}
			});
		}else if(mode == 'check_staff_password')
		{
			$('#update_zoom_modal_title').append('<i class="fas fa-lock"></i> Check Permission SPS|ERP');
			$('#zoom_account_list_table').addClass('d-none','d-none');

			temp_content = 
			'<div class="form-row">\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Username</label>\
			<input type="text" class="form-control" name="username" id="username" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Password</label>\
			<input type="password" class="form-control" name="pwd" id="pwd" required>\
			</div>\
			</div>\
			</div>';

			$('#saveZoomBtn').html('');
            $('#saveZoomBtn').append('Submit');
			$('#saveZoomBtn').attr('onclick', 'saveZoom('+"'check_staff_password'"+','+"'password'"+','+"['username', 'pwd']"+','+"'"+item_detail+"'"+')');
		}else if(mode == 'update_account_detail')
		{
			$('#update_zoom_modal_title').append('Add/Update Zoom');
			$('#zoom_account_list_table').addClass('d-none','d-none');

			if(item_detail != null && item_detail != undefined) item_detail = JSON.parse(window.atob(item_detail));

			temp_content = 
			'<div class="form-row">\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Account</label>\
			<input type="text" class="form-control" name="ID" id="ID" value="'+item_detail.ID+'" required hidden>\
			<input type="text" class="form-control" name="account" id="account" value="'+item_detail.account+'" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Username</label>\
			<input type="text" class="form-control" name="username" id="username" value="'+item_detail.username+'" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Password</label>\
			<input type="text" class="form-control" name="password" id="password" value="'+item_detail.password+'" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-6">\
			<div class="form-group">\
			<label>Remark</label>\
			<input type="text" class="form-control" name="remark" id="remark" value="'+item_detail.remark+'" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Meeting User</label>\
			<input type="number" class="form-control" name="meeting_user" id="meeting_user" min="1" value="'+item_detail.meeting_user+'" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Webinar User</label>\
			<input type="number" class="form-control" name="webinar_user" id="webinar_user" min="1" value="'+item_detail.webinar_user+'" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Short Name</label>\
			<input type="number" class="form-control" name="short_name" id="short_name" min="1" required>\
			</div>\
			</div>\
			<div class="col-12 col-sm-3">\
			<div class="form-group">\
			<label>Status</label>\
			<select class="form-control" name="status" id="status" required>\
			<option value="0">Active</option>\
			<option value="1">Inactive</option>\
			</select>\
			</div>\
			</div>\
			</div>';

			$('#saveZoomBtn').html('');
            $('#saveZoomBtn').append('Save');
			$('#saveZoomBtn').attr('onclick', 'saveZoom('+"'"+mode+"'"+','+"'filter_table_zoom'"+','+"['ID', 'account', 'username', 'password', 'remark', 'meeting_user', 'webinar_user', 'short_name', 'status']"+','+null+','+"'sv__ref_zoom_account'"+')');
		}

		$('#update_zoom_modal_content').append(temp_content);

		if(mode == 'update_account_detail') $('#status').val(item_detail.status);

		$('#update_zoom_modal').modal('show');
		$('#update_zoom_modal_size').css('max-width','60%');
	}

	function saveZoom(mode, input_id, modal_input_id, item_detail, table_name, elem) 
	{
		var temp_content 	= '';
		var input_key		= {};
		var input_value		= [];
		var url 			= '';
		var str 			= ''; 

		if((mode.split('_')[0] != 'create') && (mode.split('_')[0] != 'update') && (mode.split('_')[0] != 'delete')) 
		{
			url = '<?php echo base_url('hr/serviceform/get_zoom_detail') ?>';
		}else{
			url = '<?php echo base_url('hr/serviceform/update_zoom_detail') ?>';
		}

		str = (mode.split('_')[0]).toLowerCase().replace(/\b[a-z]/g, function(letter) {
			return letter.toUpperCase();
		});

		if(elem != undefined && elem != null)
		{
			if(mode.split('_')[0] == 'delete') input_key['is_delete'] = 1;
			$.each(modal_input_id, function(key, row){
				input_key[row] = $(elem).data((row.toLowerCase()));
			});
		}else{
			var i = 0;
			$.each(modal_input_id, function(key, row){
				if($('#'+row).val() != undefined && $('#'+row).val() != '')
				{
					i++;
					input_key[row] = $('#'+row).val();
				}else{
				}
			});
		}

		input_value.push(input_key);

		if(i == modal_input_id.length)
		{
			if(mode != 'check_staff_password')
			{
				validateForm("#saveZoomBtn", str+" zoom detail?", function() {
					$('#update_zoom_modal').modal('hide');
					$.ajax({
						url:url,
						data: {
							mode		: mode,
							input_value	: input_value[0],
							table_name	: table_name,
						},
						type: 'post',
						dataType: 'json',
						success: (data) => {
							if(data.status == "Success") {
								localStorage.setItem("status", data.status);
								localStorage.setItem("msg", data.msg);

								location.reload();
							}else{
								localStorage.setItem("status", data.status);
								localStorage.setItem("msg", data.msg);

								location.reload();
							}
						}
					});
				});
			}else{
				$.ajax({
					url:url,
					data: {
						mode		: mode,
						input_value	: input_value[0],
					},
					type: 'post',
					dataType: 'json',
					success: (data) => {
						if(data.status == "Success") {
							open_modal('update_account_detail',item_detail);
						}else{
							alert("Error. Please try again.");
						}
					}
				});
			}
		}else{
			alert("Please complete all input.");
		}
	}

	function checkbox(elem)
	{
		var booking_checker = document.getElementById("booking_checker");

		if(booking_checker.checked == true)
		{
			$('#guest_details_form').removeClass('d-none');
			$('#guest_details').attr('required','required');
		}else{
			$('#guest_details_form').addClass('d-none');
			$('#guest_details').removeAttr('required');
			$('#guest_details').prop('selectedIndex',0);
		}
	}

	function check_booking_date()
	{
		$('#booking_detail').css({"filter":"blur(5px)","-webkit-filter":"blur(5px)"});
		$('#booking_detail').css("cursor","not-allowed");
		$('#complete_fill_note').removeClass('d-none');

		var start_date 	= $('#start_date').val();
		var start_time 	= $('#start_time').val();
		var end_date 	= $('#end_date').val();
		var end_time 	= $('#end_time').val();
		var zoom_list	= JSON.parse('<?php echo json_encode($zoom_account); ?>');
		var account_id 	= $("#account_id").val();

		var existingBooking = zoom_list;

		$(existingBooking).each(function(key,row){
			$("#account_id option[value="+row.ID+"]").removeAttr('hidden');
		});

		if((start_date && end_date && start_time && end_time) != '')
		{
			$.ajax({
				url:'<?php echo base_url('hr/serviceform/getBookingDate/zoom') ?>',
				data: {
					start_date 	: start_date,
					start_time 	: start_time,
					end_date 	: end_date,
					end_time 	: end_time,
	                account_id 	: account_id,
	                id 			: '<?php echo $ID; ?>',
	            },
	            type: 'post',
	            dataType: 'json',
	            success: (data) => {
                	if (/invalid/i.test(data.msg))
                	{
                		iziToast.error({
							title: 'Error',
							message: data.msg
						});

	                	$('#booking_detail').css({"filter":"blur(5px)","-webkit-filter":"blur(5px)"});
						$('#booking_detail').css("cursor","not-allowed");
						$('#complete_fill_note').removeClass('d-none');
					}else{
	            		$('#booking_detail').css({"filter":"","-webkit-filter":""});
						$('#booking_detail').css("cursor","default");
						$('#complete_fill_note').addClass('d-none');

		            	if(data.status == "Success") {
							$('#submitBtn').removeAttr('disabled');
							$('#submitBtn').css("cursor","pointer");
		                	$('#submitBtn').prop('type', 'submit');
		                }else{

		                	var existingBooking = data.getBookingData;
		                	
		                	<?php if($ID){ ?>
		                		$(existingBooking).each(function(key,row){
		                			if((row.account_id != '<?php echo $zoomBookingDetail['account_id']; ?>') || (row.start_date != '<?php echo $zoomBookingDetail['start_date']; ?>')|| (row.end_date != '<?php echo $zoomBookingDetail['end_date']; ?>') || (row.start_time != '<?php echo $zoomBookingDetail['start_time']; ?>') || (row.end_time != '<?php echo $zoomBookingDetail['end_time']; ?>')){
		                				$("#account_id option[value="+row.account_id+"]").attr('hidden','hidden');
		                			}
		                		});
		                	<?php }else{ ?>
		                		$(existingBooking).each(function(key,row){
		                			$("#account_id option[value="+row.account_id+"]").attr('hidden','hidden');
		                		});
		                	<?php } ?>
		                }
		            }
	            }
	        });
		}else{
			$('#booking_detail').css({"filter":"blur(5px)","-webkit-filter":"blur(5px)"});
			$('#booking_detail').css("cursor","not-allowed");
			$('#complete_fill_note').removeClass('d-none');
		}
	}
</script>