{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block modals%}
<div class="modal" id="mo_user_get_info" tabindex="-1" role="dialog"></div>
<div class="modal" id="mo_user_get_hist" tabindex="-1" role="dialog"></div>
<div class="modal" id="mo_user_edit_info" data-backdrop="static" tabindex="-1" role="dialog"></div>
<div class="modal" id="mo_services_info" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-sm" role="document">
	<div class="modal-content">
		<div class="modal-header">
		<h5 class="modal-title" id="mo_services_info">Les services</h5>
			<button type="button" class="btn btn-sm btn-dark close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="modal-body">
			<table class="table table-sm">
				<tbody>
				{% for item in services%}
				<tr><td>{{item.SERVICE_Anag}}</td><td>{{item.SERVICE_Nom}}</td></tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
	</div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript">
function user_get_list() {
	var $list_user_get_list = $('#user_get_list');
	var get_search = document.getElementById("id_PSearch").value
	
	if (get_search.length >= 3) {
		$list_user_get_list.html('<h3> <i class="fas fa-spinner fa-pulse fa-fw"></i> Loading...</h3>');
		$.ajax({
			type : 'GET',
			url: '/parc/api/clients/get_list?get_search='+get_search,
			success: function(feeds) { 
				$list_user_get_list.html(feeds);
			}
		});
	}
	if (get_search.length == "") {
		$list_user_get_list.html('<h3> <i class="fas fa-spinner fa-pulse fa-fw"></i> Loading...</h3>');
		$.ajax({
			type : 'GET',
			url: '/parc/api/clients/get_list',
			success: function(feeds) { 
				$list_user_get_list.html(feeds);
			}
		});
	}
};
function bt_get_user_info(id){
	$.ajax({
			type : 'GET',
			url: '/parc/api/clients/get_user/'+id,
			success: function(data) {
				$('#mo_user_get_info').html(data).modal('toggle');
			},
	});
};
function bt_get_user_hist(id){
	$.ajax({
			type : 'GET',
			url: '/parc/api/clients/get_hist/'+id,
			success: function(data) {
				$('#mo_user_get_hist').html(data).modal('toggle');
			},
	});
};
function bt_edit_user_info(id){
	var get_search = document.getElementById("id_PSearch").value
	$.ajax({
			type : 'GET',
			url: '/parc/api/clients/edit_user/'+id+'?get_search='+get_search,
			success: function(data) {
				$('#mo_user_edit_info').html(data).modal('toggle');
			},
	});
};
function bt_edit_user_statut(id){
	var get_search = document.getElementById("id_PSearch").value
	$.ajax({
			type : 'GET',
			url: '/parc/api/clients/edit_statut/'+id+'?get_search='+get_search,
			success: function(data) {
				$('#mo_user_edit_info').html(data).modal('toggle');
			},
	});
};
function bt_start_novnc(hostname){
	$.ajax({
			type : 'GET',
			url: '/parc/api/clients/novnc/'+hostname,
			success: function(data) {
				window.open(data, '_blank').focus();
			},
	});
};
function bt_send_edit_user_info(){
	document.getElementById("form_edit_user").submit();
};
function bt_send_edit_user_statut(){
	document.getElementById("form_edit_user").submit();
};
function onloading() {
 	user_get_list();
	{% if page.item_id %}bt_get_user_info({{page.item_id}});{% endif %}
};

$(document).ready(function(){ onloading(); });


</script>
{% endblock %}

{% block main %}
<div class="card-body">
{% if not page.output or page.err %}
	{{page.p_contenu|safe}}
{% else %}
	{% if page.err %}{{page.err|safe}}{% endif %}
	{% if page.output and page.err %}<hr>{% endif %}
	{% if page.output %}{{page.output|safe|urlize}}{% endif %}
{% endif %}
</div>

<div id="user_get_list"><h3><i class="fas fa-spinner fa-pulse fa-fw"></i> Loading...</h3></div>
{% endblock %}

{% block right_panel %}
<div class="card-body">

	{% if page.search_see == "ok" %}
		<div id="div_id_PSearch" class="form-group">
			<label for="id_PSearch" class=" requiredField">Recherche d'un client (min 3 caractères) </label>
			<div class=""><input type="text" name="PSearch" maxlength="128" class="textinput textInput form-control" required="" id="id_PSearch" oninput="user_get_list()" value="{{page.search}}"></div>
		</div>
	{% else %}
		<input type="hidden" name="PSearch" id="id_PSearch">
	{% endif %}
	<p>{{page.p_right|safe}}</p>
	{% if services %}
		<div class="d-grid gap-2 mb-2"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mo_services_info"><i class="fas fa-info-circle"></i> Liste des services</button></div>
	{% endif %}
	<div class="d-grid gap-2 mb-2"><a class="btn btn-success" href="#" onclick="bt_edit_user_info(0)" role="button"><i class="far fa-plus-square"></i> Ajouter un équipements</a></div>
	<div class="d-grid gap-2"><a class="btn btn-primary" href="/parc" role="button"><i class="fas fa-undo-alt"></i> Retour</a></div>
</div>
{% endblock %}