yippie-io/iUPB

<%  title t("layouts.application.timetable") + ": " +  t(".new_entry") %>

<h1><%= t ".new_entry" %>  <sup><span class="label label-inverse">beta</span></sup></h1>
<% if @event.errors.any? %>
  <div id="error_explanation">
    <h5>Oops:</h5>
    <ul>
    <% @event.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>
<%= form_for @event, :url => { :action => "create" } do |f| %>
  <label for="event_name">Name:</label> <%= f.text_field :name %>
<label for="event_start_time"><%= t ".start_time" %>:</label>
<%= f.text_field :start_time, :type => "datetime-local", :value => (@event.start_time.blank? ? '' : @event.start_time.strftime('%d.%m.%Y %H:%M')), :placeholder => "tt.mm.jjjj hh:min" %>

<label for="event_end_time"><%= t ".end_time" %><small> (optional)</small>:</label>
  <%= f.text_field :end_time, :type => "datetime-local", :value => (@event.end_time.blank? ? '' : @event.end_time.strftime('%d.%m.%Y %H:%M')), :placeholder => "tt.mm.jjjj hh:min" %>
<label for="event_location"><%= t ".location" %>:</label> <%= f.text_field :location %>
<label for="event_course_id"><%= t ".corresponding_course" %>:</label>
  <%= f.select :course_id, @courses, include_blank: true %>
<span id="course_help" class="help-inline">
    <em><i class="icon-info-sign"></i> <a href="#" id="course_help_link"><%= t "why" %>?</a></em>
</span>
<label for="event_recurring" class="checkbox"><%= f.check_box :recurring %> <%= t ".recurring" %></label>
<div id="event_recurring_style_container" style="display:<%= (@event.recurring ? "block" : "none") %>;" class="well">
    <label for="event_recurring_style"><%= t ".recurring_style" %>:</label>
      <%= f.select :recurring_style, [[t("weekly"), "1week"], [t("2_weekly"), "2weeks"], [t("daily"), "daily"]] %>
    <label for="event_recurring_end"><%= t ".recurring_end" %>:</label>
      <%= f.text_field :recurring_end, :type => "date", :value => (@event.recurring_end.blank? ? (DateTime.now + 2.months) : @event.recurring_end).strftime('%d.%m.%Y'), :placeholder => "tt.mm.jjjj" %>
</div>
<br>
  <%= f.submit "OK", :class => "btn btn-primary" %>
<% end %>

<% content_for :javascript do %>
  <script>
    $('#event_recurring').change(function(){
        if($('#event_recurring').prop("checked")){
            $("#event_recurring_style_container").slideDown();
        } else {
            $("#event_recurring_style_container").slideUp();
        }
    });
    $('#course_help_link').click(function(e){
        $('#course_help').replaceWith($("<p>").attr("id", "course_help").html('&nbsp;<i class="icon-info-sign"></i> <%= t ".course_explanation" %>'));
        e.preventDefault();
    })
  </script>
<% end %>

<% if is_mobile? and !is_device?("iphone") and !is_device?("ipad")  # iOS 5+ supports html5 datetime inputs
%>
    <link href="/stylesheets/mobiscroll-2.1.custom.min.css" rel="stylesheet" type="text/css">
    <% content_for :javascript do %>
        <script src="/scripts/mobiscroll-2.1.custom.min.js" type="text/javascript"></script>
        <script>
        $(function(){
            var now = new Date();

            var scrollerOptions = {
                preset: 'datetime',
                minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
                theme: 'android-ics light',
                display: 'modal',
                mode: 'scroller',
                lang: '<%= I18n.locale %>'
            };

               $('#event_end_time').scroller(scrollerOptions); 

            $('#event_start_time').scroller(scrollerOptions).change(function(){
                $('#event_end_time').scroller("setDate", $('#event_start_time').scroller("getDate"), true);
            });  

            $('#event_recurring_end').scroller($.extend(scrollerOptions, {preset: 'date'})); 

        });
        </script>
    <% end %>
<% else %>
 <% content_for :javascript do %>
  <script>
    $('#event_start_time').change(function(){
        $('#event_end_time').val($(this).val());
    });
  </script>
 <% end %>
<% end %>