{% 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 %}
<h3>Profile: {{object.name}}</h3>
{% if not request.is_ajax %}
<div class="row py-3">
	{% if object.pk == user.pk %}
	<div>
	    <div class="btn-group">
	        <a href="{% url 'profile_update_self' %}" class="btn btn-light">
				Edit Profile <i class="fas fa-edit"></i>
			</a>
			<a href="{% url 'password_change' %}" class="btn btn-light">
				Change Password <span class="fas fa-lock"></span>
			</a>
	    </div>
	</div>
	{% endif %}
</div>
{% endif %}
<div class="row">
    <div class="col">
        <div class="card">
            <div class="row no-gutters">
                <div class="col-md-3">
                    <img src="{{object.profile_picture}}" class="card-img img-fluid" />
                </div>
                <div class="col-md-9">
                    <div class="card-body">
                        <dl class="row">
	                        <dt class="col-5">First Name</dt>
	                        <dd class="col-7">{{object.first_name}}</dd>

	                        <dt class="col-5">Last Name</dt>
	                        <dd class="col-7">{{object.last_name}}</dd>

	                        <dt class="col-5">Email</dt>
	                        <dd class="col-7">{{object.email}}</dd>

	                        <dt class="col-5">Last Login</dt>
	                        <dd class="col-7">{{object.last_login|date:"d/m/Y H:i"}}</dd>

	                        <dt class="col-5">Date Joined</dt>
	                        <dd class="col-7">{{object.date_joined|date:"d/m/Y H:i"}}</dd>

	                        <dt class="col-5">Initials</dt>
	                        <dd class="col-7">{{object.initials}}</dd>

	                        <dt class="col-5">Phone</dt>
	                        <dd class="col-7">{% if object.phone %}}<a href="tel:{{ object.phone }}">{% endif %}{{object.phone}}{% if object.phone %}}</a>{% endif %}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if not request.is_ajax and object.pk == user.pk %}
    <div class="col">
        <div class="card">
            <div class="card-body">
		        <h4>Personal iCal Details</h4>
		        <dl class="row">
			        <dt class="col-4">API Key</dt>
			        <dd class="col-5">
				        {% if user.api_key %}
					        {{user.api_key}}
				        {% else %}
					        No API Key Generated
				        {% endif %}
			        </dd>
                    <a href="{% url 'reset_api_key' %}" class="btn btn-secondary col-3">
				        {% if user.api_key %}Reset API Key{% else %}Generate API Key{% endif %}
				        <span class="fas fa-redo"></span>
			        </a>

			        <dt class="col-4">Calendar Options</dt>
			        <dd class="col-8">
				        <form id="urlParamForm">
					        <div class="form-group d-flex flex-wrap">
						        <label class="checkbox-inline mr-3">
						          <input type="checkbox" value="rig" data-default="true" checked> Rigs
						        </label>
						        <label class="checkbox-inline mx-3">
						          <input type="checkbox" value="non-rig" data-default="true" checked> Non-Rigs
						        </label>
						        <label class="checkbox-inline mx-3">
						          <input type="checkbox" value="dry-hire" data-default="true" checked> Dry-Hires
						        </label>
						        <label class="checkbox-inline mx-3">
						          <input type="checkbox" value="cancelled" data-default="false" > Cancelled
						        </label>
						        <label class="checkbox-inline mx-3">
						          <input type="checkbox" value="provisional" data-default="true" checked> Provisional
						        </label>
						        <label class="checkbox-inline mx-3">
						          <input type="checkbox" value="confirmed" data-default="true" checked> Confirmed/Booked
						        </label>
					        </div>
				        </form>
			        </dd>
			        <dt class="col-4">Calendar URL</dt>
			        <dd class="col-8">
				        {% 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>
            </div>
        </div>
	</div>
    {% endif %}
</div>
<h4>Events</h4>
{% with object.latest_events as events %}
    {% include 'event_table.html' %}
{% endwith %}
{% endblock %}