@extends('serviceprovider.header')
<style type="text/css">
  .fc-toolbar-chunk:first-child {
    display: none;
}
.fc-toolbar-chunk h2{
  font-size: 20px !important;
  font-weight: 700;
}
.fc .fc-toolbar.fc-header-toolbar {
    justify-content: flex-start;
}
button.fc-today-button.fc-button.fc-button-primary {
    display: none;
}
.fc .fc-button-group {
    direction: ltr !important;
}
</style>
<div class="main_body">
	<div class="main_dashboard_child">
    <div class="cards_title" style="padding-bottom: 0px;border: none;">
 <div class="row">
    <div class="col-sm-6">
       <div class="cards_tt">
          <h5 style="font-weight:600;font-size:18px;">Availability</h5>
       </div>
    </div>
 </div>
</div>
<div class="card">
      <div class="appointments_title">
        <h5>Set Hours of Availability </h5>
      </div>
      <div class="appointments_calender">
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>Sunday</th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
                <th>Saturday</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><p class="text-muted">0 am-0 pm</p></td>
                <td><p>9 am-5 pm</p></td>
                <td><p>9 am-5 pm</p></td>
                <td><p>9 am-5 pm</p></td>
                <td><p>9 am-5 pm</p></td>
                <td><p>9 am-5 pm</p></td>
                <td><p class="text-muted">0 am-0 pm</p></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
    <br/>

		<div class="card">
			<div class="appointments_title">
				<h5>Override Hours For Specific Days</h5>
			</div>
			<div class="appointments_calender">
				<div id='calendar'></div>
			</div>

		</div>



	</div>

		</div>
	</div>

</section>
<style type="text/css">
	 #calendar {
    max-width: 1100px;
    margin: 0 auto;
  }
</style>
<link rel="stylesheet" type="text/css" href="../css/calender.css">
<script type="text/javascript" src="../js/calender.js"></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        //left: 'prevYear,prev,next,nextYear today',
        center: 'title',
        //right: 'dayGridMonth,dayGridWeek,dayGridDay'
      },
      initialDate: '2022-05-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {
          title: '10AM - 11AM',
          start: '2022-05-01'
        },
        {
          title: '10AM - 11AM',
          start: '2022-05-07'
          //end: '2020-09-10'
        },
        {
          //groupId: 999,
          title: '10AM - 11AM',
          start: '2022-05-09'
        },
        {
          //groupId: 999,
          title: '10AM - 11AM',
          start: '2022-05-16'
        },
        {
          title: '10AM - 11AM',
          start: '2022-05-11'
          //end: '2020-09-13'
        },
        {
          title: '10AM - 11AM',
          start: '2022-05-12'
         // end: '2020-09-12T12:30:00'
        }
      ]
    });

    calendar.render();
  });

</script>
@extends('serviceprovider.footer')