{% extends 'base.html.twig' %}

{% block title %}IEC Materials{% endblock %}

{% block content %}
	<div class="kt-subheader kt-grid__item"></div>

	<div class="kt-container kt-grid__item kt-grid__item--fluid">
		<div class="kt-portlet kt-portlet--mobile">
			<div class="kt-portlet__head kt-portlet__head--lg">
				<div class="kt-portlet__head-label">
					<h3 class="kt-portlet__head-title">IEC Materials</h3>
				</div>

				{% if is_granted('ROLE_HOSP_ADMIN') %}
					<div class="kt-portlet__head-toolbar">
						<div class="kt-portlet__head-wrapper">
							<a href="{{ path('iec_material_new') }}" class="btn btn-brand btn-bold">Add IEC Material</a>
						</div>
					</div>
				{% endif %}
			</div>

			<div class="kt-portlet__body">
				{% include 'parts/flash.html.twig' %}

				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th width="5%">Sr. No.</th>
							<th>IEC Material Name</th>
							<th width="8%">Type</th>
							<th width="10%">Date Uploaded</th>
							<th width="12%" class="text-center">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for iec_material in iec_materials %}
							<tr>
								<td class="text-right">{{ loop.index }}</td>
								<td>{{ iec_material.documentName }}</td>
								<td>{{ (iec_material.fileType) ? iec_material.fileType|upper : 'URL' }}</td>
								<td class="text-right">{{ iec_material.uploadedAt|date('d/m/Y') }}</td>
								<td class="text-center">
									{% if iec_material.videoUrl %}
										<a class="video_modal_popup actions" href="{{ iec_material.videoUrl }}" data-toggle="modal" model-title="{{ iec_material.documentName }}" data-target="#iec_material_video_popup" target="_blank" title="YouTube Video">
											<i class="fas fa-external-link-alt mr-3 fa-2x"></i>
										</a>
									{% else %}
										<a href="{{ asset('uploads/iec_materials/' ~ iec_material.filePath) }}" class="actions" data-toggle="kt-tooltip" target="_blank" download title="Download File">
											<i class="fas fa-download mr-3 fa-2x"></i>
										</a>
									{% endif %}

									{% if is_granted('ROLE_HOSP_ADMIN') %}
										<a href="{{ path('iec_material_edit', {'id': iec_material.id | nzo_encrypt}) }}" class="actions" data-toggle="kt-tooltip" title="Edit">
											<i class="fa far fa-edit mr-3 fa-2x"></i>
										</a>
										<a href="{{ path('iec_material_delete', {'id': iec_material.id | nzo_encrypt}) }}" class="actions" data-toggle="kt-tooltip" title="Delete" onclick="return confirm('Are you sure?');">
											<i class="fa far fa-trash fa-2x kt-font-danger"></i>
										</a>
									{% endif %}
								</td>
							</tr>
						{% else %}
							<tr>
								<td colspan="5" class="text-center">No records found.</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>

				{{ include('parts/pagination.html.twig', {'lastPage': last_page}) }}
			</div>
		</div>
	</div>

	<div class="modal fade" id="iec_material_video_popup" tabindex="-1" role="dialog" aria-labelledby="iecMaterialLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="iecMaterialLabel"></h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
				</div>

				<div class="modal-body">
					<iframe id="iec_material_video" width="100%" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
	{{ parent() }}

	<script>
		$('.video_modal_popup').on('click', function() {
    	$('#iec_material_video').attr('src', $(this).attr('href').replace('watch', 'embed').replace('?v=', '/'));
    	$('#iecMaterialLabel').html($(this).attr('model-title'));
		});

    $('#iec_material_video_popup').on('hide.bs.modal', function() {
      $('#iec_material_video').attr('src', '');
      $('#iecMaterialLabel').html('');
    });
	</script>
{% endblock %}