tickets/app/views/admin/tickets/show.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
  <%= stylesheet_link_tag "tickets/ticket_show" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/jquery.form.js" %>
  <%= javascript_include_tag "validator" %>
<% end %>
<% if !@ticket .nil? %>
<% case @ticket.status 
  when "open"
    badge_class = "t-status-open"
  when "closed"
    badge_class = "t-status-close"
  when "commenced"
    badge_class = "t-status-processing"
  end
%>
  <ul class="ticket-breadcrumb breadcrumb">
    <li class="ticket-breadcrumb-item"><a href="/admin/tickets"><i class="icons-arrow-left"></i> Dashboard</a> <span class="divider">/</span></li>
    <li class="ticket-breadcrumb-itme ticket-breadcrumb-active active"><%= @ticket.subject %></li>
  </ul>
  <div class="ticket-wrap">
    <div class="ticket-header">
     <div id="ticket-urgent-marker" class="ticket-heading-wrap <%= "active" if @ticket.is_urgent? %>" >
       <h3 class="ticket-heading">#<%= @ticket.uid %> - <%= @ticket.subject[0..50] %>
       <% if !@ticket.taken_by.nil? %>
        <% user = User.find(@ticket.taken_by) %>
        <img src="<%= user.member_profile.avatar.thumb.url if !user.member_profile.avatar.nil? %>" style="border-radius: 50%;height: 30px;margin-right: 0.3125rem;width: 30px;" />
        <% end %>
       </h3>
       <div class="ticket-action">
         <div class="ticket-dropdown">
           <a class="ticket-dropdown-toggle" data-toggle="dropdown" href="#">
             <i class="ticket-dropdown-icon fa fa-angle-down"></i>
           </a>
           <ul class="t-list-unstyled dropdown-menu" role="menu">
             <% if @ticket.status == "open" %>
              <li>
                 <a class="ticket-start t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/start" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-times-circle"></i>
                   Start
                 </a>
               </li>
               <li>
                 <a class="ticket-close t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-eye-slash"></i>
                   Close
                 </a>
               </li>
             <% elsif @ticket.status == "commenced" %>
               <li>
                 <a class="ticket-start t-item" data-confirm="Are you sure?" href="/admin/tickets/<%= @ticket.id.to_s %>/leave" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-times-circle"></i>
                   Leave
                 </a>
               </li>
               <li>
                 <a class="ticket-close t-item" href="/admin/tickets/<%= @ticket.id.to_s %>/close" data-ticket-id="<%= @ticket.id.to_s %>">
                   <i class="fa fa-eye-slash"></i>
                   Close
                 </a>
               </li>
             <% elsif @ticket.status == "closed" %>
               <% if  @ticket.can_be_reopened? %>
               <li>
                 <% if params[:reopen] == "true" %>
                   <a href="#" class="reopen-back-btn t-item" >Cancel</a>
                 <% else %>
                   <a href="/admin/tickets/<%= @ticket.id.to_s %>?reopen=true" class="t-btn">Reopen</a>
                 <% end %>
               </li>
               <% else %>
                 <li>
                   This ticket cannot be reopened. Please create a new ticket.
                 </li>
               <% end %>
             <% end %>
           </ul>
         </div>
       </div>
     </div>
     <div class="ticket-meta-wrap clearfix">
           <div class="ticket-meta">
             <span class="ticket-author t-label t-label-primary">
               <i class="icon-user"></i> 
               <%= !@ticket.ticket_creater_name.nil? ? @ticket.ticket_creater_name : @ticket.ticket_creater_id %>
               </span>
             <span class="ticket-created-date t-label t-label-primary">
               <i class="icon-time"></i> 
               <% dt = DateTime.parse(@ticket.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
             </span>
           </div>
           <div class="ticket-state">
            <% if @ticket.status != "closed" %>
             <a href="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent" class="ticket-urgent-btn t-btn t-btn-danger t-uppercase <%= "active" if @ticket.is_urgent? %>" id="toggle-urgent">
              <i class="fa fa-fire"></i>
              Urgent
            </a>
            <% end %>
             <span class="ticket-status t-status <%= badge_class %>">
               <i class="fa fa-eye"></i>
               <%= @ticket.status %>
             </span>
             <span class="ticket-category t-category t-category-primary">
               <a class="ticket-category-dropdown" data-toggle="dropdown" href="#">
                <i class="fa fa-th-list"></i>
                <%= @ticket.category.title %>
                <i class="fa fa-angle-down"></i>
               </a>
                <ul class="ticket-category-select dropdown-menu" role="menu">
                <% @categories.each do |category| %>
                  <li>
                    <a class="ticket-start t-item ticket-category-select-option" href="#" data-category-id="<%= category.id.to_s %>">
                      <%= category.title %>
                    </a>
                  </li>
                  <% end %>
                </ul>
             </span>
           </div>
     </div> 
    </div>

    <div id="query_box" class="ticket-content">
      <%= render :partial => "query", :collection => @ticket.ticket_queries %>
    </div>
    <% if params[:reopen] == "true"%>
      <% if @ticket.status == "closed" %>
        <div id="form_container" class="ticket-editor">
          <form method="post" action="/admin/ticket/reopen" id="reopen-form" for="query">
            <textarea class="ckeditor" name="ticket_query" data-fv-validation="required;" data-fv-messages="Cannot be empty;"></textarea>
            <input type="hidden" name="ticket_id" value="<%= @ticket.uid %>" />
          </form>
          <input type="submit" id="reopen-form-submit" class="btn btn-primary" value="Reopen" />
          <input type="button" class="btn reopen-back-btn" value="Cancel" />
        </div>
        <div id="ticket_loader" style="display:none;">
          <%= image_tag("preloader.gif", size: "50")  %>
          <div>Posting your query.</div>
        </div>
      <% else %>
        <h4> Ticket is already opened. </h4>
      <% end %>
    <% end %>
  </div>
<% else %>
  <div> 
    Error in fetching ticket.
  </div>
<% end %>
<script type="text/javascript">
  var fv = new FormValidator($("#reopen-form"));
  $("#reopen-form-submit").on("click",function(){
    for (instance in CKEDITOR.instances) {
      CKEDITOR.instances[instance].updateElement();
    }
    if(fv.isFormValidated()){
      $("#form_container").hide();
      $("#ticket_loader").show();
      fv.form.ajaxSubmit({
        success : function(data){
          setTimeout(function(){
            if(fv.form.attr("for") == "query"){
              $("#form_container").remove();
              window.location.href = window.location.pathname;
            }else{
              fv.reset();
              for (instance in CKEDITOR.instances) {
                 CKEDITOR.instances[instance].setData("");
              }
              $("#form_container").show();
              $("#response-container").append(data);
            }
            $("#ticket_loader").hide();
          },500)
        }
      });
    }
  })
  $(".reopen-back-btn").on("click",function(){
    for (instance in CKEDITOR.instances) {
      CKEDITOR.instances[instance].updateElement();
    }
    if(fv.form.find("textarea").val() == ""){
      window.history.back();
    }else if(confirm("Are you sure, you want to discard changes?")){
      window.history.back();
    }else{
      return false;
    }
  })

  $(".ticket-category-select-option").on("click",function(){
    var el = $(this);
    if(confirm("Are you sure?")){
      window.location.href = window.location.pathname + "/changecategory?category_id=" + el.data("category-id");
    }
    return false;
  })
  $("#toggle-urgent").on("click",function(){
    var el = $(this),
        mark_urgent = !el.hasClass("active");
    $.ajax({
      url : el.attr("href"),
      type : "post",
      data : {"mark_urgent" : mark_urgent},
      dataType : "json"
    }).done(function(response){
      if(response.success){
        if(mark_urgent){
          if(response.can_make_urgent){
            $("#ticket-urgent-marker").addClass('active');
            el.addClass("active");
          }else{
            alert("Urgent quota for this category is already over.");
          }
        }else{
          $("#ticket-urgent-marker").removeClass('active');
          el.removeClass("active");
        }
      }
    })
    return false;
  })

</script>