{% extends request.is_ajax|yesno:"base_ajax.html,base_rigs.html" %}

{% block title %}RIGS Profile {{object.pk}}{% endblock %}

{% block js %}
    <script>
        $(document).ready(function() {
        	$('#urlParamForm').change(function(){
	        	url = "?";
	        	$('#urlParamForm *').filter(':input').each(function(index, value){
				    defaultVal = $(value).data('default');
				    param = $(value).val();
				    val = $(value).prop('checked');

				    if(val != defaultVal){
					    url = url+param+"="+val+"&";
					}
				});
	        	ics_url = $('#cal-url').data('url') + url.substring(0, url.length - 1);
				$('#cal-url').text(ics_url);

				gcal_url = $('#gcal-link').data('url') + encodeURIComponent(url.substring(0, url.length - 1));
				$('#gcal-link').attr('href',gcal_url);
			});

			$('#urlParamForm').change(); //Do the initial setting
     	});
 	</script>

{% endblock %}

{% block content %}
<div class="row">
	<div class="col-md-10 col-md-offset-1">
		
		<div class="col-sm-6">
			<h3>{{object.name}}</h3>
		</div>
		{% if not request.is_ajax %}
			{% if object.pk == user.pk %}
			<div class="col-sm-6 text-right">
			    <div class="btn-group btn-page">
			        <a href="{% url 'profile_update_self' %}" class="btn btn-default">
						Edit Profile <span class="fas fa-pencil"></span>
					</a>
					<a href="{% url 'password_change' %}" class="btn btn-default">
						Change Password <span class="fas fa-lock"></span>
					</a>
			    </div>
			</div>
			{% endif %}
		{% endif %}
		<div class="col-sm-8	">
			<dl class="dl-horizontal">
				<dt>First Name</dt>
				<dd>{{object.first_name}}</dd>

				<dt>Last Name</dt>
				<dd>{{object.last_name}}</dd>

				<dt>Email</dt>
				<dd>{{object.email}}</dd>

				<dt>Last Login</dt>
				<dd>{{object.last_login|date:"d/m/Y H:i"}}</dd>

				<dt>Date Joined</dt>
				<dd>{{object.date_joined|date:"d/m/Y H:i"}}</dd>

				<dt>Initials</dt>
				<dd>{{object.initials}}</dd>

				<dt>Phone</dt>
				<dd><a href="tel:{{ object.phone }}">{{object.phone}}</a></dd>
			</dl>
			{% if not request.is_ajax %}
			{% if object.pk == user.pk %}
			
			<div class="pull-right">
				<a href="{% url 'reset_api_key' %}" class="btn btn-default">
					{% if user.api_key %}Reset API Key{% else %}Generate API Key{% endif %}
					<span class="fas fa-repeat"></span>
				</a>
			</div>
		
			<h4>Personal iCal Details</h4>

			<dl class="dl-horizontal">
				<dt>API Key</dt>
				<dd>
					{% if user.api_key %}
						{{user.api_key}}
					{% else %}
						No API Key Generated
					{% endif %}
				</dd>

				<dt>Calendar Options</dt>
				<dd>
					<div class="well well-sm text-center">
						<form class="form-inline" id="urlParamForm">
							<div class="form-group">
								<label class="checkbox-inline">
								  <input type="checkbox" value="rig" data-default="true" checked> Rigs
								</label>
								<label class="checkbox-inline">
								  <input type="checkbox" value="non-rig" data-default="true" checked> Non-Rigs
								</label>
								<label class="checkbox-inline">
								  <input type="checkbox" value="dry-hire" data-default="true" checked> Dry-Hires
								</label>
								<label class="checkbox-inline">
								  <input type="checkbox" value="cancelled" data-default="false" > Cancelled
								</label>
								<label class="checkbox-inline">
								  <input type="checkbox" value="provisional" data-default="true" checked> Provisional
								</label>
								<label class="checkbox-inline">
								  <input type="checkbox" value="confirmed" data-default="true" checked> Confirmed/Booked
								</label>
							</div>
						</form>
					</div>
				</dd>
				<dt>Calendar URL</dt>
				<dd>
					{% if user.api_key %}
						<pre id="cal-url" data-url="http{{ request.is_secure|yesno:"s,"}}://{{ request.get_host }}{% url 'ics_calendar' api_pk=user.pk api_key=user.api_key %}"></pre>
						<small><a id="gcal-link" data-url="https://support.google.com/calendar/answer/37100" href="">Click here</a> for instructions on adding to google calendar.<br/>
						To sync from google calendar to mobile device, visit <a href="https://www.google.com/calendar/syncselect" target="_blank">this page</a> on your device and tick "RIGS Calendar".</small>
					{% else %}
						<pre>No API Key Generated</pre>
					{% endif %}
				</dd>
			</dl>
			{% endif %}
			{% endif %}
		</div>
		
		<div class="col-sm-3">
			<div class="center-block">
				<img src="{{object.profile_picture}}" class="img-responsive img-rounded" />
		</div>

	</div>

	<div class="row">
	    <div class="col-sm-12">
	        <h4>Events</h4>
	        {% with object.latest_events as events %}
	            {% include 'event_table.html' %}
	        {% endwith %}
	    </div>
	</div>
	</div>
</div>
{% endblock %}