sx-fc/app/views/origami/reservation/index.html.erb

<%= stylesheet_link_tag    'reservation', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'reservation', 'data-turbolinks-track': 'reload' %> 
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <div class="card" id="make-reservation-slimscroll" data-height="-50">
        <div class="card-header">
          <h5 class="card-title text-center bg-faded"><%= t :make_reservation %></h5>
        </div>
        <div class="card-body">
          <div class="wizard">
            <div class="wizard-inner">
                <div class="active-line"></div>
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="nav-item">
                      <div class="connecting-line border-right"></div>
                      <a href="#reservation" class="nav-link active" data-toggle="tab" aria-controls="reservation" role="tab" title="Reservation">
                        <span class="round-tab">
                          1
                        </span>
                      </a>
                    </li>
                    <li role="presentation" class="nav-item disabled">
                      <div class="connecting-line"></div>
                      <a href="#personal_detail" class="nav-link disable" data-toggle="tab" aria-controls="personal_detail" role="tab" title="Personal Detail">
                        <span class="round-tab">
                          2
                        </span>
                      </a>
                    </li>
                </ul>
            </div> <!-- .end.wizard-inner -->
            <div class="tab-content">
              <div class="tab-pane active" role="tabpanel" id="reservation">
                <div class="form-row">
                  <div class="col-sm-12 col-md-12 col-lg-12">
                    <label class="font-12 radio-inline">
                      <input type="radio" name="reservation_type" checked class="radio-col-indigo reservation_type" value="0"><%= t("views.right_panel.detail.dine_in") %>
                    </label>&nbsp;
                    <label class="font-12 radio-inline">
                      <input type="radio" name="reservation_type" class="radio-col-indigo reservation_type" value="1"><%= t :room %>
                    </label>
                  </div>
                </div>

                <div class="dining_type">
                  <div class="form-row clearfix">
                    <div class="form-group col-sm-6 col-md-6 col-lg-6">
                      <input class="form-control check_in_date datepicker" name="check_in_date" id="check_in_date" type="text" placeholder="Check-in Date">
                    </div>
                    <div class="form-group col-sm-6 col-md-6 col-lg-6">
                      <input class="form-control check_out_date datepicker" name="check_out_date" id="check_out_date" type="text" placeholder="Check Out Date">
                    </div>
                  </div>
                  <div class="form-row clearfix">
                    <div class="form-group col-sm-6 col-md-6 col-lg-6">
                      <input class="form-control check_in_time timepicker" name="check_in_time" id="check_in_time" type="text" placeholder="Check-in Time">
                    </div>
                    <div class="form-group col-sm-6 col-md-6 col-lg-6">
                      <input class="form-control check_out_time timepicker" name="check_out_time" id="check_out_time" type="text" placeholder="Check Out Time">
                    </div>
                  </div>
                </div>

                <div class="room_type">
                  <div class="form-row clearfix">
                    <div class="form-group col-sm-6 col-md-6 col-lg-6">
                      <input class="form-control check_in_date datepicker" name="check_in_date" id="check_in_date" type="text" placeholder="Check-in Date">
                    </div>
                    <div class="form-group col-sm-6 col-md-6 col-lg-6">
                      <input class="form-control check_out_date datepicker" name="check_out_date" id="check_out_date" type="text" placeholder="Check Out Date">
                    </div>
                  </div>
                  <div class="form-row clearfix">
                    <div class="form-group col-sm-12 col-md-12 col-lg-12">
                      <label for="room_count" class="control-label">ROOMS</label>
                      <input type="number" class="form-control number_limit" name="room_count" id="room_count" data-type="room" value="1">
                    </div>
                  </div>
                </div>
                
                <div class="form-row clearfix">
                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
                    <label for="adult_count" class="control-label">ADULT</label>
                    <input type="number" class="form-control number_limit" name="adult_count" id="adult_count" data-type="adult" value="1">
                  </div>
                  <div class="form-group col-sm-6 col-md-6 col-lg-6">
                    <label for="child_count" class="control-label">CHILD</label>
                    <input type="number" class="form-control number_limit" name="child_count" id="child_count" data-type="child">
                  </div>
                </div>
                <div class="row text-center">
                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
                    <button class="btn bg-blue btn-lg waves-effect">CHECK AVAILABLE</button>
                    <button class="btn bg-blue btn-lg waves-effect next-step">NEXT</button>
                  </div>
                </div>
              </div><!-- .end.tab-panel .reservation -->
            
              <div class="tab-pane" role="tabpanel" id="personal_detail">
                <div class="form-row">
                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
                    <input class="form-control" name="name" id="name" type="text" placeholder="NAME">
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
                    <input class="form-control" name="contact_no" id="contact_no" type="number" placeholder="PHONE NUMBER">
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
                    <input class="form-control" name="address" id="address" type="text" placeholder="ADDRESS">
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
                    <label for="reservation_note" class="control-label">RESERVATION NOTE</label>
                    <textarea rows="3" id="reservation_note" name="reservation_note" class="form-control"></textarea>
                  </div>
                </div>
                <div class="row text-center">
                  <div class="form-group col-sm-12 col-md-12 col-lg-12">
                    <button class="btn bg-blue btn-lg prev-step">PREV</button>
                    <button class="btn bg-blue btn-lg">SUBMIT</button>
                  </div>
                </div>
              </div>

            </div><!-- .end.tab-content .personal_detail -->
          </div> <!-- .end.wizard -->
        </div>
      </div>
    </div>

    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
      <div class="card font-13">
        <div class="row clearfix">
          <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" id="process-reservation-slimscroll" data-height="-80">
            
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="reservation-info-slimscroll" data-height="-80">

          </div>
        </div>
      </div>
    </div>
  </div>
</div>