@extends('student.layouts.app')
@section('titlePage', 'Dashboard')
@push('styles')
<link rel="stylesheet" href="{{asset('assets/vidiyal/plugins/pnotify/css/pnotify.custom.min.css')}}">
@endpush
@section('content')
<script>  
    document.getElementById("ktss-0").classList.add("active");
</script>
<div class="container-fluid flex-grow-1 container-p-y">
   <h4 class="text-primary font-weight-bold pt-2">WELCOME ON BOARD <span 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">
            <div class="card">
                <div class="card-body tx-center" style="height:200px">
                <span class="avatar avatar-lg rounded-circle mx-auto bg-primary-transparent tx-primary mb-2"><i class="fab fa-leanpub"></i></span>  
                <h4>Book Master Classes</h4>
                  <h4 class="counter tx-primary">{{$countTest ?? 0}}</h4>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card">
                <div class="card-body tx-center" style="height:200px">
                <span class="avatar avatar-lg rounded-circle mx-auto bg-warning-transparent tx-warning mb-2"><i class="fas fa-file-alt"></i></span>  
                <h4>Free Courses</h4>
                  <h4 class="counter tx-warning">{{$countAssignment ?? 0}}</h4>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card">
                <div class="card-body tx-center" style="height:200px">
                <span class="avatar avatar-lg rounded-circle mx-auto bg-green-transparent tx-green mb-2"><i class="fa fa-graduation-cap"></i></span>
                  <h4>Paid Course</h4>
                  <h4 class="counter tx-green">{{$countCourses ?? 0}}</h4>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card">
                <div class="card-body tx-center" style="height:200px">
                <span class="avatar avatar-lg rounded-circle mx-auto bg-orange-transparent tx-orange mb-2"><i class="fa fa-cubes"></i></span>  
                <h4>Total Study Material</h4>
                  <h4 class="counter tx-orange">{{$countSeries ?? 0}}</h4>
                </div>
            </div>
        </div> 

        {{-- <div class="col-xl-3">
            <div class="motto-icon mi_2 tx-white">
               <div class="card-body  tx-center">
                  <span class="avatar avatar-lg rounded-circle mx-auto bg-white-transparent tx-white mb-2"><i class="fab fa-leanpub"></i></span>
                  <h4>Total Exam</h4>
                  <h4 class="counter">{{$countTest ?? 0}}</h4>
               </div>
            </div>
         </div>
         <div class="col-xl-3">
            <div class="motto-icon mi_3 tx-white">
               <div class="card-body  tx-center">
                  <span class="avatar avatar-lg rounded-circle mx-auto bg-white-transparent tx-white mb-2"><i class="fas fa-file-alt"></i></span>
                  <h4>Total Assignment</h4>
                  <h4 class="counter">{{$countAssignment ?? 0}}</h4>
               </div>
            </div>
         </div>
         <div class="col-xl-3">
            <div class="motto-icon mi_4 tx-white">
               <div class="card-body  tx-center">
                  <span class="avatar avatar-lg rounded-circle mx-auto bg-white-transparent tx-white mb-2"><i class="fa fa-graduation-cap"></i></span>
                  <h4>Total Course</h4>
                  <h4 class="counter">{{$countCourses ?? 0}}</h4>
               </div>
            </div>
         </div>
         <div class="col-xl-3">
            <div class="motto-icon mi_1 tx-white">
               <div class="card-body  tx-center">
                  <span class="avatar avatar-lg rounded-circle mx-auto bg-white-transparent tx-white mb-2"><i class="fa fa-cubes"></i></span>
                  <h4>Total TestSeries</h4>
                  <h4 class="counter">{{$countSeries ?? 0}}</h4>
               </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">Test</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">Assignment</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: true,
   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 = "{{ _route('student.tests.index') }}";
   } else if(arg.event.id == 'assignment') {
       window.location.href = "{{ _route('student.assignments.index') }}";
   } else {
      window.location.href = "{{ _route('student.test-series.index') }}";
   }
   },
   
   editable: true,
   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 ($assignments as $assign) { @endphp
       {
       id: 'assignment',
   start: '{{now()->parse($assign->start_date)->format('Y')}}' + '-' + '{{now()->parse($assign->start_date)->format('m')}}' + '{{now()->parse($assign->start_date)->format('d')}}',
   end: '{{now()->parse($assign->end_date)->format('Y')}}' + '-' + '{{now()->parse($assign->end_date)->format('m')}}' + '{{now()->parse($assign->end_date)->format('d')}}',
   title: '{{$assign->title}}',
       
    },
   @php } @endphp
   ]
   };


   var sptTestSeries = {
   id: 2,
   backgroundColor: '#FFA600',
   borderColor: '#00FFFF',
   // textColor: '#fff',
   type: 'Test Series',
  
   };
   
</script>
<script src="{{asset('assets/vidiyal/plugins/pnotify/js/pnotify.custom.min.js')}}"></script>
<script src="{{asset('assets/vidiyal/plugins/pnotify/js/notify-event.js')}}"></script>


@if( empty(user()->facebook_url)
|| empty(user()->linkedIn_url)
|| empty(user()->twitter_url)
|| empty(user()->guardian_name)
|| empty(user()->guardian_email)
|| empty(user()->guardian_phonenumber)
)
<script>
   new PNotify({
       title: `<a href="{{_route('student.edit-profile')}}" style="color:black; padding-top:50px;">Dear {{ get_user_name() }}</a>`,
       text: 'Please update your profile.',
       addclass: 'alert style-4 alert-success alert-dismissible fade show',
       type: 'success'
   })
</script>
@endif
@php
$user = user();
$resum_updated_date = $user->resum_updated_date;
$date1 = date_create($resum_updated_date);
$date2 = date_create(date("Y-m-d"));
$diff = date_diff($date1,$date2);
$days = $diff->format("%R%a");
@endphp
@if($days > 180)
<script>
   new PNotify({
       title: `<a href="{{_route('student.edit-profile')}}" style="color:black; padding-top:50px;">Dear {{ get_user_name() }}</a>`,
       text: 'Proceed by Updating your Resume !. ',
       addclass: 'alert style-4 alert-success alert-dismissible fade show',
       type: 'success'
   })
</script>
@endif
@endsection