client_management/app/views/client_managements/addnewsite.html.erb

<% content_for :page_specific_js do %>
  <script type="text/javascript" src="/assets/client_management/jquery-ui.min.js"></script>
  <script type="text/javascript" src="/assets/client_management/bootstrap.min.js"></script>
<% end %>
<% content_for :page_menu do %>
  <ul class="list-sidebar">
    <li class="item-sidebar"><a class="btn-sidebar" href="/cpanel/sites"><i class="fa fa-home" aria-hidden="true"></i><%= t("client_management.my_sites") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="<%= cpanel_myprofile_path %>"><i class="fa fa-address-card" aria-hidden="true"></i><%= t("client_management.profile") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="<%= cpanel_myhistory_path %>"><i class="fa fa-history" aria-hidden="true"></i><%= t("client_management.history") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i><%= t("client_management.help_and_faq") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i><%= t("client_management.get_in_contact") %></a></li>
  </ul>
<% end %>
<section class="cp-content col-md-10">
  <h2 class="cp-page-title">
    Site Customization
  </h2>

  <div class="cp-progress clear">
    <div class="progress">
      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 13px">
        <span class="sr-only">0% Complete</span>
      </div>
    </div>
    <span class="tag-step step1 active">Site</span>
    <span class="tag-step step2">Modules</span>
    <span class="tag-step step3">Template</span>
  </div>

  <div class="cp-addsite-step1">
    <%= form_for @newrequest, :url => {:action => "requestsite"}, :html => {:class => "addsite-form"} do |f| %>
      <div class="box-addsite-forms">
        <div class="box-form form1">
          <h3 class="form-title">Select a site or create a new one</h3>
          <div class="line-add">
            <%= f.label :site_id, "Select or Create" %>
            <%= f.select :site_id, @user_sites, {:prompt => "------Select or Create------"}, {:class => "form-control select-site"} %>
            <div class="box-check-host">
              <span class="text-check">Do you want to host with RulingDigital?</span>
              <div class="line-check-host">
                <%= f.radio_button :host_with_rulingdigital, "1", {:class => "radio-check"} %>
                <%= f.label :host_with_rulingdigital, "YES", :for => "site_request_host_with_rulingdigital_1" %>
                <%= f.radio_button :host_with_rulingdigital, "0", {:class => "radio-check", :checked => true} %>
                <%= f.label :host_with_rulingdigital, "NO", :for => "site_request_host_with_rulingdigital_0" %>
              </div>
              <div class="line-check-host">
                <label for="details-host" class="text-check">Please provide server details</label>
                <%= f.text_area :server_details, :id => "details-host", :cols => "30", :rows => "10", :class => "form-control", :placeholder => "Please provide your server details in detail" %>
              </div>
            </div>
          </div>
          <div class="line-add box-buttons">
            <span class="btn btn-default disabled add-prev-desabled hide">PREVIOUS STEP</span>
            <span class="btn btn-primary add-next">SELECT MODULES</span>
          </div>
        </div>
        <div class="box-form form2">
          <h3 class="form-title">Modules List</h3>
          <div class="line-add">
            <h3 class="form-sub-title">Default Modules</h3>
          </div>
          <div class="line-add">
            <ul class="default-mod-list">
              <li class="item-mod"><span class="mod-name">Announcement</span><span class="mod-info">General Announcement</span></li>
              <li class="item-mod"><span class="mod-name">Ad Banner</span><span class="mod-info">several ad banner</span></li>
              <li class="item-mod"><span class="mod-name">Page</span><span class="mod-info">editable page content</span></li>
              <li class="item-mod"><span class="mod-name">Gallery</span><span class="mod-info">photo gallery</span></li>
              <li class="item-mod"><span class="mod-name">Web Resource</span><span class="mod-info">web link module</span></li>
              <li class="item-mod"><span class="mod-name">Archive</span><span class="mod-info">File archive</span></li>
            </ul>
          </div>
          <div class="line-add">
            <h3 class="form-sub-title">Select Additional Modules</h3>
          </div>
          <div class="line-add box-drop">
            <ul class="additional-mod-list connected">
              <% @optional_modules.each do |mod| %>
                <li class="item-mod" data-mod-id="<%= mod.id.to_s %>"><span><%= mod.name %></span></li>
              <% end %>
            </ul>
            <ul class="selected-mod-list connected"></ul>
            <div id="optional-module-holder" class="hide"></div>
          </div>
          <div class="line-add">
            <h3 class="form-sub-title">Customized module</h3>
          </div>
          <div class="line-add">
            <%= f.check_box :custom_module, :class => "custom-check" %>
            <%= f.label :custom_module, "I want a customized module", :class => "title-custom-check" %>
            <%= f.text_area :custom_module_details, :cols => "30", :rows => "10", :class => "custom-module-detail form-control", :disabled => "disabled", :placeholder => "Please specify module requirements in detail" %>
          </div>
          <div class="line-add box-buttons">
            <span class="btn btn-primary add-prev">SITE SELECTION</span>
            <span class="btn btn-primary add-next">SELECT TEMPLATE</span>
          </div>
        </div>
        <div class="box-form form3">
          <h3 class="form-title">Select your Template</h3>
          <div class="line-add">
            <span class="text-line">Click here to view templates</span>
            <a href="#" class="btn btn-success" id="template-modal-btn">Template Store</a>
          </div>
          <div class="line-add">
            <%= f.label :template_number, "Template Number:" %>
            <%= f.text_field :template_number, :class => "form-control", :placeholder => "Example: 20160826-i1" %>
          </div>
          <div class="line-add">
            <%= f.check_box :custom_template, :class => "custom-check2" %>
            <%= f.label :custom_template, "I want a customized template.", :class => "title-custom-check" %>
            <%= f.text_area :custom_template_details, :cols => "30", :rows => "10", :class => "custom-template-detail form-control", :disabled => "disabled", :placeholder => "Please specify the requirements of your template in detail, including reference URL(s)." %>
          </div>
          <div class="line-add">
            <%= f.check_box :rwd, :class => "rwd-check" %>
            <%= f.label :rwd, "I need my site to be Responsive.", :class => "title-rwd-check" %>
          </div>
          <div class="line-add box-buttons">
            <span class="btn btn-primary add-prev">SELECT MODULES</span>
            <%= f.submit "COMPLETE", :class => "btn btn-success add-complete" %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</section>
<!-- Modal -->
<div id="template-modal" class="modal fade template-modal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <div class="modal-body">
        <iframe id="store-frame" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/assets/client_management/add_new_site.js"></script>