app/views/events/_form.html.erb
<div class="row" id="create_background">
<div class="event-section row remove-margin">
<div class="col s12" style="padding: 0px 0px">
<ul class="tabs">
<li class="tab col s3 ">
<a class="our-tab2-color" href="#test1">
<i class="fa fa-plus"></i>
Create
</a>
</li>
<li class="tab col s3 ">
<a class="our-tab2-color" href="#ticketing" id="customize">
<i class="fa fa-search "></i>
Customize
</a>
</li>
</ul>
</div>
<%= render 'categories/form' %>
<%= form_for @event, html: {class: "col s12", multipart: true} do |f| %>
<div class="col s12" id="test1">
<div class="container margin-down">
<div class="row">
<%= show_form_errors(@event) %>
<div class="row">
<div class="input-field col s10">
<i class="fa fa-pencil prefix icon-setting"></i>
<label>EVENT TITLE
<span>*</span>
</label>
<%= f.text_field :title, class: "validate", placeholder: "Give it a short distinct name", required: true %>
</div>
</div>
<div class="row">
<div class="input-field col l5 m5 s10">
<i class="fa fa-map-marker prefix icon-setting"></i>
<label>Location
<span>*</span>
</label>
<%= f.text_field :location, class: "validate", placeholder: "Enter Location where it will be held", required: true %>
<%= f.hidden_field :map_url, placeholder: "Enter Location where it will be held" %>
</div>
<div class="input-field col l5 m5 s10">
<i class="fa fa-street-view prefix icon-setting"></i>
<label>Venue
</label>
<%= f.text_field :venue, class: "validate", placeholder: "Enter Venue where it will be held", min: Date.today %>
</div>
</div>
<div class="row">
<div class="col s10 hide-on-med-and-down our-map">
<div class="map-area" id="map-canvas">
Load Maps Here
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col l7">
<i class="fa fa-th-large prefix icon-setting"></i>
<%= f.collection_select :category_id, Category.list, :id, :name, { prompt: "Choose a category"} , class: "browser-default", blank_option: true, required: true%>
</div>
<div class="input-field col l3">
<button data-target="custom_category" class="btn modal-trigger input-field btn-large" id="btn_add_category"><i class="fa fa-plus-circle"></i> Add custom</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-field col s5">
<i class="fa fa-calendar prefix icon-setting"></i>
<%= f.date_field :start_date, class: "datepicker", placeholder: "Start Date", value: @event.start_date, required: true %>
</div>
<div class="input-field col s5">
<i class="fa fa-calendar prefix icon-setting"></i>
<%= f.date_field :end_date, class: "datepicker", placeholder: "End Date", value: @event.end_date %>
</div>
</div>
<div class="row col s10">
<div id="file-uploader" class="col l6 m6 s8 offset-l3 offset-m3 offset-s2 file-uploader">
<div class="inner-file-upload center">
<span class="events_pic_name">
<i class="fa fa-camera"></i>
<br/>
Upload Event Photo</span>
</div>
</div>
</div>
<%= f.file_field :image, id: "event_photo_upload" %>
<div class="row">
<div class="input-field col s10">
<i class="fa fa-newspaper-o prefix icon-setting"></i>
<%= f.text_area :description, rows: 6, placeholder: "Enter description of event", required: true, class: "materialize-textarea" %>
</div>
</div>
<div class="input-field col s3 offset-s4">
<%= link_to "Next <i class='fa fa-hand-o-right'></i>".html_safe, "#", class: "col s12 btn-large waves-effect waves-light home_button center more-info z-depth-0", id:'next' %>
</div>
</div>
</div>
<div class="col s12" id="ticketing">
<div class="container margin-down">
<div>
<div style="margin-bottom: 20px; margin-left: 50px;">
</div>
<div class="row ">
<div class="event_ticket_field" >
<h5><i class="fa fa-ticket prefix icon-setting"></i> Create Ticket</h5>
<hr>
<%= f.fields_for :ticket_types do |tickets| %>
<%= render "events/ticket_type_fields", f: tickets, locals: {f: tickets} %>
<% end %>
</div>
<div class="links">
<%= link_to_add_association content_tag(:span, 'Add Ticket', class: "btn btn-circle"), f, :ticket_types, class: '' %>
</div>
</div>
<!-- Add Staff -->
<div class="row">
<div style="margin-bottom: 20px; margin-left: 50px;">
</div>
<div class="event_ticket_field">
<h5><i class="fa fa-user prefix icon-setting"></i> Add Staff</h5>
<hr>
<div class="event_staffs" id="event_staffs"><%= @event.get_event_staffs %></div>
<%= render "staff_fields" %>
</div>
</div>
<!--End add staff -->
<!-- Add Highlight -->
<div class="row">
<div style="margin-bottom: 20px; margin-left: 50px;">
</div>
<div class="event_highlights_field">
<h5><i class="fa fa-th-list prefix icon-setting"></i> Add Highlight</h5>
<hr>
<div class="event_staffs" id="event_highlights">
<ul class="collapsible" data-collapsible="accordion" id="highlight_table">
<% if @highlights %>
<% count = 0 %>
<% @highlights.each do |h| %>
<%= render "highlight", highlight: h, count: count %>
<% count += 1 %>
<% end %>
<% end %>
</ul>
</div>
<%= render "highlight_fields", field_id: "_new" %>
<div class="col s4">
<button type="button" id="add_highlight" class="btn btn-circle staff_add_btn">
Add Highlight
</button>
</div>
</div>
</div>
<!--End add highlight -->
</div>
<div class="row category-selected">
<div class="row radio-select">
<h5>Select a template</h5>
<hr>
<div class="input-field col s10">
<div class="temps">
<% all_template.each do |i|%>
<span class="col s6 m3 center temp_image">
<input id="<%= i.name %>" name="event[event_template_id]" type="radio" value="<%= i.id %>"/>
<label for="<%= i.name %>">
<%= image_tag "#{i.image}" %>
</label>
</span>
<% end %>
</div>
</div>
</div>
</div>
</div>
<div class="col s3 offset-s4 center">
<%= link_to "Preview <i class='fa fa-hand-o-right'></i>".html_safe, "#modal1", class: "col s12 btn-large waves-effect waves-light home_button preview modal-trigger center z-depth-0" %>
</div>
</div>
</div>
</div>
<!-- Preview Modal -->
<div id="modal1" class="modal modal-fixed-footer" style="width: 100%; height:100% !important; ">
<div class="modal-content" style="padding: 0px;">
<% @current_page = "new" %>
<%= render "event_details" %>
</div>
<div class="modal-footer">
<button class="btn-large waves-effect waves-light home_button z-depth-0" id="save_event">Save
<i class="fa fa-floppy-o"></i>
</button>
<a class="btn btn-large left modal-action modal-close waves-effect home_button red">Close Preview</a>
</div>
</div>
<!-- End Preview Modal -->
<% end %>