@extends('layouts.instructor')
@section('content')

@php
$VIEW_CALENDAR_ACCESS   = false;

$VIEW_CALENDAR_ACCESS    = Helper::instructor_can_access('Calendar');
@endphp 
<style>
    .toastui-calendar-holiday-sun{
        color: #ae1e23 !important;
    }
</style>
<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
        @if (\Session::has('success'))
        <div class="alert alert-success">
            {!! \Session::get('success') !!}
        </div>
        @endif
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li> <a href="javascript:;">Instructor</a></li>
               <li>Calendar</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"> <i class="fas fa-arrow-circle-left fa-2x"></i> </a>
            </div>
         </div>
      </div>
      <!-- ========================= -->
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-3">
                     <h3 class="mb-3" style="font-weight:700"> {{ ucwords($user->first_name.' '.$user->last_name)}} @if($user->status=='1')<span class="badge badge-success status-css user-status-css">{{"Active"}}</span>@elseif($user->status=='0')<span class="badge badge-danger status-css user-status-css">{{"Inactive"}}</span>@else<span class="badge badge-warning status-css">{{"Pending"}}</span>@endif<br>
                        <small style="font-size: 66%;">Learner ID: {{$user->id}}</small>
                     </h3>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12" style="background-color:#1a68b3;">
                     @include('instructor.profile.submenu')
                  </div>
               </div>
               @if ($VIEW_CALENDAR_ACCESS) 
               <div class="row justify-content-center">
                  <div class="col-md-12">
          
                        <div class="tab-content" id="myTabContent">
                              <div class="col-md-12 text-center pb-3">
                            <h3 class="text-blue fw-700">Calendar</h3>
                         </div>
                        <!-- calendar -->
                        <div class="">
                        {{-- <div style=" min-height: 1500px;" id='calendar'></div> --}}
                        <div class="container p-0 " style="height: 100% !important;">
                            <div class="my-3 text-center text-lg-start">
                                <button class="btn btn-primary btn-prev"> <i class="fa fa-angle-left"></i></button>
                                <button class="btn btn-primary btn-today">Today</button>
                                <button class="btn btn-primary btn-nxt"> <i class="fa fa-angle-right"></i></button>
                            </div>
                            <div id="container" style="min-height: 600px !important;height:600px"></div>
                        </div>
                    </div>
                     </div>
                  </div>
               </div>
               @endif
            </div>
         </div>
      </div>
   </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.6/index.global.min.js'></script>
</script><link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.ie11.min.js"></script>

    <script>
        function cal_init()
        {
            var Cal = tui.Calendar;
            var calendar = new Cal('#container', {
                defaultView: 'week',
                taskView: false,
                id: 'cal1',
                isReadOnly: true,
            });
            calendar.setOptions({
                week: {
                    taskView: false,
                    eventView: ['time'],
                    defaultTimeDuration : 30,
                }
            });
            calendar.createEvents(@json($events));

            var timedEvent = calendar.getEvent('1', 'cal1'); // EventObject
            calendar.on('clickEvent', ({ event }) => {
                console.log(event); // EventObject
                $('#date_time').val(event.body);

                console.log(event.attendees[0]);
                if(event.attendees[0]=='B')
                {
                    Swal.fire({
                        title: 'Booked by '+event.attendees[2],
                        text: '',
                        imageUrl: event.attendees[1],
                        imageWidth: 200,
                        imageHeight: 200,
                        imageAlt: 'Custom image',
                    })
                }

            });

            $(document).on("click", ".btn-prev", function() {
                calendar.prev();
            });
            $(document).on("click", ".btn-nxt", function() {
                calendar.next();
            });
            $(document).on("click", ".btn-today", function() {
                calendar.today();
            });
        }
    </script>
    <script>
      $(document).ready(function(){
        $('.timepicker').mdtimepicker();
      });
      $( window ).on("load", function() {
        cal_init();
      });


    var un_av_tbl = $("#unvaildatatable").html();
    $(document).on('click','#removeunvaibility', function(){
        $('#remove1').modal('show');
    });

    </script>
@endsection