%html{'ng-app' => 'calendarApp', 'ng-cloak' => 'true'}

-@days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

.calendar{'ng-controller' => 'calendarController as calendar'}
  .calendar_left
    .header
      %i{'class' => 'material-icons', 'ng-click' => 'calendar.prev()'} navigate_before
      %h1 {{calendar.month}}
      %i{'class' => 'material-icons', 'ng-click' => 'calendar.next()'} navigate_next
    .days
      -@days.each do |days, index|
        .day_item #{days}
    .dates
     
  .calendar_right
    
    .list
    
      %ul
      
        %li{'ng-repeat' => 'events in calendar.events', 'ng-show' => 'events.id === calendar.dataId', 'class' => 'bounce-in'}
        
          %span{'class' => 'type'} It's a {{ events.type }} thing -
          
          %span{'class' => 'description'} {{ events.description }}
    
    %form{'ng-submit' => 'calendar.add()'}
      %input{'type' => 'text', 'placeholder' => 'Enter a task for this day', 'ng-model' => 'calendar.description'}
        %select{'placeholder' => 'calendar.type', 'ng-model' => 'calendar.type'}
          %option{'value' => 'Social'} Social
          %option{'value' => 'Work'} Work

<script type="text/tmpl" id="tmpl">
  {{ 
  var date = date || new Date(),
      month = date.getMonth(), 
      year = date.getFullYear(), 
      first = new Date(year, month, 1), 
      last = new Date(year, month + 1, 0),
      startingDay = first.getDay(), 
      thedate = new Date(year, month, 1 - startingDay),
      dayclass = lastmonthcss,
      today = new Date(),
      i, j; 
  if (mode === 'week') {
    thedate = new Date(date);
    thedate.setDate(date.getDate() - date.getDay());
    first = new Date(thedate);
    last = new Date(thedate);
    last.setDate(last.getDate()+6);
  } else if (mode === 'day') {
    thedate = new Date(date);
    first = new Date(thedate);
    last = new Date(thedate);
    last.setDate(thedate.getDate() + 1);
  }
  
  }}

  <table class="calendar-table table table-condensed table-tight">
    <thead>
      <tr>
        <td colspan="7" style="text-align: center">
          <table style="white-space: nowrap; width: 100%">
            <tr>
              <td style="text-align: left;">
                <span class="btn-group">
                  <button class="js-cal-prev btn btn-default">&lt;</button>
                  <button class="js-cal-next btn btn-default">&gt;</button>
                </span>
                <button class="js-cal-option btn btn-default {{: first.toDateInt() <= today.toDateInt() && today.toDateInt() <= last.toDateInt() ? 'active':'' }}" data-date="{{: today.toISOString()}}" data-mode="month">{{: todayname }}</button>
              </td>
              <td>
                <span class="btn-group btn-group-lg">
                  {{ if (mode !== 'day') { }}
                    {{ if (mode === 'month') { }}<button class="js-cal-option btn btn-link" data-mode="year">{{: months[month] }}</button>{{ } }}
                    {{ if (mode ==='week') { }}
                      <button class="btn btn-link disabled">{{: shortMonths[first.getMonth()] }} {{: first.getDate() }} - {{: shortMonths[last.getMonth()] }} {{: last.getDate() }}</button>
                    {{ } }}
                    <button class="js-cal-years btn btn-link">{{: year}}</button> 
                  {{ } else { }}
                    <button class="btn btn-link disabled">{{: date.toDateString() }}</button> 
                  {{ } }}
                </span>
              </td>
              <td style="text-align: right">
                <span class="btn-group">
                  <button class="js-cal-option btn btn-default {{: mode==='year'? 'active':'' }}" data-mode="year">Year</button>
                  <button class="js-cal-option btn btn-default {{: mode==='month'? 'active':'' }}" data-mode="month">Month</button>
                  <button class="js-cal-option btn btn-default {{: mode==='week'? 'active':'' }}" data-mode="week">Week</button>
                  <button class="js-cal-option btn btn-default {{: mode==='day'? 'active':'' }}" data-mode="day">Day</button>
                </span>
              </td>
            </tr>
          </table>
          
        </td>
      </tr>
    </thead>
    {{ if (mode ==='year') {
      month = 0;
    }}
    <tbody>
      {{ for (j = 0; j < 3; j++) { }}
      <tr>
        {{ for (i = 0; i < 4; i++) { }}
        <td class="calendar-month month-{{:month}} js-cal-option" data-date="{{: new Date(year, month, 1).toISOString() }}" data-mode="month">
          {{: months[month] }}
          {{ month++;}}
        </td>
        {{ } }}
      </tr>
      {{ } }}
    </tbody>
    {{ } }}
    {{ if (mode ==='month' || mode ==='week') { }}
    <thead>
      <tr class="c-weeks">
        {{ for (i = 0; i < 7; i++) { }}
          <th class="c-name">
            {{: days[i] }}
          </th>
        {{ } }}
      </tr>
    </thead>
    <tbody>
      {{ for (j = 0; j < 6 && (j < 1 || mode === 'month'); j++) { }}
      <tr>
        {{ for (i = 0; i < 7; i++) { }}
        {{ if (thedate > last) { dayclass = nextmonthcss; } else if (thedate >= first) { dayclass = thismonthcss; } }}
        <td class="calendar-day {{: dayclass }} {{: thedate.toDateCssClass() }} {{: date.toDateCssClass() === thedate.toDateCssClass() ? 'selected':'' }} {{: daycss[i] }} js-cal-option" data-date="{{: thedate.toISOString() }}">
          <div class="date">{{: thedate.getDate() }}</div>
          {{ thedate.setDate(thedate.getDate() + 1);}}
        </td>
        {{ } }}
      </tr>
      {{ } }}
    </tbody>
    {{ } }}
    {{ if (mode ==='day') { }}
    <tbody>
      <tr>
        <td colspan="7">
          <table class="table table-striped table-condensed table-tight-vert" >
            <thead>
              <tr>
                <th>&nbsp;</th>
                <th style="text-align: center; width: 100%">{{: days[date.getDay()] }}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th class="timetitle" >All Day</th>
                <td class="{{: date.toDateCssClass() }}">  </td>
              </tr>
              <tr>
                <th class="timetitle" >Before 6 AM</th>
                <td class="time-0-0"> </td>
              </tr>
              {{for (i = 6; i < 22; i++) { }}
              <tr>
                <th class="timetitle" >{{: i <= 12 ? i : i - 12 }} {{: i < 12 ? "AM" : "PM"}}</th>
                <td class="time-{{: i}}-0"> </td>
              </tr>
              <tr>
                <th class="timetitle" >{{: i <= 12 ? i : i - 12 }}:30 {{: i < 12 ? "AM" : "PM"}}</th>
                <td class="time-{{: i}}-30"> </td>
              </tr>
              {{ } }}
              <tr>
                <th class="timetitle" >After 10 PM</th>
                <td class="time-22-0"> </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
    {{ } }}
  </table>
</script>




<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

html, body {
  background: #f7f8fb;
}

.calendar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.calendar_left {
  background: #00A8E8;
  width: 400px;
  height: 415px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 1.5em;
  z-index: 1;
}
.calendar_left .header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2em;
  color: #FFF;
  font-size: 0.7em;
}
.calendar_left .header h1 {
  line-height: 1em;
}
.calendar_left .header i {
  cursor: pointer;
}
.calendar_right {
  background: #0096cf;
  width: 350px;
  height: 415px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
  transform: scale(0.95) translateX(-10px);
  z-index: 0;
}
.calendar_right .list {
  height: 351px;
  overflow-y: scroll;
  padding: 1em;
}
.calendar_right .list ul {
  padding: 2.25em;
}
.calendar_right .list li {
  padding: 1em;
  width: 180px;
  color: #FFF;
  transform: translateX(-700px);
}
.calendar_right .list .description {
  font-size: 12px;
}
.calendar_right form {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.calendar_right input {
  background: #008ec4;
  border: none;
  padding: 1.2em;
  flex: 2;
  outline: none;
  color: #FFF;
  border-bottom-right-radius: 5px;
}
.calendar_right select {
  background: #007fb0;
  border: none;
  padding: 1.2em;
  outline: none;
  color: #FFF;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.days {
  display: flex;
  justify-content: flex-start;
  width: 400px;
}
.days .day_item {
  color: #FFF;
  width: 50px;
  text-align: center;
  padding-bottom: 1em;
}

.dates {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  width: 350px;
}
.dates .date_item {
  color: #FFF;
  width: 50px;
  text-align: center;
  height: 50px;
  padding: 1em;
  cursor: pointer;
  border-radius: 100%;
}

.present {
  background: #FFF;
  transform: scale(0.7);
  border-radius: 50px;
  padding: 0.95em !important;
  color: #00A8E8 !important;
  z-index: 0;
  box-shadow: 10px 10px 5px #009dd9;
  -webkit-animation: bounce-button-in 0.45s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
          animation: bounce-button-in 0.45s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

::-webkit-scrollbar {
  display: none;
}

::-webkit-input-placeholder {
  color: #FFF;
}

.bounce-in.ng-animate {
  -webkit-animation: none 0s;
          animation: none 0s;
}

.bounce-in {
  -webkit-animation: bounce-in 0.9s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
          animation: bounce-in 0.9s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@-webkit-keyframes bounce-in {
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(7px);
  }
  100% {
    transform: translateX(2px);
  }
}

@keyframes bounce-in {
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(7px);
  }
  100% {
    transform: translateX(2px);
  }
}
@-webkit-keyframes bounce-button-in {
  0% {
    transform: translateZ(0) scale(0);
  }
  100% {
    transform: translateZ(0) scale(0.7);
  }
}
@keyframes bounce-button-in {
  0% {
    transform: translateZ(0) scale(0);
  }
  100% {
    transform: translateZ(0) scale(0.7);
  }
}
        </style>
        <script>
       (function() {
  angular
    .module('calendarApp', ['ngAnimate'])
    .controller('calendarController', calendarController);

  function calendarController($scope) {
    var vm = this,
      now = new Date(),
      months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      jan = daysInMonth(1, now.getFullYear()),
      feb = daysInMonth(2, now.getFullYear()),
      mar = daysInMonth(3, now.getFullYear()),
      apr = daysInMonth(4, now.getFullYear()),
      may = daysInMonth(5, now.getFullYear()),
      jun = daysInMonth(6, now.getFullYear()),
      jul = daysInMonth(7, now.getFullYear()),
      aug = daysInMonth(8, now.getFullYear()),
      sep = daysInMonth(9, now.getFullYear()),
      oct = daysInMonth(10, now.getFullYear()),
      nov = daysInMonth(11, now.getFullYear()),
      dec = daysInMonth(12, now.getFullYear()),
      monthRef = [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec],
      month = now.getMonth(),
      monthDay = monthRef[now.getMonth()],
      n = now.getDate(),
      uidi,
      uidm,
      uid;

    vm.id = now.getDate().toString() + now.getMonth().toString();
    vm.dataId;
    vm.events = [];
    vm.description;
    vm.type = 'Social';
    vm.month = months[month];
    vm.next = next;
    vm.prev = prev;
    vm.add = add;

    // Place Dates In Correct Place
    function placeIt() {
      if (month === 0) {
        $(".date_item").first().css({
          'margin-left': '200px'
        })
      } else if (month === 1) {
        $("date_item").first().css({
          'margin-left': '0px'
        })
      } else if (month === 2) {
        $(".date_item").first().css({
          'margin-left': '150px'
        })
      } else if (month === 3) {
        $(".date_item").first().css({
          'margin-left': '300px'
        })
      } else if (month === 4) {
        $(".date_item").first().css({
          'margin-left': '400px'
        })
      } else if (month === 5) {
        $(".date_item").first().css({
          'margin-left': '200px'
        })
      } else if (month === 6) {
        $(".date_item").first().css({
          'margin-left': '300px'
        })
      } else if (month === 7) {
        $(".date_item").first().css({
          'margin-left': '100px'
        })
      } else if (month === 8) {
        $(".date_item").first().css({
          'margin-left': '250px'
        })
      } else if (month === 9) {
        $(".date_item").first().css({
          'margin-left': '350px'
        })
      } else if (month === 10) {
        $(".date_item").first().css({
          'margin-left': '150px'
        })
      } else if (month === 11) {
        $(".date_item").first().css({
          'margin-left': '250px'
        })
      }
    }

    // Highlight Present Day
    function presentDay() {
      $(".date_item").eq(n - 1).addClass("present");
    }

    // Print List Of Dates For Current Month
    function showDays(days) {
      for (var i = 1; i < days; i++) {
        var uidi = i;
        var uidm = month;
        var uid = uidi.toString() + uidm.toString();
        $(".dates").append("<div class='date_item' data='" + uid + "'>" + i + "</div>");
      }
    }

    // Get The Current Date
    function daysInMonth(month, year) {
      return new Date(year, month, 0).getDate() + 1;
    }

    // Next Month
    function next() {
      if (month < 11) {
        month++;
        $(".dates").html('');
        vm.month = months[month];
        monthDay = monthRef[month];
        showDays(monthDay);
        placeIt();
      }
    }

    // Previous Month
    function prev() {
      if (month === 0) {
        return false
      } else {
        month--;
        $(".dates").html('');
        vm.month = months[month];
        monthDay = monthRef[month];
        showDays(monthDay);
        placeIt();
      }
    }

    // Add Events To Specified Date
    function add() {
      vm.events.push({
        id: vm.id,
        description: vm.description,
        type: vm.type
      });

      vm.description = "";
    }

    // Fetch Unique ID For Each Date Item
    $(".dates").on("click", ".date_item", function() {
      vm.id = $(this).attr('data');
      vm.dataId = $(this).attr('data');
      $(this).addClass("present").siblings().removeClass("present");
      $scope.$apply();
    });

    showDays(monthDay);

    presentDay();

    placeIt();

  }

})();                                                                                                                                                                                                                                             
                                                                                                                                                                                                                                                    
         </script>