@extends('layouts.master')

@section('pageBreadcrumb') @include('layouts.includes.breadcrumb', ['moduleTitle' => __('3D Interactives')]) @stop

@section('content')
<!-- end widget -->
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="card-box">
        <div class="card-head">
                <header>{{ __('3D Interactives')}}</header>
        </div>
        <div class="card-body ">
           <div class="container">
  <div class="row">
    <div class="col-sm" align="center">
      BIOLOGY <br />
      <a href="/students-biology">
      Click For Video
      </a>
    </div>
    <div class="col-sm" align="center">
     CHEMISTRY <br />
      <a href="/students-chemistry">
      Click For Video
      </a>
    </div>
    <div class="col-sm" align="center">
      PHYSICS <br />
       <a href="/students-physics">
      Click For Video
      </a>
    </div>
  </div>
</div>

<div class="card-head">

<div class="lecture-five-col-row common-days common-type Monday teacher_5 class_9 sub_2 online" style="border:solid 1.2px; border-radius:10px; border-color:rgb(24 128 201); margin-right:10px;">
            <div class="lecture-col">
                <div class="lecThumb" style="background: url( /assets/img/card/science.png);background-position: center center; background-size: 100% 100%;background-repeat: no-repeat;">
                    <div class="lecTitle" style="padding-left:5px;">
                        <h2>Physics</h2>
                    </div>
                    <div class="course-box">
                        <h3>Measuring Classroom</h3>
                        <div class="mg-bottom-10 margin-top-20">
                           4 Activities
                        </div>
                        <div class="mg-bottom-10">
                           <span class="lecGrade"> Chapter 10</span>   
                        </div>
                        
                       <a target="_blank" attr-link="http://qabaslms.com:4000/meeting//4/1" href="http://qabaslms.com:4000/meeting/LzQvMQ==" type="button" class="margin-top-20 pull-right mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect btn-info show" data-upgraded=",MaterialButton,MaterialRipple" style="margin-bottom:10px;">Launch<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
                       
                    </div>
                </div>
            </div>
        </div>
        
 
<div class="lecture-five-col-row common-days common-type Monday teacher_5 class_9 sub_2 online" style="border:solid 1.2px; border-radius:10px; border-color:rgb(24 128 201); margin-right:10px;">
            <div class="lecture-col">
                <div class="lecThumb" style="background: url( /assets/img/card/science.png);background-position: center center; background-size: 100% 100%;background-repeat: no-repeat;">
                    <div class="lecTitle" style="padding-left:5px;">
                        <h2>Physics</h2>
                    </div>
                    <div class="course-box">
                        <h3>Object Of rest and in motion</h3>
                        <div class="mg-bottom-10 margin-top-20">
                           8 Activities
                        </div>
                        <div class="mg-bottom-10">
                           <span class="lecGrade"> Chapter 04</span>   
                        </div>
                        
                       <a target="_blank" attr-link="http://qabaslms.com:4000/meeting//4/1" href="http://qabaslms.com:4000/meeting/LzQvMQ==" type="button" class="margin-top-20 pull-right mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect btn-info show" data-upgraded=",MaterialButton,MaterialRipple" style="margin-bottom:10px;">Launch<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
                       
                    </div>
                </div>
            </div>
        </div>
        
        <div class="lecture-five-col-row common-days common-type Monday teacher_5 class_9 sub_2 online" style="border:solid 1.2px; border-radius:10px; border-color:rgb(24 128 201); margin-right:10px;">
            <div class="lecture-col">
                <div class="lecThumb" style="background: url( /assets/img/card/science.png);background-position: center center; background-size: 100% 100%;background-repeat: no-repeat;">
                    <div class="lecTitle" style="padding-left:5px;">
                        <h2>Chemistry</h2>
                    </div>
                    <div class="course-box">
                        <h3>Dissolving salt in water</h3>
                        <div class="mg-bottom-10 margin-top-20">
                           5 Activities
                        </div>
                        <div class="mg-bottom-10">
                           <span class="lecGrade"> Chapter 06</span>   
                        </div>
                        
                       <a target="_blank" attr-link="http://qabaslms.com:4000/meeting//4/1" href="http://qabaslms.com:4000/meeting/LzQvMQ==" type="button" class="margin-top-20 pull-right mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect btn-info show" data-upgraded=",MaterialButton,MaterialRipple" style="margin-bottom:10px;">Launch<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
                       
                    </div>
                </div>
            </div>
        </div>
        
        
</div>

        </div>
        </div>
    </div>
    
     
     
     
    
     
     
    
</div>


@stop
@section('scripts')
 <style>
        .fc-event, .fc-event-dot {
            background-color: #1880c9 !important;
        }
        .fc-event .fc-bg {
            opacity: 0 !important;
        }
    </style>
    <link href="{{ asset('assets/plugins/fullcalendar/fullcalendar.css') }}" rel="stylesheet" type="text/css"/>
    <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/fullcalendar/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/calendar/calendar.min.js') }}"></script>

    <link href="{{ asset('assets/plugins/sweet-alert/sweetalert2.min.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/plugins/sweet-alert/sweetalert2.all.min.js') }}"></script>
    <script>

    let teacherAvailability;
    $(function () {
        $('#timetableCalendar').fullCalendar({
            header: {
                left: '',
                center: '',
                right: ''
            },
            plugins: ['momentPlugin', 'formatDate'],
            // height: 680, // Fix height
            columnFormat: 'dddd', // Display just full length of weekday, without dates
            defaultView: 'agendaWeek', // display week view
            // hiddenDays: [0,6], // hide Saturday and Sunday
            weekNumbers: false, // don't show week numbers
            minTime: '06:00:00', // display from 16 to
            maxTime: '20:00:00', // 23
            slotDuration: '00:15:00', // 15 minutes for each row
            allDaySlot: false, // don't show "all day" at the top
            aspectRatio: 1.5,
            editable: false,
            selectable: false,
            selectHelper: false,
            droppable: false, // this allows things to be dropped onto the calendar
            /*select: function (start, end, allDay) {
                // Code for creating new events.
            },*/
            eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
                // Code when you resize an event (for example make it two hours longer
                eventActions(event);
            },
            eventDrop: function (event, jsEvent, ui, view) {
                // Code when you drop an element somewhere else
                eventActions(event);
            },
            eventRender: function (event, element, view) {
                element.innerHTML = event.title;
            },
            eventClick: function(event, jsEvent, view) {
                getEventDetails(event.id);
            },
            timeZone: 'UTC',
            events: {
                url: '{{ route('teacher-timetable.events') }}',
                type: 'GET',
                error: function () {
                    alert('there was an error while fetching events!');
                }
            },
            backgroundColor: '#1880c9'
        });

    });



</script>
<script>
$(document).on('change', '#__calender_helper', function () {
    let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    let calenderHelper = $(this).val();
    let dateObject = new Date(calenderHelper);
    let dayName = days[dateObject.getDay()];
    $("#option_days").val(dayName);
     showDays();
});

$(document).on('change', '#option_days', function () {
   showDays();
});
function showDays(){
    let optionDays = $.trim($("#option_days").val());
    $(".common-type").hide();
    var dviClass = "";
    if(optionDays != null && optionDays!= ''){
        dviClass = "."+optionDays;
    }
    if(dviClass){
        console.log(dviClass);
        $(dviClass).show();
    }
    else{
        $(".common-type").show();
    }
}
</script>
@stop

