property_hire/app/views/property_hires/hire.html.erb

<% OrbitHelper.render_css_in_head(["basic/bootstrap-datetimepicker.css"]) %>
<%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
<%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
<%= javascript_include_tag "validator.js" %>
<%
	data = action_data
	hire = data["hire"]
	property = data["property"]
	url = data["page"]
	current_user = data["current_user"]
%>
<% if !property.can_be_hired %>
	<script type="text/javascript">
		alert("This property is unavailable for hire.");
		window.location.href = "<%= "/" + I18n.locale.to_s +  url %>";
	</script>
<% end %>
<% if current_user.nil? %>
<script type="text/javascript">
	alert("Please login before you hire.");
	window.location.href = "<%= "/" + I18n.locale.to_s +  url %>";
</script>
<% else %>
<h3><%= property.title %></h3>
<% if session["hire-save-msg"].present? %>
	<div id="property-unavaialable-alert" class="alert alert-danger" role="alert"><b>Sorry! </b><span> <%= session["hire-save-msg"] %></span></div>
	<% session.delete("hire-save-msg") %>
<% end %>
<%= form_for hire, :url => "/xhr/property_hires/make_booking",  html: { class: "form-horizontal" } do |f| %>
	<div class="form-group">
		<%= f.label :start_time, "*"+t("property_hire.start_time"), :class => "col-sm-2 control-label" %> 
    <div class="col-sm-10">
      <%= f.datetime_picker :start_time, :no_label => true, :new_record => hire.new_record?, :data=>{"picker-type" => "range", "range" => "start", "fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
    </div>
  </div>
	<div class="form-group">
		<%= f.label :end_time, "*"+t("property_hire.end_time"), :class => "col-sm-2 control-label" %> 
  	<div class="col-sm-10">
      <%= f.datetime_picker :end_time, :no_label => true, :new_record => hire.new_record?, :data=>{"picker-type" => "range", "range" => "end", "fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
    </div>
  </div>
  <!-- ############# recurring ############# -->
  <div class="form-group">
		<%= f.label :recurring, t("property_hire.recurring"), :class => "col-sm-2 control-label" %> 
  	<div class="col-sm-1">
      <%= f.check_box :recurring %>
    </div>
  </div>
	<div id="recurring-block" <%= hire.recurring ? "" : "style=display:none;" %>>
	  <div class="form-group">
			<%= f.label :recurring_interval, t("property_hire.recurring_interval"), :class => "col-sm-2 control-label" %> 
	  	<div class="col-sm-1">
	      <%= f.select :recurring_interval, PHire::INTERVALS.collect{|int| [t("property_hire.recurring_interval_types.#{int}"), int] }, {:prompt => t('property_hire.select_interval')}, {:data => {"fv-validation" => "requiredifrecurring;" , "fv-messages" => "Cannot be empty;"}} %>
	    </div>
	  </div>

	  <div class="form-group">
		<%= f.label :recurring_end_date, "*"+t("property_hire.recurring_end_date"), :class => "col-sm-2 control-label" %> 
    <div class="col-sm-10">
      <%= f.datetime_picker :recurring_end_date, :no_label => true, :new_record => hire.new_record?, :data=>{"fv-validation" => "requiredifrecurring;", "fv-messages" => "Cannot be empty;"} %>
    </div>
  </div>
	</div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-5">
      <div id="property-avaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-success" role="alert"><b>Hooray! </b>This property is available.</div>
      <div id="property-unavaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-danger" role="alert"><b>Sorry! </b><span> This property is available.</span></div>
       <div id="values-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-warning" role="alert"><b>Please! </b><span> Select an interval time and recurring event end date.</span></div>
    </div>
    <% if property.set_unavailibility %>
     <div class="col-sm-offset-2 col-sm-5">
	     	<b><%= t("property_hire.Unavailibility_Schedule") %></b>
	     	<div>
	     		This property is unavaliable <%= !property.start_date.nil? ? " from " + property.start_date.strftime("%Y-%m-%d") : "" %> <%= !property.end_date.nil? ? " to " + property.end_date.strftime("%Y-%m-%d") : "" %> every 
	     		<% property.weekdays.each_with_index do |d,i| %>
						<% if i < (property.weekdays.count - 1) %>
	     				<%= Property::WEEKDAYS[d.to_i] + ", " %> 
	     			<% else %>
	     				<%= Property::WEEKDAYS[d.to_i] %> 
	     			<% end %>
	     		<% end %>
	     		between <%= property.start_time %> &amp; <%= property.end_time %>.
	     	</div>
     </div>
    <% end %>
  </div>
  
  <div class="form-group">
		<label for="" class="col-sm-2 control-label"></label>
    <div class="col-sm-10">
			<a href="/xhr/property_hires/check_availability" id="check-avail-btn" class="btn btn-primary"><%= t('property_hire.check_availibility') %></a>
			<img style="display: none;" width="40" src="/assets/spin.gif" id="spinner" />
    </div>
  </div>
  <div class="form-group">
		<%= f.label :hiring_person_email, "*"+t("property_hire.hiring_person_email"), :class => "col-sm-2 control-label" %> 
  	<div class="col-sm-5">
      <%= f.text_field :hiring_person_email, :class => "form-control", :value => current_user.member_profile.email, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
    </div>
  </div>
  <div class="form-group">
		<%= f.label :hiring_person_number, "*"+t("property_hire.hiring_person_number"), :class => "col-sm-2 control-label" %> 
  	<div class="col-sm-5">
      <%= f.text_field :hiring_person_number, :class => "form-control", :value => current_user.member_profile.mobile_no, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
    </div>
  </div>
  <div class="form-group">
		<%= f.label :hiring_person_name, "*"+t("property_hire.hiring_person_name"), :class => "col-sm-2 control-label" %> 
  	<div class="col-sm-5">
      <%= f.text_field :hiring_person_name, :class => "form-control", :value => (current_user.name rescue ""), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
      <%= f.hidden_field :hiring_person_id, :value => (current_user.member_profile.id.to_s rescue "") %>
    </div>
  </div>
  <div class="form-group">
		<%= f.label :reason_for_hire, "*"+t("property_hire.reason_for_hire"), :class => "col-sm-2 control-label" %> 
  	<div class="col-sm-5">
      <%= f.text_field :reason_for_hire, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
    </div>
  </div>
  <div class="form-group">
		<%= f.label :note_for_hire, t("property_hire.note_for_hire"), :class => "col-sm-2 control-label" %> 
  	<div class="col-sm-5">
      <%= f.text_area :note_for_hire, :class => "form-control" %>
    </div>
  </div>
  <%  fields_name = ["organization" ,"person_in_charge" , "tel_of_person_in_charge" , "department" , "contact_person" , "tel_of_contact_person" ,    "mobile_phone_of_contact_person" , "contact_person_Email" , "contact_person_department"] %>
  <% fields_name.each do |field_name| %>
    <% if(property[field_name]["enable"]  == "1" rescue false) %>
        <% required = (property[field_name]["required"] == "true" rescue false) %>
        <div class="form-group">
            <%= f.label field_name, (required ? "*" : "") + t("property_hire.#{field_name}"), :class => "col-sm-2 control-label" %> 
            <div class="col-sm-5">
                <% if required %>
                    <%= f.text_field field_name, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
                <% else %>
                    <%= f.text_field field_name, :class => "form-control" %>
                <% end %>
            </div>
        </div>
    <% end %>
  <% end %>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <%= f.submit t("property_hire.save"), :class => "btn btn-primary" %>
      <%= f.hidden_field :property_id, :value => property.id %>
      <input type="hidden" name="url" value="<%= url %>" />
      <input type="hidden" id="dates_validated" name="dates_validated" value="0" data-fv-validation="checkForDates;" data-fv-messages="Please make sure first if dates are available.;">
    </div>
  </div>
<% end %>
<div style="height: 50px;"></div>
<script type="text/javascript">
	var property_id = "<%= property.id.to_s %>";
	$("#check-avail-btn").on("click",function(){
		var el = $(this),
				url = $(this).attr("href"),
				spinner = $("#spinner");
		
		$(".alert").hide();
		data = {
			"stime" : $("#p_hire_start_time").val(),
			"etime" : $("#p_hire_end_time").val(),
			"property_id" : property_id
		}
		if($("#p_hire_recurring").is(":checked")){
			var interval = $("#p_hire_recurring_interval").val(),
			 		recurring_end_date = $("#p_hire_recurring_end_date").val();
			if(interval == "" || recurring_end_date == ""){
				$("#values-alert").show();
				return false;
			}
			data["interval"] = interval;
			data["recurring_end_date"] = recurring_end_date;
		}
		spinner.show();
		el.hide();
		$.ajax({
			"url" : url,
			"type" : "get",
			"data" : data,
			"dataType" : "json"
		}).done(function(data){
			if(data.success){
				$("#property-avaialable-alert").show();
				$("#dates_validated").val("1");
			}else{
				$("#property-unavaialable-alert").find("span").text(data.msg);
				$("#property-unavaialable-alert").show();
			}
			spinner.hide();
			el.show();
		})
		return false;
	})

	$("#unavailable-schedule").on("click",function(){

	})

	var hireForm = new FormValidator($("#new_p_hire"));
	hireForm.validate_functions.checkForDates = function(value,element){
		return value == "1";
	}
	hireForm.validate_functions.requiredifrecurring = function(value, element){
		if($("#p_hire_recurring").is(":checked")){
			return value != "";
		}else{
			return true;
		}
	}

	$("#p_hire_recurring").on("click",function(){
		if($(this).is(":checked")){
			$("#recurring-block").slideDown();
		}else{
			$("#recurring-block").slideUp();
		}
	})
</script>
<% end %>