{% extends 'base.html' %}

{% load static %}

{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		<div class="mb-3">
			<h1 class="h3 d-inline align-middle">Language</h1>
			<br><i>All fields marked with an asterisk (<span style="color:red;">*</span>) are required</i>

			{% include 'partials/_messages.html' %}
		</div>

		<form class="row" action="{% url 'add-language' %}" method="post" id="form-add-language">
			{% csrf_token %}
			<div class="col-12">
				<div class="card mb-3">
					<div class="card-body">
						<div class="row">
							<div class="container-fluid py-3">

								<div class="row g-3 m-3 align-items-end">
									<div class="col-12 col-md-3">
										<label for="txt-language-code" class="form-label">
											Language Code <span class="text-danger">*</span>
										</label>
										<input type="text"
											   class="form-control"
											   name="language_code"
											   id="txt-language-code"
											   placeholder="e.g., ta / en / fr"
											   value="{% if language_code %}{{ language_code }}{% else %}{{ old_input_field_values.language_code }}{% endif %}">
									</div>

									<div class="col-12 col-md-3">
										<label for="txt-language-name" class="form-label">
											Language Name <span class="text-danger">*</span>
										</label>
										<input type="text"
											   class="form-control"
											   name="language_name"
											   id="txt-language-name"
											   placeholder="e.g., English"
											   value="{% if language_name %}{{ language_name }}{% else %}{{ old_input_field_values.language_name }}{% endif %}">
									</div>

									<div class="col-12 col-md-3">
										<label for="txt-eng-name" class="form-label">
											English Name
										</label>
										<input type="text"
											   class="form-control"
											   name="eng_name"
											   id="txt-eng-name"
											   placeholder="e.g., English"
											   value="{% if eng_name %}{{ eng_name }}{% else %}{{ old_input_field_values.eng_name }}{% endif %}">
									</div>

									<div class="col-12 col-md-3">
										<label for="txt-language-id" class="form-label">
											Language ID <span class="text-danger">*</span>
										</label>
										<input type="text"
											   class="form-control"
											   name="language_id"
											   id="txt-language-id"
											   placeholder="Optional/Internal ID - ##"
											   value="{% if language_id %}{{ language_id }}{% else %}{{ old_input_field_values.language_id }}{% endif %}">
									</div>

									<div class="col-12">
										<div class="d-flex gap-2 justify-content-end mt-2">
											<a href="{% url 'add-language' %}" class="btn btn-secondary">
												Clear
											</a>
											<button type="submit" class="btn btn-primary" id="btn-add-item">
												Add New Language
											</button>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</form>

		<div class="row mt-4">
			<div class="col-xl-12">
				<div class="card">
					<div class="card-body">

						<div class="dataTables_wrapper">
							<div class="row">
								<div class="col-md-6">
									<div class="dataTables_length" id="datatables-reponsive_length">
										<form id="per-page-count-hidden-form" action="{% url 'language-list' %}" method="GET">
											<label>
												Show
												<select name="per_page_count" id="select-per-page-count" aria-controls="datatables-reponsive" class="form-select form-select-sm">
													{% for option in per_page_selector %}
														<option value="{{ option }}" {% if option|stringformat:"s" == default_per_page_count|stringformat:"s" %}selected{% endif %}>{{ option }}</option>
													{% endfor %}
												</select>
												entries
											</label>

											<input type="hidden" name="start_index" id="start-index-hidden-input-tag" value="{{ page.start_index }}">
										</form>
									</div>
								</div>
							</div>

							<table class="table table-responsive table-striped" style="width:100%">
								<thead>
									<tr>
										<th>#</th>
										<th>Language Code</th>
										<th>Language Name</th>
										<th>English Name</th>
										<th>Language ID</th>
										<th class="text-sm-end">Action</th>
									</tr>
								</thead>
								<tbody>
									{% for language in page %}
									<tr>
										<td>{{ page.start_index|add:forloop.counter0 }}</td>
										<td>{{ language.code }}</td>
										<td>{{ language.name }}</td>
										<td>{{ language.eng_name|default:"-" }}</td>
										<td>{{ language.language_id }}</td>
										<td class="text-sm-end">
											<button type="button"
													class="btn btn-secondary btn-pill btn-sm btn-view"
													data-id="{{ language.id }}"
													data-code="{{ language.code }}"
													data-name="{{ language.name }}"
													data-engname="{{ language.eng_name|default:'' }}"
													data-languageid="{{ language.language_id }}"
													data-bs-toggle="modal"
													data-bs-target="#viewLanguageModal">
												View
											</button>

											<button type="button"
													class="btn btn-primary btn-pill btn-sm btn-edit"
													data-id="{{ language.id }}"
													data-code="{{ language.code }}"
													data-name="{{ language.name }}"
													data-engname="{{ language.eng_name|default:'' }}"
													data-languageid="{{ language.language_id }}"
													data-bs-toggle="modal"
													data-bs-target="#editLanguageModal">
												Edit
											</button>

											<button type="button"
													class="btn btn-danger btn-pill btn-sm btn-delete"
													data-id="{{ language.id }}"
													data-code="{{ language.code }}"
													data-name="{{ language.name }}"
													data-engname="{{ language.eng_name|default:'' }}"
													data-languageid="{{ language.language_id }}"
													data-bs-toggle="modal"
													data-bs-target="#deleteLanguageModal">
												Delete
											</button>
										</td>
									</tr>
									{% endfor %}
								</tbody>
							</table>

							<div class="modal fade" id="viewLanguageModal" tabindex="-1" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">Language</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
										</div>
										<div class="modal-body">
											<dl class="row mb-0">
												<dt class="col-sm-4">Code</dt>
												<dd class="col-sm-8" id="view-code"></dd>

												<dt class="col-sm-4">Name</dt>
												<dd class="col-sm-8" id="view-name"></dd>

												<dt class="col-sm-4">English Name</dt>
												<dd class="col-sm-8" id="view-eng_name"></dd>

												<dt class="col-sm-4">Language ID</dt>
												<dd class="col-sm-8" id="view-language_id"></dd>
											</dl>
										</div>
										<div class="modal-footer">
											<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
										</div>
									</div>
								</div>
							</div>

							<div class="modal fade" id="editLanguageModal" tabindex="-1" aria-hidden="true">
								<div class="modal-dialog">
									<form class="modal-content" method="post" id="edit-form" action="{% url 'update-language' %}">
										{% csrf_token %}
										<input type="hidden" name="id" id="edit-id">

										<div class="modal-header">
											<h5 class="modal-title">Edit Language</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
										</div>

										<div class="modal-body">
											<div class="mb-3">
												<label class="form-label">Language Code</label>
												<input type="text" class="form-control" name="language_code" id="edit-code" required>
											</div>

											<div class="mb-3">
												<label class="form-label">Language Name</label>
												<input type="text" class="form-control" name="language_name" id="edit-name" required>
											</div>

											<div class="mb-3">
												<label class="form-label">English Name</label>
												<input type="text" class="form-control" name="eng_name" id="edit-eng_name">
											</div>

											<div class="mb-3">
												<label class="form-label">Language ID</label>
												<input type="text" class="form-control" name="language_id" id="edit-language_id" required>
											</div>
										</div>

										<div class="modal-footer">
											<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
											<button class="btn btn-primary" type="submit">Save</button>
										</div>
									</form>
								</div>
							</div>

							<div class="modal fade" id="deleteLanguageModal" tabindex="-1" aria-hidden="true">
								<div class="modal-dialog">
									<form class="modal-content" method="post" id="delete-form" action="{% url 'delete-language' %}">
										{% csrf_token %}
										<input type="hidden" name="id" id="delete-id">

										<div class="modal-header">
											<h5 class="modal-title">Delete Language</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
										</div>

										<div class="modal-body">
											<p class="mb-0">
												Are you sure you want to delete
												<strong id="delete-name"></strong>
												(<code id="delete-code"></code>)?
											</p>
										</div>

										<div class="modal-footer">
											<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
											<button class="btn btn-danger" type="submit">Delete</button>
										</div>
									</form>
								</div>
							</div>

							<div class="row">
								<div class="col-sm-12 col-md-5">
									{% if has_entries %}
										{% if page|length == 1 %}
											<div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">
												{{ page.paginator.count }} entry
											</div>
										{% else %}
											<div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">
												{{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count }} entries
											</div>
										{% endif %}
									{% else %}
										<div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">
											<span class="text-danger">No entries</span>
										</div>
									{% endif %}
								</div>

								<div class="col-sm-12 col-md-2">
									{% if has_entries %}
										<div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">
											Page {{ page.number }} of {{ page.paginator.num_pages }}
										</div>
									{% endif %}
								</div>

								<div class="col-sm-12 col-md-5">
									<div class="dataTables_paginate paging_simple_numbers" id="datatables-reponsive_paginate">
										{% if has_entries %}
											<ul class="pagination">
												{% if page.has_previous %}
													<li class="paginate_button page-item previous" id="datatables-reponsive_previous">
														<a href="?page_number={{ page.previous_page_number }}&per_page_count={{ default_per_page_count }}"
														   aria-controls="datatables-reponsive"
														   aria-disabled="true"
														   aria-role="link"
														   data-dt-idx="previous"
														   tabindex="0"
														   class="page-link">Previous</a>
													</li>
												{% else %}
													<li class="paginate_button page-item previous disabled" id="datatables-reponsive_previous">
														<a href=""
														   aria-controls="datatables-reponsive"
														   aria-disabled="true"
														   aria-role="link"
														   data-dt-idx="previous"
														   tabindex="0"
														   class="page-link">Previous</a>
													</li>
												{% endif %}

												{% for page_number in page_list %}
													{% if page_number == page.paginator.ELLIPSIS %}
														{{ page_number }}
													{% else %}
														{% if page_number == page.number %}
															<li class="paginate_button page-item active">
																<a href="#"
																   aria-controls="datatables-reponsive"
																   aria-role="link"
																   aria-current="page"
																   data-dt-idx="0"
																   tabindex="0"
																   class="page-link">{{ page_number }}</a>
															</li>
														{% else %}
															<li class="paginate_button page-item">
																<a href="?page_number={{ page_number }}&per_page_count={{ default_per_page_count }}"
																   aria-controls="datatables-reponsive"
																   aria-role="link"
																   aria-current="page"
																   data-dt-idx="0"
																   tabindex="0"
																   class="page-link">{{ page_number }}</a>
															</li>
														{% endif %}
													{% endif %}
												{% endfor %}

												{% if page.has_next %}
													<li class="paginate_button page-item next" id="datatables-reponsive_next">
														<a href="?page_number={{ page.next_page_number }}&per_page_count={{ default_per_page_count }}"
														   aria-controls="datatables-reponsive"
														   aria-role="link"
														   data-dt-idx="next"
														   tabindex="0"
														   class="page-link">Next</a>
													</li>
												{% else %}
													<li class="paginate_button page-item next disabled" id="datatables-reponsive_next">
														<a href=""
														   aria-controls="datatables-reponsive"
														   aria-role="link"
														   data-dt-idx="next"
														   tabindex="0"
														   class="page-link">Next</a>
													</li>
												{% endif %}
											</ul>
										{% endif %}
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</main>

<script>
	document.querySelectorAll('.btn-view').forEach(btn => {
		btn.addEventListener('click', () => {
			document.getElementById('view-code').textContent = btn.dataset.code;
			document.getElementById('view-name').textContent = btn.dataset.name;
			document.getElementById('view-eng_name').textContent = btn.dataset.engname ? btn.dataset.engname : '-';
			document.getElementById('view-language_id').textContent = btn.dataset.languageid;
		});
	});

	document.querySelectorAll('.btn-edit').forEach(btn => {
		btn.addEventListener('click', () => {
			document.getElementById('edit-id').value = btn.dataset.id;
			document.getElementById('edit-code').value = btn.dataset.code;
			document.getElementById('edit-name').value = btn.dataset.name;
			document.getElementById('edit-eng_name').value = btn.dataset.engname ? btn.dataset.engname : '';
			document.getElementById('edit-language_id').value = btn.dataset.languageid;
		});
	});

	document.querySelectorAll('.btn-delete').forEach(btn => {
		btn.addEventListener('click', () => {
			document.getElementById('delete-id').value = btn.dataset.id;
			document.getElementById('delete-code').textContent = btn.dataset.code;
			document.getElementById('delete-name').textContent = btn.dataset.name;
		});
	});
</script>

<script src="{% static 'js/number-separator.js' %}"></script>
<script src="{% static 'js/itemregistry/add-item2.js' %}"></script>
<script src="{% static 'js/page-selection.js' %}"></script>

{% endblock %}