// var selected_timeslot = 'AM'
 // var selected_timeslot_class = 'btn-danger';
 var $selected_timeslot_btn;
 $(function() {
     $selected_timeslot_btn = $('.timeslot-btn').first();

     $('button.timeslot-btn').on('click', function(e) {
         console.log($(this).data('timeslot'));
         //selected_timeslot = $(this).data('timeslot');
         //selected_timeslot_class = $(this).data('color');
         $selected_timeslot_btn = $(this);
     });

     $('button.staff-timeslot-btn').on('click', function(e) {
         var $td = $(this).closest('td.staff-timeslot');
         $td.find('input').val($selected_timeslot_btn.data('timeslot'));
         $td.find('.staff-timeslot-btn').html($selected_timeslot_btn.html());
         $td.find('.staff-timeslot-btn').removeClass('Roster-Grey Roster-Green Roster-Red Roster-Yellow Roster-Blue Roster-LightGrey').addClass($selected_timeslot_btn.data('color'));
     });
 });


 $('.Shift-Red').click(function() {
     $(".Shift-Red").addClass("Shift-Red");
     $(".Shift-Red").removeClass("Shift-Grey");
     $(".Shift-Yellow").addClass("Shift-Grey");
     $(".Shift-Blue").addClass("Shift-Grey");
 });


 $('.Shift-Yellow').click(function() {
     $(".Shift-Yellow").addClass("Shift-Yellow");
     $(".Shift-Yellow").removeClass("Shift-Grey");
     $(".Shift-Red").addClass("Shift-Grey");
     $(".Shift-Blue").addClass("Shift-Grey");
 });

 $('.Shift-Blue').click(function() {
     $(".Shift-Blue").addClass("Shift-Blue");
     $(".Shift-Blue").removeClass("Shift-Grey");
     $(".Shift-Red").addClass("Shift-Grey");
     $(".Shift-Yellow").addClass("Shift-Grey");
 });


 $('.Shift-Delete').click(function() {
    $(".Shift-Delete").addClass("Shift-DeleteActive");
 });



 $(document).ready(function() {
     $('.Shift-Red').addClass('Shift-Grey');
     $('.Shift-Yellow').addClass('Shift-Grey');
     $('.Shift-Blue').addClass('Shift-Grey');
     $('.Shift-Button').prop('disabled', true);
     $('.dropbtn').prop('disabled', true);
 });


 $("#checkShift").click(function() {
     var checked_status = this.checked;
     if (checked_status == true) {
         $('.Shift-Button').prop('disabled', false);
         $('#checkHoliday').prop('disabled', true);
         $('#checkDelete').prop('disabled', true);
         $('#SelectHoliday').prop('disabled', true);
         $('.Shift-Red').click();
         $(".PopupBTN").removeClass("PopupBTNActive");
         $('.deleteBTN-Active').removeClass('deleteBTN-Active').addClass('deleteBTN');

     } else {
         $('.Shift-Button').prop('disabled', true);
         $('#checkHoliday').prop('disabled', false);
         $('#checkDelete').prop('disabled', false);
         $('#SelectHoliday').prop('disabled', false);
         $('.Shift-Red').addClass('Shift-Grey');
         $('.Shift-Yellow').addClass('Shift-Grey');
         $('.Shift-Blue').addClass('Shift-Grey');
         checkRosterData();
     }
 });


 /* When the user clicks on the button, 
 toggle between hiding and showing the dropdown content */
 function dropDownHoliday() {
     document.getElementById("myDropdown").classList.toggle("show");
 }

 // Close the dropdown if the user clicks outside of it
 window.onclick = function(event) {
     if (!event.target.matches('.dropbtn')) {

         var dropdowns = document.getElementsByClassName("dropdown-content");
         var i;
         for (i = 0; i < dropdowns.length; i++) {
             var openDropdown = dropdowns[i];
             if (openDropdown.classList.contains('show')) {
                 openDropdown.classList.remove('show');
             }
         }
     }
 }


 $("#checkHoliday").click(function() {
     var checked_status = this.checked;
     if (checked_status == true) {
         $('.dropbtn').addClass('dropbtnActive');
         $('.dropbtn').prop('disabled', false);
         $('#checkShift').prop('disabled', true);
         $('#checkDelete').prop('disabled', true);
         $('.Shift-Button').prop('disabled', false);
         $('.Shift-Red').prop('disabled', true);
         $('.Shift-Yellow').prop('disabled', true);
         $('.Shift-Blue').prop('disabled', true);
         $('.ALBTN').click();
         $(".PopupBTN").removeClass("PopupBTNActive");
         $('.deleteBTN-Active').removeClass('deleteBTN-Active').addClass('deleteBTN');

     } else {
         $('.dropbtn').addClass('dropbtn');
         $('.dropbtn').removeClass('dropbtnActive');
         $('#checkShift').prop('disabled', false);
         $('#checkDelete').prop('disabled', false);
         $('.dropbtn').prop('disabled', true);
         $('.Shift-Button').prop('disabled', true);
         checkRosterData();
     }
 });


 $('.DeleteShift').click(function() {
     $(".DeleteShift").addClass("DeleteShiftActive");
 });




 $('.Shift-Blue').click(function() {
     $(".Shift-Blue").addClass("Shift-Blue");
     $(".Shift-Blue").removeClass("Shift-Grey");
     $(".Shift-Red").addClass("Shift-Grey");
     $(".Shift-Yellow").addClass("Shift-Grey");
 });



 $(".ALBTN").click(function() {
     $(".dropbtn").text("例假");
 });

 $(".NPLBTN").click(function() {
     $(".dropbtn").text("無薪假");
 });

 $(".SLBTN").click(function() {
     $(".dropbtn").text("病假");
 });


 function checkRosterData() {
     if ($('button.staff-timeslot-btn').hasClass('Roster-Red')) {
         $(".PopupBTN").addClass("PopupBTNActive");
     }
 }


 $("#checkDelete").click(function() {
     var checked_status = this.checked;
     if (checked_status == true) {
         $('.dropbtn').prop('disabled', true);
         $('#checkShift').prop('disabled', true);
         $('#checkHoliday').prop('disabled', true);
         $('.Shift-Button').prop('disabled', false);
         $('.Shift-Red').prop('disabled', true);
         $('.Shift-Yellow').prop('disabled', true);
         $('.Shift-Blue').prop('disabled', true);
         $('.deleteBTN').click();
         $(".PopupBTN").removeClass("PopupBTNActive");
         $(".deleteBTN").addClass("deleteBTNActive");
     } else {
         $('.dropbtn').addClass('dropbtn');
         $('.dropbtn').removeClass('dropbtnActive');
         $('#checkShift').prop('disabled', false);
         $('#checkHoliday').prop('disabled', false);
         $('.dropbtn').prop('disabled', true);
         $('.Shift-Button').prop('disabled', true);
         $(".deleteBTN").removeClass("deleteBTNActive");
         checkRosterData();
     }
 });


 $(document).ready(function(){
  
  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  })

})