|
@@ -0,0 +1,128 @@
|
|
|
+@extends ('layouts/template')
|
|
|
+
|
|
|
+@section('content')
|
|
|
+<link href='/fullcalendar-5.3.2/lib/main.css' rel='stylesheet' />
|
|
|
+<script src='/fullcalendar-5.3.2/lib/main.js'></script>
|
|
|
+<div class="p-3 mcp-theme-1">
|
|
|
+ <div class="card">
|
|
|
+
|
|
|
+ <div class="card-header px-3 py-2 d-flex align-items-center">
|
|
|
+ <strong class="">
|
|
|
+ <i class="fas fa-user-injured"></i>
|
|
|
+ My Availability
|
|
|
+ </strong>
|
|
|
+ <span class="mx-2 text-secondary">|</span>
|
|
|
+ <div moe wide class="mr-2">
|
|
|
+ <a start show>
|
|
|
+ Add General Availability
|
|
|
+ </a>
|
|
|
+ <form url="/api/proGeneralAvailability/create">
|
|
|
+ <input type="hidden" name="proUid" value="{{$pro->uid}}">
|
|
|
+ <div class="form-group">
|
|
|
+ <?php $daysOfWeek = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'] ?>
|
|
|
+ @foreach($daysOfWeek as $dayOfWeek)
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" name="daysOfWeek[{{$loop->index}}]" id="ga_chk_{{$dayOfWeek}}" value="{{$dayOfWeek}}">
|
|
|
+ <label class="form-check-label" for="ga_chk_{{$dayOfWeek}}">{{$dayOfWeek}}</label>
|
|
|
+ </div>
|
|
|
+ @endforeach
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">Start Time </label>
|
|
|
+ <input class="form-control" type="time" name="startTimeEst" value="08:00">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">End Time </label>
|
|
|
+ <input class="form-control" type="time" name="endTimeEst" value="17:00">
|
|
|
+ </div>
|
|
|
+ <div class="form-group m-0">
|
|
|
+ <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
|
|
|
+ <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <span class="mx-2 text-secondary">|</span>
|
|
|
+ <div moe wide class="mr-2">
|
|
|
+ <a start show>
|
|
|
+ Add Specific Availability
|
|
|
+ </a>
|
|
|
+ <form url="/api/proSpecificAvailability/create">
|
|
|
+ <input type="hidden" name="proUid" value="{{$pro->uid}}">
|
|
|
+ <div class="mb-2">
|
|
|
+ <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">Start Date </label>
|
|
|
+ <input class="form-control" type="date" name="startDate">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">Start Time </label>
|
|
|
+ <input class="form-control" type="time" name="startTime">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">End Date </label>
|
|
|
+ <input class="form-control" type="date" name="endDate">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">End Time </label>
|
|
|
+ <input class="form-control" type="time" name="endTime">
|
|
|
+ </div>
|
|
|
+ <div class="form-group m-0">
|
|
|
+ <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
|
|
|
+ <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <span class="mx-2 text-secondary">|</span>
|
|
|
+ <div moe wide class="mr-2">
|
|
|
+ <a start show>
|
|
|
+ Add Specific Unvailability
|
|
|
+ </a>
|
|
|
+ <form url="/api/proSpecificUnavailability/create">
|
|
|
+ <input type="hidden" name="proUid" value="{{$pro->uid}}">
|
|
|
+ <div class="mb-2">
|
|
|
+ <input type="text" class="form-control form-control-sm" name="title" placeholder="Title">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">Start Date </label>
|
|
|
+ <input class="form-control" type="date" name="startDate">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">Start Time </label>
|
|
|
+ <input class="form-control" type="time" name="startTime">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">End Date </label>
|
|
|
+ <input class="form-control" type="date" name="endDate">
|
|
|
+ </div>
|
|
|
+ <div class="mb-2">
|
|
|
+ <label for="" class="control-label">End Time </label>
|
|
|
+ <input class="form-control" type="time" name="endTime">
|
|
|
+ </div>
|
|
|
+ <div class="form-group m-0">
|
|
|
+ <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
|
|
|
+ <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body p-0">
|
|
|
+ <div id="pro-availability-calendar"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ (function() {
|
|
|
+
|
|
|
+ function initAvailabilityCalendar() {
|
|
|
+ var calendarEl = document.getElementById('pro-availability-calendar');
|
|
|
+ var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
|
+ initialView: 'dayGridMonth'
|
|
|
+ });
|
|
|
+ calendar.render();
|
|
|
+ }
|
|
|
+ addMCInitializer('pro-availability-calendar', initAvailabilityCalendar);
|
|
|
+ })();
|
|
|
+</script>
|
|
|
+@endsection
|