{% extends 'base.html.twig' %}
{% block titlesm %}
	{{ 'crontab.title'|trans }}
	({{ entity | length }})
{% endblock %}
{% block body %}

	<div class="text-center mt-5">
		<h3 class="display-4">{{ 'crontab.title_cron'|trans }}</h3>
		{% for entityCron in entitiesCron %}
			{% if entityCron.value == true %}
				<a href="{{path('massdisableCron')}}" class="btn btn-outline-danger ">
					{{ 'crontab.disableCron'|trans }}
				</a>
				<a href="{{path('massenableCron')}}" class="btn btn-outline-success disabled">
					{{ 'crontab.enableCron'|trans }}
				</a>
			{% else %}
				<a href="{{path('massdisableCron')}}" class="btn btn-outline-danger disabled">
					{{ 'crontab.disableCron'|trans }}
				</a>
				<a href="{{path('massenableCron')}}" class="btn btn-outline-success">
					{{ 'crontab.enableCron'|trans }}
				</a>
			{% endif %}
		{% endfor %}
		<p class="jobscheduler_text">{{'crontab.description_cron'|trans|raw}}</p>
	</div>

	<div class="container-fluid p-3">
		<div id="jobsceduler_table">
			{% for message in app.flashes('success') %}
				<div class="alert alert-success">
					{{ message }}
				</div>
			{% endfor %}
			{% for message in app.flashes('error') %}
				<div class="alert alert-danger">
					{{ message }}
				</div>
			{% endfor %}
			<table class="table table-sm table-striped mt-5">
				<thead>
					<th scope="col" class="title">
						<label>{{ 'crontab.command'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'crontab.period'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'crontab.description'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'crontab.running_instances'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'crontab.max_instances'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'crontab.lastUse'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'crontab.nextRun'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'crontab.enable'|trans }}</label>
					</th>
					<th scope="col" class="title">
						<label>{{ 'jobscheduler.actions'|trans }}</label>
					</th>
				</thead>
				<tbody>
					{% for value in entity %}
						<tr class="																																								                ">
							<td class="value">
								<div id="command-short-{{ loop.index }}">
									{{ value.command|slice(0, 20) ~ '...' }}
									<button class="button_plus_message" onclick="document.getElementById('command-short-{{ loop.index }}').style.display='none';document.getElementById('command-full-{{ loop.index }}').style.display='block';">+</button>
								</div>
								<div id="command-full-{{ loop.index }}" style="display: none;">
									{{ value.command }}
									<button class="button_minus_message" onclick="document.getElementById('command-full-{{ loop.index }}').style.display='none';document.getElementById('command-short-{{ loop.index }}').style.display='block';">-</button>
								</div>
							</td>
							<td class="value">{{ value.period }}</td>
							<td class="value col-2">{{ value.description  }}</td>
							<td class="value">{{ value.runningInstances  }}</td>
							<td class="value">{{ value.maxInstances  }}</td>
							<td>{{ value.lastUse|date(app.user.dateFormat ~ " H:i:s", app.user.timezone) }}</td>
							<td>{{ value.nextRun|date(app.user.dateFormat ~ " H:i:s", app.user.timezone) }}</td>
							<td class="text-center">
								<div class="form-check form-switch">
									<input class="form-check-input toggle-switch-crontab" type="checkbox" id="crontab-{{ value.id }}" data-id="{{ value.id }}" data-url="{{ path('enable_crontab', {'id': 'ID_PLACEHOLDER', 'enable': 'ENABLE_PLACEHOLDER'}) }}" {{ value.isEnable() ? 'checked' : '' }}>
								</div>
							</td>
							<td class="CRUD-icons">
								<a class="btn btn-sm btn-outline-success" href="{{ path('crontab_show',{'id' : value.id }) }}" title="{{ 'list_rule.btn.view'|trans }}">
									<span class="btn-opt">
										<i class="fa fa-eye {% if value.runningInstances == value.maxInstances %}icon-danger{% elseif value.runningInstances == value.maxInstances - 1 and value.maxInstances > 1 %}icon-warning{% endif %}" aria-hidden="true"></i>
									</span>
								</a>
								<a class="btn btn-sm btn-outline-primary" href="{{ path('crontab_edit',{'id' : value.id }) }}" title="{{ 'list_rule.btn.edit'|trans }}">
									<span class="btn-opt">
										<i class="fa fa-pen  {% if value.runningInstances == value.maxInstances %}icon-danger{% elseif value.runningInstances == value.maxInstances - 1 and value.maxInstances > 1 %}icon-warning{% endif %} " aria-hidden="true"></i>
									</span>
								</a>
								<a class="delete delete btn btn-sm btn-outline-danger" href="{{ path('crontab_delete',{'id' : value.id }) }}" onclick="return(confirm('{{ 'list_rule.delete'|trans }}'));">
									<span class="btn-opt">
										<i class="fa fa-trash  {% if value.runningInstances == value.maxInstances %}icon-danger{% elseif value.runningInstances == value.maxInstances - 1 and value.maxInstances > 1 %}icon-warning{% endif %}" aria-hidden="true"></i>
									</span>
								</a>
							</td>
						</tr>
					{% endfor %}
					<div class="col-md-6">
						<a href="{{path('crontab')}}" class="btn btn-primary m-4">
							{{ 'crontab.create'|trans }}
						</a>
						<a href="{{path('massdisable')}}" class="btn btn-danger m-4">
							{{ 'crontab.massdisable'|trans }}
						</a>
						<a href="{{path('massenable')}}" class="btn btn-success m-4">
							{{ 'crontab.massenable'|trans }}
						</a>
					</div>
				</tbody>
			</table>
		</div>
		<div class="text-center m-3 p-3">
			<div id="crontab-results-container">
				<button id="toggle-crontab-result"
					class="btn btn-outline-primary"
					data-url="{{ path('crontab_results_partial') }}"
					data-show-label="{{ 'crontab.see_results'|trans }}"
					data-hide-label="{{ 'crontab.hide_results'|trans }}">
				{{ 'crontab.see_results'|trans }}
			</button>
			</div>
		</div>

		<div class="container-fluid p-3">
			<div id="cronjobresult_table" class="">
					{% if pager.haveToPaginate %}
						{{ pagerfanta(pager, 'twitter_bootstrap4', {'routeName': 'jobscheduler_cron_list_page', 'routeParams': {'page': app.request.get('page', 1)}}) }}

						<form id="pageForm" method="get" class="form-inline mt-3" onsubmit="updateFormAction(event)">
							<div class="form-group" required style="width: 15em;">
								<label for="page" class="sr-only">Page</label>
								<input type="number" name="page" id="page" class="form-control" placeholder="Page number" min="1" required>
							</div>
							<button type="submit" class="btn btn-primary ml-2" style="display: flex; margin: 1em;">Go to page</button>
						</form>


						<div id="terminalCommandForm" style="display: none;" class="mt-3">
							<div class="form-group">
								<input type="text" id="commandInput" class="form-control" placeholder="Enter command">
							</div>
							<button class="btn btn-primary mt-2" onclick="executeCommand()">Execute</button>
							<div id="commandResult" class="mt-2 p-2 bg-light" style="display: none;"></div>
						</div>				

						<script>
							const maxPage = {{ pager.getNbPages() }};

						function updateFormAction(event) {
						event.preventDefault();
						const page = document.getElementById('page').value;
						if (page < 1 || page > maxPage) {
						alert('Please enter a valid page number between 1 and ' + maxPage);
						return;
						}
						const form = document.getElementById('pageForm');
						const baseUrl = "{{ path('jobscheduler_cron_list_page', {'page': 1}) }}";
						const action = baseUrl.replace('/page-1', '/page-' + page);
						form.action = action;
						form.submit();
						}

						function toggleTerminalForm() {
							const form = document.getElementById('terminalCommandForm');
							form.style.display = form.style.display === 'none' ? 'block' : 'none';
						}

						function executeCommand() {
							const command = document.getElementById('commandInput').value;
							const resultDiv = document.getElementById('commandResult');
							resultDiv.style.display = 'block';
							resultDiv.textContent = 'Executing command...';
							
							fetch('{{ path('executeTerminalCommand') }}', {
								method: 'POST',
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded',
								},
								body: 'command=' + encodeURIComponent(command)
							})
							.then(response => response.json())
							.then(data => {
								if (data.error) {
									resultDiv.textContent = 'Error: ' + data.error;
								} else {
									resultDiv.innerHTML = (data.result || 'No output').replace(/\n/g, '<br>');
								}
								resultDiv.style.display = 'block';
							})
							.catch(error => {
								resultDiv.textContent = 'Error executing command: ' + error;
								resultDiv.style.display = 'block';
							});
						}
					

						</script>
					{% endif %}
				</div>
			</div>

			<div id="help-content-info" class="help-content">
				<h2>
					{{'help.title'|trans}}
					<i class="fa fa-info-circle" aria-hidden="true"></i>
				</h2>
				<p class="jobscheduler_text">{{'crontab.help'|trans|raw}}</p>
			</div>
		</div>
	</div>
{% endblock %}