{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<a href="{{ add }}" class="btn btn-primary"><i class="fa fa-plus"></i> {{ button_add }}</a>
				<button type="button" class="btn btn-danger" onclick="confirm('{{ text_confirm }}') ? $('#form-availability').submit() : false;"><i class="fa fa-trash-o"></i> {{ button_delete }}</button>
			</div>
			<h1>{{ heading_title }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
					<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		{% if error_warning %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		{% if success %}
			<div class="alert alert-success"><i class="fa fa-check-circle"></i> {{ success }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><i class="fa fa-list"></i> {{ text_list }}</h3>
			</div>
			<div class="panel-body">
            	<div class="well">
                	<div class="row">
                    	<!--<div class="col-sm-6">
                        	<div class="form-group">
                            	<label class="control-label" for="input-day">{{ entry_day }}</label>
                                <select class="form-control" name="filter_day" id="input-day">
                                	<option></option>
                                    <option value="Sunday" {{ filter_day == 'Sunday' ? 'selected' : '' }}>{{ text_sunday }}</option>
                                    <option value="Monday" {{ filter_day == 'Monday' ? 'selected' : '' }}>{{ text_monday }}</option>
                                    <option value="Tuesday" {{ filter_day == 'Tuesday' ? 'selected' : '' }}>{{ text_tuesday }}</option>
                                    <option value="Wednesday" {{ filter_day == 'Wednesday' ? 'selected' : '' }}>{{ text_wednesday }}</option>
                                    <option value="Thursday" {{ filter_day == 'Thursday' ? 'selected' : '' }}>{{ text_thursday }}</option>
                                    <option value="Friday" {{ filter_day == 'Friday' ? 'selected' : '' }}>{{ text_friday }}</option>
                                    <option value="Saturday" {{ filter_day == 'Saturday' ? 'selected' : '' }}>{{ text_saturday }}</option>
                                </select>
                            </div>
                        </div>-->

                        <div class="col-sm-6">
                        	<div class="form-group">
                            	<label class="control-label" for="input-doctor">{{ entry_doctor }}</label>
                                <select class="form-control" name="filter_doctor" id="input-doctor">
									<option></option>
									{% for doctor in doctors %}
										{% if doctor.user_id == filter_doctor %}
                                   		 	<option value="{{ doctor.user_id }}" selected="selected">{{ doctor.doctor_name }}</option>
										{% else %}
                                   	 		<option value="{{ doctor.user_id }}">{{ doctor.doctor_name }}</option>
										{% endif %}
									{% endfor %}
                                </select>
                            </div>
                            <button type="button" id="button-filter" class="btn btn-primary pull-right"><i class="fa fa-search"></i> {{ button_filter }}</button>
                        </div>
                    </div>
                </div>

				<form action="{{ delete }}" method="post" enctype="multipart/form-data" id="form-availability">
					<div class="table-responsive">
						<table class="table table-bordered table-hover">
							<thead>
								<tr>
									<td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
									<td class="text-left">{{ column_doctor }}</td>
									<td class="text-left">{{ column_open_hours }}</td>
									<td class="text-right">{{ column_action }}</td>
								</tr>
							</thead>
							<tbody>
								{% set num = 1 %}
								{% if availabilitys %}
									{% for availability in availabilitys %}
											{% set num = num + 1 %}

										<tr>
											<td class="text-center">
												{% if availability.doctor_id in selected %}
													<input type="checkbox" name="selected[]" value="{{ availability.doctor_id }}" checked="checked" />
												{% else %}
													<input type="checkbox" name="selected[]" value="{{ availability.doctor_id }}" />
												{% endif %}
											</td>
											<td class="text-left">{{ availability.doctor }}</td>
											<td class="text-left" >
											{% set show_see_more = false %}
											{% for id,hour in availability.open_hours %}
											{% if (id < 3) %}
											<p style="display:block;">{{hour}}<br></p>
											{% elseif (id >=3) %}
											{% set show_see_more = true %}
											<p class = "data_hide{{num}}" style="display:none;">{{hour}} <br></p>
											{% endif %}
											{% endfor %}
											{% if show_see_more %}
											<a class="seemore{{num}}" val="{{num}}" onclick="seemore({{num}})" style="cursor: pointer;"> See More </a>
											{% endif %}
											</td>
											<td class="text-right"><a href="{{ availability.edit }}" class="btn btn-primary"><i class="fa fa-pencil"></i> {{ button_edit }}</a></td>
										</tr>
									{% endfor %}
								{% else %}
									<tr>
										<td class="text-center" colspan="4">{{ text_no_results }}</td>
									</tr>
								{% endif %}
							</tbody>
						</table>
					</div>
				</form>
				<div class="row">
					<div class="col-sm-6 text-left">{{ pagination }}</div>
					<div class="col-sm-6 text-right">{{ results }}</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">

		function seemore(counter) {
			/*var $content = $(this).prev('.content').find('.hidden');*/
			if ($(".data_hide"+counter).is(':visible')) {
				$(".data_hide"+counter).slideUp();
				$(".seemore"+counter).html('See More');
			} else {
				$(".data_hide"+counter).slideDown();
				$(".seemore"+counter).html('See Less');

			}
			};

		$('#button-filter').on('click', function() {
			url = 'index.php?route=appointment/appointment_availability&user_token={{ user_token }}';

			var filter_day = $('select[name=\'filter_day\']').val();

			if (filter_day) {
			url += '&filter_day=' + encodeURIComponent(filter_day);
			}

			var filter_doctor = $('select[name=\'filter_doctor\']').val();

			if (filter_doctor) {
			url += '&filter_doctor=' + encodeURIComponent(filter_doctor);
			}

			location = url;
		});
	</script>
</div>
{{ footer }}