@extends('layouts.master')
@section('css')
<style>
	.fc-content {
    cursor: pointer;
}

</style>
@endsection
@section('content')
<div class="row page-titles">
	{{-- <div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">Project Picture / Video</h4>
	</div>
	<div class="col-md-7 align-self-center text-right">
	    <div class="d-flex justify-content-end align-items-center">	        
	        
	    </div>
	</div> --}}
</div>
<div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div class="card-body">
                                            <h4 class="card-title m-t-10">Project Picture / Video</h4>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div id="" class="">

                                                        <div id="list">
                                                        	
                                                        </div>
                
                                                    </div>
 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="card-body b-l calender-sidebar">
                                            <div id="calendar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
@include('project.student.modal_edit')
@endsection

@section('js')
<script>
  var defaultEvents;
  var token = $("meta[name='csrf-token']").attr("content");
 $(document).ready(function() {
 	 getcallendar();
 	 $("#expList").find("ol").hide();
  
	  $("#expList > li").click(function(){
	  	$(this).find("ol").slideToggle();
	  });
        // Nestable
        var updateOutput = function(e) {
            var list = e.length ? e : $(e.target),
                output = list.data('output');
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
            } else {
                output.val('JSON browser support required for this demo.');
            }
        };

        $('#nestable').nestable({
            group: 1,
            onDragStart: function(l,e){
			    return false
			  }
        }).on('change', updateOutput);

        $('#nestable2').nestable({
            group: 1
        }).on('change', updateOutput);

        updateOutput($('#nestable').data('output', $('#nestable-output')));
        updateOutput($('#nestable2').data('output', $('#nestable2-output')));

        $('#nestable-menu').on('click', function(e) {
            var target = $(e.target),
                action = target.data('action');
            if (action === 'expand-all') {
                $('.dd').nestable('expandAll');
            }
            if (action === 'collapse-all') {
                $('.dd').nestable('collapseAll');
            }
        });

        $('#nestable-menu').nestable();
       
    }); 
 function getcallendar(){
 	$.ajax({
	     url : 'project'+'/student',
	     type: 'get',
	      
	      success:function(response){
	       console.log(response);
	       var tgl = [];
	       for (i = 0; i < response.data.length; i++) {
	       
	       		var obj = {
	       			id : response.data[i].id,
	       			title : response.data[i].title,
	       			start : Date.parse( response.data[i].dead_line),
	       			className: response.data[i].color
	       		}
	       		tgl.push(obj);
			} 
			defaultEvents = tgl;

	        // defaultEvents =  [
         //    {
         //        title: 'Released Ample Admin!',
         //        start: new Date($.now() + 506800000),
         //        className: 'bg-info'
         //    }
         //    ];
         	var next = '';
         	if(response.notsub.next.count>0){
         		inext = '&nbsp;<i class="icon-arrow-right"></i>'
         	}else{
         		inext = ''
         	}
         	 for (i = 0; i < response.notsub.next.dead_line.length; i++) {
	       
	       		next +='<li>'+ response.notsub.next.dead_line[i]+'</li>';
			} 
			var over = '';
			if(response.notsub.over.count>0){
         		iover = '&nbsp;<i class="icon-arrow-right"></i>'
         	}else{
         		iover = ''
         	}
         	 for (i = 0; i < response.notsub.over.dead_line.length; i++) {
	         funct = "goto('"+String(response.notsub.over.dead_line[i])+"')"
	       		over += '<li><a href="javascript:void(0)" onclick="'+funct+'">'+response.notsub.over.dead_line[i]+'</li>';
			} 
         	$('#list').empty();
         	$('#list').append('\
         		<ol style=" list-style-type: none;">\
         			<li>Not been submitted\
                		<span class="badge badge-pill badge-info ml-auto">'+response.notsub.count+'</span>\
               			<ol id="expList" style=" list-style-type: none;">\
	                		<li>Next Time\
	                			<span class="badge badge-pill badge-warning ml-auto">'+response.notsub.next.count+'</span>'+inext+'\
	                			<ol style=" list-style-type: none;">'+next+'</ol>\
	                		</li>\
	                		<li>Over Time\
	                			<span class="badge badge-pill badge-danger ml-auto">'+response.notsub.over.count+'</span>'+iover+'\
								<ol style=" list-style-type: none;">'+over+'</ol>\
	                		</li>\
                		</ol>\
                	</li>\
                </ol>')
	        callCalendar();
	        $("#expList").find("ol").hide();
  
			  $("#expList > li").click(function(){
			  	$(this).find("ol").slideToggle();
			  	console.log(this)
			  });
  
		   
	      },
	      error:function(xhr){
	        console.log(xhr)
	      }
	    });
 }
function callCalendar(){
	!function($) {
    "use strict";

    var CalendarApp = function() {
        this.$body = $("body")
        this.$calendar = $('#calendar'),
        this.$event = ('#calendar-events div.calendar-events'),
        this.$categoryForm = $('#add-new-event form'),
        this.$extEvents = $('#calendar-events'),
        this.$modal = $('#my-event'),
        this.$saveCategoryBtn = $('.save-category'),
        this.$calendarObj = null
    };


    
    /* on click on event */
    CalendarApp.prototype.onEventClick =  function (calEvent, jsEvent, view) {
    	 $('#modal-edit').modal('show');
    	 $.ajax({
    	 	url : 'project'+'/student'+'/'+calEvent.id+'/view',
	     	type: 'get',
	     	success: function(response){
	     		$('#title').val(response.project.title);
	     		$('#task').val(response.project.task);
	     		$('#id').val(response.project.id)
	     		$('#preview').empty();
	     		console.log(response)
	     		if(response.link == null){
	     			$('#preview').append("<h3>You haven't submitted the project</h3>")
	     		}else{
	     			if(response.extension == 'jpg' || response.extension == 'png' ){
	     				$('#preview').empty();
	     				$('#preview').append('<img src="'+response.link+'" style="display: block;  margin-left: auto;  margin-right: auto;  width: 30%;">')

	     			}else{
	     				$('#preview').empty();
	     				$('#preview').append('<iframe frameborder="0" allowfullscreen style="width:100%;height:100%;" src="'+response.link+'" ></iframe>')
	     			}
	     			
	     		}
	     		
	     	},
	     	error : function(xhr){
	     		console.log(xhr);
	     	}
    	 })
        var $this = this;
            var form = $("<form></form>");
            form.append("<label>Change event name</label>");
            form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>");
            $this.$modal.modal({
                backdrop: 'static'
            });
            $this.$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function () {
                $this.$calendarObj.fullCalendar('removeEvents', function (ev) {
                    return (ev._id == calEvent._id);
                });
                $this.$modal.modal('hide');
            });
            $this.$modal.find('form').on('submit', function () {
                calEvent.title = form.find("input[type=text]").val();
                $this.$calendarObj.fullCalendar('updateEvent', calEvent);
                $this.$modal.modal('hide');
                return false;
            });
    },
    
    
     
    /* Initializing */
    CalendarApp.prototype.init = function() {
        // this.disableDrag();
        /*  Initialize the calendar  */
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var form = '';
        var today = new Date($.now());
       	 
        

        var $this = this;
        $this.$calendarObj = $this.$calendar.fullCalendar({
            slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
            minTime: '08:00:00',
            maxTime: '19:00:00',  
            defaultView: 'month',  
            handleWindowResize: true,   
             
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month'
            },
            events: defaultEvents,
            displayEventTime : false,
            editable: false,
            droppable: false, // this allows things to be dropped onto the calendar !!!
            eventLimit: true, // allow "more" link when too many events
            selectable: true,
            // drop: function(date) { $this.onDrop($(this), date); },
            select: function (start, end, allDay) { $this.onSelect(start, end, allDay); },
            eventClick: function(calEvent, jsEvent, view) { $this.onEventClick(calEvent, jsEvent, view); }

        });

        // //on new event
        // this.$saveCategoryBtn.on('click', function(){
        //     var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
        //     var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
        //     if (categoryName !== null && categoryName.length != 0) {
        //         $this.$extEvents.append('<div class="calendar-events" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="fa fa-circle text-' + categoryColor + '"></i>' + categoryName + '</div>')
        //         $this.enableDrag();
        //     }

        // });
    },

   //init CalendarApp
    $.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
    
	}(window.jQuery),

	//initializing CalendarApp
	function($) {
	    "use strict";
	    $.CalendarApp.init()
	}(window.jQuery);
}
function goto(tgl){
   var date= new Date(tgl);
   console.log(date)
   $('#calendar').fullCalendar('gotoDate', date)


}
$('#upload_project').click(function(){
    swal({
      title: "Are you sure?",
      text: "You will submit this project?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
      
         // if(save_method == 'add'){

            var urls ='project/student/upload' ;
            var method = 'post';
            console.log("jjkk")
          // }
          // else if(save_method == 'edit'){

          //   var urls ='project'+'/'+$('#id').val();
          //   var method = 'put';
          // }
        var form =  $("#form_project");
        var formData = new FormData($("#form_project")[0]);
        formData.append('_token', token);

       $.ajax({
      // headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      url : urls,
      type : method,
      dataType: 'json',
                    data: formData,
                    processData: false,
                    contentType: false,
      success: function(response){
      console.log(response);
      
       localStorage.setItem("swal",
                                    swal({
                                        title: 'success',
                                        text:  'Data berhasil disimpan',
                                        type: 'success',
                                        timer: 3500,
                                        showConfirmButton: false
                                    })
                            );
       $('#form_project')[0].reset();
       
       $('#modal-edit').modal('hide');
        $('#calendar').fullCalendar('destroy'); 
       getcallendar();
       
      
      },
      error: function (xhr){
        console.log(xhr);
      }
    });

      

       }
      });
  })
</script>

@endsection