@include('header')    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />


      <!-- partial -->
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margin">
              <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                  <h3 class="font-weight-bold">Bookings</h3>
                </div>
                <div class="col-12 col-xl-4">

                </div>
              </div>
            </div>
          </div>
          <div class="row">

            <div class="col-md-12 grid-margin transparent">
              <div class="row">
              <div id='full_calendar_events'></div>
              </div>
            </div>
          </div>
          <div class="row">
            <!--div class="col-md-4 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <p class="card-title">Number of Queries</p>
                  <p class="font-weight-500">The total number of queries carried out per hour</p>
                  <div class="d-flex flex-wrap mb-5">
                  </div>
                  <canvas id="order-chart"></canvas>
                </div>
              </div>
            </div-->
        
          </div>


          <!--div class="row">
            <div class="col-md-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <p class="card-title">Advanced Table</p>
                  <div class="row">
                    <div class="col-12">
                      <div class="table-responsive">
                        <table id="example" class="display expandable-table" style="width:100%">
                          <thead>
                            <tr>
                              <th>Quote#</th>
                              <th>Product</th>
                              <th>Business type</th>
                              <th>Policy holder</th>
                              <th>Premium</th>
                              <th>Status</th>
                              <th>Updated at</th>
                              <th></th>
                            </tr>
                          </thead>
                      </table>
                      </div>
                    </div>
                  </div>
                  </div>
                </div>

                
              </div>
            </div>
        </div-->
        <!-- content-wrapper ends -->
        <!-- partial: -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"><p align="center" class="mb-0">Copyright &copy; Tritek Consulting Ltd 2022 </p>  </span>
          </div>
        </footer>
        <!-- partial -->

      </div>
      <!-- main-panel ends -->
    </div>   
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="{{ asset('vendors/js/vendor.bundle.base.js') }}"></script>
  <!-- endinject -->
  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/typeahead.js/typeahead.bundle.min.js') }}"></script>
  <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
  <!-- End plugin js for this page -->
  <!-- inject:js -->
  <script src="{{ asset('js/off-canvas.js') }}"></script>
  <script src="{{ asset('js/hoverable-collapse.js') }}"></script>
  <script src="{{ asset('js/template.jss') }}"></script>
  <script src="{{ asset('js/settings.js') }}"></script>
  <script src="{{ asset('js/todolist.js') }}"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/file-upload.js') }}"></script>
  <script src="{{ asset('js/typeahead.js') }}"></script>
  <script src="{{ asset('js/select2.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/chart.js/Chart.min.js') }}"></script>
  <!-- Custom js for this page>
  <script src="{{ asset('js/chart.js') }}"></script-->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/dashboards.js') }}"></script>
  <script src="{{ asset('js/fullcalendar/main.js') }}"></script>
  <script src="{{ asset('js/Chart.roundedBarCharts.js') }}"></script>
  <!-- End custom js for this page-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
 
  <!-- End custom js for this page-->
  <script>
      let inactivityTime = function() {
        let time;
        window.onload = resetTimer;
        document.onmousemove = resetTimer;
        document.onkeypress = resetTimer;
        function logout() {
          alert("You are now logged out due to 5 minutes of Inactivity.")
          window.location.href = "logoutAuthenticationHandler";
        }
        function resetTimer() {
          clearTimeout(time);
          time = setTimeout(logout, 50000)
        }
      };
      window.onload = function() {
        inactivityTime();
      }
    </script>
    <script>
        $(document).ready(function () {
            var SITEURL = "{{ url('/') }}";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var calendar = $('#full_calendar_events').fullCalendar({
                editable: true,
                clickable: true,
                events: SITEURL + "/dashboard/bookings/calendar",
                displayEventTime: true,
                eventRender: function (event, element, view) {
                },
                dayMaxEvents: true, // allow "more" link when too many events

                selectable: true,
                selectHelper: true,
                eventClick: function (start, end, title) {
                    alert('Task Name: '+title);
                },
            });

//            calendar.render();
        });
    </script>
</body>

</html>