stagfe2/resources/views/layouts/confirm-hours-of-availability-notification.blade.php

<style>
	.confirm-hrs-btn {
		background: none;
		border: 1px solid #856404;
		padding: 3px 10px;
		color: #856404;
		font-weight: bold;
		border-radius: 4px;
		font-size: 13px;
		cursor: pointer;
	}
	.confirm-hrs-btn:hover,
	.confirm-hrs-btn:focus {
		text-decoration: none;
		color: #856404;
	}
</style>
<div id="confirmHoursOfAvailability" class="alert alert-warning mb-0 py-1 px-3 rounded-0">
	<div class="d-flex align-items-center justify-content-center" style="font-size: 14px;">
		<span><i class="fas fa-exclamation-triangle"></i> Please confirm your <a href="{{ route('practice-management.proAvailability') }}" style="color: #856404;"><u>hours of availability</u></a>.</span>

		<div id="confirmHoursOfAvailabilityMoe" moe class="ml-4">
			<a class="confirm-hrs-btn" href="" show start>Confirm</a>
			<form  url="/api/pro/confirmHoursOfAvailability" hook="onConfirmHoursOfAvailaility">
				<input type="hidden" name="uid" value="{{ $pro->uid }}">
				<label>Are you sure?</label>
				<div class="">
					<button class="btn btn-primary btn-sm" submit>Yes</button>
					<button class="btn btn-default border btn-sm" cancel>Cancel</button>
				</div>
			</form>
		</div>
		<a id="undoConfirmHoursOfAvailability" class="d-none ml-4 confirm-hrs-btn">Undo</a>

	</div>
</div>

<script>
	(function() {
		var hasUndoneConfirmation = false;
		addMCHook('onConfirmHoursOfAvailaility', function(){
			$('#confirmHoursOfAvailabilityMoe').remove();
			var confirmSection = $('#confirmHoursOfAvailability');
			var undoConfirmBtn = $('#undoConfirmHoursOfAvailability');

			undoConfirmBtn.removeClass('d-none').click(function(){
				hasUndoneConfirmation = true;
				$.post('/api/pro/undoConfirmHoursOfAvailability', {uid:"{{ $pro->uid }}"}, function(response){
					fastReload();
				}, 'json');
			});
			setTimeout(function(){
				if(hasUndoneConfirmation) return;
				$('#confirmHoursOfAvailability').remove();
			}, 5000);			
		});
	}).call(window);
</script>