@extends('student.layouts.app')
@section('titlePage', 'Dashboard')
@push('styles')
<link rel="stylesheet" href="{{asset('assets/vidiyal/plugins/pnotify/css/pnotify.custom.min.css')}}">
@endpush
@push('script')
<script>  
    document.getElementById("dr-0").classList.add("active");
</script>
<style>
   .card-ht{
      height:7.5rem !important;
   }
</style>
@endpush
@section('content')

<div class="container-fluid flex-grow-1 container-p-y">
   <h4 class="text-primary font-weight-bold pt-2">WELCOME ON BOARD <spam class="text-secondary text-uppercase">{{ get_user_name() }}</span></h4>
   <hr class="title-bottom">
   <div class="row">
      <div class="row">
							<div class="col-xl-3 col-lg-3">
                            <div class="card">
                                <div class="card-body card-ht">
                                    <div class="d-flex">
                                        <div class="flex-1">
                                            <p class="mb-3">Total Courses</p>
                                            <div class="mt-1">
                                                <h5 class="font-weight-semibold mb-2 numberfont counter">{{$course_count}}</h5>
                                                </div>
                                        </div>
                                        <div class="ms-2">
                                            <div class="avatar radius-4 bg-primary-transparent">
                                                <i class="fa fa-users tx-primary"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-3">
                            <div class="card">
                                <div class="card-body card-ht">
                                    <div class="d-flex">
                                        <div class="flex-1">
                                            <p class="mb-3">Total Master classes</p>
                                            <div class="mt-1">
                                                <h5 class="font-weight-semibold mb-2 numberfont counter">{{$master_amount}}</h5>
                                                 </div>
                                        </div>
                                        <div class="ms-2">
                                            <div class="avatar radius-4 bg-orange-transparent">
                                                <i class="fa fa-users tx-orange"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-3">
                            <div class="card">
                                <div class="card-body card-ht">
                                    <div class="d-flex">
                                        <div class="flex-1">
                                            <p class="mb-3">Total Dr.Azam's Notes</p>
                                            <div class="mt-1">
                                                <h5 class="font-weight-semibold mb-2 numberfont counter">{{$drazam_notes}}</h5>
                                                  </div>
                                        </div>
                                        <div class="ms-2">
                                            <div class="avatar radius-4 bg-secondary-transparent">
                                                <i class="fa fa-wallet tx-success"></i>
                                            </div>
										</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                         <div class="col-xl-3 col-lg-3">
                                    <div class="card">
                                       <div class="card-body card-ht">
                                             <div class="d-flex">
                                                <div class="flex-1">
                                                   <p class="mb-3">Total Free Course</p>
                                                   <div class="mt-1">
                                                         <h5 class="font-weight-semibold mb-2 numberfont counter">{{$free_courses}}</h5>
                                                         </div>
                                                </div>
                                                <div class="ms-2">
                                                   <div class="avatar radius-4 bg-secondary-transparent">
                                                      <i class="fa fa-globe tx-secondary"></i>
                                                   </div>
                                       </div>
                                    </div> 
                                </div> 
                            </div>
                    </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="row">
               <div class="col-xl-10 col-lg-12 col-md-12">
                  <div class="card">
                     <div class="card-body">
                        <div id='calendar2'></div>
                     </div>
                  </div>
               </div>
               <div class="col-xl-2 col-lg-2 col-md-2">
                  <div class="card">
                     <div class="card-body">
                        <h6 class="card-title mb-2">Color Code</h6>
                        <div id="external-events">
                           <div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event" style="background-color: var(--primary-bg-color);">
                              <div class="fc-event-main">Course</div>
                           </div>
                           <div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event " style="background-color: var(--secondary);">
                              <div class="fc-event-main">Master Class</div>
                           </div>
                          
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
     {{-- <div class="row mb-5">
         <div class="col-md-12">
            <div class="card overflow-hidden">
               <div class="card-body">
                  <div class="row">
                     <div class="col-xl-3">
                        <div class="counter-status p-4 md-mb-0">
                           <div class="text-center mb-2">
                              <svg class="about-icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                 <path fill="#00bfff" d="M10.3125,16.09375a.99676.99676,0,0,1-.707-.293L6.793,12.98828A.99989.99989,0,0,1,8.207,11.57422l2.10547,2.10547L15.793,8.19922A.99989.99989,0,0,1,17.207,9.61328l-6.1875,6.1875A.99676.99676,0,0,1,10.3125,16.09375Z" opacity=".99"/>
                                 <path fill="#00FFFF" d="M12,2A10,10,0,1,0,22,12,10.01146,10.01146,0,0,0,12,2Zm5.207,7.61328-6.1875,6.1875a.99963.99963,0,0,1-1.41406,0L6.793,12.98828A.99989.99989,0,0,1,8.207,11.57422l2.10547,2.10547L15.793,8.19922A.99989.99989,0,0,1,17.207,9.61328Z"/>
                              </svg>
                           </div>
                           <div class="text-center">
                              <h2 class="counter mb-2">{{$countCompletedTest ?? 0 }}</h2>
                              <h6 class="mb-0 tx-muted">Completed Test</h6>
                           </div>
                        </div>
                     </div>
                     <div class="col-xl-3">
                        <div class="counter-status p-4 md-mb-0">
                           <div class="text-center mb-2">
                           <svg class="about-icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                 <path fill="#008000" d="M10.3125,16.09375a.99676.99676,0,0,1-.707-.293L6.793,12.98828A.99989.99989,0,0,1,8.207,11.57422l2.10547,2.10547L15.793,8.19922A.99989.99989,0,0,1,17.207,9.61328l-6.1875,6.1875A.99676.99676,0,0,1,10.3125,16.09375Z" opacity=".99"/>
                                 <path fill="#00FF00" d="M12,2A10,10,0,1,0,22,12,10.01146,10.01146,0,0,0,12,2Zm5.207,7.61328-6.1875,6.1875a.99963.99963,0,0,1-1.41406,0L6.793,12.98828A.99989.99989,0,0,1,8.207,11.57422l2.10547,2.10547L15.793,8.19922A.99989.99989,0,0,1,17.207,9.61328Z"/>
                              </svg>
                           </div>
                           <div class="text-center">
                              <h2 class="counter mb-2">{{$countCompletedAssignment ?? 0 }}</h2>
                              <h6 class="mb-0 tx-muted">Completed Assignment</h6>
                           </div>
                        </div>
                     </div>
                     <div class="col-xl-3">
                        <div class="counter-status p-4 md-mb-0">
                           <div class="text-center mb-2">
                              <svg class="about-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
                                 <path fill="#ffd79c" d="M12,14.5c-3.26461,0.00094-6.4876-0.73267-9.43018-2.14648C2.22156,12.18802,1.99974,11.83676,2,11.45117V9.5c0.00181-1.65611,1.34389-2.99819,3-3h14c1.65611,0.00181,2.99819,1.34389,3,3v1.95215c0.00003,0.3859-0.22189,0.73741-0.57031,0.90332C18.48677,13.76762,15.26418,14.50051,12,14.5z M21,11.45215L21,11.45215z"/>
                                 <path fill="#ffbd5a" d="M10,6.5v-1c0.00055-0.55206,0.44794-0.99945,1-1h2c0.55206,0.00055,0.99945,0.44794,1,1v1h2v-1c-0.00183-1.65613-1.34387-2.99817-3-3h-2c-1.65613,0.00183-2.99817,1.34387-3,3v1H10z"/>
                                 <path fill="#ffe4bd" d="M21.42969,12.35547C18.48676,13.76764,15.26416,14.50049,12,14.5c-3.26459,0.00092-6.48761-0.73267-9.43018-2.14648C2.22156,12.18805,1.99976,11.83673,2,11.45117V18.5c0.00183,1.65613,1.34387,2.99817,3,3h14c1.65613-0.00183,2.99817-1.34387,3-3v-7.04785C22.00006,11.83807,21.77814,12.18958,21.42969,12.35547z"/>
                                 <path fill="#ffbd5a" d="M8,15.5c-0.55214,0.00014-0.99986-0.44734-1-0.99948C7,14.50035,7,14.50017,7,14.5v-2c0-0.55229,0.44772-1,1-1s1,0.44771,1,1v2c0.00014,0.55214-0.44734,0.99986-0.99948,1C8.00035,15.5,8.00017,15.5,8,15.5z M16,15.5c-0.55214,0.00014-0.99986-0.44734-1-0.99948c0-0.00017,0-0.00035,0-0.00052v-2c0-0.55229,0.44771-1,1-1c0.55228,0,1,0.44771,1,1v2c0.00014,0.55214-0.44734,0.99986-0.99948,1C16.00035,15.5,16.00017,15.5,16,15.5z"/>
                              </svg>
                           </div>
                           <div class="text-center">
                              <h2 class="counter mb-2">{{$countQuestion ?? 0}}</h2>
                              <h6 class="mb-0 tx-muted">Total Question</h6>
                           </div>
                        </div>
                     </div>
                     <div class="col-xl-3">
                        <div class="counter-status p-4 md-mb-0">
                           <div class="text-center mb-2">
                              <svg class="about-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
                                 <circle cx="12" cy="9.25" r="6" fill="#b8e6f9"/>
                                 <path fill="#94daf6" d="M19.57391,17.01288L17.00854,12.56l-0.00873,0.00433C15.92511,14.18231,14.08795,15.25,12,15.25c-0.1286,0-0.25439-0.01123-0.38098-0.01923l0.38953,0.66925l2.37408,4.11218c0.13806,0.23914,0.44385,0.32111,0.68304,0.18304c0.07391-0.04266,0.13562-0.10358,0.17938-0.17682l1.32349-2.21844l2.57941-0.0376c0.27612-0.00397,0.4967-0.23108,0.49268-0.5072C19.6394,17.17004,19.61646,17.08667,19.57391,17.01288z"/>
                                 <path fill="#4ec2f0" d="M11.61896,15.23071c-1.92963-0.12152-3.61176-1.14911-4.62012-2.66864l-2.56421,4.45081c-0.04248,0.07379-0.06549,0.15717-0.06671,0.24231c-0.00397,0.27612,0.21661,0.50323,0.49274,0.5072L7.44,17.79999l1.32355,2.21844c0.0437,0.07324,0.10547,0.13416,0.17938,0.17682c0.23914,0.13806,0.54492,0.05609,0.68298-0.18304L12,15.90002l0.00427-0.00732l-0.38525-0.66193L11.61896,15.23071z"/>
                              </svg>
                           </div>
                           <div class="text-center">
                              <h2 class="counter mb-2">{{$blogCount ?? 0}}</h2>
                              <h6 class="mb-0 tx-muted">Total Blogs</h6>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div> --}}
   </div>
</div>
@endsection
@section('script')
<!-- FULL CALENDAR JS -->
<script src="{{asset('assets/vidiyal/plugins/fullcalendar/moment.min.js')}}"></script>
<script src="{{asset('assets/vidiyal/plugins/fullcalendar/fullcalendar.min.js')}}"></script>
{{--<script src="{{asset('assets/vidiyal/plugins/fullcalendar/calendar-events.js')}}"></script>--}}
{{-- <script src="{{asset('assets/vidiyal/js/fullcalendar.js')}}"></script> --}}
<script>
   document.addEventListener('DOMContentLoaded', function() {
      
   //________ FullCalendar
   var containerEl = document.getElementById('external-events');
   new FullCalendar.Draggable(containerEl, {
   itemSelector: '.fc-event',
   
   });
   var calendarEl = document.getElementById('calendar2');


   var calendar = new FullCalendar.Calendar(calendarEl, {
   headerToolbar: {
       left: 'prev,next today',
       center: 'title',
       right: 'dayGridMonth,timeGridWeek,timeGridDay'
     },
     defaultView: 'month',
   navLinks: true, // can click day/week names to navigate views
   businessHours: true, // display business hours
   editable: false,
   selectable: true,
   selectMirror: true,
   droppable: true, // this allows things to be dropped onto the calendar
         
   /*select: function(arg) {
   var title = prompt('Event Title:');
   if (title) {
     calendar.addEvent({
       title: title,
       start: arg.start,
       end: arg.end,
       allDay: arg.allDay
     })
   }
   calendar.unselect()
   }, */
   eventClick: function(arg) {
   console.log(arg.event.id);
   if (arg.event.id == 'test') {
       window.location.href = "#";
   } else if(arg.event.id == 'assignment') {
       window.location.href = "#";
   } else {
      window.location.href = "#";
   }
   },
   
   editable: false,
   dayMaxEvents: true, // allow "more" link when too many events
   // eventSources: [sptCalendarEvents, sptBirthdayEvents, sptHolidayEvents, sptOtherEvents,],
   eventSources: [sptCalendarEvents, sptBirthdayEvents,sptTestSeries],
   
   });
   calendar.render();
   
   
   //List FullCalendar
   var calendarEl = document.getElementById('calendar');
   var calendar = new FullCalendar.Calendar(calendarEl, {
   height: 'auto',
   headerToolbar: {
   left: 'prev,next today',
   center: 'title',
   right: 'listDay,listWeek'
   },
   

   // customize the button names,
   // otherwise they'd all just say "list"
   views: {
   listDay: { buttonText: 'list day' },
   listWeek: { buttonText: 'list week' }
   },
   initialView: 'listWeek',
   initialDate: '2021-07-12',
   navLinks: true, // can click day/week names to navigate views
   editable: true,
   eventLimit: true, // allow "more" link when too many events
   dayMaxEvents: true, // allow "more" link when too many events
   events: [{
   title: 'All Day Event',
   start: '2021-11-01'
   }]
   });
   
   calendar.render();
   
   // Bootstrap Date Pickers
   flatpickr("#fromDate", {});
   
   //select2
   $('.select2').select2({
   placeholder: 'Choose one',
   searchInputPlaceholder: 'Search'
   });
   $('.select2-no-search').select2({
   minimumResultsForSearch: Infinity,
   placeholder: 'Choose one'
   });
   });
</script>
<script>
   // sample calendar events data
   'use strict'
   var curYear = moment().format('YYYY');
   var curMonth = moment().format('MM');
   
   // Calendar Event Source
   var sptCalendarEvents = {
   id: 1,
   backgroundColor: '{{ 'var(--primary-bg-color)' }}',
   borderColor: '{{ 'var(--secondary)' }}',
   // textColor: '#fff',
   testname: 'test',
   events: [
   @php foreach ($tests as $test) { @endphp
       {
   id: 'test',
   start: '{{now()->parse($test->start_date)->format('Y')}}' + '-' + '{{now()->parse($test->start_date)->format('m')}}' + '{{now()->parse($test->start_date)->format('d')}}',
   end: '{{now()->parse($test->end_date)->format('Y')}}' + '-' + '{{now()->parse($test->end_date)->format('m')}}' + '{{now()->parse($test->end_date)->format('d')}}',
   title: '{{$test->title}}',
       
   }, 
   @php } @endphp
   
   ]
   };
   // Birthday Events Source
   var sptBirthdayEvents = {
   id: 2,
   backgroundColor: '{{ 'var(--secondary)' }}',
   borderColor: '{{ 'var(--primary-bg-color)' }}',
   Color: '#ffff',
   type: 'Assignment',
   events: [
   @php  foreach ($master_meeting as $master_meeting) { @endphp
       {
       id: 'Master Class',
   start: '{{now()->parse($master_meeting->start_date)->format('Y')}}' + '-' + '{{now()->parse($master_meeting->start_date)->format('m')}}' + '{{now()->parse($master_meeting->start_date)->format('d')}}',
   end: '{{now()->parse($master_meeting->start_date)->format('Y')}}' + '-' + '{{now()->parse($master_meeting->start_date)->format('m')}}' + '{{now()->parse($master_meeting->start_date)->format('d')}}',
   title: '{{$master_meeting->topic}}',
       
    },
   @php }  @endphp
   ]
   };


   var sptTestSeries = {
   id: 2,
   backgroundColor: '#FFA600',
   borderColor: '#00FFFF',
   // textColor: '#fff',
   type: 'Test Series',
  
   };
   
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
   var elements = document.querySelectorAll('.fc-event');

   elements.forEach(function(element) {
      element.classList.remove('fc-event-draggable');
   });
});

</script>

@endsection