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 !important;
		font-weight: bold;
		border-radius: 4px;
		font-size: 13px;
		cursor: pointer;
	}

	.confirm-hrs-btn:hover,
	.confirm-hrs-btn:focus {
		text-decoration: none;
		color: #856404 !important;
	}
	.confirm-hrs-btn.red {
		color: #d14e4e !important;
    	border-color: #d14e4e;
	}
</style>
<div id="confirmHoursOfAvailability" class="alert alert-warning mb-0 py-2 px-3 mb-2">
	<div class="d-flex align-items-center justify-content-between" style="font-size: 14px;">
		@if(!$pro->are_hours_of_availability_confirmed)
		<span><i class="fas fa-exclamation-triangle"></i> Please confirm your hours of availability.</span>

		<div id="confirmHoursOfAvailabilityMoe" moe class="ml-4">
			<a class="confirm-hrs-btn" href="" show start>Confirm</a>
			<form right url="/api/pro/confirmHoursOfAvailability">
				<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>
		@else
		<div>
			<span>Hours of Availability last confirmed on <b><i class="fas fa-history on-hover-opaque"></i> {{ friendly_date_time($pro->hours_of_availability_confirmed_at) }}</b></span>
		</div>

		<div>
			<div id="confirmHoursOfAvailabilityMoe" moe class="ml-4">
				<a class="confirm-hrs-btn" href="" show start>Reconfirm</a>
				<form right url="/api/pro/confirmHoursOfAvailability">
					<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>
			<div id="confirmHoursOfAvailabilityMoe" moe class="ml-1">
				<a class="confirm-hrs-btn red" href="" show start>Undo</a>
				<form right url="/api/pro/undoConfirmHoursOfAvailability">
					<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>
		</div>


		@endif
	</div>
</div>